tessl/npm-revolist--revogrid
Virtual reactive data grid spreadsheet component with high-performance virtual scrolling and framework support.
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
To install, run
npx @tessl/cli install tessl/npm-revolist--revogrid@4.17.0index.mddocs/
RevoGrid
RevoGrid is a high-performance virtual data grid spreadsheet component built with StencilJS that can handle millions of cells and thousands of columns efficiently. It provides a comprehensive spreadsheet-like experience with Excel-like keyboard navigation, copy/paste functionality, and supports multiple frontend frameworks including Vue, React, Angular, and Svelte through framework-specific output targets. The component features advanced capabilities such as virtual scrolling for performance, column grouping and filtering, cell editing with custom editors, accessibility support following WAI-ARIA guidelines, RTL language support, and theming options.
Package Information
- Package Name: @revolist/revogrid
- Package Type: npm
- Language: TypeScript
- Installation:
npm install @revolist/revogrid
Core Imports
import { ColumnRegular, DataType } from '@revolist/revogrid';For framework-specific bindings:
// Vue 3
import { RevoGrid } from '@revolist/vue3-datagrid';
// React
import RevoGrid from '@revolist/react-datagrid';
// Angular
import { RevoGridModule } from '@revolist/angular-datagrid';
// Svelte
import RevoGrid from '@revolist/svelte-datagrid';Basic Usage
import { ColumnRegular, DataType } from '@revolist/revogrid';
// Define columns
const columns: ColumnRegular[] = [
{ prop: 'name', name: 'Name' },
{ prop: 'age', name: 'Age', columnType: 'numeric' },
{ prop: 'email', name: 'Email' }
];
// Define data source
const source: DataType[] = [
{ name: 'John Doe', age: 30, email: 'john@example.com' },
{ name: 'Jane Smith', age: 25, email: 'jane@example.com' }
];
// Use in HTML
const grid = document.querySelector('revo-grid');
grid.columns = columns;
grid.source = source;<!-- Direct HTML usage -->
<revo-grid
theme="material"
range="true"
resize="true"
filter="true">
</revo-grid>Architecture
RevoGrid is built around several key architectural components:
- Virtual Scrolling Engine: High-performance rendering system that only renders visible cells
- StencilJS Component System: Web component architecture for framework agnostic usage
- Plugin Architecture: Extensible plugin system for adding functionality
- Store Management: Reactive state management for data, columns, selection, and viewport
- Provider System: Service layer managing data operations, dimensions, and viewport calculations
Core Components
The grid consists of multiple interconnected StencilJS components:
<revo-grid>- Main orchestration component<revogr-data>- Data cell rendering with virtualization<revogr-header>- Column header rendering<revogr-focus>- Focus and selection management<revogr-overlay-selection>- Range selection overlay<revogr-scroll-virtual>- Virtual scrolling implementation
Capabilities
Grid Component
Core grid component with comprehensive configuration options and methods for data manipulation, navigation, and interaction.
// Main grid element
interface HTMLRevoGridElement extends StencilComponent {
// Essential properties
columns: (ColumnRegular | ColumnGrouping)[];
source: DataType[];
readonly: boolean;
// Core methods
refresh(type?: DimensionRows): Promise<void>;
updateColumns(cols: ColumnRegular[]): Promise<void>;
setDataAt(params: SetDataAtDetails): Promise<void>;
getSource(type?: DimensionRows): Promise<DataType[]>;
}Data Management
Comprehensive data source management with reactive stores for handling grid data, including main source, pinned rows, and data operations.
type DataType<D = any> = {
[T in ColumnProp]: DataFormat<D>;
};
interface DataSourceState<T, ST> {
items: number[];
proxyItems: number[];
source: T[];
groupingDepth: number;
groups: Record<any, any>;
type: ST;
trimmed: Record<any, any>;
}Plugin System
Extensible plugin architecture allowing custom functionality through base plugin classes and built-in plugins for common operations.
class BasePlugin {
constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders);
addEventListener<K>(eventName: K, callback: Function): void;
watch<T>(prop: string, callback: Function, config?: WatchOptions): void;
emit<T>(eventName: string, detail?: T): void;
}Types and Interfaces
Comprehensive type system covering all grid functionality including columns, data types, dimensions, editors, and configuration options.
interface ColumnRegular extends ColumnType {
prop: ColumnProp;
pin?: DimensionColPin;
name?: any;
autoSize?: boolean;
filter?: boolean | string | string[];
sortable?: boolean;
}Events and Handlers
Rich event system covering all grid interactions including data changes, user interactions, lifecycle events, and plugin events.
// Data events
type BeforeSaveDataDetails = {
val: any;
oldVal: any;
row: DataType;
col: ColumnRegular;
models: DataType[];
};
// Event listener methods
addEventListener(type: 'afteredit', listener: (e: CustomEvent<AfterEditEvent>) => void): void;Utilities and Services
Utility functions and service classes for common operations including data manipulation, column management, dimension calculations, and viewport handling.
// Utility functions
function getColumns(columns: ColumnDefinition[], level?: number): ColumnCollection;
function range(size: number, startAt?: number): number[];
// Service classes
class DataProvider {
setData(source: DataType[], type: DimensionRows): void;
setCellData(details: SetCellData, refresh?: boolean): void;
}