Skip to content

RevoGrid Documentation v4.15.8 / Components / RevoGrid

Interface: RevoGrid

Revogrid - High-performance, customizable grid library for managing large datasets.

Events guide

For a comprehensive events guide, check the Events API Page. All events propagate to the root level of the grid. Dependency tree.

Type definitions

Read type definition file for the full interface information. All complex property types such as ColumnRegular, ColumnProp, ColumnDataSchemaModel can be found there.

HTMLRevoGridElement

Examples

ts
data-rgCol-rgRow - main data slot. Applies extra elements in <revogr-data />.
ts
focus-rgCol-rgRow - focus layer for main data. Applies extra elements in <revogr-focus />.

Properties

PropertyTypeDescriptionDefined in
accessiblebooleanEnable accessibility. If disabled, the grid will not be accessible. Default truesrc/components.d.ts:58
addTrimmed(trimmed: Record<number, boolean>, trimmedType?: string, type?: DimensionRows) => Promise<CustomEvent<{ trimmed: Record<number, boolean>; trimmedType: string; type: string; }>>Add trimmed by typesrc/components.d.ts:62
additionalDataAdditionalDataAdditional data to be passed to plugins, renders or editors. For example if you need to pass Vue component instance. Default {}src/components.d.ts:67
applyOnClosebooleanApply changes in editor when closed except 'Escape' cases. If custom editor in use method getValue required. Check interfaces.d.ts EditorBase for more info. Default falsesrc/components.d.ts:72
autoSizeColumnboolean | AutoSizeColumnConfigAutosize config. Enables columns autoSize. For more details check autoSizeColumn plugin. By default disabled, hence operation is not performance efficient. true to enable with default params (double header separator click for autosize). Or define config. See AutoSizeColumnConfig for more details. Default falsesrc/components.d.ts:77
canDragbooleanDisable native drag&drop plugin. Default truesrc/components.d.ts:82
canFocusbooleanWhen true cell focus appear. Default truesrc/components.d.ts:87
canMoveColumnsbooleanEnable column move plugin. Default falsesrc/components.d.ts:92
clearFocus() => Promise<void>Clear current grid focus. Grid has no longer focus on it.src/components.d.ts:96
clearSorting() => Promise<void>Clears column sortingsrc/components.d.ts:100
colSizenumberIndicates default column size. Default 100src/components.d.ts:105
columnTypes{}Column Types Format. Every type represent multiple column properties. Types will be merged but can be replaced with column properties. Types were made as separate objects to be reusable per multiple columns. Default {}src/components.d.ts:110
columns(ColumnRegular | ColumnGrouping<any>)[]Columns - defines an array of grid columns. Can be column or grouped column. Default []src/components.d.ts:115
disableVirtualXbooleanDisable lazy rendering mode for the X axis. Use when not many columns present and you don't need rerenader cells during scroll. Can be used for initial rendering performance improvement. Default falsesrc/components.d.ts:120
disableVirtualYbooleanDisable lazy rendering mode for the Y axis. Use when not many rows present and you don't need rerenader cells during scroll. Can be used for initial rendering performance improvement. Default falsesrc/components.d.ts:125
editorsEditorsCustom editors register. Default {}src/components.d.ts:130
exportingbooleanEnable export plugin. Default falsesrc/components.d.ts:135
filterboolean | ColumnFilterConfigEnables filter plugin. Can be boolean. Or can be filter collection See FilterCollection for more info. Default falsesrc/components.d.ts:140
focusTemplateFocusTemplateFuncApply changes typed in editor on editor close except Escape cases. If custom editor in use method getValue required. Check interfaces.d.ts EditorBase for more info.src/components.d.ts:144
frameSizenumberDefines how many rows/columns should be rendered outside visible area. Default 1src/components.d.ts:149
getColumnStore(type?: DimensionCols) => Promise<Observable<DSourceState<ColumnRegular, DimensionCols>>>Provides access to column internal store observer Can be used for plugin supportsrc/components.d.ts:154
getColumns() => Promise<ColumnRegular[]>Receive all columns in data sourcesrc/components.d.ts:158
getContentSize() => Promise<Cell>Get size of content Including all pinned datasrc/components.d.ts:162
getFocused() => Promise<null | FocusedData>Get the currently focused cell.src/components.d.ts:166
getPlugins() => Promise<PluginBaseComponent[]>Get all active plugins instancessrc/components.d.ts:170
getProviders() => Promise<undefined | PluginProviders>Get all providers for grid Useful for external grid integrationsrc/components.d.ts:174
getSelectedRange() => Promise<null | RangeArea & AllDimensionType>Get the currently selected Range.src/components.d.ts:178
getSource(type?: DimensionRows) => Promise<DataType[]>Get data from sourcesrc/components.d.ts:182
getSourceStore(type?: DimensionRows) => Promise<Observable<DSourceState<DataType, DimensionRows>>>Provides access to rows internal store observer Can be used for plugin supportsrc/components.d.ts:187
getVisibleSource(type?: DimensionRows) => Promise<any[]>Get data from visible part of source Trimmed/filtered rows will be excludedsrc/components.d.ts:192
groupingGroupingOptionsGroup rows based on this property. Define properties to be groped by grouping plugin See GroupingOptions.src/components.d.ts:196
hideAttributionbooleanPlease only hide the attribution if you are subscribed to Pro version Default falsesrc/components.d.ts:201
jobsBeforeRenderPromise<any>[]Prevent rendering until job is done. Can be used for initial rendering performance improvement. When several plugins require initial rendering this will prevent double initial rendering. Default []src/components.d.ts:206
pinnedBottomSourceDataType[]Pinned bottom Source: {[T in ColumnProp]: any} - defines pinned bottom rows data source. Default []src/components.d.ts:211
pinnedTopSourceDataType[]Pinned top Source: {[T in ColumnProp]: any} - defines pinned top rows data source. Default []src/components.d.ts:216
pluginstypeof BasePlugin[]Custom grid plugins. Can be added or removed at runtime. Every plugin should be inherited from BasePlugin class. For more details check Plugin guide Default []src/components.d.ts:221
rangebooleanWhen true, user can range selection. Default falsesrc/components.d.ts:226
readonlybooleanWhen true, grid in read only mode. Default falsesrc/components.d.ts:231
refresh(type?: DimensionRows | "all") => Promise<void>Refreshes data viewport. Can be specific part as rgRow or pinned rgRow or 'all' by default.src/components.d.ts:235
refreshExtraElements() => Promise<void>Refresh extra elements. Triggers re-rendering of extra elements and functions. Part of extraElements and registerVNode methods. Useful for plugins.src/components.d.ts:239
registerVNode(VNode | (c: ExtraNodeFuncConfig) => VNode)[]Register new virtual node inside of grid. Used for additional items creation such as plugin elements. Should be set before grid render inside of plugins. Can return VNode result of h() function or a function that returns VNode. Function can be used for performance improvement and additional renders. Default []src/components.d.ts:244
resizebooleanWhen true, columns are resizable. Default falsesrc/components.d.ts:252
rowClassstringRow class property mapping. Map custom classes to rows from row object data. Define this property in rgRow object and this will be mapped as rgRow class. Default ''src/components.d.ts:257
rowDefinitionsRowDefinition[]Custom row properies to be applied. See RowDefinition for more info. Default []src/components.d.ts:262
rowHeadersboolean | RowHeadersExcel like functionality. Show row numbers. Also can be used for custom row header render if object provided.src/components.d.ts:266
rowSizenumberIndicates default rgRow size. By default 0, means theme package size will be applied Alternatively you can use rowSize to reset viewport Default 0src/components.d.ts:271
rtlbooleanEnable right-to-left (RTL) mode. When enabled, columns will be displayed from right to left. Default falsesrc/components.d.ts:276
scrollToColumnIndex(coordinate?: number) => Promise<void>Scrolls viewport to specified column by index.src/components.d.ts:280
scrollToColumnProp(prop: ColumnProp, dimension?: "rgCol") => Promise<void>Scrolls viewport to specified column by propsrc/components.d.ts:284
scrollToCoordinate(cell: Partial<Cell>) => Promise<void>Scrolls view port to coordinatesrc/components.d.ts:288
scrollToRow(coordinate?: number) => Promise<void>Scrolls viewport to specified row by index.src/components.d.ts:292
setCellEdit(rgRow: number, prop: ColumnProp, rowSource?: DimensionRows) => Promise<void>Open editor for cell.src/components.d.ts:296
setCellsFocus(cellStart?: Cell, cellEnd?: Cell, colType?: string, rowType?: string) => Promise<void>Set focus range.src/components.d.ts:300
setDataAt(__namedParameters: { col: number; row: number; skipDataUpdate: boolean; val: any; } & AllDimensionType) => Promise<undefined | void>Refreshes data at specified cell. Useful for performance optimization. No viewport update will be triggered. Example const grid = document.querySelector('revo-grid'); grid.setDataAt({ row: 0, col: 0, val: 'test' }); // refreshsrc/components.d.ts:305
sorting?SortingConfigAlternative way to set sorting. {columns: [{prop: 'name', order: 'asc'}]} Use SortingPlugin to get current sorting statesrc/components.d.ts:309
sourceDataType[]Source - defines main data source. Can be an Object or 2 dimensional array([][]); Keys/indexes referenced from columns Prop. Default []src/components.d.ts:314
stretchstring | booleanStretch strategy for columns by StretchColumn plugin. For example if there are more space on the right last column size would be increased. Default falsesrc/components.d.ts:319
themestringTheme name. Default 'default'src/components.d.ts:324
trimmedRowsRecord<number, boolean>Trimmed rows. Functionality which allows to hide rows from main data set. trimmedRows are physical rgRow indexes to hide. Default {}src/components.d.ts:329
updateColumnSorting(column: Pick<ColumnRegular, "prop" | "cellCompare">, order: undefined | "asc" | "desc", additive: boolean) => Promise<void>Update column sortingsrc/components.d.ts:336
updateColumns(cols: ColumnRegular[]) => Promise<void>Update columnssrc/components.d.ts:340
useClipboardbooleanWhen true enable clipboard. Default truesrc/components.d.ts:345