0
# Grid Component
1

2
The `<revo-grid>` component is the main grid component that orchestrates all grid functionality. It serves as the primary interface for configuring and interacting with the data grid.
3

4
## Capabilities
5

6
### Main Grid Element
7

8
The revo-grid web component with comprehensive configuration options.
9

10
```typescript { .api }
11
interface HTMLRevoGridElement extends StencilComponent {
12
  // Data properties
13
  columns: (ColumnRegular | ColumnGrouping)[];
14
  source: DataType[];
15
  pinnedTopSource: DataType[];
16
  pinnedBottomSource: DataType[];
17
  rowDefinitions: RowDefinition[];
18
  
19
  // Row headers configuration
20
  rowHeaders: RowHeaders | boolean;
21
  
22
  // Configuration properties  
23
  readonly: boolean;
24
  range: boolean;
25
  resize: boolean;
26
  canFocus: boolean;
27
  useClipboard: boolean;
28
  canMoveColumns: boolean;
29
  canDrag: boolean;
30
  applyOnClose: boolean;
31
  
32
  // Display properties
33
  theme: Theme;
34
  rowSize: number;
35
  colSize: number;
36
  frameSize: number;
37
  
38
  // Feature properties
39
  autoSizeColumn: boolean | AutoSizeColumnConfig;
40
  filter: boolean | ColumnFilterConfig;
41
  sorting: SortingConfig;
42
  grouping: GroupingOptions;
43
  stretch: boolean | string;
44
  
45
  // Advanced properties
46
  editors: Editors;
47
  plugins: GridPlugin[];
48
  columnTypes: {[name: string]: ColumnType};
49
  trimmedRows: Record<number, boolean>;
50
  additionalData: AdditionalData;
51
  
52
  // Virtualization control
53
  disableVirtualX: boolean;
54
  disableVirtualY: boolean;
55
  
56
  // Accessibility and RTL
57
  accessible: boolean;
58
  rtl: boolean;
59
  
60
  // Custom templates
61
  focusTemplate: FocusTemplateFunc;
62
  
63
  // Export functionality
64
  exporting: boolean;
65
}
66
```
67

68
**Usage Example:**
69

70
```typescript
71
import { ColumnRegular, DataType } from '@revolist/revogrid';
72

73
const grid = document.querySelector('revo-grid') as HTMLRevoGridElement;
74

75
// Configure columns
76
grid.columns = [
77
  { prop: 'name', name: 'Name', autoSize: true },
78
  { prop: 'age', name: 'Age', columnType: 'numeric' },
79
  { prop: 'email', name: 'Email', filter: true }
80
];
81

82
// Set data
83
grid.source = [
84
  { name: 'John', age: 30, email: 'john@example.com' },
85
  { name: 'Jane', age: 25, email: 'jane@example.com' }
86
];
87

88
// Enable features
89
grid.range = true;
90
grid.resize = true;
91
grid.filter = true;
92
grid.theme = 'material';
93
```
94

95
### Data Management Methods
96

97
Methods for managing grid data and content.
98

99
```typescript { .api }
100
/**
101
 * Refresh data viewport for specific dimension type
102
 * @param type - Dimension type to refresh or 'all' for all dimensions
103
 */
104
refresh(type?: DimensionRows | 'all'): Promise<void>;
105

106
/**
107
 * Update specific cell data
108
 * @param params - Cell update parameters
109
 */
110
setDataAt(params: SetDataAtDetails): Promise<void>;
111

112
/**
113
 * Update column definitions
114
 * @param cols - New column definitions
115
 */
116
updateColumns(cols: ColumnRegular[]): Promise<void>;
117

118
/**
119
 * Add trimmed/hidden rows
120
 * @param trimmed - Trimmed row configuration
121
 * @param trimmedType - Type of trimmed operation
122
 * @param type - Dimension type
123
 */
124
addTrimmed(
125
  trimmed: Record<number, boolean>, 
126
  trimmedType?: string, 
127
  type?: DimensionRows
128
): Promise<CustomEvent>;
129

130
/**
131
 * Get data source for specific dimension
132
 * @param type - Dimension type (rgRow, rowPinStart, rowPinEnd)
133
 */
134
getSource(type?: DimensionRows): Promise<DataType[]>;
135

136
/**
137
 * Get visible data source (excludes trimmed rows)
138
 * @param type - Dimension type
139
 */
140
getVisibleSource(type?: DimensionRows): Promise<DataType[]>;
141
```
142

143
**Usage Example:**
144

145
```typescript
146
// Update cell data
147
await grid.setDataAt({
148
  row: 0,
149
  col: 'name',
150
  val: 'Updated Name'
151
});
152

153
// Refresh grid
154
await grid.refresh();
155

156
// Get current data
157
const currentData = await grid.getSource();
158
console.log(currentData);
159
```
160

161
### Navigation and Scrolling Methods
162

163
Methods for programmatic navigation and scrolling.
164

165
```typescript { .api }
166
/**
167
 * Scroll to specific row index
168
 * @param coordinate - Row coordinate
169
 */
170
scrollToRow(coordinate: number): Promise<void>;
171

172
/**
173
 * Scroll to column by index
174
 * @param coordinate - Column coordinate
175
 */
176
scrollToColumnIndex(coordinate: number): Promise<void>;
177

178
/**
179
 * Scroll to column by property name
180
 * @param prop - Column property
181
 * @param dimension - Dimension type
182
 */
183
scrollToColumnProp(prop: ColumnProp, dimension?: DimensionCols): Promise<void>;
184

185
/**
186
 * Scroll to specific cell coordinate
187
 * @param cell - Cell coordinate
188
 */
189
scrollToCoordinate(cell: Cell): Promise<void>;
190

191
/**
192
 * Get content size information
193
 */
194
getContentSize(): Promise<Cell>;
195
```
196

197
**Usage Example:**
198

199
```typescript
200
// Scroll to row 100
201
await grid.scrollToRow(100);
202

203
// Scroll to column by property
204
await grid.scrollToColumnProp('email');
205

206
// Scroll to specific cell
207
await grid.scrollToCoordinate({ x: 2, y: 50 });
208
```
209

210
### Selection and Focus Methods
211

212
Methods for managing cell selection and focus.
213

214
```typescript { .api }
215
/**
216
 * Open cell editor for specific cell
217
 * @param rgRow - Row index
218
 * @param prop - Column property
219
 * @param rowSource - Row source type
220
 */
221
setCellEdit(rgRow: number, prop: ColumnProp, rowSource?: DimensionRows): Promise<void>;
222

223
/**
224
 * Set focus range for cells
225
 * @param cellStart - Start cell coordinate
226
 * @param cellEnd - End cell coordinate (optional for single cell)
227
 * @param colType - Column dimension type
228
 * @param rowType - Row dimension type
229
 */
230
setCellsFocus(
231
  cellStart?: Cell, 
232
  cellEnd?: Cell, 
233
  colType?: DimensionCols, 
234
  rowType?: DimensionRows
235
): Promise<void>;
236

237
/**
238
 * Clear grid focus
239
 */
240
clearFocus(): Promise<void>;
241

242
/**
243
 * Get currently focused cell
244
 */
245
getFocused(): Promise<FocusedData | null>;
246

247
/**
248
 * Get selected range information
249
 */
250
getSelectedRange(): Promise<RangeArea & AllDimensionType | null>;
251
```
252

253
**Usage Example:**
254

255
```typescript
256
// Set cell focus
257
await grid.setCellsFocus({ x: 0, y: 0 });
258

259
// Open editor for cell
260
await grid.setCellEdit(0, 'name');
261

262
// Get focused cell
263
const focused = await grid.getFocused();
264
console.log('Focused cell:', focused);
265

266
// Clear focus
267
await grid.clearFocus();
268
```
269

270
### Column Management Methods
271

272
Methods for working with columns.
273

274
```typescript { .api }
275
/**
276
 * Update column sorting
277
 * @param column - Column to sort
278
 * @param order - Sort order
279
 * @param additive - Add to existing sort
280
 */
281
updateColumnSorting(
282
  column: ColumnRegular, 
283
  order: 'asc' | 'desc', 
284
  additive: boolean
285
): Promise<void>;
286

287
/**
288
 * Clear all sorting
289
 */
290
clearSorting(): Promise<void>;
291

292
/**
293
 * Get all columns
294
 */
295
getColumns(): Promise<ColumnRegular[]>;
296

297
/**
298
 * Get column store observer
299
 * @param type - Dimension type
300
 */
301
getColumnStore(type?: DimensionCols): Promise<Observable<any>>;
302

303
/**
304
 * Get source store observer
305
 * @param type - Dimension type
306
 */
307
getSourceStore(type?: DimensionRows): Promise<Observable<any>>;
308
```
309

310
**Usage Example:**
311

312
```typescript
313
// Sort by column
314
const nameColumn = { prop: 'name', name: 'Name' };
315
await grid.updateColumnSorting(nameColumn, 'asc', false);
316

317
// Clear sorting
318
await grid.clearSorting();
319

320
// Get all columns
321
const columns = await grid.getColumns();
322
console.log('Current columns:', columns);
323
```
324

325
### Plugin and Provider Methods
326

327
Methods for accessing plugins and providers.
328

329
```typescript { .api }
330
/**
331
 * Get active plugins
332
 */
333
getPlugins(): Promise<PluginBaseComponent[]>;
334

335
/**
336
 * Get all providers (data, column, dimension, etc.)
337
 */
338
getProviders(): Promise<PluginProviders>;
339

340
/**
341
 * Refresh extra elements (plugins, overlays)
342
 */
343
refreshExtraElements(): Promise<void>;
344
```
345

346
**Usage Example:**
347

348
```typescript
349
// Get active plugins
350
const plugins = await grid.getPlugins();
351
console.log('Active plugins:', plugins);
352

353
// Get providers for custom operations
354
const providers = await grid.getProviders();
355
const dataProvider = providers.data;
356
```
357

358
## Types
359

360
### Core Interfaces
361

362
```typescript { .api }
363
interface SetDataAtDetails {
364
  row: number;
365
  col: ColumnProp;
366
  val: any;
367
  rowSource?: DimensionRows;
368
}
369

370
interface Cell {
371
  x: ColIndex;  // Column index
372
  y: RowIndex;  // Row index
373
}
374

375
interface FocusedData {
376
  cell: Cell;
377
  val: any;
378
  rowType: DimensionRows;
379
  colType: DimensionCols;
380
}
381

382
interface RangeArea {
383
  x: ColIndex;   // Start column
384
  y: RowIndex;   // Start row  
385
  x1: ColIndex;  // End column
386
  y1: RowIndex;  // End row
387
}
388

389
interface AllDimensionType {
390
  rowType: DimensionRows;
391
  colType: DimensionCols;
392
}
393
```
394

395
### Configuration Interfaces
396

397
```typescript { .api }
398
interface AutoSizeColumnConfig {
399
  mode: 'content' | 'header' | 'headerContent';
400
  allColumns?: boolean;
401
  letterBlockSize?: number;
402
  maxSize?: number;
403
}
404

405
interface ColumnFilterConfig {
406
  collection?: FilterCollection;
407
  filterTypes?: FilterTypes;
408
}
409

410
interface SortingConfig {
411
  sortBy?: ColumnProp[];
412
  multiColumn?: boolean;
413
}
414

415
interface GroupingOptions {
416
  expandedAll?: boolean;
417
  groupBy?: ColumnProp;
418
  sortingMode?: 'asc' | 'desc';
419
}
420

421
interface AdditionalData {
422
  [key: string]: any;
423
}
424

425
interface Editors {
426
  [key: string]: EditorCtr;
427
}
428
```
429

430
### Dimension Types
431

432
```typescript { .api }
433
type DimensionRows = 'rgRow' | 'rowPinStart' | 'rowPinEnd';
434
type DimensionCols = 'rgCol' | 'colPinStart' | 'colPinEnd';
435
type Theme = 'default' | 'material' | 'compact' | 'darkMaterial' | 'darkCompact' | string;
436
```
437

438
## Row Headers Configuration
439

440
```typescript { .api }
441
// Row headers can be boolean or custom configuration
442
interface RowHeaders {
443
  size?: number;
444
  template?: RowHeaderTemplate;
445
}
446

447
type RowHeaderTemplate = (
448
  createElement: HyperFunc<VNode>,
449
  props: RowHeaderTemplateProps
450
) => VNode | VNode[] | string | void;
451

452
interface RowHeaderTemplateProps {
453
  rowIndex: number;
454
  model: DataType;
455
  dimensionRow: DimensionRows;
456
}
457
```
458

459
**Usage Example:**
460

461
```typescript
462
// Enable simple row headers (numbers)
463
grid.rowHeaders = true;
464

465
// Custom row header template
466
grid.rowHeaders = {
467
  size: 50,
468
  template: (createElement, { rowIndex, model }) => {
469
    return createElement('span', {
470
      class: 'custom-row-header'
471
    }, `Row ${rowIndex + 1}`);
472
  }
473
};
474
```