Quick Start

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

  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>

<!-- pageSize turns on pagination; toolbar adds quick filter, chips,
     export menu, column chooser and density toggle -->
<DataGrid
  data={people}
  {columns}
  getRowId={(person) => String(person.id)}
  pageSize={6}
  toolbar
/>

<!-- true takes the defaults: multiple selection with a checkbox column -->
<DataGrid data={people} {columns} {getRowId} selection pageSize={6} toolbar />

<!-- or configure it -->
<DataGrid
  data={people}
  {columns}
  {getRowId}
  selection={{ mode: 'single', checkbox: true }}
/>

<!-- virtual replaces pagination. Give the grid a fixed height through
     class, because the viewport is what decides the visible window. -->
<DataGrid
  data={twoThousandPeople}
  {columns}
  {getRowId}
  virtual
  class="h-[400px]"
/>

<!-- with options -->
<DataGrid
  data={rows}
  {columns}
  {getRowId}
  virtual={{ rowHeight: 36, overscan: 8, columns: true }}
  class="h-[400px]"
/>

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

  const grid = createDataGrid<Person>({
    data: people,
    columns,
    getRowId: (person) => String(person.id),
    density: 'compact',
    features: [
      sorting({ nulls: 'last' }),
      filtering(),
      columnOps({ pin: false }),
      selection({ mode: 'multiple' }),
      pagination({ pageSize: 6 })
    ]
  });
</script>

<DataGrid {grid} toolbar />

import { getSelection, getSorting } from '@sv5ui/datagrid';

// Feature state, reactive because it is built from runes
getSelection(grid)?.selectedIds;
getSorting(grid)?.sort;

// Imperative methods every registered feature merges into grid.api
grid.api.setSort?.([{ columnId: 'name', direction: 'asc' }]);
grid.api.clearSelection?.();
grid.api.exportCsv?.({ filename: 'members.csv' });

// The kernel's own two, always present
const snapshot = grid.api.getState();
grid.api.setState(snapshot);

<script lang="ts">
  // A typed event bus. Every entry carries its own payload shape.
  let log = $state<{ id: number; name: string; payload: string }[]>([]);
  let id = 0;

  function logEvent(name: string, payload: unknown) {
    id += 1;
    log = [{ id, name, payload: JSON.stringify(payload) }, ...log].slice(0, 5);
  }

  grid.events.on('sortChanged', (payload) => logEvent('sortChanged', payload));
  grid.events.on('filterChanged', (payload) => logEvent('filterChanged', payload));
  grid.events.on('pageChanged', (payload) => logEvent('pageChanged', payload));
  grid.events.on('selectionChanged', (payload) => logEvent('selectionChanged', payload));
  grid.events.on('columnResized', (payload) => logEvent('columnResized', payload));
  grid.events.on('columnMoved', (payload) => logEvent('columnMoved', payload));
  grid.events.on('columnPinned', (payload) => logEvent('columnPinned', payload));
  grid.events.on('columnVisibilityChanged', (p) => logEvent('columnVisibilityChanged', p));

  // The rest of the map: rowsCopied, rowExpanded, rowPinnedChanged,
  // rowMoved, cellEdited, rowEdited.
</script>

<ul>
  {#each log as entry (entry.id)}
    <li><Badge label={entry.name} /> <code>{entry.payload}</code></li>
  {/each}
</ul>