wrapping svelte-headless-table into a component produces an error

[till]

Hi 👋🏼 ! I want to prefix this with, thank you for building this component. It's been really nice to work with it. :) Also kudos for providing docs and repls to get started.

---

I encountered an issue when I tried to wrap my table into a component. And I wanted to leave it here as a suggestion to maybe improve the documentation.

---

The backstory is, I a couple pages which display data in a table — the table is always the same: it can be searched and ordered. I figured, that I should create a component that I bind my store to in order to create the table to avoid replicating the setup/boilerplate all across my app.

I managed to replicate what I am seeing with a small repl: https://svelte.dev/repl/da1fcf39b3ad4f6ab9dc81e47721ebb1?version=4.2.12

As soon as I move all my code into the component (MyTable.svelte) and bind my store, I get the following error message: store.subscribe is not a function:

<MyTable bind:data={$data} />

I playbed with the binding and props and triggered a different error (Cannot bind to variable that is not writable) with this:

<MyTable bind:data={data} />

This error made more sense to me, since I am using readable or derived stores mostly. Which then got me thinking that I needed to use it as a simple prop:

<MyTable data={data} />

I guess another solution would be setContext()?

I should add that I am by no means a pro (at JavaScript or Svelte), but I figured maybe this would be one for your documentation. Since it mentioned readable and writable stores alike, an example how to wrap your library into a component to promote re-use, would go a long way.

[talentedunicorn]

Perhaps your data store could be a new writable store e.g. tableData that takes in the initial value as the value of the "original" data. Then you could pass it in like this

<MyTable data={tableData} />

An alternative is to change your original data store to writable if that works for you.

[vcheeze]

@till as @talentedunicorn said, first setting your data in a writable store then passing it into your Table component works. For me, I am getting some data from the load function, and am setting it in a store like this (rough example):

export let data;
const tableData = writable<any>(null);
$: tableData.set(data.data_from_load_function);

Then I just have to pass tableData in my table component and create my table directly with the data prop instead of wrapping it in a store again:

export let data;
const table = createTable(data);