RevoGrid Documentation v4.27.7 / 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
| Property | Type | Description | Defined in |
|---|---|---|---|
accessible | boolean | Enable accessibility. If disabled, the grid will not be accessible. Default true | src/components.d.ts:60 |
addTrimmed | (trimmed: Record<number, boolean>, trimmedType?: string, type?: DimensionRows) => Promise<CustomEvent<{ trimmed: Record<number, boolean>; trimmedType: string; type: string; }>> | Add trimmed by type | src/components.d.ts:64 |
additionalData | AdditionalData | Additional data to be passed to plugins, renders or editors. For example if you need to pass Vue component instance. Default {} | src/components.d.ts:69 |
applyOnClose | boolean | Apply 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 false | src/components.d.ts:74 |
autoSizeColumn | boolean | AutoSizeColumnConfig | Autosize 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 false | src/components.d.ts:79 |
canDrag | boolean | Disable native drag&drop plugin. Default true | src/components.d.ts:84 |
canFocus | boolean | When true cell focus appear. Default true | src/components.d.ts:89 |
canMoveColumns | boolean | Enable column move plugin. Default true | src/components.d.ts:94 |
clearFocus | () => Promise<void> | Clear current grid focus. Grid has no longer focus on it. | src/components.d.ts:98 |
clearSorting | () => Promise<void> | Clears column sorting | src/components.d.ts:102 |
colSize | number | Indicates default column size. Default 100 | src/components.d.ts:107 |
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:112 |
columns | (ColumnRegular<ColumnProp, DataType<any, ColumnProp>> | ColumnGrouping<any>)[] | Columns - defines an array of grid columns. Can be column or grouped column. Default [] | src/components.d.ts:117 |
disableVirtualX | boolean | Disable 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 false | src/components.d.ts:122 |
disableVirtualY | boolean | Disable 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 false | src/components.d.ts:127 |
editors | Editors | Custom editors register. Default {} | src/components.d.ts:132 |
exporting | boolean | Enable export plugin. Default true | src/components.d.ts:137 |
filter | boolean | ColumnFilterConfig | Enables filter plugin. Enabled by default; set to false to opt out. Can be boolean. Or can be filter collection See FilterCollection for more info. Default true | src/components.d.ts:142 |
focusTemplate | FocusTemplateFunc | Apply 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:146 |
frameSize | number | Defines how many rows/columns should be rendered outside visible area. Default 1 | src/components.d.ts:151 |
getColumnStore | (type?: DimensionCols) => Promise<Observable<DSourceState<ColumnRegular<ColumnProp, DataType<any, ColumnProp>>, DimensionCols>>> | Provides access to column internal store observer Can be used for plugin support | src/components.d.ts:156 |
getColumns | () => Promise<ColumnRegular<ColumnProp, DataType<any, ColumnProp>>[]> | Receive all columns in data source | src/components.d.ts:160 |
getContentSize | () => Promise<Cell> | Get size of content Including all pinned data | src/components.d.ts:164 |
getFocused | () => Promise<null | FocusedData> | Get the currently focused cell. | src/components.d.ts:168 |
getPlugins | () => Promise<PluginBaseComponent[]> | Get all active plugins instances | src/components.d.ts:172 |
getProviders | () => Promise<undefined | PluginProviders> | Get all providers for grid Useful for external grid integration | src/components.d.ts:176 |
getSelectedRange | () => Promise<null | RangeArea & AllDimensionType> | Get the currently selected Range. | src/components.d.ts:180 |
getSource | (type?: DimensionRows) => Promise<DataType[]> | Get data from source | src/components.d.ts:184 |
getSourceStore | (type?: DimensionRows) => Promise<Observable<DSourceState<DataType, DimensionRows>>> | Provides access to rows internal store observer Can be used for plugin support | src/components.d.ts:189 |
getVisibleSource | (type?: DimensionRows) => Promise<any[]> | Get data from visible part of source Trimmed/filtered rows will be excluded | src/components.d.ts:194 |
grouping | GroupingOptions | Group rows based on this property. Define properties to be groped by grouping plugin See GroupingOptions. | src/components.d.ts:198 |
hideAttribution | boolean | Please only hide the attribution if you are subscribed to Pro version Default false | src/components.d.ts:203 |
jobsBeforeRender | Promise<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:208 |
noHorizontalScrollTransfer | boolean | Prevents horizontal scroll state from being mirrored across viewport sections. Default false | src/components.d.ts:213 |
pinnedBottomSource | DataType[] | Pinned bottom Source: {[T in ColumnProp]: any} - defines pinned bottom rows data source. Default [] | src/components.d.ts:218 |
pinnedTopSource | DataType[] | Pinned top Source: {[T in ColumnProp]: any} - defines pinned top rows data source. Default [] | src/components.d.ts:223 |
plugins | typeof 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:228 |
range | boolean | When true, user can select a cell range. Required for range-based clipboard fill. Default false | src/components.d.ts:233 |
readonly | boolean | When true, grid in read only mode. Default false | src/components.d.ts:238 |
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:242 |
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:246 |
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:251 |
resize | boolean | When true, columns are resizable. Default true | src/components.d.ts:259 |
resizeRow | boolean | RowResizeConfig | Enables row resizing. Pass a configuration object to customize the height limits or enable resize edges across the full row. Default false | src/components.d.ts:264 |
rowClass | string | Row 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:269 |
rowDefinitions | RowDefinition[] | Custom row properies to be applied. See RowDefinition for more info. Default [] | src/components.d.ts:274 |
rowHeaders | boolean | RowHeaders | Excel like functionality. Show row numbers. Also can be used for custom row header render if object provided. | src/components.d.ts:278 |
rowSize | number | Indicates default rgRow size. By default 0, means theme package size will be applied Alternatively you can use rowSize to reset viewport Default 0 | src/components.d.ts:283 |
rtl | boolean | Enable right-to-left (RTL) mode. When enabled, columns will be displayed from right to left. Default false | src/components.d.ts:288 |
scrollToColumnIndex | (coordinate?: number) => Promise<void> | Scrolls viewport to specified column by index. | src/components.d.ts:292 |
scrollToColumnProp | (prop: ColumnProp, dimension?: "rgCol") => Promise<void> | Scrolls viewport to specified column by prop | src/components.d.ts:296 |
scrollToCoordinate | (cell: Partial<Cell>) => Promise<void> | Scrolls view port to coordinate | src/components.d.ts:300 |
scrollToRow | (coordinate?: number) => Promise<void> | Scrolls viewport to specified row by index. | src/components.d.ts:304 |
setCellEdit | (rgRow: number, prop: ColumnProp, rowSource?: DimensionRows) => Promise<void> | Open editor for cell. | src/components.d.ts:308 |
setCellsFocus | (cellStart?: Cell, cellEnd?: Cell, colType?: string, rowType?: string) => Promise<void> | Set focus range. | src/components.d.ts:312 |
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' }); // refresh | src/components.d.ts:317 |
sorting? | SortingConfig | Alternative way to set sorting. {columns: [{prop: 'name', order: 'asc'}]} Use SortingPlugin to get current sorting state | src/components.d.ts:321 |
source | DataType[] | Source - defines main data source. Can be an Object or 2 dimensional array([][]); Keys/indexes referenced from columns Prop. Default [] | src/components.d.ts:326 |
stretch | string | boolean | Stretch strategy for columns by StretchColumn plugin. For example if there are more space on the right last column size would be increased. Default false | src/components.d.ts:331 |
theme | string | Theme name. Default 'default' | src/components.d.ts:336 |
themeDefinitions | ThemeDefinition[] | Per-grid custom theme definitions. Assign as a JavaScript property; complex values cannot be serialized as HTML attributes. Default [] | src/components.d.ts:341 |
trimmedRows | Record<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:346 |
updateColumnSorting | (column: Pick<ColumnRegular<ColumnProp, DataType<any, ColumnProp>>, "prop" | "cellCompare">, order: undefined | "asc" | "desc", additive: boolean) => Promise<void> | Update column sorting | src/components.d.ts:353 |
updateColumns | (cols: ColumnRegular<ColumnProp, DataType<any, ColumnProp>>[]) => Promise<void> | Update columns | src/components.d.ts:357 |
useClipboard | boolean | ClipboardConfig | When true enable clipboard. Can be boolean or clipboard config. Default true | src/components.d.ts:362 |
virtualX | DimensionCols[] | Column dimensions that use X axis virtual rendering. Defaults to regular columns only to preserve pinned column behavior. Set to ['rgCol', 'colPinStart', 'colPinEnd'] to virtualize all column areas. Default ['rgCol'] | src/components.d.ts:367 |