`useSortedRowIds`

The useSortedRowIds primitive returns the sorted (and optionally, paginated) Ids of every Row in a given Table, and registers a listener so that any changes to that result will cause an update.

useSortedRowIds(
  tableId: MaybeAccessor<string>,
  cellId?: MaybeAccessor<undefined | string>,
  descending?: MaybeAccessor<undefined | boolean>,
  offset?: MaybeAccessor<undefined | number>,
  limit?: MaybeAccessor<undefined | number>,
  storeOrStoreId?: MaybeAccessor<undefined | StoreOrStoreId>,
): Accessor<Ids>

	Type	Description
`tableId`	`MaybeAccessor<string>`	The `Id` of the `Table` in the `Store`.
`cellId?`	`MaybeAccessor<undefined \| string>`	The `Id` of the `Cell` whose values are used for the sorting, or `undefined` to sort by the `Row` `Id` itself.
`descending?`	`MaybeAccessor<undefined \| boolean>`	Whether the sorting should be in descending order.
`offset?`	`MaybeAccessor<undefined \| number>`	The number of `Row` `Ids` to skip for pagination purposes, if any.
`limit?`	`MaybeAccessor<undefined \| number>`	The maximum number of `Row` `Ids` to return, or `undefined` for all.
`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.
returns	`Accessor<Ids>`	An array of the sorted `Ids` of every `Row` in the `Table`.

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 useSortedRowIds primitive lets you indicate which Store to get data for: omit the optional final 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 sorted Row Ids will cause an update. When the component containing this primitive is unmounted, the listener will be automatically removed.

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 {useSortedRowIds} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore().setTable('pets', {
    fido: {sold: true},
    felix: {sold: false},
  });
  const rowIds = useSortedRowIds(
    'pets',
    'sold',
    false,
    0,
    undefined,
    store,
  );
  console.log(JSON.stringify(rowIds()));
  // -> '["felix","fido"]'
  dispose();
});

Since

v8.3.0

When called with an object as the first argument, the useSortedRowIds method destructures it to make it easier to skip optional parameters.

useSortedRowIds(
  args: SortedRowIdsArgs,
  storeOrStoreId?: MaybeAccessor<undefined | StoreOrStoreId>,
): Accessor<Ids>

Type Description

	Type	Description
`args`	`SortedRowIdsArgs`	A `SortedRowIdsArgs` object containing the `Id` of the `Table` in the `Store`, and optional `cellId`, `descending`, `offset`, and `limit` parameters.
`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.
returns	`Accessor<Ids>`	An array of the sorted `Ids` of every `Row` in the `Table`.

args

SortedRowIdsArgs

A SortedRowIdsArgs object containing the Id of the Table in the Store, and optional cellId, descending, offset, and limit parameters.

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.

returns

Accessor<Ids>

An array of the sorted Ids of every Row in the Table.

Example

This example creates the TinyBase objects needed by the Solid primitive or component and calls it from within a reactive root.

import {createRoot} from 'solid-js';
import {
  createCheckpoints,
  createIndexes,
  createMetrics,
  createQueries,
  createRelationships,
  createStore,
} from 'tinybase';
import {useSortedRowIds} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore()
    .setTables({
      pets: {
        fido: {species: 'dog', color: 'brown', next: 'felix'},
        felix: {species: 'cat', color: 'black'},
      },
      species: {dog: {price: 5}, cat: {price: 4}},
    })
    .setValues({open: true});
  const metrics = createMetrics(store).setMetricDefinition(
    'highestPrice',
    'species',
    'max',
    'price',
  );
  const indexes = createIndexes(store).setIndexDefinition(
    'bySpecies',
    'pets',
    'species',
  );
  const relationships = createRelationships(store)
    .setRelationshipDefinition('petSpecies', 'pets', 'species', 'species')
    .setRelationshipDefinition('nextPet', 'pets', 'pets', 'next');
  const queries = createQueries(store).setQueryDefinition(
    'petColors',
    'pets',
    ({select, where, param}) => {
      select('color');
      where((getCell) => getCell('species') == param('species'));
    },
    {species: 'dog'},
  );
  const checkpoints = createCheckpoints(store);
  store.setCell('pets', 'fido', 'color', 'walnut');
  checkpoints.setCheckpoint('updated color');
  metrics.getMetric('highestPrice');
  indexes.getSliceIds('bySpecies');
  relationships.getRemoteRowId('petSpecies', 'fido');
  queries.getResultRowIds('petColors');
  useSortedRowIds({tableId: 'pets', cellId: 'species'}, store);
  dispose();
});

Since

v8.3.0