Table - Pagination

The table component supports pagination, enable it by adding the enable-pages attribute to the k-table element.

You can optionally set the page size and page size options by setting the page-size and page-size-options attributes respectively. page-size-options must be in the format of an array of numbers (with brackets).

<k-table
  id="paginationExample"
  enable-pages
  page-size="10"
  page-size-options="[5,10,25,50]"
>
  <div class="d-f full" style="align-items: center;">
    <div>
      <k-tc-first-page></k-tc-first-page>
      <k-tc-prev-page></k-tc-prev-page>
      <k-tc-next-page></k-tc-next-page>
      <k-tc-last-page></k-tc-last-page>
    </div>
    <div class="flex"></div>
    <div>
      <k-tc-page-select></k-tc-page-select>
    </div>
    <div class="flex"></div>
    <div>
      <k-tc-page-size></k-tc-page-size>
    </div>
  </div>
</k-table>
<script type="module">
  await window.customElements.whenDefined('k-table');
  document.getElementById('paginationExample').setRecords(contacts);
</script>