Re-render table rows on data change in SvelteKit

[jakob-fuchs2]

I have a table and a form to create new entries for the table on the same +page.svelte page in my SveltekitApp.

When I create a new entry the page data updates but the table does not. This is when submitting the form using the enhance directive (https://kit.svelte.dev/docs/form-actions#progressive-enhancement). After doing a full reload the new entry shows up.

What do I need to do to make the table re-render on data change?

This is my table markup:

<table {...$tableAttrs} class="min-w-full divide-y divide-gray-300">
	<thead class="bg-gray-50">
		{#each $headerRows as headerRow (headerRow.id)}
			<Subscribe
				rowAttrs={headerRow.attrs()}
				let:rowAttrs
				rowProps={headerRow.props()}
				let:rowProps
			>
				<tr {...rowAttrs}>
					{#each headerRow.cells as cell (cell.id)}
						<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
							<th
								{...attrs}
								on:click={props?.sortBy?.toggle}
								scope="col"
								class="group py-4 pl-4 pr-3 text-left text-sm font-semibold text-accent relative sm:pl-6"
							>
								<Render of={cell.render()} />
							</th>
						</Subscribe>
					{/each}
				</tr>
			</Subscribe>
		{/each}
	</thead>
	<tbody {...$tableBodyAttrs} class="bg-white divide-y divide-gray-200">
		{#each $pageRows as row (row.id)}
			<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
				<tr {...rowAttrs}>
					{#each row.cells as cell (cell.id)}
						<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
							<td
								{...attrs}
								class="py-4 pl-4 pr-3 h-12 text-sm font-medium text-gray-900 sm:pl-6"
							>
								<Render of={cell.render()} />
							</td>
						</Subscribe>
					{/each}
				</tr>
			</Subscribe>
		{/each}
	</tbody>
</table>

And this is how I initialize the table:

const table = createTable(writable(data.manufacturers), {
  page: addPagination({
	  initialPageSize: 10,
	  initialPageIndex: 0
  }),
});

const columns = table.createColumns([
  table.column({
	  id: 'name',
	  header: 'Name',
	  accessor: (item) => item.name || '—',
	  cell: ({value}) => createRender(TextCell, {text: value})
  })
]);

I tried wrapping the table in a {#key} block, but that didn't seem to work.

[bryanmylee]

Svelte Headless Table uses stores for reactivity. You need to update that store whenever the page data changes to inform Svelte Headless Table of the data change.

It's an unfortunate consequence of Svelte's separation between component reactivity ($:) and external tooling reactivity (stores).

<script lang="ts">
  export let data;
  const manufacturers = writable(data.manufacturers);
  // Update the data store whenever `data` changes.
  $: $manufacturers = data.manufacturers;
  
  const table = createTable(manufacturers, {...});
  // ...
</script>

[jakob-fuchs2]

Thanks, that worked great