Skip to content

@revolist/revogrid / 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:56
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:60
additionalDataanyAdditional data to be passed to plugins, renders or editors. For example if you need to pass Vue component instance.src/components.d.ts:64
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.src/components.d.ts:68
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.src/components.d.ts:72
canFocusbooleanWhen true cell focus appear.src/components.d.ts:76
canMoveColumnsbooleanEnable column move plugin.src/components.d.ts:80
clearFocus() => Promise<void>Clear current grid focus. Grid has no longer focus on it.src/components.d.ts:84
clearSorting() => Promise<void>Clears column sortingsrc/components.d.ts:88
colSizenumberIndicates default column size.src/components.d.ts:92
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.src/components.d.ts:96
columns(ColumnRegular | ColumnGrouping)[]Columns - defines an array of grid columns. Can be column or grouped column.src/components.d.ts:100
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.src/components.d.ts:104
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.src/components.d.ts:108
editorsEditorsCustom editors register.src/components.d.ts:112
exportingbooleanEnable export plugin.src/components.d.ts:116
filterboolean | ColumnFilterConfigEnables filter plugin. Can be boolean. Or can be filter collection See FilterCollection for more info.src/components.d.ts:120
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:124
frameSizenumberDefines how many rows/columns should be rendered outside visible area.src/components.d.ts:128
getColumnStore(type?: DimensionCols) => Promise<Observable<DSourceState<ColumnRegular, DimensionCols>>>Provides access to column internal store observer Can be used for plugin supportsrc/components.d.ts:133
getColumns() => Promise<ColumnRegular[]>Receive all columns in data sourcesrc/components.d.ts:137
getContentSize() => Promise<Cell>Get size of content Including all pinned datasrc/components.d.ts:141
getFocused() => Promise<null | FocusedData>Get the currently focused cell.src/components.d.ts:145
getPlugins() => Promise<PluginBaseComponent[]>Get all active plugins instancessrc/components.d.ts:149
getSelectedRange() => Promise<null | RangeArea>Get the currently selected Range.src/components.d.ts:153
getSource(type?: DimensionRows) => Promise<DataType[]>Get data from sourcesrc/components.d.ts:157
getSourceStore(type?: DimensionRows) => Promise<Observable<DSourceState<DataType, DimensionRows>>>Provides access to rows internal store observer Can be used for plugin supportsrc/components.d.ts:162
getVisibleSource(type?: DimensionRows) => Promise<any[]>Get data from visible part of source Trimmed/filtered rows will be excludedsrc/components.d.ts:167
groupingGroupingOptionsGroup rows based on this property. Define properties to be groped by grouping plugin See GroupingOptions.src/components.d.ts:171
hideAttributionbooleanPlease only hide the attribution if you are subscribed to Pro versionsrc/components.d.ts:175
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.src/components.d.ts:179
pinnedBottomSourceDataType[]Pinned bottom Source: {[T in ColumnProp]: any} - defines pinned bottom rows data source.src/components.d.ts:183
pinnedTopSourceDataType[]Pinned top Source: {[T in ColumnProp]: any} - defines pinned top rows data source.src/components.d.ts:187
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 guidesrc/components.d.ts:191
rangebooleanWhen true, user can range selection.src/components.d.ts:195
readonlybooleanWhen true, grid in read only mode.src/components.d.ts:199
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:203
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:207
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.src/components.d.ts:211
resizebooleanWhen true, columns are resizable.src/components.d.ts:218
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.src/components.d.ts:222
rowDefinitionsRowDefinition[]Custom row properies to be applied. See RowDefinition for more info.src/components.d.ts:226
rowHeadersboolean | RowHeadersExcel like functionality. Show row numbers. Also can be used for custom row header render if object provided.src/components.d.ts:230
rowSizenumberIndicates default rgRow size. By default 0, means theme package size will be applied Alternatively you can use rowSize to reset viewportsrc/components.d.ts:234
scrollToColumnIndex(coordinate?: number) => Promise<void>Scrolls viewport to specified column by index.src/components.d.ts:238
scrollToColumnProp(prop: ColumnProp, dimension?: "rgCol") => Promise<void>Scrolls viewport to specified column by propsrc/components.d.ts:242
scrollToCoordinate(cell: Partial<Cell>) => Promise<void>Scrolls view port to coordinatesrc/components.d.ts:246
scrollToRow(coordinate?: number) => Promise<void>Scrolls viewport to specified row by index.src/components.d.ts:250
setCellEdit(rgRow: number, prop: ColumnProp, rowSource?: DimensionRows) => Promise<void>Open editor for cell.src/components.d.ts:254
setCellsFocus(cellStart?: Cell, cellEnd?: Cell, colType?: string, rowType?: string) => Promise<void>Set focus range.src/components.d.ts:258
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:263
sorting?SortingConfigAlternative way to set sorting. {columns: [{prop: 'name', order: 'asc'}]}src/components.d.ts:267
sourceDataType[]Source - defines main data source. Can be an Object or 2 dimensional array([][]); Keys/indexes referenced from columns Prop.src/components.d.ts:271
stretchstring | booleanStretch strategy for columns by StretchColumn plugin. For example if there are more space on the right last column size would be increased.src/components.d.ts:275
themestringTheme name.src/components.d.ts:279
trimmedRowsRecord<number, boolean>Trimmed rows. Functionality which allows to hide rows from main data set. trimmedRows are physical rgRow indexes to hide.src/components.d.ts:283
updateColumnSorting(column: ColumnRegular, index: number, order: undefined | "asc" | "desc", additive: boolean) => Promise<ColumnRegular>Update column sortingsrc/components.d.ts:291
updateColumns(cols: ColumnRegular[]) => Promise<void>Update columnssrc/components.d.ts:295
useClipboardbooleanWhen true enable clipboard.src/components.d.ts:299

Revogrid is a powerful data grid library made by Revolist OU.