0
# Plugin System
1

2
RevoGrid features an extensible plugin architecture that allows you to add custom functionality or extend existing capabilities. The plugin system provides access to all grid providers and enables you to hook into the grid's lifecycle and events.
3

4
## Capabilities
5

6
### Base Plugin Class
7

8
Foundation class for creating custom plugins with access to grid functionality.
9

10
```typescript { .api }
11
/**
12
 * Base class for all grid plugins
13
 */
14
abstract class BasePlugin {
15
  /** Grid element reference */
16
  protected revogrid: HTMLRevoGridElement;
17
  /** Plugin providers for accessing grid services */
18
  protected providers: PluginProviders;
19

20
  /**
21
   * Create a new plugin instance
22
   * @param revogrid - Grid element reference
23
   * @param providers - Plugin providers
24
   */
25
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders);
26

27
  /**
28
   * Subscribe to grid events
29
   * @param eventName - Event name to listen for
30
   * @param callback - Event callback function
31
   */
32
  addEventListener<K extends keyof CustomEventMap>(
33
    eventName: K, 
34
    callback: (event: CustomEvent<CustomEventMap[K]>) => void
35
  ): void;
36

37
  /**
38
   * Watch property changes in grid stores
39
   * @param prop - Property name to watch
40
   * @param callback - Change callback function
41
   * @param config - Watch configuration
42
   */
43
  watch<T>(
44
    prop: string, 
45
    callback: (newValue: T, oldValue: T) => void, 
46
    config?: WatchOptions
47
  ): void;
48

49
  /**
50
   * Remove event listener
51
   * @param eventName - Event name to remove
52
   */
53
  removeEventListener(eventName: string): void;
54

55
  /**
56
   * Emit custom event
57
   * @param eventName - Event name
58
   * @param detail - Event detail data
59
   */
60
  emit<T>(eventName: string, detail?: T): void;
61

62
  /**
63
   * Clear all subscriptions and watchers
64
   */
65
  clearSubscriptions(): void;
66

67
  /**
68
   * Destroy plugin and clean up resources
69
   */
70
  destroy(): void;
71
}
72
```
73

74
**Usage Example:**
75

76
```typescript
77
import { BasePlugin, PluginProviders } from '@revolist/revogrid';
78

79
class CustomHighlightPlugin extends BasePlugin {
80
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders) {
81
    super(revogrid, providers);
82
    
83
    // Listen for cell focus events
84
    this.addEventListener('afterfocus', this.onCellFocus.bind(this));
85
    
86
    // Watch for data changes
87
    this.watch('source', this.onDataChange.bind(this));
88
  }
89

90
  private onCellFocus(event: CustomEvent) {
91
    console.log('Cell focused:', event.detail);
92
    // Add custom highlighting logic
93
  }
94

95
  private onDataChange(newData: any[], oldData: any[]) {
96
    console.log('Data changed from', oldData.length, 'to', newData.length);
97
  }
98
}
99

100
// Register plugin
101
grid.plugins = [CustomHighlightPlugin];
102
```
103

104
### Plugin Providers
105

106
Service providers available to plugins for accessing grid functionality.
107

108
```typescript { .api }
109
/**
110
 * Plugin providers interface - access to all grid services
111
 */
112
interface PluginProviders {
113
  /** Data management provider */
114
  data: DataProvider;
115
  /** Column management provider */
116
  column: ColumnDataProvider;
117
  /** Dimension calculation provider */
118
  dimension: DimensionProvider;
119
  /** Viewport management provider */
120
  viewport: ViewportProvider;
121
  /** Selection state provider */
122
  selection: SelectionStoreConnector;
123
  /** Plugin service for plugin management */
124
  plugins: PluginService;
125
}
126

127
/**
128
 * Data provider interface for plugin access
129
 */
130
interface DataProvider {
131
  setData(source: DataType[], type: DimensionRows, disableVirtual?: boolean): void;
132
  setCellData(details: SetCellData, refresh?: boolean): void;
133
  setRangeData(data: RangeUpdateData, type: DimensionRows): void;
134
  refresh(type?: DimensionRows): void;
135
  changeOrder(details: RowOrderChangeDetails): void;
136
  setTrimmed(trimmed: Record<number, boolean>, type: DimensionRows): void;
137
}
138

139
/**
140
 * Column provider interface for plugin access
141
 */
142
interface ColumnDataProvider {
143
  setColumns(collection: ColumnCollection): void;
144
  updateColumns(cols: ColumnRegular[]): void;
145
  getColumns(): ColumnRegular[];
146
  getColumn(index: number, type: DimensionCols): ColumnRegular | undefined;
147
  getColumnIndexByProp(prop: ColumnProp, type: DimensionCols): number;
148
}
149
```
150

151
**Usage Example:**
152

153
```typescript
154
class DataExportPlugin extends BasePlugin {
155
  exportData() {
156
    // Access data through provider
157
    const dataProvider = this.providers.data;
158
    const columnProvider = this.providers.column;
159
    
160
    // Get current data and columns
161
    const columns = columnProvider.getColumns();
162
    const sourceStore = this.providers.data.getSourceStore();
163
    const data = sourceStore.get().source;
164
    
165
    // Export logic here
166
    this.exportToCSV(data, columns);
167
  }
168

169
  private exportToCSV(data: DataType[], columns: ColumnRegular[]) {
170
    // CSV export implementation
171
  }
172
}
173
```
174

175
### Built-in Plugins
176

177
Pre-built plugins available for common functionality.
178

179
```typescript { .api }
180
/**
181
 * Auto-size column plugin for automatic column width adjustment
182
 */
183
class AutoSizeColumnPlugin extends BasePlugin {
184
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders);
185
}
186

187
/**
188
 * Filter plugin for column filtering functionality
189
 */
190
class FilterPlugin extends BasePlugin {
191
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders);
192
}
193

194
/**
195
 * Sorting plugin for column sorting functionality
196
 */
197
class SortingPlugin extends BasePlugin {
198
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders);
199
}
200

201
/**
202
 * Export plugin for data export functionality
203
 */
204
class ExportFilePlugin extends BasePlugin {
205
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders);
206
}
207

208
/**
209
 * Row grouping plugin for hierarchical data display
210
 */
211
class GroupingRowPlugin extends BasePlugin {
212
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders);
213
}
214

215
/**
216
 * Column move plugin for drag-and-drop column reordering
217
 */
218
class ColumnMovePlugin extends BasePlugin {
219
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders);
220
}
221

222
/**
223
 * Column stretch plugin for responsive column sizing
224
 */
225
class StretchColumn extends BasePlugin {
226
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders);
227
}
228

229
/**
230
 * Accessibility plugin for WAI-ARIA compliance
231
 */
232
class WCAGPlugin extends BasePlugin {
233
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders);
234
}
235

236
/**
237
 * Right-to-left support plugin
238
 */
239
class RTLPlugin extends BasePlugin {
240
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders);
241
}
242
```
243

244
**Usage Example:**
245

246
```typescript
247
import { 
248
  FilterPlugin, 
249
  SortingPlugin, 
250
  AutoSizeColumnPlugin 
251
} from '@revolist/revogrid';
252

253
// Enable built-in plugins
254
grid.plugins = [
255
  FilterPlugin,
256
  SortingPlugin,
257
  AutoSizeColumnPlugin
258
];
259
```
260

261
### Plugin Configuration
262

263
Configuration options for enabling and customizing plugins.
264

265
```typescript { .api }
266
/**
267
 * Grid plugin definition - can be class constructor or instance
268
 */
269
type GridPlugin = PluginConstructor | PluginInstance;
270

271
/**
272
 * Plugin constructor type
273
 */
274
type PluginConstructor = new (
275
  revogrid: HTMLRevoGridElement, 
276
  providers: PluginProviders
277
) => BasePlugin;
278

279
/**
280
 * Plugin instance type
281
 */
282
interface PluginInstance extends BasePlugin {
283
  destroy(): void;
284
}
285

286
/**
287
 * Watch configuration options
288
 */
289
interface WatchOptions {
290
  /** Execute immediately with current value */
291
  immediate?: boolean;
292
  /** Deep watch for object changes */
293
  deep?: boolean;
294
}
295
```
296

297
**Usage Example:**
298

299
```typescript
300
// Using constructor
301
class MyPlugin extends BasePlugin {
302
  // Plugin implementation
303
}
304

305
// Using instance (for plugins with configuration)
306
class ConfigurablePlugin extends BasePlugin {
307
  constructor(
308
    revogrid: HTMLRevoGridElement, 
309
    providers: PluginProviders,
310
    public config: { theme: string; enabled: boolean }
311
  ) {
312
    super(revogrid, providers);
313
  }
314
}
315

316
// Register plugins
317
grid.plugins = [
318
  MyPlugin,  // Constructor
319
  new ConfigurablePlugin(grid, providers, { theme: 'dark', enabled: true })  // Instance
320
];
321
```
322

323
### Plugin Lifecycle
324

325
Managing plugin lifecycle and cleanup.
326

327
```typescript { .api }
328
/**
329
 * Plugin service for managing plugin lifecycle
330
 */
331
interface PluginService {
332
  /** Register a new plugin */
333
  register(plugin: GridPlugin): void;
334
  
335
  /** Unregister a plugin */
336
  unregister(plugin: GridPlugin): void;
337
  
338
  /** Get all active plugins */
339
  getPlugins(): PluginBaseComponent[];
340
  
341
  /** Destroy all plugins */
342
  destroyAll(): void;
343
}
344

345
/**
346
 * Plugin base component interface
347
 */
348
interface PluginBaseComponent {
349
  /** Plugin name/identifier */
350
  name?: string;
351
  /** Destroy plugin and clean up */
352
  destroy(): void;
353
}
354
```
355

356
**Usage Example:**
357

358
```typescript
359
class LifecyclePlugin extends BasePlugin {
360
  name = 'lifecycle-plugin';
361

362
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders) {
363
    super(revogrid, providers);
364
    console.log('Plugin initialized');
365
  }
366

367
  destroy() {
368
    console.log('Plugin destroyed');
369
    super.destroy();
370
  }
371
}
372

373
// Register plugin
374
grid.plugins = [LifecyclePlugin];
375

376
// Later, get active plugins
377
const plugins = await grid.getPlugins();
378
console.log('Active plugins:', plugins.map(p => p.name));
379
```
380

381
### Custom Event Handling
382

383
Advanced event handling and custom event creation in plugins.
384

385
```typescript { .api }
386
/**
387
 * Custom event map for type-safe event handling
388
 */
389
interface CustomEventMap {
390
  // Data events
391
  beforeedit: BeforeSaveDataDetails;
392
  afteredit: AfterEditEvent;
393
  
394
  // Selection events
395
  beforecellfocus: BeforeSaveDataDetails;
396
  afterfocus: FocusAfterRenderEvent;
397
  
398
  // Column events
399
  beforecolumnsset: ColumnCollection;
400
  aftercolumnsset: { columns: ColumnRegular[]; order: Record<string, number> };
401
  
402
  // Custom plugin events
403
  [key: string]: any;
404
}
405

406
/**
407
 * Event detail types
408
 */
409
interface BeforeSaveDataDetails {
410
  val: any;
411
  oldVal: any;
412
  row: DataType;
413
  col: ColumnRegular;
414
  models: DataType[];
415
}
416

417
interface AfterEditEvent {
418
  val: any;
419
  oldVal: any;
420
  row: DataType;
421
  col: ColumnRegular;
422
  models: DataType[];
423
}
424
```
425

426
**Usage Example:**
427

428
```typescript
429
class EventPlugin extends BasePlugin {
430
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders) {
431
    super(revogrid, providers);
432
    
433
    // Type-safe event listening
434
    this.addEventListener('afteredit', this.onAfterEdit);
435
    this.addEventListener('beforecolumnsset', this.onBeforeColumnsSet);
436
  }
437

438
  private onAfterEdit = (event: CustomEvent<AfterEditEvent>) => {
439
    const { val, oldVal, row, col } = event.detail;
440
    console.log(`Cell ${col.prop} changed from ${oldVal} to ${val}`);
441
    
442
    // Emit custom event
443
    this.emit('custom-data-changed', {
444
      column: col.prop,
445
      newValue: val,
446
      row: row
447
    });
448
  };
449

450
  private onBeforeColumnsSet = (event: CustomEvent<ColumnCollection>) => {
451
    console.log('Columns will be set:', event.detail);
452
  };
453
}
454
```
455

456
### Plugin Communication
457

458
Inter-plugin communication and data sharing.
459

460
```typescript { .api }
461
/**
462
 * Plugin registry for cross-plugin communication
463
 */
464
interface PluginRegistry {
465
  /** Register plugin with name */
466
  register(name: string, plugin: BasePlugin): void;
467
  
468
  /** Get plugin by name */
469
  get(name: string): BasePlugin | undefined;
470
  
471
  /** Check if plugin exists */
472
  has(name: string): boolean;
473
  
474
  /** Send message to plugin */
475
  sendMessage(targetPlugin: string, message: any): void;
476
}
477
```
478

479
**Usage Example:**
480

481
```typescript
482
class ProducerPlugin extends BasePlugin {
483
  name = 'producer';
484

485
  shareData() {
486
    // Share data with other plugins
487
    this.emit('plugin-data-share', {
488
      from: this.name,
489
      data: { status: 'active', count: 100 }
490
    });
491
  }
492
}
493

494
class ConsumerPlugin extends BasePlugin {
495
  name = 'consumer';
496

497
  constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders) {
498
    super(revogrid, providers);
499
    
500
    // Listen for shared data
501
    this.addEventListener('plugin-data-share', this.onDataReceived);
502
  }
503

504
  private onDataReceived = (event: CustomEvent) => {
505
    const { from, data } = event.detail;
506
    console.log(`Received data from ${from}:`, data);
507
  };
508
}
509
```