Subscribe

Call Signature

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

Defined in: Subscribe.ts:125

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.

For table.Subscribe from useTable, prefer that API — it uses overloads so JSX contextual typing works. This standalone component uses a union props type.

Type Parameters

TSourceValue

Parameters

props

SubscribePropsWithSourceIdentity\<`TSourceValue`\>

Returns

ReactNode | Promise\<`ReactNode`\>

Examples

tsx

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

tsx

// Entire source (atom or store) — no selector
<Subscribe source={table.atoms.rowSelection}>
  {(rowSelection) => <div>...</div>}
</Subscribe>

tsx

// Project source value (e.g. one row’s selection)
<Subscribe
  source={table.atoms.rowSelection}
  selector={(rowSelection) => rowSelection?.[row.id]}
>
  {(selected) => <tr data-selected={!!selected}>...</tr>}
</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>

Call Signature

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

Defined in: Subscribe.ts:128

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.

For table.Subscribe from useTable, prefer that API — it uses overloads so JSX contextual typing works. This standalone component uses a union props type.

Type Parameters

TSourceValue

TSelected

Parameters

props

SubscribePropsWithSourceWithSelector\<`TSourceValue`, `TSelected`\>

Returns

ReactNode | Promise\<`ReactNode`\>

Examples

tsx

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

tsx

// Entire source (atom or store) — no selector
<Subscribe source={table.atoms.rowSelection}>
  {(rowSelection) => <div>...</div>}
</Subscribe>

tsx

// Project source value (e.g. one row’s selection)
<Subscribe
  source={table.atoms.rowSelection}
  selector={(rowSelection) => rowSelection?.[row.id]}
>
  {(selected) => <tr data-selected={!!selected}>...</tr>}
</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>

Call Signature

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

Defined in: Subscribe.ts:131

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.

For table.Subscribe from useTable, prefer that API — it uses overloads so JSX contextual typing works. This standalone component uses a union props type.

Type Parameters

TFeatures

TFeatures extends TableFeatures

TSelected

Parameters

props

SubscribePropsWithStore\<`TFeatures`, `TSelected`\>

Returns

ReactNode | Promise\<`ReactNode`\>

Examples

tsx

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

tsx

// Entire source (atom or store) — no selector
<Subscribe source={table.atoms.rowSelection}>
  {(rowSelection) => <div>...</div>}
</Subscribe>

tsx

// Project source value (e.g. one row’s selection)
<Subscribe
  source={table.atoms.rowSelection}
  selector={(rowSelection) => rowSelection?.[row.id]}
>
  {(selected) => <tr data-selected={!!selected}>...</tr>}
</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>