RevoGrid Documentation

RevoGrid is a high-performance data grid component built with StencilJS. It is designed to handle massive datasets, capable of rendering over 1 million rows and millions of cells efficiently through virtualization.

Core Capabilities:

• High Performance: Uses an Intelligent Virtual DOM and Virtual Scroll to keep the DOM focused on the visible viewport, allowing for millions of cells without a hard row limit.
• Accessibility & RTL: Follows WAI-ARIA best practices and provides comprehensive Right-to-Left (RTL) support for languages like Arabic and Hebrew.
• Data Manipulation: Supports sorting, multi-column filtering (including conditional and custom filters), and drag-and-drop for both rows and columns.
• Advanced Layout: Features pinned/sticky/freezed columns and rows, column/row grouping (including nested headers and drill-down), and column resizing.
• Extensibility: Includes a plugin system, support for custom cell templates, editors, and header templates, and modern VNode/tsx support.
• Excel-like Experience: Provides keyboard navigation, seamless copy/paste from Excel/Google Sheets, and various column types (Text, Number, Select, Date).

RevoGrid Pro extends the core grid with production-ready plugins designed for advanced data entry, analytics, layout, validation, remote data workflows, and enterprise planning. Key capability areas include:

• Advanced Data Structures: Hierarchical tree views and Row Transpose (vertical form-like view).
• Complex Headers & Columns: Multi-level/nested headers, column grouping, drill-down (collapse/expand), and autosizing.
• Remote Data Workflows: Server-side loading with infinite scroll, pagination, and server-side grouping/aggregation.
• Data Management: Audit trails, undo/redo history, Excel import/export (xlsx, xlsm, xlsb, xls), and smart auto-fill.
• Advanced Selection: Multi-range selection, row checkbox selection, and advanced drag-and-drop.
• Filtering & Search: Cascading filters, slider-based numeric filtering, and header-based input filtering.
• Formula Engine: Excel-like formulas with cell references, a formula bar, and dependency highlighting.
• Data Visualization: In-cell charts (sparklines, bar charts, etc.), heatmaps, and conditional formatting.
• Specialized Editing: Dynamic form editing, specialized editors (sliders, counters, timelines, dropdowns), and cell validation.
• Enterprise Tools: Pivot Tables for multidimensional analytics and Gantt/Scheduling for project planning.
• AI Integration: AI Agent support for generating plugins and configurations, and RevoGrid MCP for AI-native intelligence.

Import the Grid component and helper functions from @revolist/vue3-datagrid to render the grid. You can pass source (data), columns (configuration), and editors (custom editor registry) as props. The component supports events like @cell-click and @cell-custom-action.

<template>
    <Grid
      :editors="gridEditors"
      :source="source"
      :columns="columns"
      @cell-custom-action="testCustomCellAction"
      @cell-click="testAction"
    />
</template>

<script lang="ts" setup>
import Grid, { VGridVueEditor, VGridVueTemplate, Editors } from '@revolist/vue3-datagrid';

const MY_EDITOR = 'custom-editor';

// Register custom editors
const gridEditors: Editors = { [MY_EDITOR]: VGridVueEditor(Editor) };

const columns = [
  {
    prop: 'name',
    name: 'First',
    editor: MY_EDITOR,
    cellTemplate: VGridVueTemplate(Cell),
  },
  {
    prop: 'details',
    name: 'Second',
  },
];

const source = [
  { name: '1', details: 'Item 1' },
  { name: '2', details: 'Item 2' },
];

function testCustomCellAction(e: CustomEvent) {
  console.log('Custom cell action', e);
}
function testAction(e: CustomEvent) {
  console.log('Editor action', e);
}
</script>

Version 4.0 introduced several breaking changes, primarily focused on type support, event naming, and viewport type names.

Type Support Changes

Deprecated namespaces have been removed. Instead of using RevoGrid.ColumnRegular, use ColumnRegular directly.

Importing types:

• Before: import { RevoGrid } from '@revolist/revogrid/dist/types/interfaces'
• Now: import { ColumnRegular } from '@revolist/revogrid'

Viewport Type Renaming

Viewport type names have changed. For example, when defining rowDefinitions, change the type property:

• Before: { type: "row", ... }
• Now: { type: "rgRow", ... }

Event Naming Convention

All event names have been updated to be entirely lowercase to align with modern naming conventions.

• Example: afterEdit is now afteredit.
• Note: beforerowrender now returns a BeforeRowRenderEvent object. Review all event usage in your codebase.

In Angular v17+ standalone projects, import RevoGrid and add it to your component's imports array. You can then use the <revo-grid> selector in your template. Use the [source] property for data, [columns] for column definitions, and [editors] to register custom editors.

import { Component } from "@angular/core";
import { RevoGrid, Template, Editor, Editors, ColumnRegular } from "@revolist/angular-datagrid";
import { CellComponent } from './cell.component';
import { EditorComponent } from './editor.component';

const MY_EDITOR = 'custom-editor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RevoGrid, CellComponent, EditorComponent],
  template: `<revo-grid [source]="source" [columns]="columns" [editors]="editors"/>`,
})
export class AppComponent {
    source = [
    {
      name: "1",
      details: "Item 1",
    },
    {
      name: "2",
      details: "Item 2",
    },
  ];
  columns: ColumnRegular[] = [
      {
        prop: 'name',
        name: 'First',
        editor: MY_EDITOR,
        cellTemplate: Template(CellComponent),
      },
      {
        prop: 'details',
        name: 'Second',
      },
  ];
  editors: Editors = { [MY_EDITOR]: Editor(EditorComponent) };
}