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
pillTabsPillTabItem[]

An array of pill tab items to render in the table. See Pill Tabs for usage.

filter(itemId: string, items: Item[]) => Item[]

A function that takes the current items and filters them according to the desired functionality.

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.