Type Alias: ReactTable<TFeatures, TData, TSelected>#

type ReactTable<TFeatures, TData, TSelected> = Omit<Table<TFeatures, TData>, "store"> & object;

Defined in: react-table/src/useTable.ts:29

Type Declaration#

FlexRender()#

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.

Type Parameters#

TValue#

TValue extends CellData = CellData

Parameters#

props#

FlexRenderProps<TFeatures, TData, TValue>

Returns#

ReactNode

Example#

<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())

state#

readonly state: Readonly<TSelected>;

The selected state of the table. This state may not match the structure of the full table state because it is selected by the selector function that you pass as the 2nd argument to useTable.

Example#

const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state

console.log(table.state.globalFilter)

store#

readonly store: Table<TFeatures, TData>["store"];

Deprecated#

Prefer table.state for render reads, table.atoms.<slice>.get() for slice snapshots, or table.Subscribe / useSelector(table.store, selector) for explicit subscriptions. table.store.state is a current-value snapshot and is easy to misuse in render code.

Subscribe()#

Subscribe: {
<TSourceValue>  (props): ReactNode | Promise<ReactNode>;
<TSourceValue, TSubSelected>  (props): ReactNode | Promise<ReactNode>;
<TSubSelected>  (props): ReactNode | Promise<ReactNode>;
};

Overloads (not a single union) so selector callbacks get correct contextual types in JSX; a union of two selector signatures degrades to implicit any.

Source without selector is a separate overload so children receive TSourceValue (identity projection). If selector were optional on one overload, TSubSelected would default to unknown instead of inferring from the source.

The source overloads are listed first so TSourceValue is inferred from source.

Call Signature#

<TSourceValue>(props): ReactNode | Promise<ReactNode>;

Type Parameters#

TSourceValue#

TSourceValue

Parameters#

props#

children#

(state) => ReactNode | ReactNode

selector?#

undefined

source#

SubscribeSource<TSourceValue>

Returns#

ReactNode | Promise<ReactNode>

Call Signature#

<TSourceValue, TSubSelected>(props): ReactNode | Promise<ReactNode>;

Type Parameters#

TSourceValue#

TSourceValue

TSubSelected#

TSubSelected

Parameters#

props#

children#

(state) => ReactNode | ReactNode

selector#

(state) => TSubSelected

source#

SubscribeSource<TSourceValue>

Returns#

ReactNode | Promise<ReactNode>

Call Signature#

<TSubSelected>(props): ReactNode | Promise<ReactNode>;

Type Parameters#

TSubSelected#

TSubSelected

Parameters#

props#

Omit<SubscribePropsWithStore<TFeatures, TSubSelected>, "source">

Returns#

ReactNode | Promise<ReactNode>

Type Parameters#

TFeatures#

TFeatures extends TableFeatures

TData#

TData extends RowData

TSelected#

TSelected = TableState<TFeatures>