All examples

Virtualized data grid

A two-axis virtualized grid keeps 100,000 fictional records and wide tables bounded to the visible rows and columns, with keyboard navigation and RTL support.

Virtualized data grid

data-grid-virtual · data/grid-virtual

data grid
Props
  • columns
  • overscanColumns
  • overscanRows
  • rows
  • rowSize

Live example loads in an isolated same-origin preview frame.

Source (data-grid-virtual/entry.ts) 
import { defineExample } from '../registry.ts';

export const dataGridVirtualExample = defineExample({
  id: 'data-grid-virtual',
  title: 'Virtualized data grid',
  description:
    'A two-axis virtualized grid keeps 100,000 fictional records and wide tables bounded to the visible rows and columns, with keyboard navigation and RTL support.',
  tags: ['data', 'grid', 'virtualization', 'keyboard', 'rtl'],
  component: 'data/grid-virtual',
  props: ['rows', 'columns', 'rowSize', 'overscanRows', 'overscanColumns'],
  load: () => import('./VirtualDataGridDemo.svelte'),
});