@contentful/f36-table

title: 'Table' type: 'component' status: 'stable' slug: /components/table/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/table' storybook: 'https://f36-storybook.contentful.com/?path=/info/components-table--default' typescript: ./src/Table.tsx,./src/TableCell/TableCell.tsx,./src/TableRow/TableRow.tsx,./src/TableBody/TableBody.tsx,./src/TableHead/TableHead.tsx

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)

Table

Table.Head

Table.Body

Table.Row

Table.Cell

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.