@contentful/f36-table

---

title: 'Table' type: 'component' status: 'stable' slug: /components/table/ github: 'https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components/src/components/Table' storybook: 'https://f36-storybook.contentful.com/?path=/info/components-table--default'

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

Table of contents

• How to use Table
• Code examples
• Content recommendations

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>
  <TableHead>
    <TableRow>
      <TableCell>Name</TableCell>
      <TableCell>Email</TableCell>
      <TableCell>Organization role</TableCell>
      <TableCell>Last activity</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>Claus Mitchell</TableCell>
      <TableCell>[e-mail]</TableCell>
      <TableCell>CEO</TableCell>
      <TableCell>August 29, 2018</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Johannes Ramos</TableCell>
      <TableCell>[e-mail]</TableCell>
      <TableCell>CTO</TableCell>
      <TableCell>July 27, 2019</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Alex Kalinoski</TableCell>
      <TableCell>[e-mail]</TableCell>
      <TableCell>CDO</TableCell>
      <TableCell>June 13, 2019</TableCell>
    </TableRow>
  </TableBody>
</Table>

Content recommendations

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