Jump to…

SlickGrid DataView Column Editors Formatters Plugins Controls Core

Options (115)Events (61)Grid and Dom Initialisation (18)Column Management - Autosizing (136)

SlickGrid

Options 115

allowDragFromClosest

type string · default div.slick-cell.dnd, div.slick-cell.cell-reorder

Defaults to `div.slick-cell.dnd, div.slick-cell.cell-reorder`, CSS selector of the closest cell ancestor that allows a row drag to start.

docking

type DockingOption · default { maxColumnViewportWidthPercent: 60, maxRowViewportHeightPercent: 60, minCenterRowCount: 3, overflowStrategy: 'conveyor', stickyActivationBuffer: 2, }

Shared pixel budgets and overflow behavior for pinned and sticky rows/columns.

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

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 GridAutosizeColsModeValue · 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?

columnResizingDelay

type number · default 300

Defaults to 300 (ms), debounce delay applied to column resizing before the grid re-renders.

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 pinned grid and if it detects pinning, 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. Only relevant for vertical rendering when scrollRenderThrottling is greater than 0; the default 0 already renders synchronously.

formatterFactory

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

Formatter classes factory

pinning

type PinningOption

Unified permanent pinning for columns and rows.

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

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 false

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, row) => 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 `$slick-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

spreadHiddenColspan

type boolean

Defaults to false. When a cell colspan crosses hidden columns, increase the span so it covers the same number of visible columns.

rtl

type boolean · default false

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

sanitizer

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

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

scrollRenderThrottling

type number · default 0

Defaults to 0: large vertical scroll jumps render synchronously. A positive value opts into timer throttling (previous default: 10 ms).

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

stickyRows

type StickyRows

Stable row ids or indexes that dock after ordinary scrolling clips them.

skipPinningValidation

type boolean · default false

Skip validation that pinned columns leave a usable center region.

errorCallback

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

Defaults to `alert()`, called with an error message when the grid rejects an operation.

invalidColumnPinningPickerMessage

type string · default [SlickGrid] Cannot complete pinning because at least one visible center column is required.

Message passed to `errorCallback` when a pinning request would leave no visible center column.

invalidColumnPinningSequenceMessage

type string · default [SlickGrid] Cannot change pinning because it would split a colspan. Pin columns sequentially from the left or right edge.

Message passed to `errorCallback` when a pinning request that is not sequential from an edge would split a colspan.

invalidColumnPinningWidthMessage

type string · default [SlickGrid] Cannot pin these columns because they exceed the available grid width.

Message passed to `errorCallback` when the pinned columns together are wider than the grid.

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

Viewport switch to scroll model with percentage

viewportMinWidthPx

type number

Viewport min width in pixel

viewportMaxWidthPx

type number

Viewport max width in pixel

Events 61

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.

onActivateChangedOptions event

type OnActivateChangedOptionsEventArgs

{ grid: SlickGrid; options: GridOption }

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

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.

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.

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.

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.

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.

onHeaderMouseOver event

type OnHeaderMouseEventArgs

{ grid: SlickGrid; column: Column }

Fires on the native `mouseover` of a column header cell. Unlike `onHeaderMouseEnter`, it fires again each time the pointer moves onto an element inside the cell.

onHeaderMouseOut event

type OnHeaderMouseEventArgs

{ grid: SlickGrid; column: Column }

Fires on the native `mouseout` of a column header cell. Unlike `onHeaderMouseLeave`, it also fires when the pointer moves onto an element inside the cell.

onHeaderKeyDown event

type OnHeaderKeyDownEventArgs

{ grid: SlickGrid; event: KeyboardEvent; column: Column }

Fires when a key is pressed while focus is in the column header row, before Enter or Space sorts a sortable column. `args.event` is the keyboard event; `args.column` is set when the focused element is a 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.

onHeaderRowMouseOver event

type OnHeaderMouseEventArgs

{ grid: SlickGrid; column: Column }

Fires on the native `mouseover` of a header-row cell. Unlike `onHeaderRowMouseEnter`, it fires again each time the pointer moves onto an element inside the cell, such as a filter input.

onHeaderRowMouseOut event

type OnHeaderMouseEventArgs

{ grid: SlickGrid; column: Column }

Fires on the native `mouseout` of a header-row cell. Unlike `onHeaderRowMouseLeave`, it also fires when the pointer moves onto an element inside the cell.

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.

onPreHeaderClick event

type OnPreHeaderClickEventArgs

{ grid: SlickGrid; node: HTMLElement }

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

onPreHeaderContextMenu event

type OnPreHeaderContextMenuEventArgs

{ grid: SlickGrid; node: HTMLElement }

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

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.

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 18

init

init(): void

Initializes the grid.

returns void

cacheCssForHiddenInit

cacheCssForHiddenInit(): void

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

returns void

registerPlugin

registerPlugin(plugin: T): void

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.

returns void

unregisterPlugin

unregisterPlugin(plugin: SlickPlugin): void

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.

returns void

destroy

destroy(shouldDestroyAllElements?: boolean): void

Destroy (dispose) of SlickGrid Unbinds all event handlers, cancels any active cell edits, triggers the onBeforeDestroy event, unregisters and destroys plugins, destroys column reorder 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

returns void

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

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): void

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

Parameter	Type	Description
`model`	`SelectionModel`

returns void

getSelectionModel

getSelectionModel(): T | undefined

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

returns T | undefined

updateColumnHeader

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

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.

returns HTMLElement | void

getHeader

getHeader(columnDef?: C): HTMLDivElement | HTMLDivElement[]

Get the Header DOM element

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

returns HTMLDivElement | HTMLDivElement[]

getHeaderColumn

getHeaderColumn(columnIdOrIdx: number | string): HTMLDivElement

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

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

returns HTMLDivElement

getHeaderRow

getHeaderRow(): HTMLDivElement | HTMLDivElement[]

Get the Header Row DOM element

returns HTMLDivElement | HTMLDivElement[]

getFooterRow

getFooterRow(): HTMLDivElement | HTMLDivElement[]

Get the Footer DOM element

returns HTMLDivElement | HTMLDivElement[]

getHeaderRowColumn

getHeaderRowColumn(columnIdOrIdx: number | string): HTMLDivElement

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

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

returns HTMLDivElement

getFooterRowColumn

getFooterRowColumn(columnIdOrIdx: number | string): HTMLDivElement

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

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

returns HTMLDivElement

Column Management - Autosizing 136

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?: GridAutosizeColsModeValue, 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?`	`GridAutosizeColsModeValue`
`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(): C[]

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

returns C[]

getVisibleColumnIndex

getVisibleColumnIndex(id: number | string): number

Returns the index of a visible column by its id.

Parameter	Type	Description
`id`	`number \| string`

returns number

getColumnById

getColumnById(id: number | string): C | null

Returns the column object by its id.

Parameter	Type	Description
`id`	`number \| string`

returns C | null

updateColumnById

updateColumnById(columnId: number | string, props: Partial<C>, forceColumnUpdate?): void

Updates column properties by id and optionally refreshes the grid columns.

Parameter	Type	Description
`columnId`	`number \| string`
`props`	`Partial<C>`
`forceColumnUpdate?`

returns void

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): void

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`

returns void

getColumnByIndex

getColumnByIndex(idx: number): HTMLElement | undefined

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

Parameter	Type	Description
`idx`	`number`

returns HTMLElement | undefined

setSortColumns

setSortColumns(cols: ColumnSort[]): void

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

returns void

getColumns

getColumns(): C[]

Returns the current array of column definitions.

returns C[]

getSortColumns

getSortColumns(): ColumnSort[]

Get sorted columns representing the current sorting state of the grid

returns ColumnSort[]

setColumns

setColumns(newColumns: C[], waitNextCycle?): boolean

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
`newColumns`	`C[]`	An array of column definitions.
`waitNextCycle?`		- should we wait for a microtask cycle before updating column headers

returns boolean

updateColumns

updateColumns(): void

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

returns void

getEditorLock

getEditorLock()

Get Editor lock

getEditController

getEditController(): EditController | undefined

Get Editor Controller

returns EditController | undefined

setData

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

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.

returns void

getDataLength

getDataLength(): number

Returns the size of the databinding source.

returns number

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(): boolean

Are we using a DataView?

returns boolean

getItemMetadaWhenExists

getItemMetadaWhenExists(row: number): ItemMetadata | null

Returns item metadata by a row index when it exists

Parameter	Type	Description
`row`	`number`

returns ItemMetadata | null

resetActiveCell

resetActiveCell(): void

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

returns void

unsetActiveCell

unsetActiveCell(): void

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

returns void

focus

focus(): void

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();

returns void

editActiveCell

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

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?`	`Editor \| EditorConstructor`
`preClickModeOn?`	`boolean \| null`
`e?`	`Event`

returns void

getSelectedRows

getSelectedRows(): number[]

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

returns number[]

setSelectedRows

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

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

returns void

getCellFromEvent

getCellFromEvent(evt: Event | SlickEventData_): { row: number; cell: number } | null

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

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

returns { row: number; cell: number } | null

applyHtmlCode

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

Apply HTML code by 4 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 a number, a boolean or a plain string without `<` or `&`, then use `target.textContent = value;` without sanitizing or parsing HTML. 3. value is any other string and `enableHtmlRendering` is enabled, then use `target.innerHTML = sanitizedValue;` 4. value is any other string and `enableHtmlRendering` is disabled, then use `target.textContent = sanitizedValue;`

Parameter	Type	Description
`target`	`HTMLElement`	- target element to apply to
`val?`	`boolean \| string \| HTMLElement \| DocumentFragment \| null \| undefined`	- 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

returns void

getCanvasNode

getCanvasNode(_columnIdOrIdx?: number | string, _rowIndex?: number): HTMLDivElement

Get Grid Canvas Node DOM Element

Parameter	Type	Description
`_columnIdOrIdx?`	`number \| string`
`_rowIndex?`	`number`

returns HTMLDivElement

getActiveCanvasNode

getActiveCanvasNode(e?: Event | SlickEventData_): HTMLDivElement

Get the canvas DOM element

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

returns HTMLDivElement

getCanvases

getCanvases(): HTMLDivElement[]

Get the canvas DOM element

returns HTMLDivElement[]

getViewportNode

getViewportNode(_columnIdOrIdx?: number | string, _rowIndex?: number): HTMLElement | undefined

Get the Viewport DOM node element

Parameter	Type	Description
`_columnIdOrIdx?`	`number \| string`
`_rowIndex?`	`number`

returns HTMLElement | undefined

getViewports

getViewports(): HTMLDivElement[]

Get all the Viewport node elements

returns HTMLDivElement[]

getActiveViewportNode

getActiveViewportNode(e: Event | SlickEventData_): HTMLDivElement

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

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

returns HTMLDivElement

setActiveViewportNode

setActiveViewportNode(e: Event | SlickEventData_): HTMLDivElement

Sets an active viewport node

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

returns HTMLDivElement

getHeadersWidth

getHeadersWidth(): number

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

returns number

getCanvasWidth

getCanvasWidth(): number

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

returns number

getPreHeaderPanel

getPreHeaderPanel(): HTMLDivElement

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';

returns HTMLDivElement

getPreHeaderPanelLeft

getPreHeaderPanelLeft(): HTMLDivElement

Get the Pre-Header Panel Left DOM node element

returns HTMLDivElement

getPreHeaderPanelRight

getPreHeaderPanelRight(): HTMLDivElement

Get the Pre-Header Panel Right DOM node element

returns HTMLDivElement

getTopHeaderPanel

getTopHeaderPanel(): HTMLDivElement

Get the Top-Header Panel DOM node element

returns HTMLDivElement

getTopPanel

getTopPanel(): HTMLDivElement

Get Top Panel DOM element

returns HTMLDivElement

getTopPanels

getTopPanels(): HTMLDivElement[]

Get the top panels used by the grid (the single-viewport renderer has one).

returns HTMLDivElement[]

setTopPanelVisibility

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

Set the Top Panel Visibility

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

returns void

setHeaderRowVisibility

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

Set the Header Row Visibility

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

returns void

setColumnHeaderVisibility

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

Set the Column Header Visibility

Parameter	Type	Description
`visible?`	`boolean`	- optionally set if column header is visible or not
`animate?`	`boolean`

returns void

setFooterRowVisibility

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

Set the Footer Visibility

Parameter	Type	Description
`visible?`	`boolean`	- optionally set if footer row panel is visible or not
`animate?`	`boolean`

returns void

setPreHeaderPanelVisibility

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

Set the Pre-Header Visibility

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

returns void

setTopHeaderPanelVisibility

setTopHeaderPanelVisibility(visible?: boolean, animate?: boolean): void

Set the Top-Header Visibility

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

returns void

getRowHeight

getRowHeight(row?: number): number

Retrieves the height of a row. In variable row height mode (i.e. when `enableVariableRowHeight` is true) 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.

returns number

getRowTop

getRowTop(row: number): number

Get the rendered top offset of a row, including virtual-scroll page positioning.

Parameter	Type	Description
`row`	`number`

returns number

invalidate

invalidate(): void

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

returns void

invalidateAllRows

invalidateAllRows(): void

Invalidate all grid rows

returns void

invalidateRows

invalidateRows(rows: number[]): void

Invalidate a specific set of row numbers

Parameter	Type	Description
`rows`	`number[]`

returns void

invalidateRow

invalidateRow(row: number): void

Invalidate a specific row number

Parameter	Type	Description
`row`	`number`

returns void

updateCell

updateCell(row: number, cell: number): void

Update a specific cell by its row and column index

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

returns void

updateRow

updateRow(row: number): void

Update a specific row by its row index

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

returns void

getViewportRowCount

getViewportRowCount(): number

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.

returns number

getViewportHeight

getViewportHeight(): number

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.

returns number

getViewportWidth

getViewportWidth(): number

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.

returns number

resizeCanvas

resizeCanvas(): void

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

returns void

invalidateRowHeights

invalidateRowHeights(): void

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.

returns void

updateRowCount

updateRowCount(): void

Update the dataset row count

returns void

getViewport

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

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`

returns CellViewportRange

getVisibleRange

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

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.

returns CellViewportRange

getRenderedRange

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

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.

returns CellViewportRange

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(): void

(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 pinned rows are present, renders their docking regions. It then sets post–processing boundaries, starts post–processing, updates scroll positions, and triggers the onRendered event.

returns void

scrollTo

scrollTo(y: number): void

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`

returns void

scrollCellIntoView

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

Scroll to a specific cell and make it into the view First calls scrollRowIntoView for the row. If the cell is not docked, 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`

returns void

scrollColumnIntoView

scrollColumnIntoView(cell: number): void

Scroll to a specific column and show it into the viewport

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

returns void

updatePagingStatusFromView

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

Update paging information status from the View

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

returns void

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(): void

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' }`

returns void

scrollRowIntoView

scrollRowIntoView(row: number, doPaging?: boolean): void

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

returns void

scrollRowToTop

scrollRowToTop(row: number): void

Scroll to the top row and make it into the view

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

returns void

navigatePageDown

navigatePageDown(): void

Navigate (scroll) by a page down

returns void

navigatePageUp

navigatePageUp(): void

Navigate (scroll) by a page up

returns void

navigateTop

navigateTop(): void

Navigate to the top of the grid

returns void

navigateBottom

navigateBottom(): void

Navigate to the bottom of the grid

returns void

navigateToRow

navigateToRow(row: number): boolean

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.

returns boolean

applyFormatResultToCellNode

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

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`	`HTMLElement`
`suppressRemove?`	`boolean`

returns void

addCellCssStyles

addCellCssStyles(key: string, hash: CssStyleHash): void

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.

returns void

removeCellCssStyles

removeCellCssStyles(key: string): void

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

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

returns void

setCellCssStyles

setCellCssStyles(key: string, hash: CssStyleHash): void

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.

returns void

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?): void

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.

returns void

highlightRow

highlightRow(row: number, duration?: number): void

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

returns void

getUID

getUID(): string

Get grid unique identifier

returns string

getHeaderColumnWidthDiff

getHeaderColumnWidthDiff(): number

Get Header Column Width Difference in pixel

returns number

getScrollbarDimensions

getScrollbarDimensions(): { height: number; width: number } | undefined

Get scrollbar dimensions

returns { height: number; width: number } | undefined

getDisplayedScrollbarDimensions

getDisplayedScrollbarDimensions(): { width: number; height: number }

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

returns { width: number; height: number }

getAbsoluteColumnMinWidth

getAbsoluteColumnMinWidth(): number

Get the absolute column minimum width

returns number

arrayEquals

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

Compares two arrays by length and strict element equality.

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): { row: number; cell: 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). In a right-to-left grid the first column sits at the right, so an x measured from the left corner counts back from the last column.

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

returns { row: number; cell: number }

getPluginByName

getPluginByName(name: string): P | undefined

Get a Plugin (addon) by its name

Parameter	Type	Description
`name`	`string`

returns P | undefined

getContainerNode

getContainerNode(): HTMLElement

Get Grid Canvas Node DOM Element

returns HTMLElement

getCellHeight

getCellHeight(row: number, rowspan: number): 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.

returns number

getCellNodeBox

getCellNodeBox(row: number, cell: number): { top: number; left: number; bottom: number; right: number } | null

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.

returns { top: number; left: number; bottom: number; right: number } | null

getActiveCellPosition

getActiveCellPosition(): ElementPosition

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.

returns ElementPosition

getGridPosition

getGridPosition(): ElementPosition

Get the Grid Position

returns ElementPosition

getCellEditor

getCellEditor(): Editor | null

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

returns Editor | null

getActiveCell

getActiveCell(): { row: number; cell: number } | null

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

returns { row: number; cell: number } | null

getActiveCellNode

getActiveCellNode(): HTMLDivElement | null

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

returns HTMLDivElement | null

sanitizeHtmlString

sanitizeHtmlString(dirtyHtml: string, suppressLogging?: boolean): string

html sanitizer to avoid scripting attack

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

returns string

findSpanStartingCell

findSpanStartingCell(row: number, cell: number): {
    cell: number;
    row: 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.

returns { cell: number; row: number; }

navigateRight

navigateRight(): boolean | undefined

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.

returns boolean | undefined

navigateLeft

navigateLeft(): boolean | undefined

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.

returns boolean | undefined

navigateDown

navigateDown(): boolean | undefined

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

returns boolean | undefined

navigateUp

navigateUp(): boolean | undefined

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

returns boolean | undefined

navigateNext

navigateNext(): boolean | undefined

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

returns boolean | undefined

navigatePrev

navigatePrev(): boolean | undefined

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

returns boolean | undefined

navigateRowStart

navigateRowStart(): boolean | undefined

Navigate to the start row in the grid

returns boolean | undefined

navigateRowEnd

navigateRowEnd(): boolean | undefined

Navigate to the end row in the grid

returns boolean | undefined

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): void

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)

returns void

setActiveRow

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

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)

returns void

canCellBeActive

canCellBeActive(row: number, cell: number): boolean

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`

returns boolean

canCellBeSelected

canCellBeSelected(row: number, cell: number): boolean

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`

returns boolean

gotoCell

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

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_`

returns void

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

validateColumnPinning

validateColumnPinning(columnId?: number | string, forceAlert?, columns?: C[]): boolean

Validate that a pinning change leaves at least one visible center column.

Parameter	Type	Description
`columnId?`	`number \| string`	column id
`forceAlert?`		tri-state flag to alert when pinning is invalid
`columns?`	`C[]`

returns boolean

triggerEvent

triggerEvent(evt: SlickEvent_, args?: ArgType, e?: Event | SlickEventData_): SlickEventData_<any>

Triggers a SlickGrid event and returns its event-data wrapper.

Parameter	Type	Description
`evt`	`SlickEvent_`
`args?`	`ArgType`
`e?`	`Event \| SlickEventData_`

returns SlickEventData_<any>

getPinnedColumns

getPinnedColumns(side?: DockingSide): C[]

Return visible columns currently docked at an edge, including active sticky columns.

Parameter	Type	Description
`side?`	`DockingSide`

returns C[]

setColumnPinning

setColumnPinning(columnId: number | string, pinned: DockingSide | null): void

Permanently pin/unpin a column and rebuild the three-region row layout.

Parameter	Type	Description
`columnId`	`number \| string`
`pinned`	`DockingSide \| null`

returns void

setColumnStickiness

setColumnStickiness(columnId: number | string, sticky: DockingSide | 'both' | boolean): void

Make a center column sticky at one or both edges, or disable its sticky policy.

Parameter	Type	Description
`columnId`	`number \| string`
`sticky`	`DockingSide \| 'both' \| boolean`

returns void

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