Data Grid

Accessibility

• Uses grid, row and gridcell with aria-rowcount, so the full size is announced while only some rows render.
• aria-activedescendant follows the active cell.
• The status bar is a polite live region.

Motion

• Selection is instant, so typing stays fast.
• Editing lifts the cell to the surface.
• The pinned shadow fades in over 120 ms, only when scrolled.
• Status numbers tween. The bulk bar crossfades with a 4 px slide over 200 ms.
• Menus scale from 0.96 over 160 ms. With reduced motion, they fade.

Responsive behavior

• Renders only the rows near the viewport, so 10,000 rows scroll like ten.
• Scrolls in both directions with the row number and first column pinned.
• The toolbar drops Filter and Export on narrow widths.

Performance

• Only rows near the viewport render, in chunks of 8, so 10,000 rows scroll like ten.
• Scroll updates wait for an animation frame. Rows are placed with a transform.
• Sorting, stats, footer totals and the column template are each memoized.

• Import DataGrid and its types. Props: title, columns, rows, loading, defaultRange, defaultSelected, onCellChange, onDelete, onCopy, onExport.
• columns need key, label and width. numeric, format, aggregate and editable are optional.
• onCellChange and onDelete report changes. Reset reverts edits through onCellChange, and deleted rows stay deleted once onDelete is set. Edits show locally until you save them, and the demo saves nothing.