Headless Core

import { createDataGrid, filtering, sorting } from '@sv5ui/datagrid';

// No component involved: this is state and a derived pipeline.
const grid = createDataGrid<Person>({
  columns,
  data: people,
  getRowId: (person) => String(person.id),
  features: [sorting(), filtering()]
});

// Reading it is reading runes, so a derived value tracks it
let count = $derived(grid.totalRows);
let firstOnScreen = $derived(grid.nodes[0]?.row.name);

<script lang="ts">
  // The core does not need the component layer at all. Here the same grid
  // drives a plain list: filtering, sorting and paging still work, and
  // nothing about the DOM comes from the package.
  const grid = createDataGrid<Person>({
    columns,
    data: people,
    getRowId,
    features: [sorting(), filtering(), pagination({ pageSize: 5 })]
  });
</script>

<input oninput={(e) => getFiltering(grid)?.setQuickFilter(e.currentTarget.value)} />

<ul>
  {#each grid.nodes as node (node.id)}
    <li>{node.row.name} - {node.row.team}</li>
  {/each}
</ul>

<button onclick={() => getPagination(grid)?.setPage(2)}>Page 2</button>

// Four points along the chain, each a rune
grid.sourceNodes;      // before filtering
grid.preWindowNodes;   // filtered and sorted, before paging or virtualizing
grid.nodes;            // exactly what is on screen
grid.totalRows;        // preWindowNodes.length

// A RowNode is the unit the pipeline moves
// { id, row, index, meta? }
for (const node of grid.preWindowNodes) {
  console.log(node.id, node.index, node.row.name);
}

<script lang="ts">
  import { Grid, createDataGrid } from '@sv5ui/datagrid';

  const grid = createDataGrid<Person>({ data, columns, getRowId, features });
</script>

<!-- Root sets the context every other part reads, so it wraps them all.
     Nothing else is mandatory: drop a part and it is simply not there. -->
<Grid.Root {grid} class="space-y-3">
  <Grid.Toolbar>
    <Grid.QuickFilter placeholder="Search" debounce={300} />
    <Grid.FilterChips />
    <div class="ms-auto flex gap-2">
      <Grid.ExportMenu filename="rows.csv" />
      <Grid.ColumnChooser />
      <Grid.DensityToggle />
    </div>
  </Grid.Toolbar>

  <Grid.ContextMenu>
    <Grid.Viewport class="h-[420px]">
      <Grid.Header />
      <Grid.Body emptyText="Nothing here" />
    </Grid.Viewport>
  </Grid.ContextMenu>

  <Grid.StatusBar />
  <Grid.Pagination pageSizes={[5, 10, 25]} />
</Grid.Root>

// The typed bus. on returns nothing; keep the handler if you need to stop.
grid.events.on('sortChanged', ({ sort }) => {});
grid.events.on('filterChanged', ({ filter }) => {});
grid.events.on('pageChanged', ({ page, pageSize }) => {});
grid.events.on('selectionChanged', ({ selectedIds }) => {});
grid.events.on('cellEdited', ({ rowId, columnId, oldValue, newValue }) => {});
grid.events.on('rowEdited', ({ rowId, changes }) => {});
grid.events.on('columnResized', ({ columnId, width }) => {});
grid.events.on('columnMoved', ({ columnId, toIndex }) => {});
grid.events.on('columnPinned', ({ columnId, side }) => {});
grid.events.on('columnVisibilityChanged', ({ columnId, hidden }) => {});
grid.events.on('rowsCopied', ({ count }) => {});
grid.events.on('rowExpanded', ({ id, expanded }) => {});
grid.events.on('rowPinnedChanged', ({ id, side }) => {});
grid.events.on('rowMoved', ({ id, from, to }) => {});