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 deposits = [];
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:

function displayOnlyWithNotes() {
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.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *