StatefulTable

Overview

StatefulTables are used to do custom actions and analysis across data related to a single subject.

When to use:

  • When you want the user to have deep interactions with multiple objects of the same type (e.g. orders, customers)
  • When you need to have bulk actions across multiple objects of the same type (e.g. export, delete)

Implementation

StatefulTable is a wrapper of Table that simplifies it's usage when having the full list of items in memory. It supports pagination, row selection, and sorting out of the box.

Sku
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!

<StatefulTable
  columns={[
    { header: 'Sku', hash: 'sku', 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 },
  ]}
/>

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.

paginationbooleanfalse

Defines if table should be paginated.

searchbooleanfalse

Indicates whether to display a search field for the table. Searches within visible string, number, or boolean type fields.

selectablebooleanfalse

Defines if table should be selectable.

stickyHeaderboolean

Makes the table header fixed.

headerlessbooleanfalse

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

defaultSelectedItem[]

Defines which items are selected by default on initial render.

onSelectionChange(selectedItems: Item[]) => void

Function to be called when item selection changes.

actionsReact.ReactNode

Component to render custom actions.

emptyComponentReact.ReactElement

Component to render when there are no items.

onRowDrop(items: any[]) => void

Callback called with updated items list once drag and drop action has been completed.

filtersFilters

See Filters for usage.

getRangeLabel(start: number, end: number, totalItems: number) => string

A callback to format the label of the per-page range dropdown.

localization{ nextPage: string, previousPage: string } | { search: string } | ({ nextPage: string, previousPage: string } & { search: string })

Overrides the labels with localized text.

Props ending with * are required

Do's and Don'ts

Do
Let users sort the table by columns with relevant data (Dates, quantities) to help them find important information.
Add pagination controls if the user is likely to have 5+ rows of data to view.
Provide filter tabs on the table with common groupings of data (For example: “Active” or “inactive” records).
Don't
Don’t use it as a replacement for a worksheet (e.g. when the user needs to edit all displayed data).
If using tables in cramped places like modals, avoid placing too many columns.
Don’t put multiple actions in the same table row - use an dropdown menu instead.