Table

Import

import { Table } from '@contentful/f36-components';
// or
import { Table } from '@contentful/f36-table';

Examples

Basic usage

Dynamic creation

One very common use case for a table is that you will have a set of data and you would like to show a table row for each item in that set. To achieve that result, you can iterate over the data and create Table.Row and Table.Cell for each item:

With sorting

Table cells in the table header can be marked as sortable and sorted either in ascending or descending order.

Props (API reference)

Open in Storybook

Table

Name

Type

Default

className
string

CSS class to be appended to the root element

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

layout
"inline"
"embedded"

inline
testId
string

A [data-test-id] attribute used for testing purposes

cf-ui-table
verticalAlign
"baseline"
"bottom"
"middle"
"top"

top

Table.Head

Name

Type

Default

children
required
ReactNode

className
string

CSS class to be appended to the root element

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

isSticky
false
true

false
offsetTop
string
number

testId
string

A [data-test-id] attribute used for testing purposes

cf-ui-table-head

Table.Body

Name

Type

Default

children
required
ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]

className
string

CSS class to be appended to the root element

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

testId
string

A [data-test-id] attribute used for testing purposes

Table.Row

Name

Type

Default

children
required
ReactNode

className
string

CSS class to be appended to the root element

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

isSelected
false
true

false
testId
string

A [data-test-id] attribute used for testing purposes

cf-ui-table-row

Table.Cell

Name

Type

Default

align
"left"
"center"
"right"

as
HTML Tag or React Component (e.g. div, span, etc)

children
ReactNode

className
string

CSS class to be appended to the root element

isSortable
false
true

isTruncated
false
true

isWordBreak
false
true

sortDirection
"ascending"
"descending"

testId
string

A [data-test-id] attribute used for testing purposes

width
string
number

Content guidelines

  • Keep headers short
  • Headers should be informative and descriptive
  • Content in the table should be concise and scannable

Accessibility

  • It will render tabular data using the native HTML element table which is recommended.