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

API

StatefulTable

Prop Name
Type
Default
Description
columns *Columns[]

See below 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.

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.ComponentType<any>

Component to render custom actions.

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.

hideHeaderbooleanfalse

Hides individual header values in the header row. Header is only visually hidden to keep with accessibility best practices.

alignleft | center | rightleft

Sets alignment for 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.

sortKeystring

Enables sorting on the column using item[sortKey].

verticalAligntop | middletop

Sets vertical alignment for column (td only).

widthstring | number

Sets column width.

withPaddingboolean

Toggles padding on td elements.

Props ending with * are required

Examples

Usage with pagination, selection, and sorting.

100

Products

Sku
Name
Stock
3137737cRice - Wild29
d23bfc4cWine - Rioja Campo Viejo5
cb8ca0f9Wine - Baron De Rothschild17
3951a57fSteampan - Foil30
04f48630Nut - Walnut, Pieces11
38392ba4Wine - Conde De Valdemar8
134b820cPepper - Chili Powder35
b0aeabb4Broom And Brush Rack Black16
70e8a5a7Cardamon Ground26
8371ad15Tamarillo10
3ddfe9d4Sardines19
64bb2c0dSteam Pan - Half Size Deep30
5d63640fYeast - Fresh, Fleischman26
1c7f113eTable Cloth 81x81 Colour24
5d18a49aBaking Soda24
b1ac58c4Red Snapper - Fresh, Whole23
358a6371Chips Potato All Dressed - 43g18
964d3d8cCream Of Tartar3
673f56caMuffin Batt - Blueberry Passion28
a358ab58Puree - Kiwi25
e17535d0Beer - Creemore26
6b3d83b1Goulash Seasoning30
4e7a378dBeef - Striploin Aa9
5ed9e628Beer - Maudite21
147728a2Beans - Kidney, Red Dry31

Edit the code below to see your changes live!

Beta