Minimap
A strip beside the scrollbar that marks selection, recent edits, issues and your own marks across every row.
The minimap is a thin strip beside the vertical scrollbar that stands for every displayed row. It shows where you are and what's happening out of view; click or drag it to scroll there.
<Grid rows={rows} columns={columns} minimap />Or at runtime: api.setOptions({ minimap: true }).
What it marks
| Mark | Where | Colour |
|---|---|---|
| The view window | the strip's height | an outlined, tinted band (theme accent) |
| Selection | left lane | the theme accent |
| Your marks | middle lane | your colour |
| Recent edits | right lane | amber, fading over 5 seconds |
| Validation issues | full width | red (errors), amber (warnings) |
Marks map content height onto the strip, so they line up with the view window even when rows differ in height. The strip is drawn on one canvas and only redraws when something it shows changed.
Your own marks
api.setMinimapMarks(marks) adds marks for anything row-shaped: search hits, bookmarks, rows a teammate touched.
It replaces the previous set.
const hits = rows.filter((row) => row.notes.includes(query)).map((row) => ({ rowId: row.id, color: '#f59e0b' }));
api.setMinimapMarks(hits);Restyle the built-in marks with --og-minimap-window, --og-minimap-selection, --og-minimap-change,
--og-minimap-error and --og-minimap-warning on the grid.
Last updated on