I am building the web app using svelte and sveltekit.And for UI i am using shadcn-svelte library.I am using the exact same case like given in documentation such as call the DataTable component from +page.svelte<DataTable {assessments} />
And in table i have did all same as documentation (same filtering, sorting, and actions)
export let assessments: Template[]; let table = createTable(readable(assessments), { filter: addTableFilter({ fn: ({ filterValue, value }) => value.toLowerCase().includes(filterValue.toLowerCase()) }), }); const columns = table.createColumns([ table.column({ accessor: 'Title', header: 'Title' }), table.column({ accessor: ({ id }) => id, header: '', cell: ({ value }) => { return createRender(DataTableActions, { id: value }); }, plugins: { sort: { disable: true }, filter: { exclude: true } } }) ]);
in table action i am deleting the row as record using API call
<script> async function handleDeleteAssessment(id: string) { const response = await Delete({ templateId: id }); } async function Delete(model: { templateId: string }) { try { const response = await fetch(`/api/server/assessment`, { method: 'DELETE', body: JSON.stringify(model), headers: { 'Content-Type': 'application/json' } }); return response; } catch (error) { console.error('Delete Error:', error); return null; } }</script><AlertDialog.Root><AlertDialog.Trigger asChild let:builder><Button builders={[builder]} variant="ghost" class="h-8 w-full justify-start">Delete</Button></AlertDialog.Trigger><AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title><AlertDialog.Action class="w-fit" on:click={() => handleDeleteAssessment(id)}>Continue</AlertDialog.Action></AlertDialog.Root>
Being using reactivity wherever possible and invalidation table is not updating on deletion of record or i could say row is not reflecting dynamic changes on deletion.Despite all data is reactive (Checked by loging on console)