Comparison Table - React

View on Figma View on GitHub

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

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:

{
  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.

{
  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)

{
  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' }
    }
  ]
}