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 13 | 25 |
DPB | [Sample] Dustpan & Brush | 34 |
OFSUC | [Sample] Utility Caddy | 45 |
CLC | [Sample] Canvas Laundry Cart | 2 |
CGLD | [Sample] Laundry Detergent | 29 |
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 |
---|---|---|---|
pillTabs | PillTabItem[] |
| 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. |