`useCellState`

The useCellState primitive returns a Cell from a Store and a callback to set it, following the common Solid useState convention.

useCellState(
  tableId: MaybeAccessor<string>,
  rowId: MaybeAccessor<string>,
  cellId: MaybeAccessor<string>,
  storeOrStoreId?: MaybeAccessor<undefined | StoreOrStoreId>,
): [Accessor<CellOrUndefined>, (cell: Cell) => void]

	Type	Description
`tableId`	`MaybeAccessor<string>`	The `Id` of the `Table` in the `Store`.
`rowId`	`MaybeAccessor<string>`	The `Id` of the `Row` in the `Table`.
`cellId`	`MaybeAccessor<string>`	The `Id` of the `Cell` in the `Row`.
`storeOrStoreId?`	`MaybeAccessor<undefined \| StoreOrStoreId>`	The `Store` to get data from: omit for the default context `Store`, provide an `Id` for a named context `Store`, or provide an explicit reference.
returns	`[Accessor<CellOrUndefined>, (cell: Cell) => void]`	A tuple containing the current `Cell` and a setter callback that can be called with a new `Cell` value.

This primitive is useful for creating components that read and write a Cell in a single line, similar to how you would use Solid's useState primitive.

The component this is used in will update when the Cell changes.

Example

This example creates a Store, binds it to the primitive, and reads the resulting Solid Accessor.

import {createRoot} from 'solid-js';
import {createStore} from 'tinybase';
import {useCellState} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore();
  const [cell, setCell] = useCellState('pets', 'fido', 'species', store);
  setCell('dog');
  console.log(cell());
  // -> 'dog'
  dispose();
});

Since

v8.3.0