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

SkuHover or focus for additional context.
Name
Stock
SM13[Sample] Smith Journal 1325
DPB[Sample] Dustpan & Brush34
OFSUC[Sample] Utility Caddy45
CLC[Sample] Canvas Laundry Cart2
CGLD[Sample] Laundry Detergent29

Edit the code below to see your changes live!

<Table
  columns={[
    {
      header: 'Sku',
      hash: 'sku',
      tooltip: 'Header tooltip',
      render: ({ sku }) => sku,
    },
    { header: 'Name', hash: 'name', render: ({ name }) => name },
    { header: 'Stock', hash: 'stock', render: ({ stock }) => stock },
  ]}
  items={[
    { sku: 'SM13', name: '[Sample] Smith Journal 13', stock: 25 },
    { sku: 'DPB', name: '[Sample] Dustpan & Brush', stock: 34 },
    { sku: 'OFSUC', name: '[Sample] Utility Caddy', stock: 45 },
    { sku: 'CLC', name: '[Sample] Canvas Laundry Cart', stock: 2 },
    { sku: 'CGLD', name: '[Sample] Laundry Detergent', stock: 29 },
  ]}
  stickyHeader
/>

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.