Table

A configurable table component built with HTML <table>. Pefect for tabulating data.

Import

import {
  Caption,
  StickyFooter,
  Table,
  TableBody,
  TableCell,
  TableCol,
  TableColGroup,
  TableFooter,
  TableHeadCell,
  TableHeader,
  TableRow,
} from '@outfitio/outkit';

Usage

Atomic table components have been provided to offer maximum flexibility while still adhering to design and accessability standards when building out tables.

Default

Applying widths

With the <TableColGroup> and <TableCol> components you can manipulate the relative widths of table columns.

Custom Column Types

Inside the <TableCell> component almost any other Outkit component can be utilised to enhance the displaying of data (ie. tags, images, icons) or to add any functional elements (ie. buttons, switches etc. )

Creating pagination with a StickyFooter

You can use a <StickyFooter> (not to be confused with TableFooter) as a child of the <Table> component to stick something to the bottom of the table.

Becuase the <StickyFooter> is not actually part of the table and instead just sticks to the wrapper, the content can be absolutely anything. For example a Flex component and an <IconButton> for some easy pagination controls.

Accessibility

Native HTML tables provide a large amount of structural information to screen reader users. Screen reader users can navigate tables and identify relationships between data cells and headers using keys specific to their screen reader.

Best Practice

Tables should:

• Always have a max width set, to ensure data remains scannable on very large screens
• Minimise clutter by including values that support the data's purpose
• In general, use left alignment for textual data and right alignment for numerical data
• Never include center aligned content
• Use the skeleton component when loading

Table rows should:

• Include hover and focus states if the row is clickable

Table headers should:

• Be informative and descriptive
• Be concise and easily scannable
• Use sentence case

Column content should:

• Be concise and scannable
• Use sentence case

Props

The <Table> and its child components can accept styled-system props to allow for extra customisation.

Beyond that, the <Table> component can accept two custom props to extend the Table view.