RevoGrid

Appearance

RevoGrid Features and Definitions ​

This page is a quick glossary for the concepts used throughout the RevoGrid docs. It is especially useful when you are moving between high-level guides, framework wrappers, and the API reference.

Lifecycle Hooks ​

For detailed interactions and operations, RevoGrid provides a variety of events that function similarly to lifecycle hooks, allowing developers to listen and respond to different stages and actions within the grid's lifecycle.

Here's a brief overview of some key events which can help in managing grid behavior, data manipulation, and user interactions:

Source ​

  • beforeanysource: Triggered before data application in data source.
  • afteranysource: Fires after all rows are updated.
  • beforesourceset: Fired before data source application.
  • aftersourceset: Occurs after rows are updated.
  • beforetrimmed: Triggered before trimmed rows are applied.
  • aftertrimmed: Notifies when trimmed rows is applied.

Column ​

  • beforecolumnapplied: Happens before columns are applied.
  • beforecolumnsset: Triggered before column updates.
  • aftercolumnsset: Fired when columns are updated.

Edit ​

  • beforeedit: Triggered before an edit is applied.
  • beforerangeedit: Occurs before a range edit is applied.
  • beforeautofill: Fired before autofill operation.
  • afteredit: Executes after an edit action is completed.

Focus/Selection ​

  • beforecellfocus: Occurs before cell focus changes.
  • beforefocuslost: Happens before grid focus is lost.
  • afterfocus: Fires after focus render is completed.

Events provide a structured approach to handling RevoGrid's functionalities, making it easier to implement and manage complex data grid behaviors in web applications.

API ​

The public API is the combination of:

  • props such as columns, source, filter, grouping, and additionalData
  • methods such as setDataAt, scrollToRow, setCellsFocus, and getVisibleSource
  • events such as beforeedit, afteredit, beforefilterapply, and beforesourceset

Start at RevoGrid API.

Cell ​

The intersection point of a row and a column in the grid, capable of displaying and editing data. A cell can have custom renderers and editors, which are tightly coupled with the column properties.

You can customize cells using templates to change their appearance or behavior.

Cell editor ​

A cell editor is the UI used to modify a value. RevoGrid ships with a core editor flow and supports custom editor registration through the editors prop.

Cell template ​

A cell template is a custom renderer for displaying richer cell content while keeping the grid virtualized.

Cell merge ​

Cell merging refers to combining adjacent cells into a larger visual area. This is available in RevoGrid Pro.

Clipboard ​

Clipboard support enables copy, cut, and paste workflows. It is controlled by useClipboard and range selection behavior. See Clipboard Operations.

Column ​

Columns define how the grid reads and displays row data. A column can configure:

  • prop mapping
  • name
  • size, minSize, maxSize
  • sortable
  • filter
  • editor
  • cellTemplate
  • cellProperties
  • readonly
  • pin
  • columnType

Related guides:

Data source ​

The data source is the row array shown by the grid. The main dataset is assigned through source, while pinned row regions use pinnedTopSource and pinnedBottomSource.

Data model ​

The data model is the shape of each row object inside your source array.

typescript
interface Person {
  id: number;
  name: string;
  age: number;
  email: string;
}

Event ​

Events are how RevoGrid exposes lifecycle and interaction hooks. Many events are cancelable and let you change the behavior before the grid commits it.

Examples:

  • editing: beforeedit, afteredit
  • data updates: beforesourceset, aftersourceset
  • filtering: beforefilterapply, beforefiltertrimmed
  • focus: beforecellfocus, beforefocuslost, afterfocus

See Event Patterns and Lifecycles and Hooks and Events API.

Export ​

The core export plugin supports file export workflows from the grid surface. See Export Data. Excel-focused export workflows are available in Pro.

Focus ​

Focus is the active cell target used for keyboard navigation, editing, and selection overlays. It can be enabled or disabled with canFocus.

Useful methods:

  • setCellsFocus
  • clearFocus
  • getFocused

Range ​

A range is a rectangular selection of cells. Range selection is enabled with the range prop and exposed through getSelectedRange.

Range autofill ​

Autofill extends a selected value or pattern across a dragged range. Advanced autofill workflows are available in RevoGrid Pro.

Keyboard support ​

RevoGrid includes keyboard navigation for moving focus, editing cells, selecting ranges, and copying or pasting data. Custom features should integrate with keyboard behavior rather than bypassing it.

Method ​

Methods are imperative APIs exposed on the grid instance. They are useful when application state or external controls need to drive the grid directly.

Examples:

  • scrollToRow
  • scrollToColumnProp
  • setCellEdit
  • setDataAt
  • getVisibleSource

Plugin ​

Plugins extend grid behavior without changing the core component. RevoGrid includes built-in plugins for filtering, sorting, exporting, grouping, stretching, accessibility, and more.

The plugins prop can also receive custom plugin classes. For plugin-oriented props and provider access, see Advanced Configuration.

Filtering ​

The filtering plugin hides rows that do not match the selected criteria.

Sorting ​

The sorting plugin updates column order state and applies sorted row order to the source.

Pagination ​

Pagination is not part of the OSS core guide surface today. It is available through RevoGrid Pro workflows.

Performance ​

Performance in RevoGrid comes from virtual rendering, viewport separation, lightweight renderers, and explicit data update methods. Read Grid Performance and Virtualization.

Prop ​

A prop is a public configuration field passed to the grid, such as columns, source, filter, readonly, stretch, or grouping.

Row ​

Rows represent records in the source dataset and can be customized through pinned regions, row headers, row definitions, grouping, and trimming.

Row grouping ​

Row grouping groups records under shared labels based on selected props. See Row Grouping.

Row headers ​

Row headers add an index or custom left-hand row area. See Row Headers.

Row pinning ​

Pinned rows stay visible in pinnedTopSource or pinnedBottomSource while the main dataset scrolls.

Trimmed rows ​

Trimmed rows are source rows that exist but are currently hidden from the visible viewport. Filtering uses trimming internally, and you can also control trimming directly with trimmedRows or addTrimmed.

Viewport ​

A viewport is one rendered region of the grid. RevoGrid uses separate viewports for:

  • main rows: rgRow
  • pinned top rows: rowPinStart
  • pinned bottom rows: rowPinEnd
  • main columns: rgCol
  • pinned start columns: colPinStart
  • pinned end columns: colPinEnd

Events often expose indexes relative to a viewport, not the original array position. See Understanding Viewports.

Virtual scrolling ​

Virtual scrolling means the grid renders only what is visible, plus a small rendering frame. This keeps large grids usable and responsive.

VNode Reactive DOM ​

At the core of RevoGrid's high performance is its use of a reactive DOM model (similar one you would find in any popular reactive framework Vue Virtual DOM, React Virtual DOM, etc.). This model ensures that only the parts of the grid that need updating are re-rendered, rather than the entire grid. This selective rendering mechanism is crucial for handling large amounts of data, as it significantly reduces the amount of DOM manipulation required, leading to smoother scrolling and interactions.

Web Component ​

RevoGrid is implemented as a Web Component, which is why it can be used directly in JavaScript and wrapped by multiple frameworks without changing the core implementation.