`SortedTableView`

The SortedTableView component renders the contents of a single sorted Table in a Store, and registers a listener so that any changes to that result will cause a re-render.

SortedTableView(props: SortedTableProps): ComponentReturnType

Type Description

	Type	Description
`props`	`SortedTableProps`	The props for this component.
returns	`ComponentReturnType`	A rendering of the `Table`, or nothing, if not present.

props

SortedTableProps

The props for this component.

returns

ComponentReturnType

A rendering of the Table, or nothing, if not present.

The component's props identify which Table to render based on Table Id, and Store (which is either the default context Store, a named context Store, or by explicit reference). It also takes a Cell Id to sort by and a boolean to indicate that the sorting should be in descending order. The offset and limit props are used to paginate results, but default to 0 and undefined to return all available Row Ids if not specified.

This component renders a Table by iterating over its Row objects, in the order dictated by the sort parameters. By default these are in turn rendered with the RowView component, but you can override this behavior by providing a rowComponent prop, a custom component of your own that will render a Row based on RowProps. You can also pass additional props to your custom component with the getRowComponentProps callback prop.

This component uses the useSortedRowIds hook under the covers, which means that any changes to the structure or sorting of the Table will cause a re-render.

Since v4.1.0, you can use the customCellIds prop if you want to render a prescribed set of the Table's Cells in a given order for each Row.

Examples

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

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

const store = createStore().setTables({
  pets: {
    fido: {species: 'dog'},
    felix: {species: 'cat'},
  },
});
const App = () => (
  <div>
    <SortedTableView
      tableId="pets"
      cellId="species"
      store={store}
      separator="/"
    />
  </div>
);

const app = document.createElement('div');
createRoot(app).render(<App />);
console.log(app.innerHTML);
// -> '<div>cat/dog</div>'

store.setRow('pets', 'cujo', {species: 'wolf'});
console.log(app.innerHTML);
// -> '<div>cat/dog/wolf</div>'

This example creates a Provider context into which a default Store is provided. The SortedTableView component within it then renders the Table for a custom set of Cell Ids (and rendered with Ids for readability).

import {Provider, SortedTableView} 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 customCellIds = ['species'];
const Pane = () => (
  <div>
    <SortedTableView
      tableId="pets"
      cellId="species"
      customCellIds={customCellIds}
      debugIds={true}
    />
  </div>
);

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

This example creates a Provider context into which a default Store is provided. The SortedTableView component within it then renders the Table with a custom Row component and a custom props callback.

import {Provider, RowView, SortedTableView} 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 getBoldProp = (rowId) => ({bold: rowId == 'fido'});
const Pane = () => (
  <div>
    <SortedTableView
      tableId="pets"
      cellId="species"
      rowComponent={FormattedRowView}
      getRowComponentProps={getBoldProp}
    />
  </div>
);
const FormattedRowView = ({tableId, rowId, bold}) => (
  <span>
    {bold ? <b>{rowId}</b> : rowId}
    {': '}
    <RowView tableId={tableId} rowId={rowId} />
  </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);
// -> '<div><span>felix: cat</span><span><b>fido</b>: dog</span></div>'

Since

v2.0.0