0
# RevoGrid
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: @revolist/revogrid
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @revolist/revogrid`
10

11
## Core Imports
12

13
```typescript
14
import { ColumnRegular, DataType } from '@revolist/revogrid';
15
```
16

17
For framework-specific bindings:
18

19
```typescript
20
// Vue 3
21
import { RevoGrid } from '@revolist/vue3-datagrid';
22

23
// React
24
import RevoGrid from '@revolist/react-datagrid';
25

26
// Angular 
27
import { RevoGridModule } from '@revolist/angular-datagrid';
28

29
// Svelte
30
import RevoGrid from '@revolist/svelte-datagrid';
31
```
32

33
## Basic Usage
34

35
```typescript
36
import { ColumnRegular, DataType } from '@revolist/revogrid';
37

38
// Define columns
39
const columns: ColumnRegular[] = [
40
  { prop: 'name', name: 'Name' },
41
  { prop: 'age', name: 'Age', columnType: 'numeric' },
42
  { prop: 'email', name: 'Email' }
43
];
44

45
// Define data source
46
const source: DataType[] = [
47
  { name: 'John Doe', age: 30, email: 'john@example.com' },
48
  { name: 'Jane Smith', age: 25, email: 'jane@example.com' }
49
];
50

51
// Use in HTML
52
const grid = document.querySelector('revo-grid');
53
grid.columns = columns;
54
grid.source = source;
55
```
56

57
```html
58
<!-- Direct HTML usage -->
59
<revo-grid
60
  theme="material"
61
  range="true"
62
  resize="true"
63
  filter="true">
64
</revo-grid>
65
```
66

67
## Architecture
68

69
RevoGrid is built around several key architectural components:
70

71
- **Virtual Scrolling Engine**: High-performance rendering system that only renders visible cells
72
- **StencilJS Component System**: Web component architecture for framework agnostic usage
73
- **Plugin Architecture**: Extensible plugin system for adding functionality
74
- **Store Management**: Reactive state management for data, columns, selection, and viewport
75
- **Provider System**: Service layer managing data operations, dimensions, and viewport calculations
76

77
### Core Components
78

79
The grid consists of multiple interconnected StencilJS components:
80

81
- `<revo-grid>` - Main orchestration component
82
- `<revogr-data>` - Data cell rendering with virtualization
83
- `<revogr-header>` - Column header rendering
84
- `<revogr-focus>` - Focus and selection management
85
- `<revogr-overlay-selection>` - Range selection overlay
86
- `<revogr-scroll-virtual>` - Virtual scrolling implementation
87

88
## Capabilities
89

90
### Grid Component
91

92
Core grid component with comprehensive configuration options and methods for data manipulation, navigation, and interaction.
93

94
```typescript { .api }
95
// Main grid element
96
interface HTMLRevoGridElement extends StencilComponent {
97
  // Essential properties
98
  columns: (ColumnRegular | ColumnGrouping)[];
99
  source: DataType[];
100
  readonly: boolean;
101
  
102
  // Core methods
103
  refresh(type?: DimensionRows): Promise<void>;
104
  updateColumns(cols: ColumnRegular[]): Promise<void>;
105
  setDataAt(params: SetDataAtDetails): Promise<void>;
106
  getSource(type?: DimensionRows): Promise<DataType[]>;
107
}
108
```
109

110
[Grid Component](./revo-grid-component.md)
111

112
### Data Management
113

114
Comprehensive data source management with reactive stores for handling grid data, including main source, pinned rows, and data operations.
115

116
```typescript { .api }
117
type DataType<D = any> = {
118
  [T in ColumnProp]: DataFormat<D>;
119
};
120

121
interface DataSourceState<T, ST> {
122
  items: number[];
123
  proxyItems: number[];
124
  source: T[];
125
  groupingDepth: number;
126
  groups: Record<any, any>;
127
  type: ST;
128
  trimmed: Record<any, any>;
129
}
130
```
131

132
[Data Management and Stores](./data-stores.md)
133

134
### Plugin System
135

136
Extensible plugin architecture allowing custom functionality through base plugin classes and built-in plugins for common operations.
137

138
```typescript { .api }
139
class BasePlugin {
140
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders);
141
  addEventListener<K>(eventName: K, callback: Function): void;
142
  watch<T>(prop: string, callback: Function, config?: WatchOptions): void;
143
  emit<T>(eventName: string, detail?: T): void;
144
}
145
```
146

147
[Plugin System](./plugins.md)
148

149
### Types and Interfaces
150

151
Comprehensive type system covering all grid functionality including columns, data types, dimensions, editors, and configuration options.
152

153
```typescript { .api }
154
interface ColumnRegular extends ColumnType {
155
  prop: ColumnProp;
156
  pin?: DimensionColPin;
157
  name?: any;
158
  autoSize?: boolean;
159
  filter?: boolean | string | string[];
160
  sortable?: boolean;
161
}
162
```
163

164
[Types and Interfaces](./types-interfaces.md)
165

166
### Events and Handlers
167

168
Rich event system covering all grid interactions including data changes, user interactions, lifecycle events, and plugin events.
169

170
```typescript { .api }
171
// Data events
172
type BeforeSaveDataDetails = {
173
  val: any;
174
  oldVal: any;
175
  row: DataType;
176
  col: ColumnRegular;
177
  models: DataType[];
178
};
179

180
// Event listener methods
181
addEventListener(type: 'afteredit', listener: (e: CustomEvent<AfterEditEvent>) => void): void;
182
```
183

184
[Events and Handlers](./events.md)
185

186
### Utilities and Services
187

188
Utility functions and service classes for common operations including data manipulation, column management, dimension calculations, and viewport handling.
189

190
```typescript { .api }
191
// Utility functions
192
function getColumns(columns: ColumnDefinition[], level?: number): ColumnCollection;
193
function range(size: number, startAt?: number): number[];
194

195
// Service classes
196
class DataProvider {
197
  setData(source: DataType[], type: DimensionRows): void;
198
  setCellData(details: SetCellData, refresh?: boolean): void;
199
}
200
```
201

202
[Utilities and Services](./utilities.md)