RevoGrid Documentation v4.21.5 / 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

data-rgCol-rgRow - main data slot. Applies extra elements in <revogr-data />.

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:1374
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:1379
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:1384
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:1389
canDrag?	boolean	Disable native drag&drop plugin. Default true	src/components.d.ts:1394
canFocus?	boolean	When true cell focus appear. Default true	src/components.d.ts:1399
canMoveColumns?	boolean	Enable column move plugin. Default false	src/components.d.ts:1404
colSize?	number	Indicates default column size. Default 100	src/components.d.ts:1409
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:1414
columns?	(ColumnRegular | ColumnGrouping<any>)[]	Columns - defines an array of grid columns. Can be column or grouped column. Default []	src/components.d.ts:1419
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:1424
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:1429
editors?	Editors	Custom editors register. Default {}	src/components.d.ts:1434
exporting?	boolean	Enable export plugin. Default false	src/components.d.ts:1439
filter?	boolean | ColumnFilterConfig	Enables filter plugin. Can be boolean. Or can be filter collection See FilterCollection for more info. Default false	src/components.d.ts:1444
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:1448
frameSize?	number	Defines how many rows/columns should be rendered outside visible area. Default 1	src/components.d.ts:1453
grouping?	GroupingOptions	Group rows based on this property. Define properties to be groped by grouping plugin See GroupingOptions.	src/components.d.ts:1457
hideAttribution?	boolean	Please only hide the attribution if you are subscribed to Pro version Default false	src/components.d.ts:1462
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:1467
noHorizontalScrollTransfer?	boolean	Prevents horizontal scroll state from being mirrored across viewport sections. Default false	src/components.d.ts:1472
onAdditionaldatachanged?	(event: RevoGridCustomEvent<any>) => void	Emmited after the additional data is changed	src/components.d.ts:1476
onAfteranysource?	(event: RevoGridCustomEvent<{ source: DataType[]; type: DimensionRows; }>) => void	Emitted 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:1480
onAftercolumnresize?	(event: RevoGridCustomEvent<{}>) => void	Emitted after column resizing. Useful for retrieving the resized columns.	src/components.d.ts:1487
onAftercolumnsset?	(event: RevoGridCustomEvent<{ columns: ColumnCollection; order: SortingOrder; }>) => void	Column updated	src/components.d.ts:1493
onAfteredit?	(event: RevoGridCustomEvent<AfterEditEvent>) => void	After data applied or range changed.	src/components.d.ts:1500
onAfterfocus?	(event: RevoGridCustomEvent<FocusAfterRenderEvent>) => void	After 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:1504
onAftergridinit?	(event: RevoGridCustomEvent<any>) => void	Emmited after the grid is initialized. Connected to the DOM.	src/components.d.ts:1508
onAftergridrender?	(event: RevoGridCustomEvent<any>) => void	Emmited after the grid is rendered.	src/components.d.ts:1512
onAftersourceset?	(event: RevoGridCustomEvent<{ source: DataType[]; type: DimensionRows; }>) => void	After main source/rows updated	src/components.d.ts:1516
onAfterthemechanged?	(event: RevoGridCustomEvent<string>) => void	Emmited after the theme is changed	src/components.d.ts:1523
onAftertrimmed?	(event: RevoGridCustomEvent<any>) => void	Emitted after trimmed values have been applied. Useful for notifying when trimming of values has taken place.	src/components.d.ts:1527
onBeforeanysource?	(event: RevoGridCustomEvent<{ source: DataType[]; type: DimensionRows; }>) => void	Before data apply on any source type. Can be source from pinned and main viewport. You can override data source here	src/components.d.ts:1531
onBeforeautofill?	(event: RevoGridCustomEvent<ChangedRange>) => void	Before autofill is applied. To prevent the default behavior of applying the edit data, you can call e.preventDefault().	src/components.d.ts:1538
onBeforecellfocus?	(event: RevoGridCustomEvent<BeforeSaveDataDetails>) => void	Before the cell focus is changed. To prevent the default behavior of changing the cell focus, you can call e.preventDefault().	src/components.d.ts:1542
onBeforecolumnapplied?	(event: RevoGridCustomEvent<ColumnCollection>) => void	Emitted 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:1546
onBeforecolumnsgather?	(event: RevoGridCustomEvent<{ columns: (ColumnRegular | ColumnGrouping<any>)[]; }>) => void	Emitted before user column definitions are gathered into the internal column collection. Listeners can replace detail.columns to rewrite the raw column set before RevoGrid normalizes it.	src/components.d.ts:1550
onBeforecolumnsset?	(event: RevoGridCustomEvent<ColumnCollection>) => void	Emitted 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:1556
onBeforeedit?	(event: RevoGridCustomEvent<BeforeSaveDataDetails>) => void	Before 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:1560
onBeforeeditstart?	(event: RevoGridCustomEvent<BeforeSaveDataDetails>) => void	Emitted before editing starts. Use e.preventDefault() to prevent the default edit behavior.	src/components.d.ts:1564
onBeforeexport?	(event: RevoGridCustomEvent<DataInput>) => void	Before export Use e.preventDefault() to prevent export Replace data in Event in case you want to modify it in export	src/components.d.ts:1568
onBeforefilterapply?	(event: RevoGridCustomEvent<{ collection: Record<ColumnProp, FilterCollectionItem>; }>) => void	Emitted 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:1572
onBeforefiltertrimmed?	(event: RevoGridCustomEvent<{ collection: Record<ColumnProp, FilterCollectionItem>; itemsToFilter: Record<number, boolean>; }>) => void	Emitted 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:1576
onBeforefocuslost?	(event: RevoGridCustomEvent<null | FocusedData>) => void	Before the grid focus is lost. To prevent the default behavior of changing the cell focus, you can call e.preventDefault().	src/components.d.ts:1583
onBeforegridrender?	(event: RevoGridCustomEvent<any>) => void	Emmited before the grid is rendered.	src/components.d.ts:1587
onBeforerange?	(event: RevoGridCustomEvent<ChangedRange>) => void	Before autofill is applied. Runs before beforeautofill event. Use e.preventDefault() to prevent range.	src/components.d.ts:1591
onBeforerangeedit?	(event: RevoGridCustomEvent<BeforeRangeSaveDataDetails>) => void	Before 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:1595
onBeforerowdefinition?	(event: RevoGridCustomEvent<{ oldVals: any; vals: any; }>) => void	Emitted before the row definition is applied. Useful for modifying or preventing the default row definition behavior.	src/components.d.ts:1599
onBeforesorting?	(event: RevoGridCustomEvent<{ additive: boolean; column: ColumnRegular; order: "asc" | "desc"; }>) => void	By 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:1603
onBeforesortingapply?	(event: RevoGridCustomEvent<{ additive: boolean; column: ColumnRegular; order: "asc" | "desc"; }>) => void	By SortingPlugin After beforesorting Triggered after column data updated with new sorting order. Use e.preventDefault() to prevent sorting data change.	src/components.d.ts:1611
onBeforesourceset?	(event: RevoGridCustomEvent<{ source: DataType[]; type: DimensionRows; }>) => void	Before main source/rows data apply. You can override data source here	src/components.d.ts:1619
onBeforesourcesortingapply?	(event: RevoGridCustomEvent<{ sorting: SortingOrder; type: DimensionRows; }>) => void	By SortingPlugin Same as beforesorting but triggered after beforeanysource (when source is changed). Use e.preventDefault() to prevent sorting data change.	src/components.d.ts:1626
onBeforetrimmed?	(event: RevoGridCustomEvent<{ trimmed: Record<number, boolean>; trimmedType: string; type: string; }>) => void	Emitted 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:1633
onContentsizechanged?	(event: RevoGridCustomEvent<MultiDimensionType>) => void	New 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:1641
onCreated?	(event: RevoGridCustomEvent<any>) => void	Emmited after grid created	src/components.d.ts:1645
onFilterconfigchanged?	(event: RevoGridCustomEvent<any>) => void	Emitted when the filter configuration is changed	src/components.d.ts:1649
onHeaderclick?	(event: RevoGridCustomEvent<ColumnRegular>) => void	On header click.	src/components.d.ts:1653
onRowdragstart?	(event: RevoGridCustomEvent<RowDragStartDetails>) => void	This 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:1657
onRowheaderschanged?	(event: RevoGridCustomEvent<any>) => void	Emmited when the row headers are changed.	src/components.d.ts:1661
onRoworderchanged?	(event: RevoGridCustomEvent<{ from: number; to: number; }>) => void	Before 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:1665
onSortingconfigchanged?	(event: RevoGridCustomEvent<SortingConfig>) => void	Emitted when the sorting configuration is changed SortingPlugin subsribed to this event	src/components.d.ts:1669
onViewportscroll?	(event: RevoGridCustomEvent<ViewPortScrollEvent>) => void	Emitted when the viewport is scrolled. Useful for tracking viewport scrolling events.	src/components.d.ts:1673
pinnedBottomSource?	DataType[]	Pinned bottom Source: {[T in ColumnProp]: any} - defines pinned bottom rows data source. Default []	src/components.d.ts:1678
pinnedTopSource?	DataType[]	Pinned top Source: {[T in ColumnProp]: any} - defines pinned top rows data source. Default []	src/components.d.ts:1683
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:1688
range?	boolean	When true, user can range selection. Default false	src/components.d.ts:1693
readonly?	boolean	When true, grid in read only mode. Default false	src/components.d.ts:1698
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:1703
resize?	boolean	When true, columns are resizable. Default false	src/components.d.ts:1711
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:1716
rowDefinitions?	RowDefinition[]	Custom row properies to be applied. See RowDefinition for more info. Default []	src/components.d.ts:1721
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:1725
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:1730
rtl?	boolean	Enable right-to-left (RTL) mode. When enabled, columns will be displayed from right to left. Default false	src/components.d.ts:1735
sorting?	SortingConfig	Alternative way to set sorting. {columns: [{prop: 'name', order: 'asc'}]} Use SortingPlugin to get current sorting state	src/components.d.ts:1739
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:1744
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:1749
theme?	string	Theme name. Default 'default'	src/components.d.ts:1754
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:1759
useClipboard?	boolean	When true enable clipboard. Default true	src/components.d.ts:1764