Use tables to present large amounts of data, and data which has multiple properties attached to it.

How to use Table

  • Make sure Tables span the full width of the container they're in
  • Make sure a table has a header describing the content of its respective columns
  • Ordered columns by relevance from left to right. Images, if present, have a higher priority, and should be placed in the first column. Checkboxes naturally have the highest priority.

Code examples

Content guidelines

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

Props (API reference)

Table

Name

Type

Default

className
string

CSS class to be appended to the root element

layout
"inline"
"embedded"

inline
testId
string

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

cf-ui-table

Table.Head

Name

Type

Default

children
required
ReactNode

className
string

CSS class to be appended to the root element

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

testId
string

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

cf-ui-table-body

Table.Row

Name

Type

Default

children
required
ReactNode

className
string

CSS class to be appended to the root element

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"

left
children
ReactNode

className
string

CSS class to be appended to the root element

sorting
false
true
"asc"
"desc"

false as TableCellSorting
testId
string

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

cf-ui-table-cell
width
string
number