Subscribe

Call Signature

function Subscribe<TSourceValue>(props): ComponentChildren;

Defined in: Subscribe.ts:98

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

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>

tsx

<Subscribe
  source={table.atoms.rowSelection}
  selector={(rowSelection) => rowSelection[row.id]}
>
  {(selected) => <input checked={!!selected} type="checkbox" />}
</Subscribe>

Call Signature

function Subscribe<TSourceValue, TSelected>(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

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>

tsx

<Subscribe
  source={table.atoms.rowSelection}
  selector={(rowSelection) => rowSelection[row.id]}
>
  {(selected) => <input checked={!!selected} type="checkbox" />}
</Subscribe>

Call Signature

function Subscribe<TFeatures, 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

TFeatures

TFeatures extends TableFeatures

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>

tsx

<Subscribe
  source={table.atoms.rowSelection}
  selector={(rowSelection) => rowSelection[row.id]}
>
  {(selected) => <input checked={!!selected} type="checkbox" />}
</Subscribe>