Results grid

SQL results, virtualised in both directions.

Guidance

The results grid shows SQL output: often hundreds of columns and up to a million rows, virtualised in both directions with fixed-size cells. Every cell is mono (text-mono-dense), numbers are right-aligned and tabular, NULL is the word "NULL" in mm-text-3, booleans read true and false, and long strings end in an ellipsis. The row number gutter and the header, which gives each column's name and type on two lines, stay put while you scroll.

Select a cell, or a range with Shift and the arrow keys (or Shift+click, or a drag), and Ctrl+C (⌘C) copies it as tab-separated values that paste into a spreadsheet. Enter or a double-click opens the cell inspector with the full value, JSON pretty-printed, and a copy button; Escape closes it. The status line states rows, columns and run time, and a truncated result is marked with a warning icon and the word. A Table, CSV and JSON switch in the footer shows the same result as text, with Copy and Download beside it; the text is built in the browser, and cancelling mm-export skips the client-side download so the server can export.

Give rows as an array of arrays, or stream with getRow(i) and rowCount, calling refresh() as rows arrive.

Keyboard (https://www.w3.org/WAI/ARIA/apg/patterns/grid/): one tab stop. Arrow keys move, Home and End go to the row's first and last column, Ctrl+Home and Ctrl+End to the first and last cell, Page Up and Page Down move a screen. Shift with any of these extends the selection. On a header, Enter or F2 moves to the resize handle, where Left and Right resize and Escape returns.

Properties

Property	Attribute	Type	Default	Description
columns		ResultColumn[]	[]	Result columns: { name, type }.
rows		readonly (readonly unknown[])[]	[]	Result rows as arrays, in column order. Ignored when getRow is set.
getRow		((i: number) => readonly unknown[] | undefined) | undefined		Streaming source: returns row i, or undefined while it is still loading. Needs rowCount.
rowCount	row-count	number | undefined		Row count when streaming with getRow.
duration	duration	number | undefined		Query run time in milliseconds, for the status line.
truncated	truncated	boolean	false	The result was cut off at the row limit.
label	label	string	''	Accessible name for the grid. Defaults to "Query results".
filename	filename	string	'results'	File name (without extension) for exports.
noExport	no-export	boolean	false	Hides the CSV and JSON views.
view	view	'table' | 'csv' | 'json'	'table'	Shows the result as a grid, or as CSV or JSON text.

Methods

Method	Description
refresh()	Re-renders visible rows, e.g. after more streamed rows arrive.
focus()	Moves focus to the active cell.
selectionText()	The current selection as tab-separated values.
inspect()	Opens the cell inspector for a data cell (row and column 0-based).
closeInspector()	Closes the inspector and returns focus to the cell.

Events

Event	Detail	Description
mm-export	CustomEvent<ResultsGridExportDetail>	Download was activated in the CSV or JSON view. Cancelable: cancel it to skip the client-side download.
mm-view-change	CustomEvent<{ view: 'table' | 'csv' | 'json' }>	The view switch changed.
mm-copy	CustomEvent<ResultsGridCopyDetail>	The selection was copied as TSV.
mm-column-resize	CustomEvent<ResultsGridColumnResizeDetail>	A column was resized.
mm-inspect	CustomEvent<ResultsGridInspectDetail>	The cell inspector opened.

Slots

Slot	Description
actions	Extra footer actions beside the view switch.

CSS parts

Part	Description
base	The bordered surface.
scroller	The scroll container.
grid	The element with role="grid".
status	The status line.
inspector	The cell inspector panel.

CSS custom properties

Property	Description
--mm-results-grid-height	Height of the scrolling area. Defaults to 420px.

Examples

Every state of mm-results-grid in Storybook, with keyboard and screen reader tests.