TinyBase logoTinyBase β

SortedTablePaginator

The SortedTablePaginator component renders a paginator for a sorted table.

SortedTablePaginator(props: SortedTablePaginatorProps): ComponentReturnType
TypeDescription
propsSortedTablePaginatorProps

The props for this component.

returnsComponentReturnType

The rendering of a paginator control with a label, and next and previous buttons, where appropriate.

See the <SortedTableInHtmlTable /> demo for this component in action.

The component displays 'previous' and 'next' buttons for paging through the Table if there are more Row Ids than fit in each page. The component will also display a label that shows which Row Ids are being displayed.

The component's props identify initial pagination settings, and it will fire an event when the pagination changes.

Example

This example creates a Provider context into which a default Store is provided. The SortedTableInHtmlTable component within it then renders the Table in a <table> element with a SortedTablePaginator (the default).

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

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <SortedTableInHtmlTable
    tableId="pets"
    cellId="species"
    limit={2}
    paginator={true}
  />
);

const store = createStore().setTables({
  pets: {
    fido: {species: 'dog'},
    felix: {species: 'cat'},
    cujo: {species: 'wolf'},
    lowly: {species: 'worm'},
    polly: {species: 'parrot'},
  },
});
const app = document.createElement('div');
createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// ->
`
<table>
  <caption>
    <button class="previous" disabled="">←</button>
    <button class="next">→</button>
    1 to 2 of 5 rows
  </caption>
  <thead>
    <tr>
      <th>Id</th>
      <th class="sorted ascending">↑ species</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>felix</th>
      <td>cat</td>
    </tr>
    <tr>
      <th>fido</th>
      <td>dog</td>
    </tr>
  </tbody>
</table>
`;

Since

v4.1.0