v0.29.2
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!
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
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
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!
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!