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 /> (React) demo for this component in action:

SortedTablePaginator example

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 title="felix">felix</th>
      <td>cat</td>
    </tr>
    <tr>
      <th title="fido">fido</th>
      <td>dog</td>
    </tr>
  </tbody>
</table>
`;

Since

v4.1.0