---
title: "Comparison Table"
canonical: https://sky-ui.cf.sky.com/components/comparison-table
---

# Comparison Table

To compare options like product offers, features or price plans.

## Purpose

The Comparison Table is used for an easy side-by-side comparison of product offers, features or pricing plans. It can be used to compare various Sky offers, or to compare a Sky product with competitors.

## Anatomy

A Comparison Table can be built using following elements -

1. **Differences Switch (optional)**<br/>Switch to only display the rows where the content of the columns are different.
   The filter mechanism will need to be set up manually in Development.

2. **Scrolling (as required)**<br/>Navigation to scroll to the next/previous column. The size of the viewport will decide whether this element is displayed or not.

3. **Table-Rows**<br/>The Comparison Table body consists of any number of rows. Table-Rows consist of Table-Cell components.

4. **Text Link (optional)**<br/>A Text Link can be used to show hidden rows.

## Variants & States

### Table-Rows

- Breakpoint: Desktop, Mobile
- Type: Column Header, Group Header, Content
- Cells 2—5: On/Off

There are additional variants available depending on the Type and Breakpoint.

The below examples use a dashed outline to make them easier to see.

Desktop
    Type: Column Header
      
    Type: Content
      
    Type: Group Header
      
  Mobile
    Type: Column Header
      
    Type: Content
      
    Type: Group Header
      

### Table-Cells

Cells are the most flexible part of the table and can hold any content.<br />
Figma presets include Text, Button, Link, Icon, Image, Price, and Swatch.

**Note:** The way to build tables differs between Figma and React. For a more detailed description of
  available variants and states, please refer to the documentation on the [Figma
  setup](https://www.figma.com/file/Iuy4ttzO5BxHD7qE7zXN1s/branch/0KnPDOFqR32bjboMSEq0aj/Sky-UI-Core---Components?type=design&node-id=28147-7655&mode=design)
  page.