TanStack
Table betabeta
Docs
CodeRabbit
Cloudflare
Railway
OpenRouter
Clerk
WorkOS
SerpAPI
AG Grid
Netlify
Prisma
Electric
Sentry
Unkey
CodeRabbit
Cloudflare
Railway
OpenRouter
Clerk
WorkOS
SerpAPI
AG Grid
Netlify
Prisma
Electric
Sentry
Unkey
Menu
Getting Started
Core Guides
Feature Guides
API Reference
Table API Reference
Column API Reference
Row API Reference
Cell API Reference
Header API Reference
Features API Reference
Static Functions API Reference
Basic Examples
Feature Examples
Specialized Examples
Table API Reference

Subscribe

Function: Subscribe()

Call Signature

ts
function Subscribe<TSourceValue>(props): ComponentChildren;
function Subscribe<TSourceValue>(props): ComponentChildren;

Defined in: Subscribe.ts:101

A Preact component that allows you to subscribe to 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

TSourceValue

Parameters

props

SubscribePropsWithSourceIdentity<TSourceValue>

Returns

ComponentChildren

Examples

tsx
<Subscribe
  source={table.store}
  selector={(state) => ({ rowSelection: state.rowSelection })}
>
  {({ rowSelection }) => (
    <div>Selected rows: {Object.keys(rowSelection).length}</div>
  )}
</Subscribe>
<Subscribe
  source={table.store}
  selector={(state) => ({ rowSelection: state.rowSelection })}
>
  {({ rowSelection }) => (
    <div>Selected rows: {Object.keys(rowSelection).length}</div>
  )}
</Subscribe>
tsx
<Subscribe
  source={table.atoms.rowSelection}
  selector={(rowSelection) => rowSelection[row.id]}
>
  {(selected) => <input checked={!!selected} type="checkbox" />}
</Subscribe>
<Subscribe
  source={table.atoms.rowSelection}
  selector={(rowSelection) => rowSelection[row.id]}
>
  {(selected) => <input checked={!!selected} type="checkbox" />}
</Subscribe>

Call Signature

ts
function Subscribe<TSourceValue, TSelected>(props): ComponentChildren;
function Subscribe<TSourceValue, TSelected>(props): ComponentChildren;

Defined in: Subscribe.ts:104

A Preact component that allows you to subscribe to 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

TSourceValue

TSelected

TSelected

Parameters

props

SubscribePropsWithSourceWithSelector<TSourceValue, TSelected>

Returns

ComponentChildren

Examples

tsx
<Subscribe
  source={table.store}
  selector={(state) => ({ rowSelection: state.rowSelection })}
>
  {({ rowSelection }) => (
    <div>Selected rows: {Object.keys(rowSelection).length}</div>
  )}
</Subscribe>
<Subscribe
  source={table.store}
  selector={(state) => ({ rowSelection: state.rowSelection })}
>
  {({ rowSelection }) => (
    <div>Selected rows: {Object.keys(rowSelection).length}</div>
  )}
</Subscribe>
tsx
<Subscribe
  source={table.atoms.rowSelection}
  selector={(rowSelection) => rowSelection[row.id]}
>
  {(selected) => <input checked={!!selected} type="checkbox" />}
</Subscribe>
<Subscribe
  source={table.atoms.rowSelection}
  selector={(rowSelection) => rowSelection[row.id]}
>
  {(selected) => <input checked={!!selected} type="checkbox" />}
</Subscribe>

Call Signature

ts
function Subscribe<TFeatures, TSelected>(props): ComponentChildren;
function Subscribe<TFeatures, TSelected>(props): ComponentChildren;

Defined in: Subscribe.ts:107

A Preact component that allows you to subscribe to 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

TSelected

Parameters

props

SubscribePropsWithStore<TFeatures, TSelected>

Returns

ComponentChildren

Examples

tsx
<Subscribe
  source={table.store}
  selector={(state) => ({ rowSelection: state.rowSelection })}
>
  {({ rowSelection }) => (
    <div>Selected rows: {Object.keys(rowSelection).length}</div>
  )}
</Subscribe>
<Subscribe
  source={table.store}
  selector={(state) => ({ rowSelection: state.rowSelection })}
>
  {({ rowSelection }) => (
    <div>Selected rows: {Object.keys(rowSelection).length}</div>
  )}
</Subscribe>
tsx
<Subscribe
  source={table.atoms.rowSelection}
  selector={(rowSelection) => rowSelection[row.id]}
>
  {(selected) => <input checked={!!selected} type="checkbox" />}
</Subscribe>
<Subscribe
  source={table.atoms.rowSelection}
  selector={(rowSelection) => rowSelection[row.id]}
>
  {(selected) => <input checked={!!selected} type="checkbox" />}
</Subscribe>
Edit on GitHub
CreateTableHookOptions
FlexRender
© 2026 TanStack LLC