Table

Overview

Tables are used to display data related to a single subject, across one or more rows and columns.

When to use:

  • When you have multiple objects of the same type you would like to display information about.
  • When you need to rapidly add multiple items to a parent object.

Implementation

Sku
Name
Stock
ABS[Sample] Able Brewing System225
CC3C[Sample] Chemex Coffeemaker 3 cup49
CGLD[Sample] Laundry Detergent29
CLC[Sample] Canvas Laundry Cart2
DPB[Sample] Dustpan & Brush34
OCG[Sample] Oak Cheese Grater34
OFSUC[Sample] Utility Caddy45

Edit the code below to see your changes live!

function Example() {
  const [items, setItems] = useState(data);
  const [columnHash, setColumnHash] = useState('');
  const [direction, setDirection] = useState<'ASC' | 'DESC'>('ASC');

  const onSort = (newColumnHash, newDirection) => {
    setColumnHash(newColumnHash);
    setDirection(newDirection);
    setItems((currentItems) => sort(currentItems, newColumnHash, newDirection));
  };

  return (
    <Table
      columns={[
        {
          header: 'Sku',
          hash: 'sku',
          render: ({ sku }) => sku,
          isSortable: true,
        },
        {
          header: 'Name',
          hash: 'name',
          render: ({ name }) => name,
          isSortable: true,
        },
        {
          header: 'Stock',
          hash: 'stock',
          render: ({ stock }) => stock,
          isSortable: true,
        },
      ]}
      itemName="Products"
      items={items}
      keyField="sku"
      sortable={{
        columnHash,
        direction,
        onSort,
      }}
    />
  );
}

Props

Prop name
Type
Default
Description
columns *Columns[]

See Columns for usage.

items *any[]

The array of items to display.

itemNamestring

Item name displayed on the table actions section.

keyFieldstringid

Unique property identifier for items.

onRowDrop(from: number, to: number) => void

Callback called with form and to index once a row has been dragged and dropped.

paginationOffsetPagination | StatelessPagination

See the specific pagination components for details.

selectableSelectable

See Selectable for usage.

sortableSortable

See Sortable for usage.

stickyHeaderboolean

Makes the table header and actions fixed.

headerlessbooleanfalse

Hides header row with all table headers. Headers are only visually hidden to keep with accessibility best practices.

actionsReact.ReactNode

Component to render custom actions.

emptyComponentReact.ReactElement

Component to render when there are no items.

localization{ ascendingOrder: string, descendingOrder: string }

Overrides the labels with localized text.

Props ending with * are required

Do's and Don'ts

Do
Keep column headers to one or two words.
Add pagination controls if the user is likely to have 5+ rows of data to view.
Don't
Don’t use this when you need to have complex interactions (e.g. filter) with the data in the Table.
Don’t put unrelated objects in the same Table.
If using Tables in cramped places like modals, avoid placing too many columns.