Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Reactive Table in shadcn-svelte for every change in table row content (Edit the row and Delete the row)

$
0
0

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)


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>