tessl/npm-revolist--revogrid

Virtual reactive data grid spreadsheet component with high-performance virtual scrolling and framework support.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

RevoGrid

Name: tessl/npm-revolist--revogrid
Author: tessl

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[]>;
}

Grid Component

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>;
}

Data Management and Stores

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;
}

Plugin System

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;
}

Types and Interfaces

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;

Events and Handlers

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;
}

Utilities and Services