---
title: "Comparison Table — React"
canonical: https://sky-ui.cf.sky.com/sections/comparison-table/react
apiPackages: [{"name":"@sky-uk/ui-sections","representedVersion":"1.2.4"}]
---

# Comparison Table — React

```js
import { ComparisonTable } from '@sky-uk/ui-sections';
```

---

```tsx
function Example() {

  const ModalContent = () => {
    return (
      <Image
        src="https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/bltfdb1863151e459ff/cat-1.jpg"
        alt=""
        $width="100%"
        $aspectRatio="16 / 9"
      />
    );
  };

  const ComposableCellContent = () => (
  <Text $fontWeight="bold" $color="attention.regular">
    REPLACE ME
  </Text>
);

  const content = {
    header: {
      headline: 'Which TV is right for you?',
      headlineLevel: 'h2',
      overline: 'Compare Sky Glass models'
    },
    tableItems: {
      tableConfig: {
        $tableId: 'comparison-table-section',
        $keyLines: true,
        $stickyTop: 80,
        $scrollableRegionTabIndex: false,
        tableAriaLabel: 'Comparison Table Section',
        $maxRows: 9
      },
      tableHeader: [
        {
          text: 'Sky Glass Air',
          imageProps: {
            src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt26e23bc79b84c2c5/683090915b1b473da037790d/02.Compare_Air.png',
            alt: '',
            $width: '100%',
            $aspectRatio: '16 / 9'
          }
        },
        {
          text: 'Sky Glass Gen 2',
          imageProps: {
            src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt461b0e12e776d146/683090bfd2ad845d5a44da70/02.Compare_Gen2.png',
            alt: '',
            $width: '100%',
            $aspectRatio: '16 / 9'
          }
        }
      ],
      tableBody: [
        {
          rowHeader: 'Colours',
          type: 'Swatch',
          cells: [
            {
              textTop: 'Available in',
              swatches: [
                {
                  $colorway: '#2D2C2C',
                  $outline: true,
                  label: 'dark grey'
                },
                {
                  $colorway: '#7E857D',
                  $outline: true,
                  label: 'light grey'
                },
                {
                  $colorway: '#E9E8E8',
                  $outline: true,
                  label: 'silver'
                }
              ]
            },
            {
              textTop: 'Available in',
              swatches: [
                {
                  $colorway: '#2D2C2C',
                  $outline: true,
                  label: 'dark grey'
                },
                {
                  $colorway: '#5874A5',
                  $outline: true,
                  label: 'blue'
                },
                {
                  $colorway: '#E1E2E3',
                  $outline: true,
                  label: 'silver'
                }
              ]
            }
          ]
        },
        {
          rowHeader: 'Screen Sizes',
          type: 'Text',
          cells: [
            {
              text: '43", 55", 65"'
            },
            { text: '43", 55", 65"' }
          ]
        },
        {
          rowHeader: 'Price',
          type: 'Price',
          cells: [
            {
              priceProps: {
                price: '£XX',
                suffix: 'a month'
              },
              textTop: 'TV starting from',
              textBottom: 'over 48 months, or £XXX'
            },
            {
              priceProps: {
                price: '£XX',
                suffix: 'a month'
              },
              textTop: 'TV starting from',
              textBottom: 'over 48 months, or £XXX'
            }
          ]
        },
        {
          rowHeader: 'Your Actions',
          type: 'CTA',
          cells: [
            {
              primaryCta: {
                href: 'https://www.sky.com',
                text: 'Buy now',
                ariaLabel: 'Buy Sky Glass Air',
                data: {
                  testId: 'section-primary-cta',
                  trackingDescription: 'tracking description',
                  trackingLabel: 'tracking label'
                }
              },
              secondaryCta: {
                href: 'https://www.sky.com',
                text: 'Learn more',
                ariaLabel: 'Learn more about Sky Glass Air',
                data: {
                  testId: 'section-secondary-cta',
                  trackingDescription: 'tracking description',
                  trackingLabel: 'tracking label'
                }
              }
            },
            {
              primaryCta: {
                href: 'https://www.sky.com',
                text: 'Buy now',
                ariaLabel: 'Buy Sky Glass Air',
                data: {
                  testId: 'section-primary-cta',
                  trackingDescription: 'tracking description',
                  trackingLabel: 'tracking label'
                }
              },
              secondaryCta: {
                href: 'https://www.sky.com',
                text: 'Learn more',
                ariaLabel: 'Learn more about Sky Glass Air',
                data: {
                  testId: 'section-secondary-cta',
                  trackingDescription: 'tracking description',
                  trackingLabel: 'tracking label'
                }
              }
            }
          ]
        },
        {
          rowHeader: 'Display',
          type: 'Image',
          cells: [
            {
              textBottom: 'Quantum Dot Display',
              imageProps: {
                src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt8cb45e3c7c22cc25/682f16c20cda261728fc5a3d/4K_UHD.svg',
                $aspectRatio: '16 / 9',
                $height: '60px',
                $objectFit: 'fill',
                $width: 'auto',
                alt: '4k Ultra HD'
              }
            },
            {
              textBottom: 'Quantum Dot Display',
              imageProps: {
                src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt8cb45e3c7c22cc25/682f16c20cda261728fc5a3d/4K_UHD.svg',
                $aspectRatio: '16 / 9',
                $height: '60px',
                $objectFit: 'fill',
                $width: 'auto',
                alt: '4k Ultra HD'
              }
            }
          ]
        },
        {
          rowHeader: 'Display dimming',
          type: 'Image',
          cells: [
            {
              textBottom: 'Global dimming & HDR',
              imageProps: {
                src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/bltcd37b9634a2ccc98/68308cf63300cf850fa0dfb6/02.Gen2_Dimming.svg',
                $aspectRatio: '16 / 9',
                $height: '60px',
                $objectFit: 'fill',
                $width: 'auto',
                alt: ''
              }
            },
            {
              textBottom: 'Local dimming zones & advanced HDR',
              imageProps: {
                src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt693c1bfc881a5320/682f17861ec434c3a55ed1f3/02.Air_Dimming.svg',
                $aspectRatio: '16 / 9',
                $height: '60px',
                $objectFit: 'fill',
                $width: 'auto',
                alt: ''
              }
            }
          ]
        },
        {
          rowHeader: 'Sound system',
          type: 'Image',
          cells: [
            {
              textBottom: '2 speakers',
              imageProps: {
                src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/bltb914014774f86605/682f18356a59be4e66dd7a26/03.Air_Dolby_Audio.svg',
                $aspectRatio: '16 / 9',
                $height: '60px',
                $objectFit: 'fill',
                $width: 'auto',
                alt: 'Dolby Audio'
              }
            },
            {
              textBottom: '7 speakers',
              imageProps: {
                src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/bltb914014774f86605/682f18356a59be4e66dd7a26/03.Air_Dolby_Audio.svg',
                $aspectRatio: '16 / 9',
                $height: '60px',
                $objectFit: 'fill',
                $width: 'auto',
                alt: 'Dolby Audio'
              }
            }
          ]
        },
        {
          rowHeader: 'Sound hardware',
          type: 'Custom',
          cells: [
            { type: 'Icon', content: { iconProps: { src: minusLinear }, textBottom: 'No soundbar' } },
            {
              type: 'Image',
              content: {
                imageProps: {
                  src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt697f4f080c8507cb/68308dd246283304f9c19c23/05.Gen2_Soundbar.svg',
                  $aspectRatio: '16 / 9',
                  $height: '60px',
                  $objectFit: 'fill',
                  $width: 'auto',
                  alt: ''
                },
                textBottom: 'Soundbar built-in'
              }
            }
          ]
        },
        {
          rowHeader: 'Hardware Design',
          type: 'Image',
          cells: [
            {
              textBottom: 'Lightweight sleek design',
              imageProps: {
                src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt4370d9625405cb75/682f1916a4165a3756ae18a8/05.Air_Design.svg',
                $aspectRatio: '16 / 9',
                $height: '60px',
                $objectFit: 'fill',
                $width: 'auto',
                alt: ''
              }
            },
            {
              textBottom: 'Anodised aluminium design',
              imageProps: {
                src: 'https://static.skyassets.com/contentstack/assets/blt143e20b03d72047e/blt92cdd255d0e83862/68308e2de962aca285f8a2d2/05.Gen2_Design.svg',
                $aspectRatio: '16 / 9',
                $height: '60px',
                $objectFit: 'fill',
                $width: 'auto',
                alt: ''
              }
            }
          ]
        },
        {
          rowHeader: 'Tech Specs',
          type: 'Modal',
          cells: [
            {
              modalCta: {
                text: 'Tech Specs',
                ariaLabel: 'Tech Specs for Sky Glass Air',
                iconSrc: informationCircleLinear
              },
              modalConfig: {
                $inline: true
              },
              modalContent: <ModalContent />
            },
            {
              modalCta: {
                text: 'Tech Specs',
                ariaLabel: 'Tech Specs for Sky Glass Gen 2',
                iconSrc: informationCircleLinear
              },
              modalConfig: {
                $inline: true
              },
              modalContent: <ModalContent />
            }
          ]
        },
        {
          rowHeader: 'Composable Cell Row',
          type: 'Composable',
          cells: [
            {
              cellContent: <ComposableCellContent />
            },
            {
              cellContent: <ComposableCellContent />
            }
          ]
        }
      ]
    }
  }

  return <ComparisonTable {...content} />;
}
```

### Props

Props marked with `?` are optional. Sections or section elements that do not provide the required props will not render.
The `data` prop support key/value pairs that are rendered as kebab case data attributes on the component.

- header: `object`
  - body?: `string`
  - headline: `string`
  - headlineLevel?: `string` (`h1` | `h2` | `h3`)
  - overline?: `string` | `Image`
  - textCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
  - icon?: string;
  - primaryCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
  - secondaryCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
- tableItems: `object`
  - tableConfig?: `object`
    - tableAriaLabel
    - $tableId: `string`
    - $stickyTop?: `number`
    - $columnFills?: `(string | null)[]`
    - $keyLines?: `boolean`
    - $maxRows?: `number`
    - onMoreToggle?: `() => void`
    - $scrollableRegionTabIndex?: `boolean`
  - tableHeader: `array` of length of 2
    - text: `string`
    - imageProps?: `array`
      - src: `ResponsiveProps<string>`
      - $aspectRatio?: `ResponsiveProps<string>`
      - $objectFit?: `string`
      - withImageManager?: `boolean`
      - `WidthProps`
      - `HeightProps`
  - tableBody: `array` - (more info below)

### tableBody Props

The `tableBody` prop accepts an array of row objects, where each row must conform to strict type variants based on the `type` field. Each row has the following structure:

```typescript
{
  rowHeader: string;
  type: 'Text' | 'Icon' | 'CTA' | 'Image' | 'Price' | 'Swatch' | 'Modal' | 'Composable' | 'Custom';
  cells: [cellData1, cellData2]; // Always exactly 2 cells
}
```

- Each row must have exactly **2 cells**
- The `type` field determines the expected structure for all cells in that row
- When using `type: 'Custom'`, each cell must specify its own `type` and `content`
- All other row types expect uniform cell structures matching the specified type
- The table-cell types and their props for each variant can be found on the [Table-Cell React page](/components/table-cell/react/).

```js
{
  rowHeader: 'Screen Sizes',
  type: 'Text',
  cells: [
    { text: '43", 55", 65"' },
    { text: '43", 55", 65"' }
  ]
}
```

#### Custom Type

- Each cell must specify:
  - type: `Text` | `Icon` | `CTA` | `Image` | `Price` | `Swatch` | `Modal` | `Composable`
  - content: Props object matching the specified type (see individual type props above)

```js
{
  rowHeader: 'Sound hardware',
  type: 'Custom',
  cells: [
    {
      type: 'Icon',
      content: { iconProps: { src: minusLinear }, textBottom: 'No soundbar' }
    },
    {
      type: 'Image',
      content: { imageProps: { src: 'soundbar.svg' }, textBottom: 'Built-in' }
    }
  ]
}
```