Svelte – filtering table results
How can you make table filtering in JavaScript and Svelte fast and easy.
We have the following data:
Data on svelte is received from the backend in this way:
let depositsBackup = [];
onMount(async () => {
getFetch(‘deposit / get-deposits /’)…then((r) => {
deposits = r;
depositsBackup = r;
});
});
About asynchronous data loading on Svelte.
Create 2 links. One will show records in the table where there is a description. The other will show all entries again.
<div class=“links” on:click={displayOnlyWithNotes}>Show with records onlydiv>
<div class=“links” on:click={displayAllNotes}>show alldiv>
And 2 methods for them:
deposits = deposits.filter(el => el.description ! == ”);
}
function displayAllNotes() {
deposits = depositsBackup;
}
It’s so easy to implement filtering data in a table in Svelte and rebuilding it in real time.