0
# Data Management and Stores
1

2
RevoGrid uses a reactive store system to manage all data operations, including main data sources, pinned rows, column definitions, and data transformations. The store system provides real-time updates and efficient change detection.
3

4
## Capabilities
5

6
### Data Types
7

8
Core data type definitions for grid data management.
9

10
```typescript { .api }
11
/**
12
 * Represents a single row of data in the grid
13
 */
14
type DataType<D = any> = {
15
  [T in ColumnProp]: DataFormat<D>;
16
};
17

18
/**
19
 * Data format for individual cell values
20
 */
21
type DataFormat<D = any> = any;
22

23
/**
24
 * Column property type - string or number key
25
 */
26
type ColumnProp = string | number;
27

28
/**
29
 * Row and column index types
30
 */
31
type RowIndex = number;
32
type ColIndex = number;
33
```
34

35
**Usage Example:**
36

37
```typescript
38
import { DataType, ColumnProp } from '@revolist/revogrid';
39

40
// Define strongly typed data
41
interface UserData {
42
  id: number;
43
  name: string;
44
  email: string;
45
  age: number;
46
}
47

48
const userData: DataType<UserData>[] = [
49
  { id: 1, name: 'John Doe', email: 'john@example.com', age: 30 },
50
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 25 }
51
];
52
```
53

54
### Data Source State
55

56
State structure for managing data sources with virtualization and grouping support.
57

58
```typescript { .api }
59
/**
60
 * Data source state structure
61
 */
62
interface DataSourceState<T = DataType, ST = DimensionRows> {
63
  /** Visible item indices for current viewport */
64
  items: number[];
65
  /** All item indices for maintaining order */
66
  proxyItems: number[];
67
  /** Actual data array */
68
  source: T[];
69
  /** Current grouping depth level */
70
  groupingDepth: number;
71
  /** Group data structure */
72
  groups: Record<any, any>;
73
  /** Dimension type (rgRow, rowPinStart, rowPinEnd) */
74
  type: ST;
75
  /** Trimmed/filtered items */
76
  trimmed: Record<any, any>;
77
}
78
```
79

80
**Usage Example:**
81

82
```typescript
83
// Access data source state through providers
84
const providers = await grid.getProviders();
85
const dataProvider = providers.data;
86

87
// Get current data source state
88
const sourceStore = await grid.getSourceStore('rgRow');
89
sourceStore.onChange((state: DataSourceState) => {
90
  console.log('Data changed:', state.source.length, 'items');
91
  console.log('Visible items:', state.items.length);
92
});
93
```
94

95
### Data Provider Service
96

97
Service class for managing grid data sources and operations.
98

99
```typescript { .api }
100
/**
101
 * Data provider service for managing grid data
102
 */
103
interface DataProvider {
104
  /**
105
   * Set data source for specific dimension
106
   * @param source - Data array
107
   * @param type - Dimension type
108
   * @param disableVirtual - Disable virtualization
109
   */
110
  setData(source: DataType[], type: DimensionRows, disableVirtual?: boolean): void;
111

112
  /**
113
   * Update specific cell data
114
   * @param details - Cell update details
115
   * @param refresh - Whether to refresh view
116
   */
117
  setCellData(details: SetCellData, refresh?: boolean): void;
118

119
  /**
120
   * Update range of data
121
   * @param data - Range data to update
122
   * @param type - Dimension type
123
   */
124
  setRangeData(data: RangeUpdateData, type: DimensionRows): void;
125

126
  /**
127
   * Refresh data for specific dimension
128
   * @param type - Dimension type to refresh
129
   */
130
  refresh(type?: DimensionRows): void;
131

132
  /**
133
   * Change row order (drag and drop)
134
   * @param details - Order change details
135
   */
136
  changeOrder(details: RowOrderChangeDetails): void;
137

138
  /**
139
   * Set trimmed/hidden rows
140
   * @param trimmed - Trimmed row configuration
141
   * @param type - Dimension type
142
   */
143
  setTrimmed(trimmed: Record<number, boolean>, type: DimensionRows): void;
144
}
145
```
146

147
**Usage Example:**
148

149
```typescript
150
// Get data provider from grid
151
const providers = await grid.getProviders();
152
const dataProvider = providers.data;
153

154
// Set new data
155
const newData = [
156
  { name: 'Alice', age: 28, email: 'alice@example.com' }
157
];
158
dataProvider.setData(newData, 'rgRow');
159

160
// Update single cell
161
dataProvider.setCellData({
162
  row: 0,
163
  col: 'age',
164
  val: 29,
165
  rowSource: 'rgRow'
166
});
167

168
// Refresh grid data
169
dataProvider.refresh('rgRow');
170
```
171

172
### Row Definitions
173

174
Custom row properties and configurations.
175

176
```typescript { .api }
177
/**
178
 * Row definition for custom row properties
179
 */
180
interface RowDefinition {
181
  /** Row type/dimension */
182
  type: DimensionRows;
183
  /** Row index */
184
  index: number;
185
  /** Custom row height */
186
  size?: number;
187
  /** Custom row CSS classes */
188
  class?: string | Record<string, boolean>;
189
  /** Custom row styles */
190
  style?: Record<string, any>;
191
}
192
```
193

194
**Usage Example:**
195

196
```typescript
197
// Define custom row properties
198
grid.rowDefinitions = [
199
  {
200
    type: 'rgRow',
201
    index: 0,
202
    size: 50,
203
    class: 'header-row',
204
    style: { backgroundColor: '#f0f0f0' }
205
  },
206
  {
207
    type: 'rgRow', 
208
    index: 5,
209
    size: 80,
210
    class: { 'important-row': true }
211
  }
212
];
213
```
214

215
### Data Change Operations
216

217
Operations for updating and manipulating grid data.
218

219
```typescript { .api }
220
/**
221
 * Cell data update details
222
 */
223
interface SetCellData {
224
  /** Row index */
225
  row: number;
226
  /** Column property */
227
  col: ColumnProp;
228
  /** New value */
229
  val: any;
230
  /** Row source dimension */
231
  rowSource?: DimensionRows;
232
}
233

234
/**
235
 * Range data update details
236
 */
237
interface RangeUpdateData {
238
  /** Start cell coordinate */
239
  start: Cell;
240
  /** End cell coordinate */
241
  end: Cell;
242
  /** Update data array */
243
  data: any[][];
244
}
245

246
/**
247
 * Row order change details for drag and drop
248
 */
249
interface RowOrderChangeDetails {
250
  /** Source row index */
251
  from: number;
252
  /** Target row index */
253
  to: number;
254
  /** Row dimension type */
255
  type: DimensionRows;
256
}
257
```
258

259
**Usage Example:**
260

261
```typescript
262
// Update range of cells
263
const rangeUpdate: RangeUpdateData = {
264
  start: { x: 0, y: 0 },
265
  end: { x: 1, y: 1 },
266
  data: [
267
    ['New Value 1', 'New Value 2'],
268
    ['New Value 3', 'New Value 4']
269
  ]
270
};
271

272
const providers = await grid.getProviders();
273
providers.data.setRangeData(rangeUpdate, 'rgRow');
274
```
275

276
### Store Observables
277

278
Reactive store system for real-time updates.
279

280
```typescript { .api }
281
/**
282
 * Observable interface for reactive state management
283
 */
284
interface Observable<T> {
285
  /** Subscribe to state changes */
286
  onChange(callback: (state: T) => void): () => void;
287
  
288
  /** Get current state */
289
  get(): T;
290
  
291
  /** Update state */
292
  set(state: T): void;
293
}
294

295
/**
296
 * Store connector for accessing grid stores
297
 */
298
interface StoreConnector {
299
  /** Get data source store */
300
  getSourceStore(type?: DimensionRows): Observable<DataSourceState>;
301
  
302
  /** Get column store */
303
  getColumnStore(type?: DimensionCols): Observable<ColumnCollection>;
304
  
305
  /** Get dimension store */
306
  getDimensionStore(type?: DimensionRows | DimensionCols): Observable<DimensionSettingsState>;
307
  
308
  /** Get viewport store */
309
  getViewportStore(type?: DimensionRows | DimensionCols): Observable<ViewportState>;
310
}
311
```
312

313
**Usage Example:**
314

315
```typescript
316
// Subscribe to data changes
317
const sourceStore = await grid.getSourceStore('rgRow');
318
const unsubscribe = sourceStore.onChange((state) => {
319
  console.log('Data updated:', state.source.length, 'items');
320
  console.log('Groups:', Object.keys(state.groups).length);
321
});
322

323
// Clean up subscription
324
// unsubscribe();
325
```
326

327
### Pinned Rows Management
328

329
Managing pinned/sticky rows at top and bottom of grid.
330

331
```typescript { .api }
332
/**
333
 * Pinned row data sources
334
 */
335
interface PinnedRowSources {
336
  /** Pinned top rows data */
337
  pinnedTopSource: DataType[];
338
  /** Pinned bottom rows data */
339
  pinnedBottomSource: DataType[];
340
}
341
```
342

343
**Usage Example:**
344

345
```typescript
346
// Set pinned rows
347
grid.pinnedTopSource = [
348
  { name: 'TOTAL', amount: 1000, type: 'summary' }
349
];
350

351
grid.pinnedBottomSource = [
352
  { name: 'FOOTER', info: 'End of data', type: 'footer' }
353
];
354

355
// Access pinned row data
356
const pinnedTop = await grid.getSource('rowPinStart');
357
const pinnedBottom = await grid.getSource('rowPinEnd');
358
```
359

360
### Data Validation and Transformation
361

362
Utilities for data validation and transformation before setting to grid.
363

364
```typescript { .api }
365
/**
366
 * Data validation result
367
 */
368
interface DataValidationResult {
369
  /** Whether data is valid */
370
  isValid: boolean;
371
  /** Validation errors */
372
  errors: string[];
373
  /** Cleaned/transformed data */
374
  data: DataType[];
375
}
376

377
/**
378
 * Data transformation options
379
 */
380
interface DataTransformOptions {
381
  /** Column mapping for property names */
382
  columnMapping?: Record<string, ColumnProp>;
383
  /** Type converters for data types */
384
  typeConverters?: Record<ColumnProp, (val: any) => any>;
385
  /** Default values for missing properties */
386
  defaults?: Partial<DataType>;
387
}
388
```
389

390
**Usage Example:**
391

392
```typescript
393
// Transform raw data before setting to grid
394
const rawData = [
395
  { full_name: 'John Doe', user_age: '30', email_address: 'john@example.com' }
396
];
397

398
const transformOptions: DataTransformOptions = {
399
  columnMapping: {
400
    full_name: 'name',
401
    user_age: 'age', 
402
    email_address: 'email'
403
  },
404
  typeConverters: {
405
    age: (val) => parseInt(val, 10)
406
  },
407
  defaults: {
408
    status: 'active'
409
  }
410
};
411

412
// Apply transformation (custom utility function)
413
// const transformedData = transformData(rawData, transformOptions);
414
// grid.source = transformedData;
415
```
416

417
### Data Filtering and Trimming
418

419
Managing filtered and hidden rows in the grid.
420

421
```typescript { .api }
422
/**
423
 * Trimmed row configuration
424
 */
425
interface TrimmedRows {
426
  /** Map of row index to visibility */
427
  [index: number]: boolean;
428
}
429

430
/**
431
 * Filter configuration for data trimming
432
 */
433
interface FilterConfig {
434
  /** Column to filter */
435
  column: ColumnProp;
436
  /** Filter type */
437
  type: 'contains' | 'equals' | 'greaterThan' | 'lessThan' | 'custom';
438
  /** Filter value */
439
  value: any;
440
  /** Custom filter function */
441
  customFilter?: (cellValue: any, filterValue: any) => boolean;
442
}
443
```
444

445
**Usage Example:**
446

447
```typescript
448
// Hide specific rows
449
const trimmedRows: TrimmedRows = {
450
  2: true,  // Hide row index 2
451
  5: true,  // Hide row index 5
452
  8: true   // Hide row index 8
453
};
454

455
grid.trimmedRows = trimmedRows;
456

457
// Or use the method
458
await grid.addTrimmed(trimmedRows, 'filter', 'rgRow');
459

460
// Get visible data (excluding trimmed)
461
const visibleData = await grid.getVisibleSource('rgRow');
462
```