TinyBase logoTinyBase

useSortedRowIds

The useSortedRowIds hook 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 a re-render.

useSortedRowIds(
  tableId: string,
  cellId?: string,
  descending?: boolean,
  offset?: number,
  limit?: number,
  storeOrStoreId?: StoreOrStoreId,
): Ids
TypeDescription
tableIdstring

The Id of the Table in the Store.

cellId?string

The Id of the Cell whose values are used for the sorting, or undefined to by sort the Row Id itself.

descending?boolean

Whether the sorting should be in descending order.

offset?number

The number of Row Ids to skip for pagination purposes, if any.

limit?number

The maximum number of Row Ids to return, or undefined for all.

storeOrStoreId?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.

returnsIds

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 hook 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 hook will create a listener so that changes to the sorted Row Ids will cause a re-render. When the component containing this hook is unmounted, the listener will be automatically removed.

Examples

This example creates a Store outside the application, which is used in the useSortedRowIds hook by reference. A change to the data in the Store re-renders the component.

import React from 'react';
import {createRoot} from 'react-dom/client';
import {createStore} from 'tinybase';
import {useSortedRowIds} from 'tinybase/ui-react';

const store = createStore().setTables({
  pets: {
    fido: {species: 'dog'},
    felix: {species: 'cat'},
  },
});
const App = () => (
  <span>
    {JSON.stringify(
      useSortedRowIds('pets', 'species', false, 0, undefined, store),
    )}
  </span>
);

const app = document.createElement('div');
createRoot(app).render(<App />);
console.log(app.innerHTML);
// -> '<span>["felix","fido"]</span>'

store.setRow('pets', 'cujo', {species: 'wolf'});
console.log(app.innerHTML);
// -> '<span>["felix","fido","cujo"]</span>'

This example creates a Provider context into which a default Store is provided. A component within it then uses the useSortedRowIds hook.

import {Provider, useSortedRowIds} from 'tinybase/ui-react';
import React from 'react';
import {createRoot} from 'react-dom/client';
import {createStore} from 'tinybase';

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const Pane = () => <span>{JSON.stringify(useSortedRowIds('pets'))}</span>;

const store = createStore().setTables({
  pets: {
    fido: {species: 'dog'},
    felix: {species: 'cat'},
  },
});
const app = document.createElement('div');
createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// -> '<span>["felix","fido"]</span>'

This example creates a Provider context into which a Store is provided, named by Id. A component within it then uses the useSortedRowIds hook.

import {Provider, useSortedRowIds} from 'tinybase/ui-react';
import React from 'react';
import {createRoot} from 'react-dom/client';
import {createStore} from 'tinybase';

const App = ({store}) => (
  <Provider storesById={{petStore: store}}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <span>
    {JSON.stringify(
      useSortedRowIds('pets', 'species', false, 0, undefined, 'petStore'),
    )}
  </span>
);

const store = createStore().setTables({
  pets: {
    fido: {species: 'dog'},
    felix: {species: 'cat'},
  },
});
const app = document.createElement('div');
createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// -> '<span>["felix","fido"]</span>'

Since

v2.0.0