@contentful/f36-table

Forma 36: Table component

Usage no npm install needed!

<script type="module">
  import contentfulF36Table from 'https://cdn.skypack.dev/@contentful/f36-table';
</script>

README

title: 'Table' slug: /components/table/ github: 'https://github.com/contentful/forma-36/tree/master/packages/components/table' storybook: 'https://v4-f36-storybook.netlify.app/?path=/info/components-table--default' typescript: ./src/Table.tsx,./src/TableCell.tsx,./src/TableRow.tsx,./src/TableBody.tsx,./src/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:

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.