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

Component to render custom actions.

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!

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!

Beta