Table - Fetch Records

Back to Table Component Documentation

The setupFetchRecords function is used to configure the table to fetch records dynamically. It takes two parameters: the total number of records and a function that fetching records. It should be an asynconous function that returns/resolves an array of records that will populate the table.

In this example, the simulateFetchRecords function generates a specified number of random contact records and resolves the promise after a delay, simulating an asynchronous fetch operation.

<k-table
id="fetchRecordsExample"
enable-pages="true"
page-size="10"
>

<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">
import '../kempo/components/tableControls/FirstPage.js';
import '../kempo/components/tableControls/PrevPage.js';
import '../kempo/components/tableControls/NextPage.js';
import '../kempo/components/tableControls/LastPage.js';
import '../kempo/components/tableControls/PageSelect.js';
import '../kempo/components/tableControls/PageSize.js';

function simulateFetchRecords(start, count){
return new Promise(res => {
const newRecords = [];
for(let i=0; i<count; i++){
newRecords.push(generateContact());
}
setTimeout(()=>res(newRecords), 1000);
});
}

const $table = document.getElementById('fetchRecordsExample');

$table.setRecords(contacts);
$table.setupFetchRecords(100, simulateFetchRecords);
</script>