Table - Pagination

Back to Table Component Documentation

The table component supports pagination, enable it by giving the k-table a enable-pages="true" attribute.

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="true"
page-size="10"
page-size-options="[5,10,25,50]"
>

<div class="d-f full">
<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" src="../kempo/components/tableControls/FirstPage.js"></script>
<script type="module" src="../kempo/components/tableControls/PrevPage.js"></script>
<script type="module" src="../kempo/components/tableControls/NextPage.js"></script>
<script type="module" src="../kempo/components/tableControls/LastPage.js"></script>
<script type="module" src="../kempo/components/tableControls/PageSelect.js"></script>
<script type="module" src="../kempo/components/tableControls/PageSize.js"></script>
<script type="module">
import Table from '../kempo/components/Table.js';
document.getElementById('paginationExample').setRecords(contacts);
</script>