Jump to…

SlickGrid DataView Column Editors Formatters Plugins Controls Core

Options (118)Events (57)Grid and Dom Initialisation (13)Column Management, Headers and Footers (7)Column Management - Autosizing (12)Data Management and Editing (9)Data Management and Editing - Cell Switchers (6)Event Handling and Interactivity (1)Rendering and Layout Management (44)Scrolling and Virtualisation (15)Cell and Row Post-Processing and CSS Styling (7)Shared Utilities and Accessors (19)Navigation Helpers (17)

SlickGrid

Options 118

addNewRowCssClass

type string · default new-row

CSS class name used on newly added row

alwaysAllowHorizontalScroll

type boolean · default false

Defaults to false, which leads to always show an horizontal scrolling.

alwaysShowVerticalScroll

type boolean · default false

Defaults to false, which leads to always show a vertical scrolling. This is rather important to use when using the Grid Menu (hamburger)

asyncEditorLoadDelay

type number · default 100

Defaults to 100, which is the asynchronous editor loading delay

asyncEditorLoading

type boolean · default false

Defaults to false, which leads to load editor asynchronously (delayed)

asyncPostRenderDelay

type number · default 50

Defaults to 50, which is the delay before the asynchronous post renderer start execution

asyncPostRenderCleanupDelay

type number · default 40

Defaults to 40, which is the delay before the asynchronous post renderer start cleanup execution

auto

type boolean · default false

Undocumented legacy flag with no defined effect in the current grid. Do not rely on it.

nonce

type string · default

Added for CSP header because of dynamic css generation.

autoCommitEdit

type boolean · default false

Defaults to false, when enabled will try to commit the current edit without focusing on the next row. If a custom editor is implemented and the grid cannot auto commit, you must use this option to implement it yourself

autoEdit

type boolean · default true

Defaults to false, when enabled it will automatically open the inlined editor as soon as there is a focus on the cell (can be combined with "enableCellNavigation: true").

autoEditByKeypress

type boolean

Defaults to false, when enabled will automatically open the inlined editor as soon as user starts typing in an active cell (can be combined with "enableCellNavigation: true").

autoEditNewRow

type boolean · default true

Defaults to true, when enabled it will automatically open the editor when clicking on cell that has a defined editor. When using CellExternalCopyManager, this option could be useful to avoid opening the cell editor automatically on empty new row and we wish to paste our cell selection range.

autoHeight

type boolean

Defaults to false, which leads to automatically adjust the size (height) of the grid to display the entire content without any scrolling in the grid.

autosizeColsMode

type string · default GridAutosizeColsMode.LegacyOff

defaults to LegacyOff, Grid Autosize Columns Mode used when calling "autosizeColumns()" method

autosizeColPaddingPx

type number · default 4

defaults to 4, autosize column padding in pixel

autosizeTextAvgToMWidthRatio

type number · default 0.75

defaults to 0.75, autosize text average to minimum width ratio

cellFlashingCssClass

type string · default flashing

CSS class name used to simulate cell flashing

cellMenu

type CellMenuOption

Cell menu options (Action menu)

colAutosizeTreatAsLockedBelowWidth

type number · default 100

Defaults to 100px, maximum column width (px) below which a column may be treated as locked (not resized) during auto-sizing. Note that additional conditions must also be met: header text is not ignored, sizeToRemaining is false, and content size equals header width.

columnPicker

type ColumnPickerOption

Column Picker Plugin options (columnTitle, forceFitTitle, syncResizeTitle)

contextMenu

type ContextMenuOption

Context menu options (mouse right+click)

createFooterRow

type boolean · default false

Defaults to false, which leads to creating the footer row of the grid

createPreHeaderPanel

type boolean · default false

Default to false, which leads to creating an extra pre-header panel (on top of column header) for column grouping purposes

createTopHeaderPanel

type boolean · default false

Default to false, which leads to creating an extra top-header panel (on top of column header & pre-header) for column grouping purposes

customTooltip

type CustomTooltipOption

Custom Tooltip Options, the tooltip could be defined in any of the Column Definition or in the Grid Options, it will first try to find it in the Column that the user is hovering over or else (when not found) go and try to find it in the Grid Options

dataItemColumnValueExtractor

type null | ((item: any, columnDef: C) => any) · default null

Data item column value extractor (getter) that can be used by the Excel like copy buffer plugin

defaultColumnWidth

type number · default 80

Default column width, is set to 80 when null

defaultFormatter

type Formatter · default this.defaultFormatter

Default cell Formatter that will be used by the grid

devMode

type false | { ownerNodeIndex?: number; containerClientWidth?: number; }

Escape hatch geared towards testing Slickgrid in JSDOM based environments to circumvent the lack of stylesheet.ownerNode and clientWidth calculations

doPaging

type boolean · default true

Do we have paging enabled?

editable

type boolean · default false

Defaults to false, when enabled will give the possibility to edit cell values with inline editors.

const grid = new SlickGrid('#grid', data, columns, {
  editable: true,
  autoEdit: false,
});
// give each editable column an `editor`
columns[0].editor = Editors.Text;

editCommandHandler

type (item: any, column: C, command: EditCommand) => void

option to intercept edit commands and implement undo support.

editorFactory

type null | { getEditor: (col: C) => EditorConstructor; } · default null

Editor classes factory

editorLock

type SlickEditorLock · default GlobalEditorLock

a global singleton editor lock.

emulatePagingWhenScrolling

type boolean · default true

Do we want to emulate paging when we are scrolling?

enableAddRow

type boolean · default false

Defaults to false, which leads to give user possibility to add row to the grid

enableAsyncPostRender

type boolean · default false

Do we want to enable asynchronous (delayed) post rendering

enableAsyncPostRenderCleanup

type boolean · default false

Defaults to false, which leads to cleanup after the post render is finished executing

enableAutoTooltip

type boolean

Defaults to false, which leads to showing tooltip over cell & header values that are not shown completely (... ellipsis)

enableAutoSizeColumns

type boolean

Defaults to false, which will automatically resize the column headers whenever the grid size changes

autoScrollOnColumnResize

type boolean · default true

Defaults to true, automatically scrolls the viewport while resizing a column beyond its visible edge.

enableCellNavigation

type boolean · default true

Defaults to false, which will let user click on cell and navigate with arrow keys.

editorCellNavOnLRKeys

type boolean · default false

Defaults to false, editor cell navigation left/right keys

enableCellRowSpan

type boolean · default false

Do we want to enable cell rowspan? Note: this is an opt-in option because of the multiple row/column/cells looping that it has to do (which is at least an O^n3 but only for visible range)

enableVariableRowHeight

type boolean · default false

Defaults to false. When enabled, rows may have differing heights: each row's height comes from the `rowHeightProvider` grid option (whose default implementation reads `ItemMetadata.height` from the data provider), falling back to the default `rowHeight` whenever the provider returns `undefined`. When disabled (the default), every row uses `rowHeight`, the grid keeps its fixed-height fast path and `rowHeightProvider` is never called.

enableColumnReorder

type boolean | ColumnReorderFunction<C> · default true

Defaults to true, this option can be a boolean or a Column Reorder function. When provided as a boolean, it will permits the user to move an entire column from a position to another. We could also provide a Column Reorder function, there's mostly only 1 use for this which is the SlickDraggableGrouping plugin.

unorderableColumnCssClass

type string · default unorderable

Defaults to "unorderable", a CSS class name that will be added to the column classes when the column cannot be reordered.

enableHtmlRendering

type boolean · default true

Defaults to true, do we want to allow passing HTML string to cell/row rendering by using `innerHTML`. When this is enabled and input is a string, it will use `innerHTML = 'some html'` to render the input, however when disable it will use `textContent = 'some html'`. Note: for strict CSP, you would want to disable this option and convert all your custom Formatters to return an HTMLElement instead of a string

enableMouseWheelScrollHandler

type boolean · default true

Do we want to always enable the mousewheel scroll handler? In other words, do we want the mouse scrolling would work from anywhere. Typically we should only enable it when using a Frozen/Pinned grid and if it does detect it to be a frozen grid, then it will automatically enable the scroll handler if this flag was originally set to undefined (which it is by default unless the user specifically disabled it).

enableTextSelectionOnCells

type boolean · default false

Do we want to enable text selection on cells? Useful when user wants to do copy to clipboard.

excelCopyBufferOptions

type ExcelCopyBufferOption

Options for the ExcelCopyBuffer Extension

explicitInitialization

type boolean · default false

Do we want explicit grid initialization?

ffMaxSupportedCssHeight

type number · default 6000000

Firefox max supported CSS height

footerRowHeight

type number · default 25

Defaults to 25, which is the grid footer row panel height (only accepts an integer)

forceFitColumns

type boolean · default false

Do we want to force fit columns in the grid at all time?

forceSyncScrolling

type boolean · default false

Defaults to false, force synchronous scrolling without throttling the UI render when scrolling. Note: it might be risky to disable this option on large dataset, use at your own risk

formatterFactory

type { getFormatter: (col: C) => Formatter; } | null · default null

Formatter classes factory

frozenBottom

type boolean · default false

Defaults to false, do we want to freeze (pin) the bottom portion instead of the top

frozenColumn

type number · default -1

Number of column index(es) to freeze (pin) in the grid

frozenRow

type number · default -1

Number of row index(es) to freeze (pin) in the grid

frozenRightViewportMinWidth

type number · default 100

Defaults to 100, what is the minimum width to keep for the section on the right of a frozen grid? This basically fixes an issue that if the user expand any column on the left of the frozen (pinning) section and make it bigger than the viewport width, then the grid becomes unusable because the right section goes into a void/hidden area.

fullWidthRows

type boolean · default false

Defaults to false, which leads to have row(s) taking full width

gridMenu

type GridMenuOption

Grid Menu options (aka hamburger menu)

headerRowHeight

type number · default 25

Header row height in pixels (only accepts an integer). Header row is where the filters are.

leaveSpaceForNewRows

type boolean · default false

Do we leave space for new rows in the DOM visible buffer

logSanitizedHtml

type boolean · default false

Should we log the sanitized html?

maxPartialRowSpanRemap

type number · default 5000

Defaults to 5000, max number of rows that we'll consider doing a partial rowspan remapping. Anything else will be considered to require a full rowspan remap when necessary

maxSupportedCssHeight

type number · default 1000000000

Max supported CSS height (only accepts an integer)

minRowBuffer

type number · default 3

What is the minimum row buffer to use?

maxRowBuffer

type number

What is the maximum row buffer to use?

mixinDefaults

type boolean · default true

Use a mixin function when applying defaults to passed in option and columns objects, rather than creating a new object, so as not to break references

multiColumnSort

type boolean · default false

Defaults to false, which leads to be able to do multiple columns sorting (or single sort when false)

multiSelect

type boolean · default true

Defaults to true, which leads to be able to do multiple selection

numberedMultiColumnSort

type boolean · default false

Defaults to true, which will display numbers indicating column sort precedence are displayed in the columns when multiple columns selected

preHeaderPanelHeight

type number · default 25

Extra pre-header panel height (on top of column header, only accepts an integer)

preHeaderPanelWidth

type number | string · default auto

Defaults to "auto", extra pre-header panel (on top of column header) width, it could be a number (pixels) or a string ("100%" or "auto")

topHeaderPanelHeight

type number · default 25

Extra top-header panel height (on top of column header & pre-header, only accepts an integer)

topHeaderPanelWidth

type number | string · default auto

Defaults to "auto", extra top-header panel (on top of column header & pre-header) width, it could be a number (pixels) or a string ("100%" or "auto")

preserveCopiedSelectionOnPaste

type boolean · default false

Do we want to preserve copied selection on paste?

preventDragFromKeys

type Array<'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'> · default ['ctrlKey', 'metaKey']

Defaults to `['ctrlKey', 'metaKey']`, list of keys that when pressed will prevent Draggable events from triggering (e.g. prevent onDrag when Ctrl key is pressed while dragging)

rowHeight

type number · default 25

Grid row height in pixels (only accepts an integer). Cell value row height.

rowHeightProvider

type (grid: SlickGridModel, row: number, item: any) => number | undefined · default (grid: SlickGridModel, row: number) => grid.getItemMetadaWhenExists(row)?.height

The single source of row heights, only called when `enableVariableRowHeight` is on. Receives the grid instance (giving access to any grid state), the row index, and the row's data item. Returns the height (integer) in pixels of that row, or `undefined` to use the default `rowHeight`. The default implementation reads `ItemMetadata.height` from the data provider's `getItemMetadata(row)`, so metadata-driven heights work without configuring this option. Supplying your own function fully replaces the default - item metadata is then no longer consulted (no per-row fallback between the two sources). Heights are cached in a prefix-sum index that is rebuilt whenever the row count changes, rows are invalidated, or `grid.invalidateRowHeights()` is called; the callback is called once per row per rebuild, so it must be fast (a simple lookup or calculation - no DOM access). When heights change without a row count change, call `grid.invalidateRowHeights()`.

rowHighlightCssClass

type string · default highlight-animate

Defaults to "highlight-animate", a CSS class name used to simulate row highlight with an optional duration (e.g. after insert). Note: make sure that the duration is always lower than the duration defined in the CSS/SASS variable `$alpine-row-highlight-fade-animation`. Also note that the highlight is temporary and will also disappear as soon as the user starts scrolling or a `render()` is being called

rowHighlightDuration

type number · default 400

Defaults to 400, duration to show the row highlight (e.g. after CRUD executions)

autoHeaderHeight

type boolean · default false

Defaults to false, when enabled the header row will automatically resize its height to fit multi-line column titles

rtl

type boolean · default false

Defaults to false, sets the grid direction to RTL (Right-to-Left) for proper rendering of RTL languages

rowTopOffsetRenderType

type 'top' | 'transform' · default top

Defaults to "top", what CSS style to we want to use to render each row top offset (we can use "top" or "transform"). For example, with a default `rowHeight: 22`, the 2nd row will have a `top` offset of 44px and by default have a CSS style of `top: 44px`. NOTE: for perf reasons, the "transform" might become the default in our future major version.

sanitizer

type (dirtyHtml: string) => string · default undefined

Optional sanitizer function to use for sanitizing data to avoid XSS attacks

scrollRenderThrottling

type number · default 10

Defaults to 10(ms), render throttling when using virtual scroll on large dataset

selectedCellCssClass

type string · default selected

CSS class name used when cell is selected

showColumnHeader

type boolean · default true

Do we want to show column header?

showCellSelection

type boolean · default true

Do we want to show cell selection?

showFooterRow

type boolean · default false

Do we want to show the footer row?

showHeaderRow

type boolean · default false

Do we want to show header row?

showPreHeaderPanel

type boolean · default false

Do we want to show the extra pre-header panel (on top of column header) for column grouping purposes

showTopHeaderPanel

type boolean · default false

Do we want to show the extra top-header panel (on top of column header & pre-header) for column grouping purposes

showTopPanel

type boolean · default false

Do we want to show top panel row?

sortColNumberInSeparateSpan

type boolean · default false

Defaults to true, which leads to render a separate span for the number and styles it with css class <i>slick-sort-indicator-numbered</i>

shadowRoot

type ShadowRoot · default undefined

Defaults to undefined. If we are inside a Shadow DOM tree, this must be the Shadow root of the tree

suppressActiveCellChangeOnEdit

type boolean · default false

Defaults to false, which leads to suppress the cell from becoming active when cell as an editor and is clicked. This flag was originally enabled to work properly with (Row Selections & Inline Editors) features but it caused problem when also used with CellExternalCopyManager, however this flag shouldn't be need anymore when editing & using all 3 features and the flag's default is now disabled (false) but user can still change it if needed.

suppressCssChangesOnHiddenInit

type boolean · default false

Defaults to false, do we want to suppress CSS changes when onHiddenInit event is triggered

syncColumnCellResize

type boolean

Defaults to false, when set to True will sync the column cell resize & apply the column width

skipFreezeColumnValidation

type boolean

When set to true, it will skip the validation check to make sure frozen columns are not wider than the grid visible canvas width

throwWhenFrozenNotAllViewable deprecated

type boolean · default false

Deprecated. Handle a frozen column wider than the viewport with `invalidColumnFreezeWidthCallback` / `invalidColumnFreezeWidthMessage` instead.

invalidColumnFreezePickerMessage

type string · default '[SlickGrid] Action not allowed and aborted, you need to have at least one or more column on the right section of the column freeze/pining. ' + 'You could alternatively "Unfreeze all the columns" before trying again.'

Message to show when the frozen column is invalid and `invalidColumnFreezeWidthCallbackPicker` is enabled

invalidColumnFreezePickerCallback

type (error: string) => void · default (error) => alert(error)

Defaults to `alert(error)`, which will trigger when the user tries to uncheck too many columns via ColumnPicker/GridMenu. We need to have 1 or more columns visible on the right side of the frozen column.

invalidColumnFreezeWidthMessage

type string · default '[SlickGrid] You are trying to freeze/pin more columns than the grid can support. ' + 'Make sure to have less columns pinned (on the left) than the actual visible grid width.'

Message to show when the frozen column width is invalid and `invalidColumnFreezeWidthCallbackWidth` or `throwWhenFrozenNotAllViewable` is enabled

invalidColumnFreezeWidthCallback

type (error: string) => void · default (error) => alert(error)

Defaults to `alert(error)`, which will trigger when the user tries to set a `frozenColumn` that is wider than the visible grid viewport width in the browser. We can't freeze wider than the viewport because the right canvas will never be visible and since the left canvas is never scrollable this would break the UX.

topPanelHeight

type number · default 25

What is the top panel height in pixels (only accepts an integer)

tristateMultiColumnSort

type boolean · default false

Defaults to false, when set to True will lead to multiple columns sorting without the need to hold or do shift-click to execute a multiple sort.

viewportClass

type string · default undefined

Defaults to null, which is the default Viewport CSS class name

viewportSwitchToScrollModeWidthPercent

type number · default undefined

Viewport switch to scroll model with percentage

viewportMinWidthPx

type number · default undefined

Viewport min width in pixel

viewportMaxWidthPx

type number · default undefined

Viewport max width in pixel

columnPickerTitle deprecated

type string

Deprecated. Set the title through the `columnPicker` option object instead: `columnPicker: { columnTitle: '…' }`.

forceFitTitle deprecated

type string

Deprecated. Use `columnPicker: { forceFitTitle: '…' }` instead.

syncResizeTitle deprecated

type string

Deprecated. Use `columnPicker: { syncResizeTitle: '…' }` instead.

Events 57

onActiveCellChanged event

type OnActiveCellChangedEventArgs

{ grid: SlickGrid; cell: number; row: number }

Fires from `setActiveCellInternal()` after the active cell moves to a new cell or clears, unless the caller suppresses it. The event carries the new active cell, which can be null.

onActiveCellPositionChanged event

type { grid: SlickGrid; }

Fires from `handleActiveCellPositionChange()` when the active cell's on-screen position changes, such as after a scroll or resize. The grid then repositions any open editor.

onAddNewRow event

type OnAddNewRowEventArgs

{ grid: SlickGrid; item: any; column: Column }

Fires when the user commits an edit on the extra add-new row below the data. The event carries the new item and its column so a handler can add it to the data.

onAfterSetColumns event

type OnAfterSetColumnsEventArgs

{ grid: SlickGrid; newColumns: Column[] }

Fires from `setColumns()` after the new columns are applied and the headers and rows are rebuilt.

onAutosizeColumns event

type OnAutosizeColumnsEventArgs

{ grid: SlickGrid; columns: Column[] }

Fires from `reRenderColumns()` after the grid reapplies the column header widths.

onBeforeAppendCell event

type OnBeforeAppendCellEventArgs

{ grid: SlickGrid; row: number; cell: number; value: any; dataContext: any }

Fires as the grid builds each cell during rendering, before it adds the cell to its row. If a handler returns a string, the grid adds it as extra CSS classes on the cell.

onBeforeCellEditorDestroy event

type OnBeforeCellEditorDestroyEventArgs

{ grid: SlickGrid; editor: Editor }

Fires from `makeActiveCellNormal()` just before the grid destroys the current cell editor, while that editor still exists.

onBeforeColumnsResize event

type OnBeforeColumnsResizeEventArgs

{ grid: SlickGrid; triggeredByColumn: string }

Fires when the user releases a column resize handle, before the grid finalizes the widths and re-renders. If a handler returns true, the grid reapplies the header widths at once.

onBeforeDestroy event

type { grid: SlickGrid; }

Fires from `destroy()` after the grid cancels the current edit and unbinds events, but before it unregisters plugins and empties the container.

onBeforeEditCell event

type OnBeforeEditCellEventArgs

{ grid: SlickGrid; row?: number; cell?: number; item: any; column: Column; target?: 'grid' | 'composite'; compositeEditorOptions?: CompositeEditorOption }

Fires from `makeActiveCellEditable()` before the grid puts the active cell into edit mode. Cancelable: returning false stops the cell from entering edit mode.

onBeforeFooterRowCellDestroy event

type OnBeforeFooterRowCellDestroyEventArgs

{ grid: SlickGrid; node: HTMLElement; column: Column }

Fires from `createColumnFooter()` for each existing footer-row cell, before the grid clears and rebuilds the footer row.

onBeforeHeaderCellDestroy event

type OnBeforeHeaderCellDestroyEventArgs

{ grid: SlickGrid; node: HTMLElement; column: Column }

Fires for each existing header cell before the grid clears it, from `createColumnHeaders()` when the headers rebuild and from `updateColumnHeader()` when one header's content changes.

onBeforeHeaderRowCellDestroy event

type OnBeforeHeaderRowCellDestroyEventArgs

{ grid: SlickGrid; node: HTMLElement; column: Column }

Fires from `createColumnHeaders()` for each existing header-row cell, before the grid clears and rebuilds the header row.

onBeforeRemoveCachedRow event

type { row: number; grid: SlickGrid }

Fires from `removeRowFromCache()` before the grid removes a rendered row's nodes from the DOM.

onBeforeSetColumns event

type OnBeforeSetColumnsEventArgs

{ grid: SlickGrid; previousColumns: Column[]; newColumns: Column[] }

Fires from `setColumns()` before the new column definitions replace the current ones. The event carries both the previous and the new columns.

onBeforeSort event

type SingleColumnSort | MultiColumnSort

{ columnId: string | number; sortAsc: boolean; sortCol?: Column; grid?: SlickGrid; multiColumnSort?: false; previousSortColumns?: ColumnSort[] } | { grid: SlickGrid; multiColumnSort: true; sortCols: ColumnSort[]; previousSortColumns?: ColumnSort[] }

Fires when the user clicks a sortable column header, before the grid applies the new sort. Cancelable: returning false stops the sort and prevents `onSort`.

onBeforeUpdateColumns event

type OnColumnsEventArgs

{ grid: SlickGrid; columns: Column[] }

Fires from `updateColumns()` before the grid reapplies column properties without changing the column list.

onAfterUpdateColumns event

type OnColumnsEventArgs

{ grid: SlickGrid; columns: Column[] }

Fires from `updateColumns()` after the grid reapplies column properties, headers, and CSS without changing the column list.

onCellChange event

type OnCellChangeEventArgs

{ grid: SlickGrid; row: number; cell: number; item: any; column: Column }

Fires after a cell edit executes or undoes and the grid updates the row. The event's command field is `execute` or `undo`.

onCellCssStylesChanged event

type OnCellCssStylesChangedEventArgs

{ grid: SlickGrid; key: string; hash: CssStyleHash }

Fires from `addCellCssStyles()`, `removeCellCssStyles()`, and `setCellCssStyles()` after a keyed set of cell CSS classes is added, removed, or changed. On removal the event's hash is null.

onClick event

type OnClickEventArgs

{ grid: SlickGrid; row: number; cell: number }

Fires when the user clicks a cell, before the grid activates it. Cancelable: a handler that stops immediate propagation prevents the cell from becoming active.

onColumnsReordered event

type OnColumnsReorderedEventArgs

{ grid: SlickGrid; impactedColumns: Column[]; previousColumnOrder: Array<string | number> }

Fires from the header drag handler after the user reorders columns and `setColumns()` applies the new order.

onColumnsDrag event

type OnColumnsDragEventArgs

{ grid: SlickGrid; triggeredByColumn: string; resizeHandle: HTMLDivElement }

Fires repeatedly while the user drags a column resize handle, as the grid adjusts the width during the drag.

onColumnsResized event

type OnColumnsResizedEventArgs

{ grid: SlickGrid; triggeredByColumn: string }

Fires from the resize handler after the user finishes dragging a column resize handle and the grid commits the new widths and re-renders.

onColumnsResizeDblClick event

type OnColumnsResizeDblClickEventArgs

{ grid: SlickGrid; triggeredByColumn: string }

Fires when the user double-clicks a column resize handle. The event carries the affected column id.

onCompositeEditorChange event

type OnCompositeEditorChangeEventArgs

{ grid: SlickGrid; row?: number; cell?: number; item: any; column: Column; formValues: any; editors: { [columnId: string]: Editor; }; triggeredBy?: 'user' | 'system' }

Fires from a built-in editor when the user changes its input while the editor runs inside a composite editor. The grid applies the new value to the composite form values before the event fires.

onContextMenu event

type MenuCommandItemCallbackArgs

{ cell?: number; row?: number; grid: SlickGrid; column: Column<T>; dataContext?: T; command: string; item: MenuCommandItem; value?: any }

Fires when the user opens the context menu on a cell that is not being edited.

onDrag event

type DragRowMove

{ available: any[]; canMove: boolean; clonedSlickRow: HTMLElement; deltaX: number; deltaY: number; drag: HTMLElement; drop: any[]; grid: SlickGrid; guide: HTMLElement; insertBefore: number; offsetX: number; offsetY: number; originalX: number; originalY: number; proxy: HTMLElement; selectionProxy: HTMLElement; target: HTMLElement; selectedRows: number[]; startX: number; startY: number; range: DragRange; matchClassTag: string }

Fires repeatedly while the user drags across the grid canvas, during a drag that started on the grid.

onDblClick event

type OnDblClickEventArgs

{ grid: SlickGrid; row: number; cell: number }

Fires when the user double-clicks a cell, before the grid starts editing. If a handler calls preventDefault, the grid does not enter edit mode.

onDragInit event

type DragRowMove

Fires when a drag starts on an existing, selectable cell. Unless a handler stops immediate propagation to claim the drag, the grid cancels it.

onDragStart event

type DragRowMove

Fires when a drag begins on a valid cell, after any active edit is committed. Unless a handler stops immediate propagation to claim the drag, the grid cancels it.

onDragEnd event

type DragRowMove

Fires when a drag operation completes.

onFooterClick event

type OnFooterClickEventArgs

{ grid: SlickGrid; column: Column }

Fires when the user clicks a footer-row cell.

onFooterContextMenu event

type OnFooterContextMenuEventArgs

{ grid: SlickGrid; column: Column }

Fires when the user right-clicks a footer-row cell.

onFooterRowCellRendered event

type OnFooterRowCellRenderedEventArgs

{ grid: SlickGrid; node: HTMLDivElement; column: Column }

Fires after a footer-row cell is built, when the `createFooterRow` option is enabled.

onHeaderCellRendered event

type OnHeaderCellRenderedEventArgs

{ grid: SlickGrid; node: HTMLDivElement; column: Column }

Fires after a column header cell is built or refreshed, both when all headers are created and when `updateColumnHeader()` updates one.

onHeaderClick event

type OnHeaderClickEventArgs

{ grid: SlickGrid; column: Column }

Fires when the user clicks a column header, unless a column resize is in progress.

onHeaderContextMenu event

type OnHeaderContextMenuEventArgs

{ grid: SlickGrid; column: Column }

Fires when the user right-clicks a column header.

onHeaderMouseEnter event

type OnHeaderMouseEventArgs

{ grid: SlickGrid; column: Column }

Fires when the pointer enters a column header cell.

onHeaderMouseLeave event

type OnHeaderMouseEventArgs

{ grid: SlickGrid; column: Column }

Fires when the pointer leaves a column header cell.

onHeaderRowCellRendered event

type OnHeaderRowCellRenderedEventArgs

{ grid: SlickGrid; node: HTMLDivElement; column: Column }

Fires after a header-row cell is built, when the `showHeaderRow` panel is enabled.

onHeaderRowMouseEnter event

type OnHeaderMouseEventArgs

{ grid: SlickGrid; column: Column }

Fires when the pointer enters a header-row cell.

onHeaderRowMouseLeave event

type OnHeaderMouseEventArgs

{ grid: SlickGrid; column: Column }

Fires when the pointer leaves a header-row cell.

onPreHeaderContextMenu event

type OnPreHeaderContextMenuEventArgs

{ grid: SlickGrid; node: HTMLElement }

Fires when the user right-clicks the pre-header panel.

onPreHeaderClick event

type OnPreHeaderClickEventArgs

{ grid: SlickGrid; node: HTMLElement }

Fires when the user clicks the pre-header panel, unless a column resize is in progress.

onKeyDown event

type OnKeyDownEventArgs

{ grid: SlickGrid; row: number; cell: number }

Fires when a key is pressed while the grid has an active cell, before the grid's own navigation and edit keys. A handler that stops immediate propagation prevents the built-in key handling.

onMouseEnter event

type OnHeaderMouseEventArgs

{ grid: SlickGrid; column: Column }

Fires when the pointer moves onto a cell.

onMouseLeave event

type OnHeaderMouseEventArgs

{ grid: SlickGrid; column: Column }

Fires when the pointer moves off a cell.

onRendered event

type OnRenderedEventArgs

{ grid: SlickGrid; startRow: number; endRow: number }

Fires from `render()` after the visible rows are rendered; the args give the first and last rendered row.

onScroll event

type OnScrollEventArgs

{ grid: SlickGrid; scrollLeft: number; scrollTop: number; cell: number; row: number }

Fires when the grid viewport scrolls; the args' `triggeredBy` names the scroll source (mousewheel, scroll, or system).

onSelectedRowsChanged event

type OnSelectedRowsChangedEventArgs

{ grid: SlickGrid; rows: number[]; previousSelectedRows: number[]; changedSelectedRows: number[]; changedUnselectedRows: number[]; caller: string }

Fires when the selection model changes which rows are selected. The args include the caller and the added and removed rows.

onSetOptions event

type OnSetOptionsEventArgs

{ grid: SlickGrid; optionsBefore: GridOption; optionsAfter: GridOption }

Fires from `setOptions()` after the new options are merged and before the grid recalibrates; the args carry the options before and after.

onActivateChangedOptions event

type OnActivateChangedOptionsEventArgs

{ grid: SlickGrid; options: GridOption }

Fires from `activateChangedOptions()` when options mutated in place are activated, before the grid recalibrates.

onSort event

type SingleColumnSort | MultiColumnSort

Fires when the user clicks a sortable column header and the sort is applied, after `onBeforeSort` is not cancelled.

grid.onSort.subscribe((e, args) => {
  const cols = args.sortCols ?? [{ sortCol: args.sortCol, sortAsc: args.sortAsc }];
  dataView.sort((a, b) => {
    for (const { sortCol, sortAsc } of cols) {
      const dir = sortAsc ? 1 : -1;
      const x = a[sortCol.field], y = b[sortCol.field];
      if (x !== y) return (x > y ? 1 : -1) * dir;
    }
    return 0;
  });
});

onValidationError event

type OnValidationErrorEventArgs

{ grid: SlickGrid; row: number; cell: number; validationResults: EditorValidationResult; column: Column; editor: Editor; cellNode: HTMLDivElement }

Fires when a cell editor's changed value fails validation on commit. The edit is not applied and focus stays in the editor.

onViewportChanged event

type { grid: SlickGrid; }

Fires when scrolling changes the visible row range, from `scrollTo()` and the internal scroll handler.

onDragReplaceCells event

type OnDragReplaceCellsEventArgs

{ grid: SlickGrid; prevSelectedRange: SlickRange; selectedRange: SlickRange; copyToRange: SlickCopyRange }

Fires when a replace-mode cell selection grows as the user drags the replace handle; the args give the previous and new range.

Grid and Dom Initialisation 13

init

init()

Initializes the grid.

cacheCssForHiddenInit

cacheCssForHiddenInit()

Finds all container ancestors/parents (including the grid container itself) that are hidden (i.e. have display:none) and temporarily applies visible CSS properties (absolute positioning, hidden visibility, block display) so that dimensions can be measured correctly. It stores the original CSS properties in an internal array for later restoration. Related to issue: https://github.com/6pac/SlickGrid/issues/568

restoreCssFromHiddenInit

restoreCssFromHiddenInit(): void

Restores the original CSS properties for the container and its hidden ancestors that were modified by cacheCssForHiddenInit. This ensures that after initial measurements the DOM elements revert to their original style settings.

returns void

registerPlugin

registerPlugin(plugin: T)

Registers an external plugin to the grid’s internal plugin list. Once added, it immediately initialises the plugin by calling its init() method with the grid instance.

You can also attach a plugin by constructing it with the grid. registerPlugin is the explicit form and pairs with unregisterPlugin.

import { SlickCellMenu } from 'slickgrid';
grid.registerPlugin(new SlickCellMenu({ /* options */ }));

Parameter	Type	Description
`plugin`	`T`	- The plugin instance to be registered.

unregisterPlugin

unregisterPlugin(plugin: SlickPlugin)

Unregister (destroy) an external Plugin. Searches for the specified plugin in the grid’s plugin list. When found, it calls the plugin’s destroy() method and removes the plugin from the list, thereby unregistering it from the grid.

Parameter	Type	Description
`plugin`	`SlickPlugin`	- The plugin instance to be registered.

destroy

destroy(shouldDestroyAllElements?: boolean)

Destroy (dispose) of SlickGrid Unbinds all event handlers, cancels any active cell edits, triggers the onBeforeDestroy event, unregisters and destroys plugins, destroys sortable and other interaction instances, unbinds ancestor scroll events, removes CSS rules, unbinds events from all key DOM elements (canvas, viewports, header, footer, etc.), empties the grid container, removes the grid’s uid class, and clears all timers. Optionally, if shouldDestroyAllElements is true, calls destroyAllElements to nullify all DOM references.

Parameter	Type	Description
`shouldDestroyAllElements?`	`boolean`	- do we want to destroy (nullify) all DOM elements as well? This help in avoiding mem leaks

getOptions

getOptions(): O

Returns an object containing all of the Grid options set on the grid. See a list of Grid Options here.

returns O

getFrozenColumnId

getFrozenColumnId(): string | number | null

Get the Column ID of the currently frozen column or `null` when not frozen

returns string | number | null

setOptions

setOptions(newOptions: Partial<O>, suppressRender?: boolean, suppressColumnSet?: boolean, suppressSetOverflow?: boolean): void

Extends grid options with a given hash. If an there is an active edit, the grid will attempt to commit the changes and only continue if the attempt succeeds.

Parameter	Type	Description
`newOptions`	`Partial<O>`
`suppressRender?`	`boolean`	- do we want to supress the grid re-rendering? (defaults to false)
`suppressColumnSet?`	`boolean`	- do we want to supress the columns set, via "setColumns()" method? (defaults to false)
`suppressSetOverflow?`	`boolean`	- do we want to suppress the call to `setOverflow`

returns void

activateChangedOptions

activateChangedOptions(suppressRender?: boolean, suppressColumnSet?: boolean, suppressSetOverflow?: boolean): void

If option.mixinDefaults is true then external code maintains a reference to the options object. In this case there is no need to call setOptions() - changes can be made directly to the object. However setOptions() also performs some recalibration of the grid in reaction to changed options. activateChangedOptions call the same recalibration routines as setOptions() would have.

Parameter	Type	Description
`suppressRender?`	`boolean`	- do we want to supress the grid re-rendering? (defaults to false)
`suppressColumnSet?`	`boolean`	- do we want to supress the columns set, via "setColumns()" method? (defaults to false)
`suppressSetOverflow?`	`boolean`	- do we want to suppress the call to `setOverflow`

returns void

validateAndEnforceOptions

validateAndEnforceOptions(): void

Ensures consistency in option setting, by thastIF autoHeight IS enabled, leaveSpaceForNewRows is set to FALSE. And, if forceFitColumns is True, then autosizeColsMode is set to LegacyForceFit.

returns void

setSelectionModel

setSelectionModel(model: SelectionModel)

Unregisters a current selection model and registers a new one. See the definition of SelectionModel for more information.

Parameter	Type	Description
`model`	`SelectionModel`

getSelectionModel

getSelectionModel()

Returns the current SelectionModel. See here for more information about SelectionModels.

Column Management, Headers and Footers 7

updateColumnHeader

updateColumnHeader(columnId: number | string, title?: string | HTMLElement | DocumentFragment, toolTip?: string)

Updates an existing column definition and a corresponding header DOM element with the new title and tooltip.

Parameter	Type	Description
`columnId`	`number \| string`	Column id.
`title?`	`string \| HTMLElement \| DocumentFragment`	New column name.
`toolTip?`	`string`	New column tooltip.

getHeader

getHeader(columnDef: C)

Get the Header DOM element

Parameter	Type	Description
`columnDef`	`C`	- column definition

getHeaderColumn

getHeaderColumn(columnIdOrIdx: number | string)

Get a specific Header Column DOM element by its column Id or index

Parameter	Type	Description
`columnIdOrIdx`	`number \| string`	- column Id or index

getHeaderRow

getHeaderRow()

Get the Header Row DOM element

getFooterRow

getFooterRow()

Get the Footer DOM element

getHeaderRowColumn

getHeaderRowColumn(columnIdOrIdx: number | string)

Get Header Row Column DOM element by its column Id or index

Parameter	Type	Description
`columnIdOrIdx`	`number \| string`	- column Id or index

getFooterRowColumn

getFooterRowColumn(columnIdOrIdx: number | string)

Get the Footer Row Column DOM element by its column Id or index

Parameter	Type	Description
`columnIdOrIdx`	`number \| string`	- column Id or index

Column Management - Autosizing 12

autosizeColumn

autosizeColumn(columnOrIndexOrId: number | string, isInit?: boolean)

Proportionally resize a specific column by its name, index or Id Resizes based on its content, but determines the column definition from the provided identifier or index. Then, obtains a grid canvas and calls getColAutosizeWidth to compute and update the column’s width.

Parameter	Type	Description
`columnOrIndexOrId`	`number \| string`
`isInit?`	`boolean`

autosizeColumns

autosizeColumns(autosizeMode?: string, isInit?: boolean)

Proportionately resizes all columns to fill available horizontal space. This does not take the cell contents into consideration. It does this by temporarily caching CSS for hidden containers, calling the internal autosizing logic (internalAutosizeColumns) with the autosize mode and initialisation flag, then restores the original CSS.

Parameter	Type	Description
`autosizeMode?`	`string`
`isInit?`	`boolean`

reRenderColumns

reRenderColumns(reRender?: boolean)

Apply Columns Widths in the UI and optionally invalidate & re-render the columns when specified

Parameter	Type	Description
`reRender?`	`boolean`

getVisibleColumns

getVisibleColumns()

Returns an array of column definitions filtered to exclude any that are marked as hidden.

getColumnIndex

getColumnIndex(id: number | string): number

Returns the index of a column with a given id. Since columns can be reordered by the user, this can be used to get the column definition independent of the order:

Parameter	Type	Description
`id`	`number \| string`	A column id.

returns number

setSortColumn

setSortColumn(columnId: number | string, ascending: boolean)

A convenience method that creates a sort configuration for one column (with the given sort direction) and calls setSortColumns with it. Accepts a columnId string and an ascending boolean. Applies a sort glyph in either ascending or descending form to the header of the column. Note that this does not actually sort the column. It only adds the sort glyph to the header.

Parameter	Type	Description
`columnId`	`number \| string`
`ascending`	`boolean`

getColumnByIndex

getColumnByIndex(id: number)

Get column by index - iterates over header containers and returns the header column element corresponding to the given index.

Parameter	Type	Description
`id`	`number`	- column index

setSortColumns

setSortColumns(cols: ColumnSort[])

Accepts an array of objects in the form [ { columnId: [string], sortAsc: [boolean] }, ... ] to define the grid's sort order. When called, this will apply a sort glyph in either ascending or descending form to the header of each column specified in the array. Note that this does not actually sort the column. It only adds the sort glyph to the header.

Parameter	Type	Description
`cols`	`ColumnSort[]`	- column sort

getColumns

getColumns()

Returns the current array of column definitions.

getSortColumns

getSortColumns(): ColumnSort[]

Get sorted columns representing the current sorting state of the grid

returns ColumnSort[]

setColumns

setColumns(columnDefinitions: C[])

Sets grid columns. Column headers will be recreated and all rendered rows will be removed. To rerender the grid (if necessary), call render().

Replaces every column and rebuilds the headers. To keep the user's current widths, copy them from getColumns() before you replace.

const widths = Object.fromEntries(grid.getColumns().map((c) => [c.id, c.width]));
for (const c of nextColumns) c.width = widths[c.id] ?? c.width;
grid.setColumns(nextColumns);

Parameter	Type	Description
`columnDefinitions`	`C[]`	An array of column definitions.

updateColumns

updateColumns()

Update columns for when a hidden property has changed but the column list itself has not changed.

Data Management and Editing 9

getEditorLock

getEditorLock()

Get Editor lock

getEditController

getEditController()

Get Editor Controller

setData

setData(newData: CustomDataView<TData> | TData[], scrollToTop?: boolean)

Sets a new source for databinding and removes all rendered rows. Note that this doesn't render the new rows - you can follow it with a call to render() to do that.

Parameter	Type	Description
`newData`	`CustomDataView<TData> \| TData[]`	New databinding source using a regular JavaScript array.. or a custom object exposing getItem(index) and getLength() functions.
`scrollToTop?`	`boolean`	If true, the grid will reset the vertical scroll position to the top of the grid.

getData

getData(): U

Returns an array of every data object, unless you're using DataView in which case it returns a DataView object.

returns U

getDataLength

getDataLength()

Returns the size of the databinding source.

getDataItem

getDataItem(i: number): TData

Returns the databinding item at a given position.

Parameter	Type	Description
`i`	`number`

returns TData

getCellValue

getCellValue(i: number, field: string): TData[keyof TData]

Returns the value of a single field for a given row index. When the databinding source is a `CustomDataView` that implements the optional `getCellValue(index, field)` accessor, that method is used directly. This allows column-oriented (or otherwise non row-materializing) data sources to return a single cell value without first having to build a full row object via `getItem()`, which can be expensive when called repeatedly (e.g. during column content auto-sizing). Falls back to `getDataItem(i)[field]` for plain arrays or data sources that don't implement `getCellValue`.

Parameter	Type	Description
`i`	`number`	Item row index.
`field`	`string`	Column field name.

returns TData[keyof TData]

hasDataView

hasDataView()

Are we using a DataView?

getItemMetadaWhenExists

getItemMetadaWhenExists(row: number): ItemMetadata | null

Returns item metadata by a row index when it exists

Parameter	Type	Description
`row`	`number`

returns ItemMetadata | null

Data Management and Editing - Cell Switchers 6

resetActiveCell

resetActiveCell()

Resets active cell by making cell normal and other internal reset.

unsetActiveCell

unsetActiveCell()

Clear active cell by making cell normal & removing "active" CSS class.

focus

focus()

Moves keyboard focus back to the grid's active cell so navigation and shortcuts work. Call it after you change the active cell in code, or after focus went elsewhere (for example a closed dialog).

grid.setActiveCell(0, 0);
grid.focus();

editActiveCell

editActiveCell(editor?: EditorConstructor, preClickModeOn?: boolean | null, e?: Event)

A public method that starts editing on the active cell by calling makeActiveCellEditable with the provided editor, pre–click flag, and event.

Parameter	Type	Description
`editor?`	`EditorConstructor`
`preClickModeOn?`	`boolean \| null`
`e?`	`Event`

getSelectedRows

getSelectedRows()

Returns an array of row indices corresponding to the currently selected rows.

setSelectedRows

setSelectedRows(rows: number[], caller?: string)

Accepts an array of row indices and applies the current selectedCellCssClass to the cells in the row, respecting whether cells have been flagged as selectable.

Parameter	Type	Description
`rows`	`number[]`
`caller?`	`string`	- an optional string to identify who called the method

Event Handling and Interactivity 1

getCellFromEvent

getCellFromEvent(evt: Event | SlickEventData_)

Returns a hash containing row and cell indexes from a standard W3C event.

Parameter	Type	Description
`evt`	`Event \| SlickEventData_`

Rendering and Layout Management 44

applyHtmlCode

applyHtmlCode(target: HTMLElement, val?: boolean | string | HTMLElement | DocumentFragment, options?: { emptyTarget?: boolean; skipEmptyReassignment?: boolean; })

Apply HTML code by 3 different ways depending on what is provided as input and what options are enabled. 1. value is an HTMLElement or DocumentFragment, then first empty the target and simply append the HTML to the target element. 2. value is string and `enableHtmlRendering` is enabled, then use `target.innerHTML = value;` 3. value is string and `enableHtmlRendering` is disabled, then use `target.textContent = value;`

Parameter	Type	Description
`target`	`HTMLElement`	- target element to apply to
`val?`	`boolean \| string \| HTMLElement \| DocumentFragment`	- input value can be either a string or an HTMLElement
`options?`	`{ emptyTarget?: boolean; skipEmptyReassignment?: boolean; }`	- `emptyTarget`, defaults to true, will empty the target. `skipEmptyReassignment`, defaults to true, when enabled it will not try to reapply an empty value when the target is already empty

getCanvasNode

getCanvasNode(columnIdOrIdx?: number | string, rowIndex?: number)

Get Grid Canvas Node DOM Element

Parameter	Type	Description
`columnIdOrIdx?`	`number \| string`
`rowIndex?`	`number`

getActiveCanvasNode

getActiveCanvasNode(e?: Event | SlickEventData_)

Get the canvas DOM element

Parameter	Type	Description
`e?`	`Event \| SlickEventData_`

getCanvases

getCanvases()

Get the canvas DOM element

getViewportNode

getViewportNode(columnIdOrIdx?: number | string, rowIndex?: number)

Get the Viewport DOM node element

Parameter	Type	Description
`columnIdOrIdx?`	`number \| string`
`rowIndex?`	`number`

getViewports

getViewports()

Get all the Viewport node elements

getActiveViewportNode

getActiveViewportNode(e: Event | SlickEventData_)

Calls setActiveViewportNode (using the provided event) to set the active viewport, then returns the active viewport DOM element.

Parameter	Type	Description
`e`	`Event \| SlickEventData_`

setActiveViewportNode

setActiveViewportNode(e: Event | SlickEventData_)

Sets an active viewport node

Parameter	Type	Description
`e`	`Event \| SlickEventData_`

getHeadersWidth

getHeadersWidth()

Get the headers width in pixel Iterates over all columns to accumulate the widths for the left and right header sections, adds scrollbar width if needed, and adjusts for frozen columns. Returns the computed overall header width in pixels.

getCanvasWidth

getCanvasWidth(): number

Get the grid canvas width Computes the available width (considering vertical scrollbar if present), then iterates over the columns (left vs. right based on frozen columns) to sum their widths. If full–width rows are enabled, extra width is added. Returns the total calculated width.

returns number

validateColumnFreezeWidth

validateColumnFreezeWidth(frozenColumn?, forceAlert?: boolean): boolean

Validate that the column freeze is allowed in the browser by making sure that the frozen column is not exceeding the available and visible left canvas width. Note that it will only validate when `invalidColumnFreezeWidthCallback` or `throwWhenFrozenNotAllViewable` grid option is enabled.

Parameter	Type	Description
`frozenColumn?`		the column index to freeze at
`forceAlert?`	`boolean`	tri-state flag to alert when frozen column is invalid - if `undefined` it will do the condition check and never alert more than once - if `true` it will do the condition check and always alert even if it was called before - if `false` it will do the condition check but always skip the alert

returns boolean

calculateFrozenColumnIndexById

calculateFrozenColumnIndexById(newColumns: C[], columnId?: string | number | null, applyIndexChange?): number

From a new set of columns, different than current grid columns, we'll recalculate the `frozenColumn` index position by comparing its column `id` and recalculating the `frozenColumn` index to find out if it is different from a new set of columns.

Parameter	Type	Description
`newColumns`	`C[]`	- new columns to calculate frozen index from
`columnId?`	`string \| number \| null`	- optional column id to calculate from (otherwise it will find the current frozen column id)
`applyIndexChange?`		- whether to apply index changes to the frozen column

returns number

validateSetColumnFreeze

validateSetColumnFreeze(newColumns: C[], forceAlert?: boolean): boolean

Validate that there is at least 1, or more, column to the right of the frozen column otherwise show an error (we do this check before calling `setColumns()`). Note that it will only validate when `invalidColumnFreezePickerCallback` grid option is enabled.

Parameter	Type	Description
`newColumns`	`C[]`	the new columns that will later be provided to `setColumns()`
`forceAlert?`	`boolean`	tri-state flag to alert when frozen column is invalid - if `undefined` it will do the condition check and never alert more than once - if `true` it will do the condition check and always alert even if it was called before - if `false` it will do the condition check but always skip the alert

returns boolean

getPreHeaderPanel

getPreHeaderPanel()

Returns the pre-header panel element — the strip above the column headers, created when the createPreHeaderPanel option is on. Use it for grouped or spanned column headers.

const panel = grid.getPreHeaderPanel();
panel.textContent = 'Q1 2026';

getPreHeaderPanelLeft

getPreHeaderPanelLeft()

Get the Pre-Header Panel Left DOM node element

getPreHeaderPanelRight

getPreHeaderPanelRight()

Get the Pre-Header Panel Right DOM node element

getTopHeaderPanel

getTopHeaderPanel()

Get the Top-Header Panel DOM node element

getTopPanel

getTopPanel()

Get Top Panel DOM element

getTopPanels

getTopPanels()

Get Top Panels (left/right) DOM element

setTopPanelVisibility

setTopPanelVisibility(visible?: boolean, animate?: boolean)

Set the Top Panel Visibility and optionally enable/disable animation (enabled by default)

Parameter	Type	Description
`visible?`	`boolean`	- optionally set if top panel is visible or not
`animate?`	`boolean`	- optionally enable an animation while toggling the panel

setHeaderRowVisibility

setHeaderRowVisibility(visible?: boolean, animate?: boolean)

Set the Header Row Visibility and optionally enable/disable animation (enabled by default)

Parameter	Type	Description
`visible?`	`boolean`	- optionally set if header row panel is visible or not
`animate?`	`boolean`	- optionally enable an animation while toggling the panel

setColumnHeaderVisibility

setColumnHeaderVisibility(visible?: boolean, animate?: boolean)

Set the Column Header Visibility and optionally enable/disable animation (enabled by default)

Parameter	Type	Description
`visible?`	`boolean`	- optionally set if column header is visible or not
`animate?`	`boolean`	- optionally enable an animation while toggling the panel

setFooterRowVisibility

setFooterRowVisibility(visible?: boolean, animate?: boolean)

Set the Footer Visibility and optionally enable/disable animation (enabled by default)

Parameter	Type	Description
`visible?`	`boolean`	- optionally set if footer row panel is visible or not
`animate?`	`boolean`	- optionally enable an animation while toggling the panel

setPreHeaderPanelVisibility

setPreHeaderPanelVisibility(visible?: boolean, animate?: boolean)

Set the Pre-Header Visibility and optionally enable/disable animation (enabled by default)

Parameter	Type	Description
`visible?`	`boolean`	- optionally set if pre-header panel is visible or not
`animate?`	`boolean`	- optionally enable an animation while toggling the panel

setTopHeaderPanelVisibility

setTopHeaderPanelVisibility(visible?: boolean)

Set the Top-Header Visibility

Parameter	Type	Description
`visible?`	`boolean`	- optionally set if top-header panel is visible or not

getRowHeight

getRowHeight(row?: number)

Retrieves the height of a row. In variable row height mode (`enableVariableRowHeight`) and with a row index provided, returns that row's individual height; otherwise returns the default row height defined in the grid options.

Parameter	Type	Description
`row?`	`number`	- The row index. When omitted the default row height is returned.

invalidate

invalidate()

Invalidate all grid rows and re-render the visible grid rows

invalidateAllRows

invalidateAllRows()

Invalidate all grid rows

invalidateRows

invalidateRows(rows: number[])

Invalidate a specific set of row numbers

Parameter	Type	Description
`rows`	`number[]`

invalidateRow

invalidateRow(row: number)

Invalidate a specific row number

Parameter	Type	Description
`row`	`number`

updateCell

updateCell(row: number, cell: number)

Update a specific cell by its row and column index

Parameter	Type	Description
`row`	`number`	- grid row number
`cell`	`number`	- grid cell column number

updateRow

updateRow(row: number)

Update a specific row by its row index

Parameter	Type	Description
`row`	`number`	- grid row number

getViewportRowCount

getViewportRowCount()

Get the number of rows displayed in the viewport Note that the row count is an approximation because it is a calculated value using this formula (viewport / rowHeight = rowCount), the viewport must also be displayed for this calculation to work.

getViewportHeight

getViewportHeight()

Calculates the vertical height available for displaying grid rows. In auto–height mode it sums panel heights (header, footer, top panel) plus the total row height; otherwise, it subtracts header, footer, pre–header, top–header heights and container paddings from the container’s computed height. It also computes and stores the number of visible rows.

getViewportWidth

getViewportWidth()

Returns the width of the grid’s viewport by measuring the inner width of the grid container (using a utility function). It falls back to a devMode–specified width if necessary.

resizeCanvas

resizeCanvas()

Execute a Resize of the Grid Canvas. Recalculates the grid’s canvas, pane, and viewport dimensions based on the current container size, frozen rows/columns settings, and auto–height configuration. It then applies these dimensions to various DOM elements (panes, viewports, canvases) and updates the scrollbar dimensions. Finally, it updates the row count, handles scrolling, and forces a re–render.

invalidateRowHeights

invalidateRowHeights()

Invalidate all row heights (variable row height mode) and fully re-render the grid. Call this after the values driving `rowHeightProvider` (or, with the default provider, the item metadata heights) have changed without a change in row count; the row position index is then rebuilt with the new heights.

updateRowCount

updateRowCount()

Update the dataset row count

getViewport

getViewport(viewportTop?: number, viewportLeft?: number)

Returns the currently visible range as { top, bottom, leftPx, rightPx } — top/bottom are row indexes, leftPx/rightPx are horizontal pixel bounds. Pass a scroll position to compute the range at that position instead of now. This is the visible range only; getRenderedRange() adds the row buffer.

const vp = grid.getViewport();
loadRowsFromServer(vp.top, vp.bottom);

Parameter	Type	Description
`viewportTop?`	`number`
`viewportLeft?`	`number`

getVisibleRange

getVisibleRange(viewportTop?: number, viewportLeft?: number)

Returns an object with the top and bottom row indices that are visible in the viewport, as well as the left and right pixel boundaries. It uses the current (or provided) scroll positions and viewport dimensions.

Parameter	Type	Description
`viewportTop?`	`number`	- The top scroll position.
`viewportLeft?`	`number`	- The left scroll position.

getRenderedRange

getRenderedRange(viewportTop?: number, viewportLeft?: number)

Computes the range of rows (and horizontal pixel boundaries) that should be rendered, including an additional buffer (based on row height and a minimum buffer) determined by the current vertical scroll direction. This range is used to decide which rows and cells to render.

Parameter	Type	Description
`viewportTop?`	`number`	- The top scroll position.
`viewportLeft?`	`number`	- The left scroll position.

getRowCache

getRowCache(): Record<number, RowCaching>

Returns the rows cache that are currently rendered in the DOM, the cache includes certain properties like the row div element, cell rendered queue and the row colspan when defined.

returns Record<number, RowCaching>

render

render()

(re)Render the grid Main rendering method that first dequeues any pending scroll throttling, then obtains the visible and rendered ranges. It removes rows no longer visible, calls cleanUpAndRenderCells and renderRows to render missing cells and new rows, and, if frozen rows are present, renders them separately. It then sets post–processing boundaries, starts post–processing, updates scroll positions, and triggers the onRendered event.

getFrozenRowOffset

getFrozenRowOffset(row: number)

Get frozen (pinned) row offset Returns the vertical pixel offset to apply for frozen rows. Depending on whether frozen rows are pinned at the bottom or top and based on grid height, it returns either a fixed frozen rows height or a calculated offset.

Parameter	Type	Description
`row`	`number`	- grid row number

Scrolling and Virtualisation 15

scrollTo

scrollTo(y: number)

Scroll to a Y position in the grid (clamped to valid bounds) Updates internal offsets, recalculates the visible range, cleans up rows outside the viewport, updates row positions, and triggers the onViewportChanged event.

Parameter	Type	Description
`y`	`number`

scrollCellIntoView

scrollCellIntoView(row: number, cell: number, doPaging?: boolean)

Scroll to a specific cell and make it into the view First calls scrollRowIntoView for the row. If the cell is not in a frozen column, calculates the cell’s colspan and then calls internalScrollColumnIntoView with the cell’s left and right boundaries.

Parameter	Type	Description
`row`	`number`
`cell`	`number`
`doPaging?`	`boolean`

scrollColumnIntoView

scrollColumnIntoView(cell: number)

Scroll to a specific column and show it into the viewport

Parameter	Type	Description
`cell`	`number`	- cell column number

updatePagingStatusFromView

updatePagingStatusFromView(pagingInfo: Pick<PagingInfo, 'pageSize' | 'pageNum' | 'totalPages'>)

Update paging information status from the View

Parameter	Type	Description
`pagingInfo`	`Pick<PagingInfo, 'pageSize' \| 'pageNum' \| 'totalPages'>`

getRowSpanColumnIntersects

getRowSpanColumnIntersects(row: number): number[]

from a row number, return any column indexes that intersected with the grid row including the cell

Parameter	Type	Description
`row`	`number`	- grid row index

returns number[]

getRowSpanIntersect

getRowSpanIntersect(row: number): number | null

from a row number, verify if the rowspan is intersecting and return it when found, otherwise return `null` when nothing is found or when the rowspan feature is disabled.

Parameter	Type	Description
`row`	`number`	- grid row index

returns number | null

getParentRowSpanByCell

getParentRowSpanByCell(row: number, cell: number, excludeParentRow?): { start: number; end: number; range: string; } | null

Returns the parent rowspan details when child cell are spanned from a rowspan or `null` when it's not spanned. By default it will exclude the parent cell that holds the rowspan, and return `null`, that initiated the rowspan unless the 3rd argument is disabled. The exclusion is helpful to find out when we're dealing with a child cell of a rowspan

Parameter	Type	Description
`row`	`number`	- grid row index
`cell`	`number`	- grid cell/column index
`excludeParentRow?`		- should we exclude the parent who initiated the rowspan in the search (defaults to true)?

returns { start: number; end: number; range: string; } | null

remapAllColumnsRowSpan

remapAllColumnsRowSpan()

Remap all the rowspan metadata by looping through all dataset rows and keep a cache of rowspan by column indexes For example: 1- if 2nd row of the 1st column has a metadata.rowspan of 3 then the cache will be: `{ 0: '1:4' }` 2- if 2nd row if the 1st column has a metadata.rowspan of 3 AND a colspan of 2 then the cache will be: `{ 0: '1:4', 1: '1:4' }`

scrollRowIntoView

scrollRowIntoView(row: number, doPaging?: boolean)

Scroll to a specific row and make it into the view

Parameter	Type	Description
`row`	`number`	- grid row number
`doPaging?`	`boolean`	- scroll when pagination is enabled

scrollRowToTop

scrollRowToTop(row: number)

Scroll to the top row and make it into the view

Parameter	Type	Description
`row`	`number`	- grid row number

navigatePageDown

navigatePageDown()

Navigate (scroll) by a page down

navigatePageUp

navigatePageUp()

Navigate (scroll) by a page up

navigateTop

navigateTop()

Navigate to the top of the grid

navigateBottom

navigateBottom()

Navigate to the bottom of the grid

navigateToRow

navigateToRow(row: number)

Navigates to a specified row, ensuring it is visible and selecting an active cell if applicable. Adjusts the scroll position and updates the active cell based on cell navigation rules.

Parameter	Type	Description
`row`	`number`	- The row index to navigate to.

Cell and Row Post-Processing and CSS Styling 7

applyFormatResultToCellNode

applyFormatResultToCellNode(formatterResult: FormatterResultWithHtml | FormatterResultWithText | string | HTMLElement | DocumentFragment, cellNode: HTMLDivElement, suppressRemove?: boolean)

Apply a Formatter Result to a Cell DOM Node If the formatter result is not an object, it is applied directly as HTML/text; otherwise, it extracts the content (from a property such as “html” or “text”) and applies it. Additionally, it conditionally removes or adds CSS classes and sets a tooltip on the cell.

Parameter	Type	Description
`formatterResult`	`FormatterResultWithHtml \| FormatterResultWithText \| string \| HTMLElement \| DocumentFragment`
`cellNode`	`HTMLDivElement`
`suppressRemove?`	`boolean`

addCellCssStyles

addCellCssStyles(key: string, hash: CssStyleHash)

Adds an "overlay" of CSS classes to cell DOM elements. SlickGrid can have many such overlays associated with different keys and they are frequently used by plugins. For example, SlickGrid uses this method internally to decorate selected cells with selectedCellCssClass (see options).

Parameter	Type	Description
`key`	`string`	A unique key you can use in calls to setCellCssStyles and removeCellCssStyles. If a hash with that key has already been set, an exception will be thrown.
`hash`	`CssStyleHash`	A hash of additional cell CSS classes keyed by row number and then by column id. Multiple CSS classes can be specified and separated by space.

removeCellCssStyles

removeCellCssStyles(key: string)

Removes an "overlay" of CSS classes from cell DOM elements. See setCellCssStyles for more.

Parameter	Type	Description
`key`	`string`	A string key.

setCellCssStyles

setCellCssStyles(key: string, hash: CssStyleHash)

Sets CSS classes to specific grid cells by calling removeCellCssStyles(key) followed by addCellCssStyles(key, hash). key is name for this set of styles so you can reference it later - to modify it or remove it, for example. hash is a per-row-index, per-column-name nested hash of CSS classes to apply. Suppose you have a grid with columns: ["login", "name", "birthday", "age", "likes_icecream", "favorite_cake"] ...and you'd like to highlight the "birthday" and "age" columns for people whose birthday is today, in this case, rows at index 0 and 9. (The first and tenth row in the grid).

Parameter	Type	Description
`key`	`string`	A string key. Will overwrite any data already associated with this key.
`hash`	`CssStyleHash`	A hash of additional cell CSS classes keyed by row number and then by column id. Multiple CSS classes can be specified and separated by space.

getCellCssStyles

getCellCssStyles(key: string): CssStyleHash

Accepts a key name, returns the group of CSS styles defined under that name. See setCellCssStyles for more info.

Parameter	Type	Description
`key`	`string`	A string.

returns CssStyleHash

flashCell

flashCell(row: number, cell: number, speed?)

Flashes the cell twice by toggling the CSS class 4 times.

Parameter	Type	Description
`row`	`number`	A row index.
`cell`	`number`	A column index.
`speed?`		(optional) - The milliseconds delay between the toggling calls. Defaults to 250 ms.

highlightRow

highlightRow(row: number, duration?: number)

Highlight a row for a certain duration (ms) of time.

Parameter	Type	Description
`row`	`number`	- grid row number
`duration?`	`number`	- duration (ms), defaults to 400ms

Shared Utilities and Accessors 19

getUID

getUID()

Get grid unique identifier

getHeaderColumnWidthDiff

getHeaderColumnWidthDiff()

Get Header Column Width Difference in pixel

getScrollbarDimensions

getScrollbarDimensions()

Get scrollbar dimensions

getDisplayedScrollbarDimensions

getDisplayedScrollbarDimensions()

Returns an object with width and height of scrollbars currently displayed in the viewport (zero if not visible).

getAbsoluteColumnMinWidth

getAbsoluteColumnMinWidth(): number

Get the absolute column minimum width

returns number

arrayEquals

arrayEquals(arr1: Array<T>, arr2: Array<T>): boolean

Utility that returns true when two arrays are the same length and shallow-equal by index (each element strictly equal). Handy for cheap change detection.

if (!grid.arrayEquals(prevIds, nextIds)) {
  grid.setSelectedRows(nextRows);
}

Parameter	Type	Description
`arr1`	`Array<T>`
`arr2`	`Array<T>`

returns boolean

scrollToX

scrollToX(x: number): void

Scroll to an X coordinate position in the grid

Parameter	Type	Description
`x`	`number`

returns void

getPubSubService

getPubSubService(): BasePubSub | undefined

Get the displayed scrollbar dimensions

returns BasePubSub | undefined

getCellFromPoint

getCellFromPoint(x: number, y: number)

Returns row and cell indexes by providing x,y coordinates. Coordinates are relative to the top left corner of the grid beginning with the first row (not including the column headers).

Parameter	Type	Description
`x`	`number`	An x coordinate.
`y`	`number`	A y coordinate.

getPluginByName

getPluginByName(name: string)

Get a Plugin (addon) by its name

Parameter	Type	Description
`name`	`string`

getContainerNode

getContainerNode()

Get Grid Canvas Node DOM Element

getCellHeight

getCellHeight(row: number, rowspan: number)

Computes the height of a cell, taking into account row span if applicable.

Parameter	Type	Description
`row`	`number`	- The row index of the cell.
`rowspan`	`number`	- The number of rows the cell spans.

getCellNodeBox

getCellNodeBox(row: number, cell: number)

Returns an object representing information about a cell's position. All coordinates are absolute and take into consideration the visibility and scrolling position of all ancestors.

Parameter	Type	Description
`row`	`number`	- A row number.
`cell`	`number`	- A column number.

getActiveCellPosition

getActiveCellPosition()

Returns an object representing information about the active cell's position. All coordinates are absolute and take into consideration the visibility and scrolling position of all ancestors.

getGridPosition

getGridPosition()

Get the Grid Position

getCellEditor

getCellEditor()

Returns the active cell editor. If there is no actively edited cell, null is returned.

getActiveCell

getActiveCell()

Returns an object representing the coordinates of the currently active cell:

getActiveCellNode

getActiveCellNode()

Returns the DOM element containing the currently active cell. If no cell is active, null is returned.

sanitizeHtmlString

sanitizeHtmlString(dirtyHtml: string, suppressLogging?: boolean)

html sanitizer to avoid scripting attack

Parameter	Type	Description
`dirtyHtml`	`string`
`suppressLogging?`	`boolean`

Navigation Helpers 17

findSpanStartingCell

findSpanStartingCell(row: number, cell: number)

From any row/cell indexes that might have colspan/rowspan, find its starting indexes For example, if we start at 0,0 and we have colspan/rowspan of 4 for both and our indexes is row:2,cell:3 then our starting row/cell is 0,0. If a cell has no spanning at all then row/cell output is same as input

Parameter	Type	Description
`row`	`number`	- The row index.
`cell`	`number`	- The column index.

navigateRight

navigateRight()

Switches the active cell one cell right skipping unselectable cells. Unline navigateNext, navigateRight stops at the last cell of the row. Returns a boolean saying whether it was able to complete or not.

navigateLeft

navigateLeft()

Switches the active cell one cell left skipping unselectable cells. Unline navigatePrev, navigateLeft stops at the first cell of the row. Returns a boolean saying whether it was able to complete or not.

navigateDown

navigateDown()

Switches the active cell one row down skipping unselectable cells. Returns a boolean saying whether it was able to complete or not.

navigateUp

navigateUp()

Switches the active cell one row up skipping unselectable cells. Returns a boolean saying whether it was able to complete or not.

navigateNext

navigateNext()

Tabs over active cell to the next selectable cell. Returns a boolean saying whether it was able to complete or not.

navigatePrev

navigatePrev()

Tabs over active cell to the previous selectable cell. Returns a boolean saying whether it was able to complete or not.

navigateRowStart

navigateRowStart()

Navigate to the start row in the grid

navigateRowEnd

navigateRowEnd()

Navigate to the end row in the grid

navigateTopStart

navigateTopStart(): boolean | undefined

Navigate to coordinate 0,0 (top left home)

returns boolean | undefined

navigateBottomEnd

navigateBottomEnd(): boolean | undefined

Navigate to bottom row end (bottom right end)

returns boolean | undefined

getCellNode

getCellNode(row: number, cell: number): HTMLDivElement | null

Returns a DOM element containing a cell at a given row and cell.

Parameter	Type	Description
`row`	`number`	A row index.
`cell`	`number`	A column index.

returns HTMLDivElement | null

setActiveCell

setActiveCell(row: number, cell: number, opt_editMode?: boolean, preClickModeOn?: boolean, suppressActiveCellChangedEvent?: boolean)

Sets an active cell.

Parameter	Type	Description
`row`	`number`	- A row index.
`cell`	`number`	- A column index.
`opt_editMode?`	`boolean`
`preClickModeOn?`	`boolean`	Pre-Click Mode is Enabled?
`suppressActiveCellChangedEvent?`	`boolean`	Are we suppressing Active Cell Changed Event (defaults to false)

setActiveRow

setActiveRow(row: number, cell?: number, suppressScrollIntoView?: boolean)

Sets an active cell.

Parameter	Type	Description
`row`	`number`	- A row index.
`cell?`	`number`	- A column index.
`suppressScrollIntoView?`	`boolean`	- optionally suppress the ScrollIntoView that happens by default (defaults to false)

canCellBeActive

canCellBeActive(row: number, cell: number)

Returns true if you can click on a given cell and make it the active focus.

Parameter	Type	Description
`row`	`number`	A row index.
`cell`	`number`

canCellBeSelected

canCellBeSelected(row: number, cell: number)

Returns true if selecting the row causes this particular cell to have the selectedCellCssClass applied to it. A cell can be selected if it exists and if it isn't on an empty / "Add New" row and if it is not marked as "unselectable" in the column definition.

Parameter	Type	Description
`row`	`number`	A row index.
`cell`	`number`

gotoCell

gotoCell(row: number, cell: number, forceEdit?: boolean, e?: Event | SlickEvent_)

Accepts a row integer and a cell integer, scrolling the view to the row where row is its row index, and cell is its cell index. Optionally accepts a forceEdit boolean which, if true, will attempt to initiate the edit dialogue for the field in the specified cell. Unlike setActiveCell, this scrolls the row into the viewport and sets the keyboard focus.

Parameter	Type	Description
`row`	`number`	A row index.
`cell`	`number`	A column index.
`forceEdit?`	`boolean`	If true, will attempt to initiate the edit dialogue for the field in the specified cell.
`e?`	`Event \| SlickEvent_`