Subscribe | TanStack Table React Docs

function Subscribe<TFeatures, TData, TSelected>(props): ReactNode | Promise<ReactNode>;

function Subscribe<TFeatures, TData, TSelected>(props): ReactNode | Promise<ReactNode>;

Defined in: Subscribe.ts:59

A React 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.

Type Parameters

TFeatures

TFeatures extends TableFeatures

TData

TData extends RowData

TSelected

TSelected = { }

Parameters

props

SubscribeProps<TFeatures, TData, TSelected>

Returns

ReactNode | Promise<ReactNode>

Examples

tsx

// As a standalone component
<Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>
  {({ rowSelection }) => (
    <div>Selected rows: {Object.keys(rowSelection).length}</div>
  )}
</Subscribe>

// As a standalone component
<Subscribe table={table} selector={(state) => ({ rowSelection: state.rowSelection })}>
  {({ rowSelection }) => (
    <div>Selected rows: {Object.keys(rowSelection).length}</div>
  )}
</Subscribe>

tsx

// As table.Subscribe (table instance method)
<table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
  {({ rowSelection }) => (
    <div>Selected rows: {Object.keys(rowSelection).length}</div>
  )}
</table.Subscribe>

// As table.Subscribe (table instance method)
<table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
  {({ rowSelection }) => (
    <div>Selected rows: {Object.keys(rowSelection).length}</div>
  )}
</table.Subscribe>