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>