0
# Data Management
1

2
Comprehensive data loading, manipulation, and synchronization capabilities for dynamic table content with support for local and remote data sources.
3

4
## Capabilities
5

6
### Data Loading and Replacement
7

8
Core methods for loading data into tables with support for various data sources and formats.
9

10
```javascript { .api }
11
/**
12
 * Load data into table, replacing existing data
13
 * @param data - Data array, URL string, or false to clear
14
 * @param params - Additional parameters for AJAX requests
15
 * @param config - Configuration options for data loading
16
 * @returns Promise resolving when data is loaded
17
 */
18
setData(data: any[] | string | false, params?: any, config?: any): Promise<void>;
19

20
/**
21
 * Replace data while maintaining current sort order and position
22
 * @param data - New data to replace existing data
23
 * @param params - Additional parameters for AJAX requests  
24
 * @param config - Configuration options for data loading
25
 * @returns Promise resolving when data is replaced
26
 */
27
replaceData(data: any[] | string | false, params?: any, config?: any): Promise<void>;
28

29
/**
30
 * Clear all data from table
31
 */
32
clearData(): void;
33

34
/**
35
 * Get current table data
36
 * @param active - If true, only return visible rows (after filtering)
37
 * @returns Array of row data objects
38
 */
39
getData(active?: boolean): any[];
40

41
/**
42
 * Get count of data rows
43
 * @param active - If true, only count visible rows (after filtering)
44
 * @returns Number of rows
45
 */
46
getDataCount(active?: boolean): number;
47
```
48

49
**Usage Examples:**
50

51
```javascript
52
// Load local data
53
await table.setData([
54
  { id: 1, name: "Alice", age: 25 },
55
  { id: 2, name: "Bob", age: 30 }
56
]);
57

58
// Load from API endpoint
59
await table.setData("/api/users", { department: "engineering" });
60

61
// Replace data maintaining current view
62
await table.replaceData(updatedData);
63

64
// Get all data vs filtered data
65
const allData = table.getData(); // All rows
66
const visibleData = table.getData(true); // Only visible after filters
67
```
68

69
### Bulk Data Operations
70

71
Methods for adding and updating multiple rows efficiently.
72

73
```javascript { .api }
74
/**
75
 * Add multiple rows to table
76
 * @param data - Array of row data objects to add
77
 * @param pos - Position to add rows (true=top, false=bottom, number=index)
78
 * @param index - Index value to add rows relative to
79
 * @returns Promise resolving to array of added RowComponents
80
 */
81
addData(data: any[], pos?: boolean | number, index?: any): Promise<RowComponent[]>;
82

83
/**
84
 * Update multiple existing rows based on index field
85
 * @param data - Array of row data objects with updates
86
 * @returns Promise resolving when all updates complete
87
 */
88
updateData(data: any[]): Promise<void>;
89

90
/**
91
 * Update existing rows or add new ones if they don't exist
92
 * @param data - Array of row data objects
93
 * @returns Promise resolving to array of affected RowComponents
94
 */
95
updateOrAddData(data: any[]): Promise<RowComponent[]>;
96
```
97

98
### Single Row Operations
99

100
Precise control over individual row lifecycle and data.
101

102
```javascript { .api }
103
/**
104
 * Add single row to table
105
 * @param data - Row data object
106
 * @param pos - Position to add (true=top, false=bottom, number=index)
107
 * @param index - Index value to add row relative to
108
 * @returns Promise resolving to new RowComponent
109
 */
110
addRow(data: any, pos?: boolean | number, index?: any): Promise<RowComponent>;
111

112
/**
113
 * Update existing row data
114
 * @param index - Row index/key to update
115
 * @param data - New data object for row
116
 * @returns Promise resolving to updated RowComponent
117
 */
118
updateRow(index: any, data: any): Promise<RowComponent>;
119

120
/**
121
 * Update existing row or add new one if it doesn't exist
122
 * @param index - Row index/key to update or create
123
 * @param data - Row data object
124
 * @returns Promise resolving to RowComponent
125
 */
126
updateOrAddRow(index: any, data: any): Promise<RowComponent>;
127

128
/**
129
 * Delete one or more rows from table
130
 * @param index - Single index or array of indices to delete
131
 * @returns Promise resolving when deletion completes
132
 */
133
deleteRow(index: any | any[]): Promise<void>;
134
```
135

136
**Usage Examples:**
137

138
```javascript
139
// Add single row at top
140
const newRow = await table.addRow({ id: 5, name: "Eve", age: 27 }, true);
141

142
// Update specific row
143
await table.updateRow(3, { name: "Charlie Updated", age: 29 });
144

145
// Bulk operations
146
await table.addData([
147
  { id: 6, name: "Frank", age: 35 },
148
  { id: 7, name: "Grace", age: 32 }
149
], false); // Add to bottom
150

151
// Update or create multiple rows
152
await table.updateOrAddData([
153
  { id: 1, name: "Alice Updated" }, // Updates existing
154
  { id: 8, name: "Henry", age: 40 }  // Creates new
155
]);
156

157
// Delete multiple rows
158
await table.deleteRow([2, 4, 6]);
159
```
160

161
### Row Access and Navigation
162

163
Methods for finding and accessing specific rows within the table.
164

165
```javascript { .api }
166
/**
167
 * Get row component by index value
168
 * @param index - Row index/key to find
169
 * @returns RowComponent or false if not found
170
 */
171
getRow(index: any): RowComponent | false;
172

173
/**
174
 * Get row component by position in table
175
 * @param position - Zero-based position in current row order
176
 * @returns RowComponent or false if invalid position
177
 */
178
getRowFromPosition(position: number): RowComponent | false;
179

180
/**
181
 * Get all row components
182
 * @param active - If true, only return visible rows (after filtering)
183
 * @returns Array of RowComponents
184
 */
185
getRows(active?: boolean): RowComponent[];
186

187
/**
188
 * Get position of row in current table order
189
 * @param index - Row index/key to find position of
190
 * @returns Zero-based position or false if not found
191
 */
192
getRowPosition(index: any): number | false;
193
```
194

195
### Row Movement and Positioning
196

197
Control row ordering and position within the table display.
198

199
```javascript { .api }
200
/**
201
 * Move row to new position
202
 * @param from - Index of row to move
203
 * @param to - Target index or row to move to
204
 * @param after - If true, move after target; if false, move before
205
 */
206
moveRow(from: any, to: any, after?: boolean): void;
207

208
/**
209
 * Scroll table to show specific row
210
 * @param index - Row index to scroll to
211
 * @param position - Position in viewport ("top", "center", "bottom", "nearest")
212
 * @param ifVisible - Only scroll if row is not currently visible
213
 * @returns Promise resolving when scroll completes
214
 */
215
scrollToRow(index: any, position?: string, ifVisible?: boolean): Promise<void>;
216
```
217

218
### Row Selection
219

220
Methods for selecting and managing row selection state.
221

222
```javascript { .api }
223
/**
224
 * Select specific rows  
225
 * @param indexes - Single index or array of indices to select
226
 */
227
selectRow(indexes: any | any[]): void;
228

229
/**
230
 * Deselect specific rows
231
 * @param indexes - Single index or array of indices to deselect  
232
 */
233
deselectRow(indexes: any | any[]): void;
234

235
/**
236
 * Toggle selection state of specific rows
237
 * @param indexes - Single index or array of indices to toggle
238
 */
239
toggleSelectRow(indexes: any | any[]): void;
240

241
/**
242
 * Get all currently selected row components
243
 * @returns Array of selected RowComponents
244
 */
245
getSelectedRows(): RowComponent[];
246

247
/**
248
 * Get data from all currently selected rows
249
 * @returns Array of selected row data objects
250
 */
251
getSelectedData(): any[];
252
```
253

254
**Usage Examples:**
255

256
```javascript
257
// Row selection operations
258
table.selectRow([1, 3, 5]); // Select multiple rows
259
table.selectRow(2); // Select single row
260
table.deselectRow(1); // Deselect specific row
261
table.toggleSelectRow([2, 4]); // Toggle selection
262

263
// Get selection information
264
const selectedRows = table.getSelectedRows();
265
const selectedData = table.getSelectedData();
266
console.log(`${selectedRows.length} rows selected`);
267

268
// Work with selected data
269
selectedData.forEach(data => {
270
  console.log("Selected user:", data.name);
271
});
272

273
// Find and manipulate specific rows
274
const row = table.getRow(5);
275
if (row) {
276
  console.log("Row data:", row.getData());
277
  row.update({ status: "active" });
278
}
279

280
// Get all visible rows after filtering
281
const visibleRows = table.getRows(true);
282
console.log(`${visibleRows.length} rows visible`);
283

284
// Move row to different position
285
table.moveRow(1, 5, true); // Move row 1 after row 5
286

287
// Navigation and scrolling
288
await table.scrollToRow(10, "center"); // Center row 10 in view
289
const position = table.getRowPosition(3); // Get current position of row 3
290
```
291

292
## Data Source Configuration
293

294
### AJAX Data Loading
295

296
```javascript { .api }
297
interface AjaxConfig {
298
  /** URL for data requests */
299
  ajaxURL?: string;
300
  /** Parameters to send with AJAX requests */
301
  ajaxParams?: any;
302
  /** Axios/fetch configuration object */
303
  ajaxConfig?: any;
304
  /** Content type for requests */
305
  ajaxContentType?: string;
306
  /** Custom request function */
307
  ajaxRequestFunc?: (url: string, config: any, params: any) => Promise<any>;
308
  /** Response processing function */
309
  ajaxResponse?: (url: string, params: any, response: any) => any;
310
}
311
```
312

313
### Local Data Processing
314

315
```javascript { .api }
316
interface LocalDataConfig {
317
  /** Enable reactive data binding */
318
  reactiveData?: boolean;
319
  /** Transform data before processing */
320
  dataTransformed?: (data: any[]) => any[];
321
  /** Custom data loading logic */
322
  dataLoader?: boolean | ((data: any) => Promise<any[]>);
323
  /** Process data after loading */
324
  dataLoaded?: (data: any[]) => void;
325
}
326
```
327

328
**Usage Examples:**
329

330
```javascript
331
// Remote data with custom processing
332
const remoteTable = new Tabulator("#remote-table", {
333
  ajaxURL: "/api/users",
334
  ajaxParams: { active: true },
335
  ajaxResponse: function(url, params, response) {
336
    return response.data.users; // Extract users from nested response
337
  },
338
  columns: columnDefinitions
339
});
340

341
// Reactive local data
342
let reactiveData = [
343
  { id: 1, name: "Alice", status: "active" }
344
];
345

346
const reactiveTable = new Tabulator("#reactive-table", {
347
  data: reactiveData,
348
  reactiveData: true, // Auto-update when data array changes
349
  columns: columnDefinitions
350
});
351

352
// Modify data - table updates automatically
353
reactiveData.push({ id: 2, name: "Bob", status: "inactive" });
354
reactiveData[0].status = "inactive";
355
```