Table

A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.

Preview

Code

Code	Name	High	Open	Close
TSLA	Tesla Inc.	720.00	710.00	735.00
AMZN	Amazon.com Inc.	3450.00	3420.00	3475.00
GOOGL	Alphabet Inc.	2800.50	2780.00	2825.00

Examples

Pagination

Preview

Code

Code	Name	High	Open	Close
TSLA	Tesla Inc.	720.00	710.00	735.00
AMZN	Amazon.com Inc.	3450.00	3420.00	3475.00
GOOGL	Alphabet Inc.	2800.50	2780.00	2825.00

1-10 of 100

Rows

With card

Preview

Code

Code	Name	High	Open	Close
TSLA	Tesla Inc.	720.00	710.00	735.00
AMZN	Amazon.com Inc.	3450.00	3420.00	3475.00
GOOGL	Alphabet Inc.	2800.50	2780.00	2825.00

Props

Name	Type	Default
`children`	`ReactNode`	—
`selectionBehavior`	`SelectionBehavior`	`"toggle"`
`disabledBehavior`	`DisabledBehavior`	`"selection"`
`onRowAction`	`((key: Key) => void)`	—
`dragAndDropHooks`	`DragAndDropHooks`	—
`disabledKeys`	`Iterable<Key>`	—
`escapeKeyBehavior`	`"none"` \| `"clearSelection"`	`'clearSelection'`
`selectionMode`	`SelectionMode`	—
`disallowEmptySelection`	`boolean`	—
`selectedKeys`	`"all"` \| `Iterable<Key>`	—
`defaultSelectedKeys`	`"all"` \| `Iterable<Key>`	—
`onSelectionChange`	`((keys: Selection) => void)`	—
`sortDescriptor`	`SortDescriptor`	—
`onSortChange`	`((descriptor: SortDescriptor) => any)`	—
`className`	`string` \| `((values: TableRenderProps & { defaultClassName: string; }) => string)`	—
`style`	`CSSProperties` \| `((values: TableRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)`	—
`slot`	`string` \| `null`	—
`onScroll`	`((e: UIEvent<HTMLTableElement, UIEvent>) => void)`	—
`isCompact`	`boolean`	—