type ReactTable<TFeatures, TData, TSelected> = Table<TFeatures, TData> & object;
Defined in: useTable.ts:23
FlexRender: <TValue>(props) => ReactNode;
A React component that renders headers, cells, or footers with custom markup. Use this utility component instead of manually calling flexRender.
TValue extends CellData = CellData
FlexRenderProps<TFeatures, TData, TValue>
ReactNode
<table.FlexRender cell={cell} />
<table.FlexRender header={header} />
<table.FlexRender footer={footer} />
This replaces calling flexRender directly like this:
flexRender(cell.column.columnDef.cell, cell.getContext())
flexRender(header.column.columnDef.header, header.getContext())
flexRender(footer.column.columnDef.footer, footer.getContext())
readonly state: Readonly<TSelected>;
The selected state of the table. This state may not match the structure of table.store.state because it is selected by the selector function that you pass as the 2nd argument to useTable.
const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
console.log(table.state.globalFilter)
Subscribe: <TSelected>(props) => ReturnType<FunctionComponent>;
A React HOC (Higher Order Component) that allows you to subscribe to the table state.
This is useful for opting into state re-renders for specific parts of the table state.
TSelected
(state) => ReactNode | ReactNode
(state) => TSelected
ReturnType<FunctionComponent>
<table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
{({ rowSelection }) => ( // important to include `{() => {()}}` syntax
<tr key={row.id}>
// render the row
</tr>
))}
</table.Subscribe>
TFeatures extends TableFeatures
TData extends RowData
TSelected = { }