Table - Top and Bottom Controls

The table component supports controls at both the top and bottom. These controls can handle pagination, adding new records, or other actions. They are web components that interact with their parent k-table by accessing its methods and listening for its events.

Controls without a slot will be placed at the bottom of the table by default, to place a control on the top of the table give it a slot="top".

<k-table id="topBottomControlsExample">
  <k-tc-export-json slot="top"></k-tc-export-json>
  <k-tc-export-csv></k-tc-export-csv>
</k-table>
<script type="module" src="/src/components/tableControls/ExportJson.js"></script>
<script type="module" src="/src/components/tableControls/ExportCsv.js"></script>
<script type="module">
  await window.customElements.whenDefined('k-table');
  document.getElementById('topBottomControlsExample').setRecords(contacts);
</script>