`SortedTablePaginator`

SortedTablePaginator(
  this: void,
  props: SortedTablePaginatorProps,
): {
  $on?: (type: string, callback: (e: any) => void): () => void;
  $set?: (props: Partial<SortedTablePaginatorProps>): void;
}

	Type	Description
`this`	`void`
`props`	`SortedTablePaginatorProps`	The props passed to the component.
returns	`{ $on?: (type: string, callback: (e: any) => void): () => void; $set?: (props: Partial<SortedTablePaginatorProps>): void; }`

See the <SortedTableInHtmlTable /> (Svelte) 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).

App.svelte

<script>
  import {Provider} from 'tinybase/ui-svelte';
  import {SortedTableInHtmlTable} from 'tinybase/ui-svelte-dom';

  export let store;
</script>

<Provider {store}>
  <SortedTableInHtmlTable
    tableId="pets"
    cellId="species"
    limit={2}
    paginator={true}
  />
</Provider>

import {flushSync, mount} from 'svelte';
import {createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore().setTables({
  pets: {
    fido: {species: 'dog'},
    felix: {species: 'cat'},
    cujo: {species: 'wolf'},
    lowly: {species: 'worm'},
    polly: {species: 'parrot'},
  },
});
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {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