How to react to reactive state changes?

[ekkohnet]

Thank you for putting this project together!

I'm a bit unclear as to how datagrid should be reacting to reactive state, i.e. $state passed to DatagridCore. I had assumed it would update on state change by default (similar to other data table libraries), but it appears it doesn't? Or, at least, it isn't updating the displayed data.

I might well be doing something wrong.

I noticed the docs on Cache Manager. If I manually invalidate and recalculate then it does update to display new data, though I'm not sure on the implications of this as it seems counterintuitive. Do I need to be handling the cache myself for every state change?

If so, I fear I'm not understanding how I should be handling reactive state alongside the cache/filtering/sorting/etc.

My ultimate use case is to have a "live" data grid that will be updating frequently, around once every 1-2 seconds, as the underlying $state-backed array is deeply mutated off the back of a stream of incoming updates being sent from a back-end. Updates would include row additions/removals as well as cell updates within rows.

Any guidance would be greatly appreciated.

Here is the basic example I am starting with...

<script lang="ts">
  import { DatagridCore, accessorColumn, getCellContent, type ColumnDef } from "$lib/datagrid";

  interface Entry {
    entryId: string;
    contextName: string;
  }

  let data = $state([
    { entryId: "entry1", contextName: "Context 1" },
    { entryId: "entry2", contextName: "Context 2" },
  ]);
  const columns = [
    accessorColumn({ accessorKey: "entryId" }),
    accessorColumn({ accessorKey: "contextName" }),
  ] satisfies ColumnDef<Entry>[];

  const datagrid = new DatagridCore({ columns, data });
</script>

<div class="flex flex-col">
  <h1 class="m-auto dark:text-gray-600 font-light text-xl">Catalog</h1>

  <button
    class="m-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    onclick={() => {
      data.push({
        entryId: "entry3",
        contextName: "Context 3",
      });
    }}
  >
    Add Entry
  </button>
  
  <!-- THIS IS REACTIVE -->
  <div class="text-white">
    {#each data as entry (entry.entryId)}
      <div class="flex flex-row">
        <div class="text-gray-400">{entry.entryId}</div>
        <div class="text-gray-400">{entry.contextName}</div>
      </div>
    {/each}
  </div>
  <!-- -->

  <hr class="m-4" />

  <!-- THIS IS NOT REACTIVE -->
  <div class="datagrid-wrapper text-white w-full">
    <div class="datagrid">
      <div class="datagrid-header">
        <div class="datagrid-row flex">
          {#each datagrid.columns.getLeafColumns() as column (column.columnId)}
            <div class="datagrid-cell header-cell">
              {column.header}
            </div>
          {/each}
        </div>
      </div>
      <div class="datagrid-body">
        {#each datagrid.rows.getVisibleBasicRows() as row (row.original.entryId)}
          <div class="datagrid-row flex">
            {#each datagrid.columns.getLeafColumns() as column (column.columnId)}
              <div class="datagrid-cell">
                {getCellContent(column, row.original)}
              </div>
            {/each}
          </div>
        {/each}
      </div>
    </div>
  </div>
  <!-- -->

  <!-- HAVE TO USE THIS TO UPDATE THE DATAGRID -->
  <button
    class="m-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    onclick={() => {
      datagrid.cacheManager.invalidate("everything"); // Only 'everything' or 'filteredData' shows new data
      datagrid.processors.data.executeFullDataTransformation();
    }}
  >
    Clear Cache
  </button>
</div>

[ekkohnet]

Any guidance would be appreciated :)

[firer777]

@ekkohdev use $effect(() => {....}) and datagrid.originalState.data = data;
datagrid.cacheManager.invalidate('everything');
datagrid.refresh(() => {}, { recalculateAll: true }); in side $effect will run when data state changed