`SortedTablePaginator`

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

	Type	Description
`this`	`void`
`internals`	`Brand<"ComponentInternals">`
`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.

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

`element`

The custom element version of the component. Only present if compiled with the customElement compiler option Read more.

`z_$$bindings`

Does not exist at runtime, for typing capabilities only. DO NOT USE Read more.