TinyBase logoTinyBase β

useCell

Essential

The useCell primitive returns an object containing the value of a single Cell in a given Row, in a given Table, and registers a listener so that any changes to that result will cause an update.

useCell(
  tableId: MaybeAccessor<string>,
  rowId: MaybeAccessor<string>,
  cellId: MaybeAccessor<string>,
  storeOrStoreId?: MaybeAccessor<undefined | StoreOrStoreId>,
): Accessor<CellOrUndefined>
TypeDescription
tableIdMaybeAccessor<string>

The Id of the Table in the Store.

rowIdMaybeAccessor<string>

The Id of the Row in the Table.

cellIdMaybeAccessor<string>

The Id of the Cell in the Row.

storeOrStoreId?MaybeAccessor<undefined | StoreOrStoreId>

The Store to be accessed: omit for the default context Store, provide an Id for a named context Store, or provide an explicit reference.

returnsAccessor<CellOrUndefined>

The value of the Cell.

A Provider component is used to wrap part of an application in a context, and it can contain a default Store or a set of Store objects named by Id. The useCell primitive lets you indicate which Store to get data for: omit the final optional parameter for the default context Store, provide an Id for a named context Store, or provide a Store explicitly by reference.

When first rendered, this primitive will create a listener so that changes to the Cell will cause an update. When the component containing this primitive is unmounted, the listener will be automatically removed.

Example

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

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

Since

v8.3.0