Grid options
Every option of createGrid: data, row ids, selection, editing, pagination, summary rows, live updates, conditional formats, the AI assistant, themes, fonts and language.
| Name | Type | Description |
|---|---|---|
columns | ColumnDef[] | Required. Column definitions. |
data | object[] | Rows. |
getRowId | (row) => string | Stable id; keeps selection across setData. |
rowSelection | 'single' | 'multiple' | Adds a checkbox column and click selection. |
rowHeight / headerHeight | number | Pixels. Default follows the font size (36 / 40 at 13px). |
theme | string | 'light', 'dark', 'board', 'erp', 'excel', 'classic' or your own. |
fontSize / fontFamily | number / string | Grid font. Row heights follow the size. |
locale | string | LocalePack | UI language, e.g. 'ko' or an imported pack. Default: the browser's language. |
sideBar | boolean | { open } | Dock the Columns panel on the right. |
summary | SummaryOptions | Summary rows. See Summary rows. |
rangeSelection | boolean | Excel-style cell ranges by drag, Shift+click, Shift+arrows, Ctrl+A. Default true. |
statusBar | boolean | Row counts plus count/sum/average/min/max of the selected cells. |
fillHandle | boolean | Drag the selection corner to fill editable cells. Default true. |
pinnedTopRows / pinnedBottomRows | Row[] | Rows fixed above or below the scrolling rows. |
findBar / wrapHeaderText | boolean | Ctrl+F find bar (default true); wrap all header labels. |
groupBy | string[] | Group rows by these column ids, in order. |
groupDefaultExpanded | number | Levels open at start: 0 none (default), n levels, -1 all. Also applies to tree data. |
groupPanel | boolean | Bar above the header where headers can be dropped to group. |
treeData | { getParentId(row), setParentId?, hasChildren?, loadChildren? } | Nest rows under their parent id (needs getRowId). setParentId lets rows be dragged to another parent; hasChildren + loadChildren fetch children from a server on first expand. |
detailRenderer / detailHeight / isRowMaster | (params) => Element | string / number / (row) => boolean | Expandable panel under a row (default height 240); limit which rows can expand. |
rowDrag | boolean | { group?, canDrop? } | Handle column for dragging rows into a new order (off while sorted, filtered or grouped). In trees the middle of a row drops inside it. Grids with the same group exchange rows; canDrop({ row, target, position, fromOtherGrid }) can refuse a target. |
pagination | boolean | { pageSize?, pageSizes? } | Show one page at a time with a pager (default 100 rows per page). |
datasource | { getRows({ start, end, sort, filters, quickFilter, advancedFilter, groupBy, groupKeys }) } | Load rows from your server in blocks; must resolve to { rows, total? }. With groupBy, levels above the rows answer one row per group, e.g. { status, count, qty }. |
blockSize / maxBlocks | number | Rows per request (100) and blocks kept in memory (100). |
sideBar | boolean | { open?, panels?: ('columns' | 'filters')[] } | Docked panels for columns and filters. |
pivot | { rows, columns?, values: { colId, aggFunc? }[], totals? } | Show the data as a pivot table. pivotPanel: true adds the Pivot side panel. |
autoRowHeight | boolean | Grow each row to fit its wrapped cells (wrapText columns); rowHeight is the minimum. |
direction | 'ltr' | 'rtl' | 'rtl' lays the grid out right to left (Arabic, Hebrew): first column on the right. |
cardView | boolean | number | Show rows as cards when the grid is narrower than this many px (true = 640). Phones: tap a focused cell to edit, long-press for the menu. |
isRowSelectable / headerCheckbox | (row) => boolean / boolean | Which rows can be checked (others show a disabled box); hide the select-all box with headerCheckbox: false. |
rowNumbers | boolean | { width?, header? } | A pinned column numbering data rows 1, 2, 3… (continues across pages). Click a number to select the row. |
filterRow | boolean | Boxes under the header that filter as you type: text contains, numbers >10, <=5, 10~20, dates >2026-01-01, a list for set columns. |
groupSelectsChildren | boolean | Tree data: checking a parent also checks its children. Group rows always have a checkbox for their rows. |
editType | 'cell' | 'row' | 'row': a row is edited as a whole — Tab stays in the row, Enter or leaving saves it, Escape puts it back (rowEditStart / rowEditStop). |
getRowHeight | (row) => number | undefined | A height for each row (a minimum with autoRowHeight). |
autoHeight | boolean | The grid grows with its rows instead of scrolling inside; best for up to a few hundred rows. |
density | 'compact' | 'normal' | 'comfortable' | Row spacing; a fixed rowHeight wins. Change it later with setDensity. |
flashCells | boolean | Cells changed by applyTransaction flash briefly (default true). |
flashDuration / asyncTransactionWait | number | How long changed cells flash (ms, default 1000; numbers flash green up and red down) and how long applyTransactionAsync collects updates (ms, default 50). |
conditionalFormats | ConditionalFormat[] | Rules that colour cells by value or formula, top / bottom, averages and duplicates, plus data bars, colour scales and icon sets. conditionalFormatMenu: false hides the column menu item. |
assistant | { url, headers?, sampleRows?, context?, suggestions? } | The AI assistant: requests go to your server, which answers with grid actions. |
noRowsOverlay / loadingOverlay | string | ({ filtered }) => string | HTMLElement | What to show when there are no rows (filtered: the filters hide them all) or while server rows load. |
overflowTooltip / advancedFilter | boolean | false turns off the full-text tooltip of cut-off cells / the "Advanced filter…" menu item. |
keymap | Record<string, action | false> | Remap or disable keys, e.g. { Enter: false, 'Ctrl+E': 'edit' }. |
contextMenu | false | (params) => items | false keeps the browser menu; a function customizes the right-click menu. |