Table

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

<Table>
  <Table.Head>
    <Table.Row>
      <Table.Cell>Name</Table.Cell>
      <Table.Cell>Email</Table.Cell>
      <Table.Cell>Organization role</Table.Cell>
      <Table.Cell>Last activity</Table.Cell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Claus Mitchell</Table.Cell>
      <Table.Cell>claus.mitchell@contentful.com</Table.Cell>
      <Table.Cell>CEO</Table.Cell>
      <Table.Cell>August 29, 2018</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Johannes Ramos</Table.Cell>
      <Table.Cell>johannes.ramos@contentful.com</Table.Cell>
      <Table.Cell>CTO</Table.Cell>
      <Table.Cell>July 27, 2019</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Alex Kalinoski</Table.Cell>
      <Table.Cell>alex.kalinoski@contentful.com</Table.Cell>
      <Table.Cell>CDO</Table.Cell>
      <Table.Cell>June 13, 2019</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>
<Table>
  <Table.Head>
    <Table.Row>
      <Table.Cell>Name</Table.Cell>
      <Table.Cell>Email</Table.Cell>
      <Table.Cell>Organization role</Table.Cell>
      <Table.Cell>Last activity</Table.Cell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Claus Mitchell</Table.Cell>
      <Table.Cell>claus.mitchell@contentful.com</Table.Cell>
      <Table.Cell>CEO</Table.Cell>
      <Table.Cell>August 29, 2018</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Johannes Ramos</Table.Cell>
      <Table.Cell>johannes.ramos@contentful.com</Table.Cell>
      <Table.Cell>CTO</Table.Cell>
      <Table.Cell>July 27, 2019</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Alex Kalinoski</Table.Cell>
      <Table.Cell>alex.kalinoski@contentful.com</Table.Cell>
      <Table.Cell>CDO</Table.Cell>
      <Table.Cell>June 13, 2019</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>
Hide source

Content guidelines

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

Props

Table

• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  layout

  "inline"

  "embedded"

  Default

  inline
• Name

  testId

  Description

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

  string

  Default

  cf-ui-table

Table.Head

• Name

  children(required)

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  isSticky

  false

  true

  Default

  false
• Name

  offsetTop

  string

  number
• Name

  testId

  Description

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

  string

  Default

  cf-ui-table-head

Table.Body

• Name

  children(required)

  ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  testId

  Description

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

  string

  Default

  cf-ui-table-body

Table.Row

• Name

  children(required)

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  isSelected

  false

  true

  Default

  false
• Name

  testId

  Description

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

  string

  Default

  cf-ui-table-row

Table.Cell

• Name

  align

  "left"

  "center"

  "right"

  Default

  left
• Name

  children

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  sorting

  false

  true

  "asc"

  "desc"

  Default

  false as TableCellSorting
• Name

  testId

  Description

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

  string

  Default

  cf-ui-table-cell
• Name

  width

  string

  number