StatefulTable

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 },
  ]}
/>

<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 },
  ]}
/>

API

StatefulTable

Prop Name	Type	Default	Description
`columns` *	`Columns[]`		See below for usage.
`items` *	`any[]`		The array of items to display.
`itemName`	`string`		Item name displayed on the table actions section.
`keyField`	`string`	`id`	Unique property identifier for items.
`pagination`	`boolean`	`false`	Defines if table should be paginated.
`selectable`	`boolean`	`false`	Defines if table should be selectable.
`stickyHeader`	`boolean`		Makes the table header fixed.
`headerless`	`boolean`	`false`	Hides header row with all table headers. Headers are only visually hidden to keep with accessibility best practices.
`defaultSelected`	`Item[]`		Defines which items are selected by default on initial render.
`onSelectionChange`	`(selectedItems: Item[]) => void`		Function to be called when item selection changes.
`actions`	`React.ReactNode`		Component to render custom actions.
`emptyComponent`	`React.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.

Props ending with * are required

StatefulTable[Columns]

Prop Name	Type	Default	Description
`render` *	`React.ComponentType<Item>`		Component used to render a column.
`header` *	`string`		Header title.
`hideHeader`	`boolean`	`false`	Hides individual header values in the header row. Header is only visually hidden to keep with accessibility best practices.
`align`	`left` \| `center` \| `right`	`left`	Sets alignment for column.
`display`	`table-cell` \| `none`		Sets the CSS display property of a column.
`hash` *	`string`		Unique identifier for column.
`sortFn`	`(a: Item, b: Item, dir: 'ASC' \| 'DESC') => number`		Enables sorting on the column using a custom sort function.
`sortKey`	`string`		Enables sorting on the column using item[sortKey].
`verticalAlign`	`top` \| `middle`	`top`	Sets vertical alignment for column (td only).
`width`	`string` \| `number`		Sets column width.
`withPadding`	`boolean`		Toggles padding on td elements.

Props ending with * are required

Examples

Usage with pagination, selection, and sorting.

100

Products

Sku	Name	Stock
3137737c	Rice - Wild	29
d23bfc4c	Wine - Rioja Campo Viejo	5
cb8ca0f9	Wine - Baron De Rothschild	17
3951a57f	Steampan - Foil	30
04f48630	Nut - Walnut, Pieces	11
38392ba4	Wine - Conde De Valdemar	8
134b820c	Pepper - Chili Powder	35
b0aeabb4	Broom And Brush Rack Black	16
70e8a5a7	Cardamon Ground	26
8371ad15	Tamarillo	10
3ddfe9d4	Sardines	19
64bb2c0d	Steam Pan - Half Size Deep	30
5d63640f	Yeast - Fresh, Fleischman	26
1c7f113e	Table Cloth 81x81 Colour	24
5d18a49a	Baking Soda	24
b1ac58c4	Red Snapper - Fresh, Whole	23
358a6371	Chips Potato All Dressed - 43g	18
964d3d8c	Cream Of Tartar	3
673f56ca	Muffin Batt - Blueberry Passion	28
a358ab58	Puree - Kiwi	25
e17535d0	Beer - Creemore	26
6b3d83b1	Goulash Seasoning	30
4e7a378d	Beef - Striploin Aa	9
5ed9e628	Beer - Maudite	21
147728a2	Beans - Kidney, Red Dry	31

Edit the code below to see your changes live!

<StatefulTable
  itemName="Products"
  columns={[
    { header: 'Sku', hash: 'sku', render: ({ sku }) => sku },
    { header: 'Name', hash: 'name', render: ({ name }) => name },
    { header: 'Stock', hash: 'stock', render: ({ stock }) => stock, sortKey: 'stock' },
  ]}
  items={items}
  pagination
  selectable
  stickyHeader
/>

<StatefulTable
  itemName="Products"
  columns={[
    { header: 'Sku', hash: 'sku', render: ({ sku }) => sku },
    { header: 'Name', hash: 'name', render: ({ name }) => name },
    { header: 'Stock', hash: 'stock', render: ({ stock }) => stock, sortKey: 'stock' },
  ]}
  items={items}
  pagination
  selectable
  stickyHeader
/>

Usage with drag and drop

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 },
  ]}
  onRowDrop={() => null}
/>

<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 },
  ]}
  onRowDrop={() => null}
/>