DataGrid for Svelte 5

<script lang="ts">
  import { DataGrid, type ColumnDef } from '@sv5ui/datagrid';

  interface Person {
    id: number;
    name: string;
    email: string;
    team: string;
    salary: number;
  }

  const people: Person[] = [/* ... */];

  const columns: ColumnDef<Person>[] = [
    { id: 'name', header: 'Name', sortable: true, filter: 'text', flex: 1 },
    { id: 'email', header: 'Email', sortable: true, filter: 'text', flex: 1.4 },
    { id: 'team', header: 'Team', sortable: true, filter: 'set', width: 120 },
    { id: 'salary', header: 'Salary', sortable: true, filter: 'number',
      align: 'right', width: 120, type: 'currency' }
  ];
</script>

<DataGrid
  data={people}
  {columns}
  getRowId={(person) => String(person.id)}
  pageSize={8}
  toolbar
/>

<script lang="ts">
  import {
    createDataGrid,
    DataGrid,
    columnOps,
    filtering,
    getSelection,
    getSorting,
    pagination,
    selection,
    sorting
  } from '@sv5ui/datagrid';

  // Only these five features are imported, so only these five are bundled.
  // Name the row type on createDataGrid and the factories follow from it.
  const grid = createDataGrid<Person>({
    data: people,
    columns,
    getRowId: (person) => String(person.id),
    features: [
      sorting(),
      filtering(),
      columnOps(),
      selection(),
      pagination({ pageSize: 5 })
    ]
  });

  // Plain derived values: no subscription, no store, no event handler
  let sort = $derived(
    getSorting(grid)
      ?.sort.map((entry) => `${entry.columnId} ${entry.direction}`)
      .join(', ') || 'none'
  );
</script>

<Badge label="{getSelection(grid)?.count ?? 0} selected" />
<Badge label="sort: {sort}" />

<Button
  label="Sort by salary"
  onclick={() => getSorting(grid)?.setSort([{ columnId: 'salary', direction: 'desc' }])}
/>
<Button label="Select every row" onclick={() => getSelection(grid)?.selectAll()} />

<DataGrid {grid} />

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

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

<!-- The same grid, assembled by hand -->
<Grid.Root {grid} class="space-y-4">
  <Grid.Toolbar>
    <Grid.QuickFilter placeholder="Search members" />
    <Grid.FilterChips />
    <div class="ms-auto flex gap-2">
      <Grid.ExportMenu filename="members.csv" />
      <Grid.ColumnChooser />
      <Grid.DensityToggle />
    </div>
  </Grid.Toolbar>

  <Grid.Viewport>
    <Grid.Header />
    <Grid.Body />
  </Grid.Viewport>

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

<script lang="ts">
  import { createDataGrid, DataGrid, filtering, getFiltering,
           pagination, sorting } from '@sv5ui/datagrid';

  // Every stage is a pure transform of RowNode[], inserted at a declared
  // order, so a stage never has to know what else is registered:
  //
  //   data -> filter (100) -> sort (200) -> group (300) -> flatten (400)
  //        -> pin-split (500) -> window (900) -> rendered rows
  //
  // Each link is memoized with $derived, so a stage whose input did not
  // change is not recomputed.
  const grid = createDataGrid<Person>({
    data: people,
    columns,
    getRowId,
    features: [sorting(), filtering(), pagination({ pageSize: 5 })]
  });

  // Page size belongs to the footer the grid already renders; only the
  // filter needs a control of its own, since this grid carries no toolbar.
  let query = $state('');

  // Every grid setter runs inside the library's mutator helper, so the state
  // it reads on its way out does not become a dependency of the caller.
  // Calling one straight from an effect is safe.
  $effect(() => {
    getFiltering(grid)?.setQuickFilter(query);
  });

  // The output is readable at any point along the chain, and each one is a
  // rune, so a derived value tracks it without a subscription.
  let stages = $derived([
    { label: 'sourceNodes', value: grid.sourceNodes.length, note: 'before filtering' },
    { label: 'preWindowNodes', value: grid.preWindowNodes.length, note: 'filtered and sorted' },
    { label: 'nodes', value: grid.nodes.length, note: 'on screen' },
    { label: 'totalRows', value: grid.totalRows, note: 'what the footer counts' }
  ]);
</script>

<Input bind:value={query} placeholder="Filter these rows" />

{#each stages as stage (stage.label)}
  <div class="rounded-lg border border-outline-variant p-3">
    <code>{stage.label}</code>
    <p class="text-xl font-semibold">{stage.value}</p>
    <p class="text-xs">{stage.note}</p>
  </div>
{/each}

<DataGrid {grid} />