Theming

<!-- ui overrides one grid, slot by slot. Classes are merged with the
     variant's own through tailwind-merge, so a conflicting utility wins
     rather than fighting. -->
<DataGrid
  {grid}
  ui={{
    viewport: 'rounded-xl border-primary/30',
    headerCell: 'uppercase tracking-wide text-primary',
    row: 'even:bg-surface-container-lowest',
    cell: 'font-mono'
  }}
/>

<!-- Density drives row height and cell padding through two CSS variables:
     --dg-row-h and --dg-cell-py.

       compact      2rem    0.25rem
       standard     2.5rem  0.5rem
       comfortable  3rem    0.75rem  -->

<DataGrid data={people} {columns} {getRowId} density="compact" />

<!-- On an instance, density is state you can set -->
<script lang="ts">
  const grid = createDataGrid<Person>({ data, columns, getRowId, density: 'comfortable' });
  grid.density = 'compact';
</script>

<!-- The toolbar's density toggle writes the same state -->
<Grid.DensityToggle />

// Both are pixels, and both follow the row height when left off.
const grid = createDataGrid<Person>({
  data,
  columns,
  getRowId,
  headerHeight: 56,       // the leaf header row
  groupHeaderHeight: 28   // each tier of header groups, not the lot
});

// State on the grid, like density, so either can change later.
grid.headerHeight = 40;
grid.groupHeaderHeight = undefined; // back to following the rows

// The shorthand form takes the same two props:
//   <DataGrid data={people} {columns} {getRowId} headerHeight={56} />

// What they write, on the grid's root element:
//   --dg-header-h        read by the headerCell slot
//   --dg-group-header-h  read by the groupCell slot

// Per row, passed to createDataGrid or to DataGrid in the shorthand form
createDataGrid<Person>({
  columns,
  data,
  getRowId,
  rowClass: (node) => (node.row.status === 'suspended' ? 'opacity-60' : '')
});

// Per cell, on the column that owns it
{
  id: 'salary',
  type: 'currency',
  cellClass: ({ value }) => (Number(value) > 120000 ? 'font-semibold text-success' : '')
}

// Both run per render, so keep them cheap: no allocation, no lookups.

// Body cells carry their absolute position within the filtered and sorted
// set, and rows carry their id. Both are public, and so is the header
// group attribute further down. Every other data-dg-* marker is internal.
//
//   <div data-dg-cell="rowIndex:colIndex">
//   <div data-dg-row-id="42">

// The two rows above the body use negative indices on the same attribute:
//
//   -1  the leaf header row
//   -2  the filter row, when filtering({ floatingRow: true }) draws one
//
// so a row index below zero is never a data row.

// A header group spans columns, so a column index cannot name one. Its
// cells carry their own attribute instead, counted from the topmost level:
//
//   <div data-dg-header-cell="level:firstColumn">

// Delegate from a wrapper rather than attaching a handler per cell:
function onPointerDown(event: PointerEvent) {
  const cell = (event.target as HTMLElement).closest('[data-dg-cell]');
  if (!cell) return;
  const [rowIndex, colIndex] = cell.getAttribute('data-dg-cell').split(':').map(Number);
  const rowId = cell.closest('[data-dg-row-id]')?.getAttribute('data-dg-row-id');
}