datatables icon indicating copy to clipboard operation
datatables copied to clipboard

Suggestion: Context for state instead of mutating a prop

Open bn-l opened this issue 1 year ago • 2 comments

At the moment because the svelte component that calls this library "owns" the TableHandler instance, and it's supplied as a prop to the various table components, when updating sort or filter etc., the props are mutated in the children and there's a warning (in dev) that you "shouldn't mutate what you don't own" (link to docs).

Could the state of sort, filter etc be in the context on the top level datatable component using the getContext and setContext api? I really like way it's done in this reddit post: https://www.reddit.com/r/sveltejs/comments/1gzyv2h/comment/lz08wnm/.

bn-l avatar Nov 28 '24 12:11 bn-l

Thanks for the link, interesting. I need to create a repro then dig into this issue

#128

vincjo avatar Dec 05 '24 18:12 vincjo

Running into same issues. It would be awesome if it was possible to move the TableHandler itself into a context class, accessing it even outside of the table if needed. In my case I want to separate search / order etc from the table itself, and put it elsewhere.

Then it would be fantastic if it was possible to instantiate the TableHandler in a +layout.svelte, and then consume context wherever you'd like beneath.

(simplified example)

+layout.svelte:

import { page } from 'app/state';

const table = createTable('some-table-key', page.data.table, { rowsPerPage: 10 });

table.createView(...)

and then the same pattern within the table component itself:

<script>
const table = getTable('some-table-key');
</script>
{#each table.rows as row}
...

I guess this would also mean that there would be no difference between the client / server examples you have. And we'd get full SSR aswell, instead of as is now getting FOUC when using filters, view et c.

torrfura avatar Jan 29 '25 18:01 torrfura