Components
@tanstack/react-table

Usage with @tanstack/react-table

Controlled table render built on top of TanStack/Table API

The @vtex/shoreline-ts-table has @tanstack/react-table as peer dependency.

npm i @tanstack/react-table @vtex/shoreline-ts-table

Examples

Column Widths

The columnWidths prop can be used to define variable or fixed widths to the table columns. The table is a grid layout (opens in a new tab), and columnWidths represents the grid-template-columns (opens in a new tab) property of the grid. The Array is joined to form a rule, for example: ['minmax(100px, 1fr)', 'auto', '150px'] becomes grid-template-columns: minmax(100px, 1fr) auto auto;

Required props

data

The data for the table to display. This array should match the type you provided to table.setRowType<...>. Columns can access this data via string/index or a functional accessor. When the data option changes reference, the table will reprocess the data.

type
TData[]
default
null

columns

The array of column defs to use for the table.

type
ColumnDef<TData, any>[]
default
null

Optional props

options

Other TanStack/Table options

type
(Omit<TableOptions<T>, CoreProps
getCoreRowModel> & Partial<Pick<TableOptions<T>, getCoreRowModel>>)
default
null

sortable

Defines if columns will be sortable

type
boolean
default
false

sort

SortingState for controlled sort usage

type
SortingState
default
null

setSort

Setter for SortingState for controlled sort usage

type
OnChangeFn<SortingState>
default
null

virtualizer

Virtualizar table model

type
UseVirtualizerModelReturn
default
null

columnWidths

Array of column widths

When using the Table component

type
string[]
default
[] When using the SimpleTable component

asChild

If true, the Table component will be rendered as a child of the Compose component

type
boolean
default
false

stickyHeader

If true, the header will be sticky

type
boolean
default
false

stickyColumn

If true, the first column will be sticky

type
boolean
default
false

density

The density of the table

type
default
comfortable
compact
default
default

getRowCanExpand

If provided, allows you to override the default behavior of determining whether a row can be expanded.

type
((row: Row<TData>) => boolean)
default
null