---
title: "Table-Cell — React"
canonical: https://sky-ui.cf.sky.com/components/table-cell/react
---

# Table-Cell — React

The Table-Cell component can be used to build simple, customised tables.

**Important:** The **Table-Cell is not a standalone component** at the moment, and can’t be used outside the
  Comparison Table Section. This will change in the future, once we introduce a basic table
  component in React.

### TextCell Props

- text: `string`

```tsx
<Box $maxWidth="400px" $border>
    <TextCell text="Hello World!" />
</Box>
```

### SwatchCell Props

- textTop?: `string`
- textBottom?: `string`
- swatches: `array`
  - $colorway: `string`
  - $outline?: `boolean`
  - label: `string`

```tsx
<Box $maxWidth="400px" $border>
    <SwatchCell
        textTop="text"
        swatches={[
            { $colorway: '#2D2C2C', $outline: true, label: 'dark grey' },
            { $colorway: '#7E857D', $outline: true, label: 'light grey' },
            { $colorway: '#E9E8E8', $outline: true, label: 'silver' }
        ]}
        textBottom="text"
    />
</Box>
```

### PriceCell Props

- priceProps: `PriceProps`
- textTop?: `string`
- textBottom?: `string`

```tsx
<Box $maxWidth="400px" $border>
    <PriceCell
        textTop="Text"
        textBottom="Text"
        priceProps={{ price: '£XX', suffix: 'a month' }}
    />
</Box>
```

### CTACell Props

- primaryCta?: `object`
  - text: `string`
  - href?: `string`
  - ariaLabel?: `string`
  - data?: `object`
    - testId?: `string`
    - trackingDescription?: `string`
    - trackingLabel?: `string`
  - onClick?: `() => void`
- secondaryCta?: `object` (same props as primaryCta)

```tsx
<Box $maxWidth="400px" $border>
    <CTACell
        primaryCta={{
            href: 'https://www.sky.com',
            text: 'Primary CTA',
            data: {
                testId: 'section-primary-cta',
                trackingDescription: 'tracking description',
                trackingLabel: 'tracking label'
            }
        }}
    />
</Box>
```

### ImageCell Props

- textTop?: `string`
- textBottom?: `string`
- imageProps: `object`
  - src: `ResponsiveProps<string>`
  - alt: `string`
  - $aspectRatio?: `ResponsiveProps<string>`
  - $objectFit?: `string`
  - $width?: `ResponsiveProps<string>`
  - $height?: `ResponsiveProps<string>`
  - withImageManager?: `boolean`

```tsx
<Box $maxWidth="400px" $border>
  <ImageCell
    imageProps={{
      src: 'https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/blt6d1431344ce0a9b7/Draft_Asset_Image.png',
      alt: 'Example image',
      $aspectRatio: '1/1',
      $width: '64px'
    }}
    textTop="Text"
    textBottom="Text"
  />
</Box>
```

### ModalCell Props

- modalCta: `object`
  - text: `string`
  - ariaLabel?: `string`
  - data?: `object`
    - testId?: `string`
    - trackingDescription?: `string`
    - trackingLabel?: `string`
  - iconSrc?: `string`
- modalConfig?: `object`
  - `ModalProps`
  - onOpen?: `(event: MouseEvent | KeyboardEvent) => void`
  - $inline?: `boolean`
- modalContent: `JSX.Element`

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

  return (
    <Box $maxWidth="400px" $border>
      <ModalCell
        modalCta={{
          text: 'Modal Cta Link',
          ariaLabel: 'Tech Specs for Sky Glass Gen 2',
          iconSrc: chevronRightLinear,
          data: {
            testId: 'modal-cta',
            trackingDescription: 'tracking description',
            trackingLabel: 'tracking label'
          }
        }}
        modalConfig={{
          $inline: true
        }}
        modalContent={<ModalContent />}
      />
    </Box>
  );
}
```

### ComposableCell Props

- cellContent: `JSX.Element`

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

  return (
    <Box $maxWidth="400px" $border>
      <ComposableCell
        cellContent={<ComposableCellContent />}
      />
    </Box>
  );
}
```