Skip to content

RevoGrid Documentation v4.15.8 / JSX / 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
accessible?booleanEnable accessibility. If disabled, the grid will not be accessible. Default truesrc/components.d.ts:1358
additionalData?AdditionalDataAdditional data to be passed to plugins, renders or editors. For example if you need to pass Vue component instance. Default {}src/components.d.ts:1363
applyOnClose?booleanApply 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:1368
autoSizeColumn?boolean | 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:1373
canDrag?booleanDisable native drag&drop plugin. Default truesrc/components.d.ts:1378
canFocus?booleanWhen true cell focus appear. Default truesrc/components.d.ts:1383
canMoveColumns?booleanEnable column move plugin. Default falsesrc/components.d.ts:1388
colSize?numberIndicates default column size. Default 100src/components.d.ts:1393
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:1398
columns?(ColumnRegular | ColumnGrouping<any>)[]Columns - defines an array of grid columns. Can be column or grouped column. Default []src/components.d.ts:1403
disableVirtualX?booleanDisable 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:1408
disableVirtualY?booleanDisable 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:1413
editors?EditorsCustom editors register. Default {}src/components.d.ts:1418
exporting?booleanEnable export plugin. Default falsesrc/components.d.ts:1423
filter?boolean | ColumnFilterConfigEnables filter plugin. Can be boolean. Or can be filter collection See FilterCollection for more info. Default falsesrc/components.d.ts:1428
focusTemplate?FocusTemplateFuncApply 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:1432
frameSize?numberDefines how many rows/columns should be rendered outside visible area. Default 1src/components.d.ts:1437
grouping?GroupingOptionsGroup rows based on this property. Define properties to be groped by grouping plugin See GroupingOptions.src/components.d.ts:1441
hideAttribution?booleanPlease only hide the attribution if you are subscribed to Pro version Default falsesrc/components.d.ts:1446
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:1451
onAdditionaldatachanged?(event: RevoGridCustomEvent<any>) => voidEmmited after the additional data is changedsrc/components.d.ts:1455
onAfteranysource?(event: RevoGridCustomEvent<{ source: DataType[]; type: DimensionRows; }>) => voidEmitted after each source update, whether from the pinned or main viewport. Useful for tracking all changes originating from sources in both the pinned and main viewports.src/components.d.ts:1459
onAftercolumnresize?(event: RevoGridCustomEvent<{}>) => voidEmitted after column resizing. Useful for retrieving the resized columns.src/components.d.ts:1466
onAftercolumnsset?(event: RevoGridCustomEvent<{ columns: ColumnCollection; order: SortingOrder; }>) => voidColumn updatedsrc/components.d.ts:1472
onAfteredit?(event: RevoGridCustomEvent<AfterEditEvent>) => voidAfter data applied or range changed.src/components.d.ts:1479
onAfterfocus?(event: RevoGridCustomEvent<FocusAfterRenderEvent>) => voidAfter focus render finished. Can be used to access a focus element through event.target. This is just a duplicate of afterfocus from revogr-focus.tsx.src/components.d.ts:1483
onAftergridinit?(event: RevoGridCustomEvent<any>) => voidEmmited after the grid is initialized. Connected to the DOM.src/components.d.ts:1487
onAftergridrender?(event: RevoGridCustomEvent<any>) => voidEmmited after the grid is rendered.src/components.d.ts:1491
onAftersourceset?(event: RevoGridCustomEvent<{ source: DataType[]; type: DimensionRows; }>) => voidAfter main source/rows updatedsrc/components.d.ts:1495
onAfterthemechanged?(event: RevoGridCustomEvent<string>) => voidEmmited after the theme is changedsrc/components.d.ts:1502
onAftertrimmed?(event: RevoGridCustomEvent<any>) => voidEmitted after trimmed values have been applied. Useful for notifying when trimming of values has taken place.src/components.d.ts:1506
onBeforeanysource?(event: RevoGridCustomEvent<{ source: DataType[]; type: DimensionRows; }>) => voidBefore data apply on any source type. Can be source from pinned and main viewport. You can override data source heresrc/components.d.ts:1510
onBeforeautofill?(event: RevoGridCustomEvent<ChangedRange>) => voidBefore autofill is applied. To prevent the default behavior of applying the edit data, you can call e.preventDefault().src/components.d.ts:1517
onBeforecellfocus?(event: RevoGridCustomEvent<BeforeSaveDataDetails>) => voidBefore the cell focus is changed. To prevent the default behavior of changing the cell focus, you can call e.preventDefault().src/components.d.ts:1521
onBeforecolumnapplied?(event: RevoGridCustomEvent<ColumnCollection>) => voidEmitted before a column update is applied, after the column set is gathered and the viewport is updated. Useful for performing actions or modifications before the final application of the column update.src/components.d.ts:1525
onBeforecolumnsset?(event: RevoGridCustomEvent<ColumnCollection>) => voidEmitted before a column update is applied. Listeners can use this event to perform any necessary actions or modifications before the column update is finalized.src/components.d.ts:1529
onBeforeedit?(event: RevoGridCustomEvent<BeforeSaveDataDetails>) => voidBefore the data is edited. To prevent the default behavior of editing data and use your own implementation, call e.preventDefault(). To override the edit result with your own value, set the e.val property to your desired value.src/components.d.ts:1533
onBeforeeditstart?(event: RevoGridCustomEvent<BeforeSaveDataDetails>) => voidEmitted before editing starts. Use e.preventDefault() to prevent the default edit behavior.src/components.d.ts:1537
onBeforeexport?(event: RevoGridCustomEvent<DataInput>) => voidBefore export Use e.preventDefault() to prevent export Replace data in Event in case you want to modify it in exportsrc/components.d.ts:1541
onBeforefilterapply?(event: RevoGridCustomEvent<{ collection: Record<ColumnProp, FilterCollectionItem>; }>) => voidEmitted before applying a filter to the data source. Use e.preventDefault() to prevent cell focus change. Modify if you need to change filters.src/components.d.ts:1545
onBeforefiltertrimmed?(event: RevoGridCustomEvent<{ collection: Record<ColumnProp, FilterCollectionItem>; itemsToFilter: Record<number, boolean>; }>) => voidEmitted before applying a filter to the data source. Use e.preventDefault() to prevent the default behavior of trimming values and applying the filter. Modify the collection property if you want to change the filters. Modify the itemsToFilter property if you want to filter the indexes for trimming.src/components.d.ts:1549
onBeforefocuslost?(event: RevoGridCustomEvent<null | FocusedData>) => voidBefore the grid focus is lost. To prevent the default behavior of changing the cell focus, you can call e.preventDefault().src/components.d.ts:1556
onBeforegridrender?(event: RevoGridCustomEvent<any>) => voidEmmited before the grid is rendered.src/components.d.ts:1560
onBeforerange?(event: RevoGridCustomEvent<ChangedRange>) => voidBefore autofill is applied. Runs before beforeautofill event. Use e.preventDefault() to prevent range.src/components.d.ts:1564
onBeforerangeedit?(event: RevoGridCustomEvent<BeforeRangeSaveDataDetails>) => voidBefore applying range data, specifically when a range selection occurs. To customize the data and prevent the default edit data from being set, you can call e.preventDefault().src/components.d.ts:1568
onBeforerowdefinition?(event: RevoGridCustomEvent<{ oldVals: any; vals: any; }>) => voidEmitted before the row definition is applied. Useful for modifying or preventing the default row definition behavior.src/components.d.ts:1572
onBeforesorting?(event: RevoGridCustomEvent<{ additive: boolean; column: ColumnRegular; order: "asc" | "desc"; }>) => voidBy SortingPlugin
Triggered immediately after header click.
First in sorting event sequence. Ff this event stops no other event called.
Use e.preventDefault() to prevent sorting.
src/components.d.ts:1576
onBeforesortingapply?(event: RevoGridCustomEvent<{ additive: boolean; column: ColumnRegular; order: "asc" | "desc"; }>) => voidBy SortingPlugin
After beforesorting
Triggered after column data updated with new sorting order.
Use e.preventDefault() to prevent sorting data change.
src/components.d.ts:1584
onBeforesourceset?(event: RevoGridCustomEvent<{ source: DataType[]; type: DimensionRows; }>) => voidBefore main source/rows data apply. You can override data source heresrc/components.d.ts:1592
onBeforesourcesortingapply?(event: RevoGridCustomEvent<{ sorting: SortingOrder; type: DimensionRows; }>) => voidBy SortingPlugin
Same as beforesorting but triggered after beforeanysource (when source is changed).
Use e.preventDefault() to prevent sorting data change.
src/components.d.ts:1599
onBeforetrimmed?(event: RevoGridCustomEvent<{ trimmed: Record<number, boolean>; trimmedType: string; type: string; }>) => voidEmitted before trimming values. Use e.preventDefault() to prevent the default behavior of trimming values. Modify the trimmed property if you want to filter the indexes for trimming.src/components.d.ts:1606
onContentsizechanged?(event: RevoGridCustomEvent<MultiDimensionType>) => voidNew content size has been applied. The size excludes the header. Currently, the event responsible for applying the new content size does not provide the actual size. To retrieve the actual content size, you can utilize the getContentSize function after the event has been triggered.src/components.d.ts:1614
onCreated?(event: RevoGridCustomEvent<any>) => voidEmmited after grid createdsrc/components.d.ts:1618
onFilterconfigchanged?(event: RevoGridCustomEvent<any>) => voidEmitted when the filter configuration is changedsrc/components.d.ts:1622
onHeaderclick?(event: RevoGridCustomEvent<ColumnRegular>) => voidOn header click.src/components.d.ts:1626
onRowdragstart?(event: RevoGridCustomEvent<RowDragStartDetails>) => voidThis event is triggered when the row order change is started. To prevent the default behavior of changing the row order, you can call e.preventDefault(). To change the item name at the start of the row order change, you can set e.text to the desired new name.src/components.d.ts:1630
onRowheaderschanged?(event: RevoGridCustomEvent<any>) => voidEmmited when the row headers are changed.src/components.d.ts:1634
onRoworderchanged?(event: RevoGridCustomEvent<{ from: number; to: number; }>) => voidBefore the order of rgRow is applied. To prevent the default behavior of changing the order of rgRow, you can call e.preventDefault().src/components.d.ts:1638
onSortingconfigchanged?(event: RevoGridCustomEvent<SortingConfig>) => voidEmitted when the sorting configuration is changed SortingPlugin subsribed to this eventsrc/components.d.ts:1642
onViewportscroll?(event: RevoGridCustomEvent<ViewPortScrollEvent>) => voidEmitted when the viewport is scrolled. Useful for tracking viewport scrolling events.src/components.d.ts:1646
pinnedBottomSource?DataType[]Pinned bottom Source: {[T in ColumnProp]: any} - defines pinned bottom rows data source. Default []src/components.d.ts:1651
pinnedTopSource?DataType[]Pinned top Source: {[T in ColumnProp]: any} - defines pinned top rows data source. Default []src/components.d.ts:1656
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:1661
range?booleanWhen true, user can range selection. Default falsesrc/components.d.ts:1666
readonly?booleanWhen true, grid in read only mode. Default falsesrc/components.d.ts:1671
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:1676
resize?booleanWhen true, columns are resizable. Default falsesrc/components.d.ts:1684
rowClass?stringRow 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:1689
rowDefinitions?RowDefinition[]Custom row properies to be applied. See RowDefinition for more info. Default []src/components.d.ts:1694
rowHeaders?boolean | RowHeadersExcel like functionality. Show row numbers. Also can be used for custom row header render if object provided.src/components.d.ts:1698
rowSize?numberIndicates 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:1703
rtl?booleanEnable right-to-left (RTL) mode. When enabled, columns will be displayed from right to left. Default falsesrc/components.d.ts:1708
sorting?SortingConfigAlternative way to set sorting. {columns: [{prop: 'name', order: 'asc'}]} Use SortingPlugin to get current sorting statesrc/components.d.ts:1712
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:1717
stretch?string | 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:1722
theme?stringTheme name. Default 'default'src/components.d.ts:1727
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:1732
useClipboard?booleanWhen true enable clipboard. Default truesrc/components.d.ts:1737