Positron Data Grid Pattern

Positron has a virtualized grid system built around an abstract DataGridInstance and a renderer component <PositronDataGrid />. The pattern is non-obvious from outside, and the wrong instinct is to build a React wrapper component that takes props and pushes them into the instance via useEffect. Don't. This skill exists so you don't make that mistake.

The core insight

A DataGridInstance subclass IS the data grid.

The instance owns:

• Items / data (or knows how to fetch it)
• The item renderer
• Layout (column widths, row heights, overrides, pinning)
• Selection, cursor, scroll position
• Outbound events (onDidUpdate, custom events from the subclass)

<PositronDataGrid instance={...} /> is a thin React renderer over any DataGridInstance subclass. It does not own state. It just observes the instance and paints.

The pattern