Performance

// What the demo below measures, which is what any grid can measure of
// itself: the pipeline is plain state, so timing it needs no hooks.
function measure(rows: number) {
  const data = makeRows(rows);

  const t0 = performance.now();
  grid.data = data;
  const read = grid.totalRows;          // forces the pipeline to run
  const load = performance.now() - t0;

  const t1 = performance.now();
  getSorting(grid)?.setSort([{ columnId: 'salary', direction: 'desc' }]);
  grid.preWindowNodes.length;           // forces the sort stage
  const sort = performance.now() - t1;

  const nodes = document.querySelectorAll('[data-dg-cell]').length;
  return { load, sort, nodes };
}

// A fixed row height is the fast path: an offset is arithmetic.
virtualization({ rowHeight: 40 });

// getRowHeight, including 'auto', switches the virtualizer to a Fenwick
// tree: O(log n) per offset lookup rather than a multiplication, plus a
// measurement pass for each 'auto' row.
virtualization({ rowHeight: 40, getRowHeight: (node) => node.row.tall ? 'auto' : 40 });

// The first keystroke is O(rows x visible columns) on the main thread: it
// reads every visible cell of every row and formats it, since the filter
// matches what a cell draws as well as the value behind it. At a million
// rows across four columns that is about 2.5 seconds of blocked UI.

// Every keystroke after it is one substring test per row against text
// already built, at about 180ms for the same million rows. The text is
// held against the row object, so it is dropped when the row is edited,
// when data is replaced, and when the visible columns or the language
// change - roughly 7MB per 100k rows while it is held.

// Narrow what it searches by hiding columns the user does not need,
{ id: 'notes', hidden: true }

// or skip it entirely and give those columns their own filters,
{ id: 'name', filter: 'text' }

// or move the work off the client.
createDataGrid<Person>({ columns, data, getRowId, rowModel: 'server' });

// Three hooks run per rendered cell or row. They are the ones worth
// keeping cheap, because everything else is amortised over the window.

cellClass: ({ value }) => (value > 100 ? 'text-success' : '')   // per cell
rowClass: (node) => (node.row.locked ? 'opacity-60' : '')       // per row
cellDecoration: ({ node, column }) => undefined                 // per cell

// A grid whose features define no cellDecoration skips that pass
// entirely, so a feature you do not register costs nothing at all.

// The pipeline itself is memoized per stage with $derived: a filter that
// did not change is not recomputed when the sort does.