Row markers
The built-in marker modes (none, number, checkbox, both) and fully custom renderers.
The marker column is pinned left and sits outside the data index space. The built-in modes:
none, number, checkbox (drives the rows selection channel + a select-all header
checkbox), and both (row number, replaced by the checkbox on hover/selection). Or replace
the rendering entirely with your own marker/header components.
Pick "both" and hover a row: the row number is replaced by a checkbox while hovered or selected.
pnpm dlx shadcn@latest add @gridcn/data-grid-row-markers-demo
What's in the demo
rowMarkersselect: switchesnone/number/checkbox/bothand thereorderfamily livebothmode: hover a row: the number is replaced by the checkbox while hovered or selected
Custom markers
The same grid with renderMarker / renderMarkerHeader: a lucide icon marker reflecting the
row's selection state, and a select-all header button, while the marker cell's own
press/drag gestures still select rows.
The marker has three states: row selected (check), only cells of the row selected (minus), or neither (circle). Pressing or dragging a marker cell selects the row; a plain cell click selects that cell and clears the row selection (Ctrl+click adds a range without clearing it).
pnpm dlx shadcn@latest add @gridcn/data-grid-custom-markers-demo
Behavior reference
- Row markers: the modes and the selection-channel wiring
- Custom markers: the
renderMarker/renderMarkerHeadercontract
Related
- Selection & keyboard: what the checkbox channel drives