Datatable isn't reactive.

[victorbmlabs]

Hello.

I am trying to create a datatable. I have an empty array allResults which I pass to the DataHandler.

On component mount I populate the allResults array with data from the database. I also push objects to it when the server sends a new object.

However, after following the site's guide to add $: handler.setRows(allResults); my table is still empty on page load and only shows data when I'm forcing it to re-render (i.e when i filter or change the amount of entries)

<script>
	import { DataHandler, Datatable, Th, ThFilter } from '@vincjo/datatables';
	import { onMount, onDestroy } from 'svelte';
	import { pbStore } from '$lib/stores/pocketbase.js';
	import { get } from 'svelte/store';

	const pb = get(pbStore);
	let allResults = [];

	const push_to_results = (result) => {
		let error = "No error";
		const date = new Date(result.created).toLocaleString("en-GB");

		if (result?.expand.hasOwnProperty("error")) {
			const err = result.expand.error.error // Nested error object, need to fix key layer.
			error = err.error.errorType
		}

		const task = result.expand.task;
		console.log(task)
		const { id, name, domain } = task;

		allResults.push({
			id: allResults.length + 1,
			error: error,
			task: name,
			domain: domain,
			task_id: id,
			created: date
		});
	};

	const handler = new DataHandler(allResults, { rowsPerPage: 5 });
	let rows = handler.getRows();
	
	$: handler.setRows(allResults);

	onMount(async () => {
		const resultData = await pb.collection('gtm_secure_results').getFullList({
			expand: "task, error",
		});
        resultData.map((result) => {
			push_to_results(result);
		});

		pb.collection('gtm_secure_results').subscribe(
			'*',
			(data) => {
				push_to_results(data.record);
			},
			{
				"expand": "task, error"
			}
		);
	});

	onDestroy(() => {
		pb.collection('gtm_secure_results').unsubscribe();
	});
</script>

<div class="">
	<Datatable {handler}>
		<table>
			<thead>
				<tr>
					<Th {handler} orderBy="task">Task</Th>
					<Th {handler} orderBy="domain">Domain</Th>
					<Th {handler} orderBy="error">Error</Th>
					<Th {handler} orderBy="date">Date</Th>
				</tr>
				<tr>
					<ThFilter {handler} filterBy="task"/>
					<ThFilter {handler} filterBy="domain" />
					<ThFilter {handler} filterBy="error" />
					<ThFilter {handler} filterBy="date"/>
				</tr>
			</thead>
			<tbody>
				{#each $rows as row}
					<tr>
						<td>{row.task}</td>
						<td>{row.domain}</td>
						<td>{row.error}</td>
						<td>{row.created}</td>
					</tr>
				{/each}
			</tbody>
		</table>
	</Datatable>
</div>

[vincjo]

Hello

When allResults changes, update rows:

<script>
    $: allResults, handler.setRows(allResults)
</script>

But the best way would be at the end of push_to_results function:

const push_to_results = (result) => {
   [...]
   allResults.push({...})
   handler.setRows(allResults)
}

[vincjo]

I transfered the discussion to the proper repositery

[victorbmlabs]

Hello

When allResults changes, update rows:

<script>
    $: allResults, handler.setRows(allResults)
</script>

But the best way would be at the end of push_to_results function:

const push_to_results = (result) => {
   [...]
   allResults.push({...})
   handler.setRows(allResults)
}

Ah such a simple bug, thank you!