v0.27.0
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 | Pagination |
| See pagination component for details. |
selectable | Selectable |
| See below for usage. |
sortable | Sortable |
| See below for usage. |
stickyHeader | boolean |
| Makes the table header and actions fixed. |
headerless | boolean | false | Hides header row with all table headers. Headers are only visually hidden to keep with accessibility best practices. |
actions | React.ReactNode |
| Component to render custom actions. |
emptyComponent | React.ReactElement |
| Component to render when there are no items. |
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. |
hash * | string |
| Unique identifier for column. |
isSortable | boolean | false | Defines if the column is sortable. |
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
Prop Name | Type | Default | Description |
---|---|---|---|
selectedItems * | Item[] |
| Defines which items are selected. |
onSelectionChange * | (selectedItems: Item[]) => void |
| Function to be called when item selection changes. |
Props ending with * are required
Prop Name | Type | Default | Description |
---|---|---|---|
direction * | ASC | DESC |
| Defines sort direction. |
columnHash | string |
| Defines which column is currently sorted. |
onSort * | (columnHash: string, direction: TableSortDirection, column: TableColumn<T>): void; |
| Function to be called when a sortable header is clicked. |
Props ending with * are required
7
Products
Sku | Name | Stock | |
---|---|---|---|
ABS | [Sample] Able Brewing System | 225 | |
CC3C | [Sample] Chemex Coffeemaker 3 cup | 49 | |
CGLD | [Sample] Laundry Detergent | 29 | |
CLC | [Sample] Canvas Laundry Cart | 2 | |
DPB | [Sample] Dustpan & Brush | 34 | |
OCG | [Sample] Oak Cheese Grater | 34 | |
OFSUC | [Sample] Utility Caddy | 45 |
Edit the code below to see your changes live!
7 Products
Sku | Name | Stock |
---|
Edit the code below to see your changes live!
7 Products
Sku | Name | Stock |
---|---|---|
ABS | [Sample] Able Brewing System | 225 |
CC3C | [Sample] Chemex Coffeemaker 3 cup | 49 |
CGLD | [Sample] Laundry Detergent | 29 |
CLC | [Sample] Canvas Laundry Cart | 2 |
DPB | [Sample] Dustpan & Brush | 34 |
OCG | [Sample] Oak Cheese Grater | 34 |
OFSUC | [Sample] Utility Caddy | 45 |
Edit the code below to see your changes live!
TableFigure
components are used to wrap tables and any relevant information to be grouped with them.TableFigure
s also provide a scrollable overflow on mobile for tables with large amounts of data. Try removing the TableFigure
component below in mobile view to see the differences.
Sku | Name | Description |
---|---|---|
SM13 | [Sample] Smith Journal 13 | Volume 13 of Smith Journal is crammed with more than its fair share of sharp minds. Top of the list would have to be Solomon Shereshevsky, who remembered every single thing he’d ever come across – a great skill to have when it came to party tricks, but enough to send him crackers. And then there’s Delbert Trew who spends more time than you can imagine thinking about something very sharp indeed: barbed wire. You can’t go past Samuel Morse, either, who was a famous portrait painter before he gave his name to the code he invented. What a genius! And we’re pretty taken with Noel Turner, who was smart enough to get around some pretty weird New Zealand laws to invent a car that, for a while, was a huge success. As well, you’ll find stories on a cross-dressing spy, a couple of Sydney nerds who revolutionised modern music, court illustration, big wheels, the dubious science of controlling the weather and a whole stack of other stuff. |
DPB | [Sample] Dustpan & Brush | A seemingly simple dustpan with a few features to make life easier. The arch and length of the dustpan eases cleanup, the wood turned handle provides firm grip and the rubber liner along the edge of the scoop will retrieve small crumbs with a single swipe. A key ring at the top makes storage a cinch - hang it off a broom closet hook when not in use. |
Helpful text to be grouped with the table
Edit the code below to see your changes live!
TableFigure supports all native <figure />
element attributes.
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!
7 Products
Sku | Name | Stock | |
---|---|---|---|
ABS | [Sample] Able Brewing System | 225 | |
CC3C | [Sample] Chemex Coffeemaker 3 cup | 49 | |
CGLD | [Sample] Laundry Detergent | 29 | |
CLC | [Sample] Canvas Laundry Cart | 2 | |
DPB | [Sample] Dustpan & Brush | 34 | |
OCG | [Sample] Oak Cheese Grater | 34 | |
OFSUC | [Sample] Utility Caddy | 45 |
Edit the code below to see your changes live!