Grid options
new IntelligentGrid(target: string | HTMLElement, options: GridOptions)target is a CSS selector or an element. Its content is replaced by the grid.
| Option | Type | Default | Description |
|---|---|---|---|
columns |
ColumnDefinition[] |
required | See Columns |
data |
object[] |
[] |
Initial rows (copied) |
idField |
string | null |
null |
Field used as row id; otherwise SorlaDB generates _id |
sorla |
class or instance | window.sorla |
SorlaDB to use |
database |
string |
auto | SorlaDB database name |
locale |
string |
browser language | Formatting, parsing and UI language |
labels |
Record<string, string> |
{} |
Override UI texts, see i18n |
currency |
string |
from locale | Default ISO currency of currency columns (BRL for pt-BR) |
height |
number | string |
480 |
Max height of the scroll area (number = px) |
editable |
boolean |
false |
Default editable of every column |
cellFormulas |
boolean |
true |
Users may type =... in editable cells |
names |
Record<string, unknown> |
{} |
Named constants for formulas ({ TAX: 0.12 }) |
functions |
Record<string, FormulaFunction> |
{} |
Formula functions for this grid only |
sort |
{ mode } |
{ mode: 'modifier' } |
'modifier': Shift/Ctrl+click adds sort columns; 'toggle': every click adds |
initialSort |
SortEntry[] |
[] |
e.g. [{ field: 'due', dir: 'asc' }] |
initialFilters |
FilterModel |
{} |
See filter model |
initialQuery |
QueryNode | null |
null |
Advanced filter applied on load |
selection |
{ mode, checkbox, selectOnClick } | false |
{ mode: 'multiple', checkbox: true, selectOnClick: false } |
See Selection |
navbar |
NavbarOptions | false |
search, filters, columns, export | See Navbar |
statusBar |
boolean |
true |
"x of y rows · n selected" |
rowHeight |
number | null |
measured | Row height in px, see Virtualization |
overscan |
number |
8 |
Rows rendered above and below the viewport |
virtualColumns |
number |
40 |
Above this many columns, only the ones in view are rendered |
undoLimit |
number |
100 |
Undo steps kept, see undo and redo |
find |
boolean |
true |
Find / replace / go to bar on Ctrl+F, Ctrl+H, Ctrl+G |
groupBy |
string[] |
[] |
Group rows by these fields |
groupsCollapsed |
boolean |
false |
Groups start collapsed |
comments |
CellComment[] |
[] |
Cell comments on load |
renderChunk |
number |
Ignored (rows are virtualized) | |
append |
AppendOptions | null |
null |
Infinite scroll: { load } or { socket }, see Append mode |
rowClass |
(row) => string |
Extra class per row | |
rowFormats |
ConditionalFormat[] |
[] |
Conditional formats for whole rows |
exportOptions |
{ filename, sheetName } |
{ filename: 'export', sheetName: 'Sheet1' } |
Export defaults |
confirmDelete |
boolean |
true |
Ask before the navbar Delete and Discard changes buttons act |
confirm |
(request) => boolean | Promise<boolean> |
built-in modal | Replace the confirmation modal |
changeTracking |
boolean | { form, inputName, historyLimit } |
true |
See Change tracking |
on |
Record<string, handler> |
{} |
Event handlers registered before the first render (catches ready) |
Rendering model
Without append, all rows are in memory (in SorlaDB) and the grid appends renderChunk rows to
the DOM at a time as you scroll, so large data sets open instantly. Footers, exports and
getRows('filtered') always use every filtered row, not only the rendered ones.
Edited rows stay where they are, like in Excel. Call grid.refresh() to re-apply sort and filters after edits.