Virtualization

<!-- virtual replaces pagination rather than joining it, and the viewport
     is what decides the window, so the grid needs a height. -->
<DataGrid data={rows} {columns} {getRowId} virtual class="h-[420px]" />

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

  // The same thing with the feature registered by hand
  const grid = createDataGrid<Person>({
    data: rows,
    columns,
    getRowId,
    features: [virtualization({ rowHeight: 40, overscan: 5 })]
  });
</script>

virtualization({
  // Fixed height, the fast path: an offset is arithmetic, not a lookup.
  rowHeight: 40,

  // Rows rendered above and below the visible window.
  overscan: 5,

  // Rows rendered before the viewport has been measured, which is what
  // SSR and the first paint show.
  initialRows: 20,

  // Renders only the columns intersecting the viewport, plus overscan.
  columns: true,
  // or: columns: { overscanPx: 200, initialColumns: 20 }
});

// A per-row height, or 'auto' to size to content. Either one switches the
// virtualizer to its variable-height layout, which keeps offsets in a
// Fenwick tree: O(log n) per lookup rather than the fixed path's arithmetic.
virtualization({
  rowHeight: 40,
  getRowHeight: (node) => (node.row.notes.length > 60 ? 'auto' : 40)
});

// An 'auto' row renders at rowHeight for one frame, is measured, and keeps
// that height. The measurement is keyed by row id, so it survives sorting.

// Column virtualization is off by default: it pays for itself once a grid
// is wide, and costs a little where it is not.
virtualization({ columns: true });

// The overscan is in pixels either side of the viewport, not in columns,
// because a column's width is what decides how much work it is.
virtualization({ columns: { overscanPx: 200 } });

// Before the viewport is measured there is nothing to window by, which is
// every server-rendered paint. initialColumns is what is drawn until then,
// the row axis's initialRows for the other axis.
virtualization({ columns: { initialColumns: 20 } });   // the default

import { getVirtualization } from '@sv5ui/datagrid';

// Both take a row index or a row id.
getVirtualization(grid)?.scrollToRow(500);      // puts the row at the top
getVirtualization(grid)?.ensureVisible('500');  // scrolls only if it is out of view

// Also on the flat api
grid.api.scrollToRow?.(500);
grid.api.ensureVisible?.(500);

// The rendered window itself
getVirtualization(grid)?.virtualizer.range;  // { start, end }