Table

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

Table

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.

paginationPagination

See pagination component for details.

selectableSelectable

See below for usage.

sortableSortable

See below for usage.

stickyHeaderboolean

Makes the table header and actions fixed.

headerlessbooleanfalse

Hides header row with all table headers. Headers are only visually hidden to keep with accessibility best practices.

actionsReact.ReactNode

Component to render custom actions.

emptyComponentReact.ReactElement

Component to render when there are no items.

Props ending with * are required

Table[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.

isSortablebooleanfalse

Defines if the column is sortable.

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

Table[Selectable]

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

Table[Sortable]

Prop Name
Type
Default
Description
direction *ASC | DESC

Defines sort direction.

columnHashstring

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

Usage with selectable

7

Products

Sku
Name
Stock
ABS[Sample] Able Brewing System225
CC3C[Sample] Chemex Coffeemaker 3 cup49
CGLD[Sample] Laundry Detergent29
CLC[Sample] Canvas Laundry Cart2
DPB[Sample] Dustpan & Brush34
OCG[Sample] Oak Cheese Grater34
OFSUC[Sample] Utility Caddy45

Edit the code below to see your changes live!

Usage with pagination

7 Products

Sku
Name
Stock

Edit the code below to see your changes live!

Usage with sortable

7 Products

Sku
Name
Stock
ABS[Sample] Able Brewing System225
CC3C[Sample] Chemex Coffeemaker 3 cup49
CGLD[Sample] Laundry Detergent29
CLC[Sample] Canvas Laundry Cart2
DPB[Sample] Dustpan & Brush34
OCG[Sample] Oak Cheese Grater34
OFSUC[Sample] Utility Caddy45

Edit the code below to see your changes live!

Usage with TableFigure

TableFigure components are used to wrap tables and any relevant information to be grouped with them.TableFigures 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 13Volume 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 & BrushA 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.

Customization Example

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!

Usage with drag and drop

7 Products

Sku
Name
Stock
ABS[Sample] Able Brewing System225
CC3C[Sample] Chemex Coffeemaker 3 cup49
CGLD[Sample] Laundry Detergent29
CLC[Sample] Canvas Laundry Cart2
DPB[Sample] Dustpan & Brush34
OCG[Sample] Oak Cheese Grater34
OFSUC[Sample] Utility Caddy45

Edit the code below to see your changes live!

Beta