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-tableExamples
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.
columns
The array of column defs to use for the table.
Optional props
options
Other TanStack/Table options
sortable
Defines if columns will be sortable
sort
SortingState for controlled sort usage
setSort
Setter for SortingState for controlled sort usage
virtualizer
Virtualizar table model
columnWidths
Array of column widths
When using the Table component
asChild
If true, the Table component will be rendered as a child of the Compose component
stickyHeader
If true, the header will be sticky
stickyColumn
If true, the first column will be sticky
density
The density of the table
getRowCanExpand
If provided, allows you to override the default behavior of determining whether a row can be expanded.