0
# Tabulator Tables
1

2
Tabulator Tables is a comprehensive interactive table generation JavaScript library that enables developers to create feature-rich data tables from HTML tables, JavaScript arrays, or JSON data. It provides extensive functionality including data manipulation, editing, sorting, filtering, pagination, grouping, and real-time updates with a modular architecture that supports custom extensions.
3

4
## Package Information
5

6
- **Package Name**: tabulator-tables
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install tabulator-tables`
10
- **CDN**: `https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js`
11

12
## Core Imports
13

14
ES Modules:
15
```javascript
16
import { Tabulator, TabulatorFull } from "tabulator-tables";
17
```
18

19
CommonJS:
20
```javascript
21
const { Tabulator, TabulatorFull } = require("tabulator-tables");
22
```
23

24
UMD (browser):
25
```html
26
<script src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
27
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
28
```
29

30
Component imports:
31
```javascript
32
import { 
33
  CellComponent, 
34
  RowComponent, 
35
  ColumnComponent,
36
  GroupComponent
37
} from "tabulator-tables";
38
```
39

40
## Basic Usage
41

42
```javascript
43
import { Tabulator } from "tabulator-tables";
44

45
// Create table from element
46
const table = new Tabulator("#my-table", {
47
  data: [
48
    { id: 1, name: "Alice", age: 25, department: "Engineering" },
49
    { id: 2, name: "Bob", age: 30, department: "Sales" },
50
    { id: 3, name: "Charlie", age: 28, department: "Marketing" }
51
  ],
52
  columns: [
53
    { title: "Name", field: "name", sorter: "string" },
54
    { title: "Age", field: "age", sorter: "number" },
55
    { title: "Department", field: "department", sorter: "string" }
56
  ],
57
  height: 400,
58
  layout: "fitColumns"
59
});
60

61
// Add event listeners
62
table.on("rowClick", function(e, row) {
63
  console.log("Row clicked:", row.getData());
64
});
65

66
// Manipulate data
67
table.addRow({ id: 4, name: "Diana", age: 32, department: "HR" });
68
table.setFilter("department", "=", "Engineering");
69
```
70

71
## Architecture
72

73
Tabulator Tables is built around several key architectural components:
74

75
- **Core Table Class**: Main `Tabulator` class manages table lifecycle, configuration, and module coordination
76
- **Component System**: `RowComponent`, `ColumnComponent`, `CellComponent` provide programmatic access to table elements
77
- **Modular Architecture**: 38+ optional modules provide specific functionality (sorting, filtering, editing, etc.)
78
- **Dynamic Method Binding**: Proxy-based system allows modules to extend component APIs at runtime
79
- **Event System**: Comprehensive event handling for user interactions and data changes
80
- **Virtual DOM**: Efficient rendering system for large datasets with virtual scrolling
81
- **Data Pipeline**: Configurable data processing chain for transformations, validation, and formatting
82

83
## Capabilities
84

85
### Table Construction and Configuration
86

87
Core functionality for creating and configuring interactive tables with extensive customization options.
88

89
```javascript { .api }
90
class Tabulator {
91
  constructor(element: string | HTMLElement, options?: TabulatorOptions);
92
  
93
  // Static methods
94
  static extendModule(...args: any[]): void;
95
  static registerModule(...args: any[]): void;
96
}
97

98
interface TabulatorOptions {
99
  data?: any[] | string;
100
  columns?: ColumnDefinition[];
101
  height?: number | string | false;
102
  layout?: "fitData" | "fitColumns" | "fitDataFill" | "fitDataStretch" | "fitDataTable";
103
  index?: string;
104
  // ... extensive additional options
105
}
106
```
107

108
[Table Construction](./table-construction.md)
109

110
### Data Management
111

112
Comprehensive data loading, manipulation, and synchronization capabilities for dynamic table content.
113

114
```javascript { .api }
115
// Data loading and replacement
116
setData(data: any[], params?: any, config?: any): Promise<void>;
117
replaceData(data: any[], params?: any, config?: any): Promise<void>;
118
getData(active?: boolean): any[];
119
clearData(): void;
120

121
// Row operations
122
addRow(data: any, pos?: boolean | number, index?: any): Promise<RowComponent>;
123
updateRow(index: any, data: any): Promise<RowComponent>;
124
deleteRow(index: any | any[]): Promise<void>;
125
getRow(index: any): RowComponent | false;
126
getRows(active?: boolean): RowComponent[];
127
```
128

129
[Data Management](./data-management.md)
130

131
### Column Management  
132

133
Dynamic column configuration, manipulation, and display control for flexible table layouts.
134

135
```javascript { .api }
136
// Column configuration
137
setColumns(definition: ColumnDefinition[]): void;
138
getColumns(structured?: boolean): ColumnComponent[];
139
getColumn(field: string): ColumnComponent | false;
140

141
// Column manipulation
142
addColumn(definition: ColumnDefinition, before?: boolean, field?: string): Promise<ColumnComponent>;
143
deleteColumn(field: string): Promise<void>;
144
showColumn(field: string): void;
145
hideColumn(field: string): void;
146
moveColumn(from: string, to: string, after?: boolean): void;
147
```
148

149
[Column Management](./column-management.md)
150

151
### Data Filtering and Search
152

153
Advanced filtering system with multiple filter types, header filters, and search capabilities.
154

155
```javascript { .api }
156
// Filter management
157
setFilter(filters: FilterParams | FilterParams[]): void;
158
addFilter(field: string, type: FilterType, value: any): void;
159
getFilters(all?: boolean): FilterParams[];
160
removeFilter(field: string, type: FilterType, value: any): void;
161
clearFilter(all?: boolean): void;
162

163
// Header filters
164
setHeaderFilterValue(field: string, value: any): void;
165
getHeaderFilterValue(field: string): any;
166
clearHeaderFilter(): void;
167

168
// Search functionality
169
searchData(field: string, type: FilterType, value: any): any[];
170
searchRows(field: string, type: FilterType, value: any): RowComponent[];
171
```
172

173
[Filtering and Search](./filtering-search.md)
174

175
### Data Sorting
176

177
Multi-column sorting with custom sort functions and dynamic sort management.
178

179
```javascript { .api }
180
// Sort management
181
setSort(sorters: SorterParams | SorterParams[]): void;
182
getSorters(): SorterParams[];
183
clearSort(): void;
184

185
interface SorterParams {
186
  column: string;
187
  dir: "asc" | "desc";
188
  params?: any;
189
}
190
```
191

192
[Data Sorting](./data-sorting.md)
193

194
### Pagination
195

196
Built-in pagination system with configurable page sizes and navigation controls.
197

198
```javascript { .api }
199
// Page navigation
200
setPage(page: number): Promise<void>;
201
setPageToRow(row: any): Promise<void>;
202
setPageSize(size: number): void;
203
getPageSize(): number;
204
getPage(): number;
205
getPageMax(): number;
206
previousPage(): Promise<boolean>;
207
nextPage(): Promise<boolean>;
208
```
209

210
[Pagination](./pagination.md)
211

212
### Cell and Row Editing
213

214
Interactive editing capabilities with validation, custom editors, and edit state management.
215

216
```javascript { .api }
217
// Cell editing (added to CellComponent by Edit module)
218
edit(): void;
219
cancelEdit(): void;
220
setValue(value: any, mutate?: boolean): Promise<void>;
221
getValue(): any;
222
getOldValue(): any;
223
isEdited(): boolean;
224
clearEdited(): void;
225
```
226

227
[Cell Editing](./cell-editing.md)
228

229
### Event System
230

231
Comprehensive event handling for user interactions, data changes, and table lifecycle events.
232

233
```javascript { .api }
234
// Event management
235
on(event: string, callback: Function): void;
236
off(event: string, callback?: Function): void;
237
dispatchEvent(event: string, ...args: any[]): void;
238

239
// Common events: tableBuilt, dataLoaded, rowClick, cellClick, 
240
// rowAdded, rowDeleted, rowUpdated, cellEdited, etc.
241
```
242

243
[Event System](./event-system.md)
244

245
### Data Import and Export
246

247
Flexible data import/export functionality supporting multiple formats and sources.
248

249
```javascript { .api }
250
// Export functionality (added by modules)
251
download(type: string, filename: string, options?: any): void;
252
downloadToTab(type: string, options?: any): void;
253

254
// Import functionality  
255
import(type: string, selector: string, options?: any): Promise<any[]>;
256
```
257

258
[Import and Export](./import-export.md)
259

260
### Row Grouping
261

262
Advanced hierarchical row grouping with collapsible sections and custom group headers.
263

264
```javascript { .api }
265
setGroupBy(groupBy: string | string[]): void;
266
getGroups(active?: boolean): GroupComponent[];
267
getGroupedData(active?: boolean): any[];
268
```
269

270
[Row Grouping](./row-grouping.md)
271

272
### Data Validation
273

274
Comprehensive validation system with built-in validators and custom validation functions.
275

276
```javascript { .api }
277
validate(): CellComponent[];
278
getInvalidCells(): CellComponent[];
279
clearCellValidation(cell: CellComponent): void;
280
```
281

282
[Data Validation](./validation.md)
283

284
### Range Selection
285

286
Spreadsheet-like range selection for rectangular cell areas with keyboard navigation.
287

288
```javascript { .api }
289
getRanges(): RangeComponent[];
290
getRangesData(): any[][];
291
addRange(start: CellComponent, end?: CellComponent): RangeComponent;
292
```
293

294
[Range Selection](./range-selection.md)
295

296
### Data Trees
297

298
Hierarchical data tree functionality for nested parent-child relationships.
299

300
```javascript { .api }
301
// Added to RowComponent
302
treeCollapse(): void;
303
treeExpand(): void;
304
getTreeChildren(): RowComponent[];
305
addTreeChild(data: any): Promise<RowComponent>;
306
```
307

308
[Data Trees](./data-trees.md)
309

310
### Clipboard Operations
311

312
Advanced copy/paste functionality with multiple formats and custom parsers.
313

314
```javascript { .api }
315
copyToClipboard(selector?: string, styled?: boolean, config?: any): Promise<void>;
316
```
317

318
[Clipboard Operations](./clipboard.md)
319

320
### History and Undo/Redo
321

322
Complete operation history tracking with undo/redo functionality.
323

324
```javascript { .api }
325
undo(): boolean;
326
redo(): boolean;
327
getHistoryUndoSize(): number;
328
clearHistory(): void;
329
```
330

331
[History and Undo/Redo](./history-undo.md)
332

333
## Component Classes
334

335
Tabulator provides component classes that represent different parts of the table:
336

337
```javascript { .api }
338
class RowComponent {
339
  // Core data methods
340
  getData(transform?: boolean): any;
341
  getIndex(): any;
342
  getPosition(): number;
343
  update(data: any): Promise<void>;
344
  delete(): Promise<void>;
345
  
346
  // Cell access methods
347
  getCells(): CellComponent[];
348
  getCell(column: string): CellComponent | false;
349
  
350
  // Navigation methods
351
  getNextRow(): RowComponent | false;
352
  getPrevRow(): RowComponent | false;
353
  scrollTo(position?: string, ifVisible?: boolean): Promise<void>;
354
  
355
  // Display methods
356
  getElement(): HTMLElement;
357
  normalizeHeight(): void;
358
  reformat(): void;
359
  
360
  // Position management
361
  move(to: any, after?: boolean): void;
362
  watchPosition(callback: Function): Function;
363
  
364
  // Table reference
365
  getTable(): Tabulator;
366
  
367
  // Selection methods (SelectRow module)
368
  select(): void;
369
  deselect(): void;
370
  toggleSelect(): void;
371
  isSelected(): boolean;
372
  
373
  // Tree methods (DataTree module)
374
  treeCollapse(): void;
375
  treeExpand(): void;
376
  treeToggle(): void;
377
  getTreeParent(): RowComponent | false;
378
  getTreeChildren(): RowComponent[];
379
  addTreeChild(data: any, pos?: boolean, index?: any): Promise<RowComponent>;
380
  isTreeExpanded(): boolean;
381
  
382
  // Grouping methods (GroupRows module)
383
  getGroup(): GroupComponent | false;
384
  
385
  // Range selection methods (SelectRange module)
386
  getRanges(): RangeComponent[];
387
  
388
  // Validation methods (Validate module)
389
  validate(): CellComponent[];
390
  
391
  // Frozen rows methods (FrozenRows module)
392
  freeze(): void;
393
  unfreeze(): void;
394
  isFrozen(): boolean;
395
  
396
  // Popup methods (Popup module)
397
  popup(contents: any, position?: string): any;
398
  
399
  // Pagination methods (Page module)
400
  pageTo(): void;
401
}
402

403
class ColumnComponent {
404
  // Core information methods
405
  getField(): string;
406
  getDefinition(): ColumnDefinition;
407
  getWidth(): number;
408
  
409
  // Visibility methods
410
  isVisible(): boolean;
411
  show(): void;
412
  hide(): void;
413
  toggle(): void;
414
  
415
  // Cell access methods
416
  getCells(): CellComponent[];
417
  
418
  // Navigation methods
419
  getNextColumn(): ColumnComponent | false;
420
  getPrevColumn(): ColumnComponent | false;
421
  scrollTo(position?: string, ifVisible?: boolean): Promise<void>;
422
  
423
  // Display methods
424
  getElement(): HTMLElement;
425
  getTitleDownload(): string;
426
  
427
  // Configuration methods
428
  updateDefinition(updates: object): Promise<void>;
429
  setWidth(width: number | true): Promise<void>;
430
  move(to: any, after?: boolean): void;
431
  delete(): Promise<void>;
432
  
433
  // Hierarchy methods (for grouped headers)
434
  getSubColumns(): ColumnComponent[];
435
  getParentColumn(): ColumnComponent | false;
436
  
437
  // Filter methods (Filter module)
438
  headerFilterFocus(): void;
439
  reloadHeaderFilter(): void;
440
  getHeaderFilterValue(): any;
441
  setHeaderFilterValue(value: any): void;
442
  
443
  // Range selection methods (SelectRange module)
444
  getRanges(): RangeComponent[];
445
  
446
  // Validation methods (Validate module)
447
  validate(): CellComponent[];
448
  
449
  // Popup methods (Popup module)
450
  popup(contents: any, position?: string): any;
451
}
452

453
class CellComponent {
454
  // Core value methods
455
  getValue(): any;
456
  getOldValue(): any;
457
  getInitialValue(): any;
458
  setValue(value: any): Promise<void>;
459
  
460
  // Value restoration methods
461
  restoreOldValue(): void;
462
  restoreInitialValue(): void;
463
  
464
  // Component access methods
465
  getRow(): RowComponent;
466
  getColumn(): ColumnComponent;
467
  getField(): string;
468
  getData(): any;
469
  
470
  // Display methods
471
  getElement(): HTMLElement;
472
  checkHeight(): void;
473
  
474
  // Table reference
475
  getTable(): Tabulator;
476
  getType(): string;
477
  
478
  // Edit methods (Edit module)
479
  edit(ignoreEditable?: boolean): void;
480
  cancelEdit(): void;
481
  isEdited(): boolean;
482
  clearEdited(): void;
483
  
484
  // Navigation methods (Edit module)
485
  navigatePrev(): boolean;
486
  navigateNext(): boolean;
487
  navigateLeft(): boolean;
488
  navigateRight(): boolean;
489
  navigateUp(): boolean;
490
  navigateDown(): boolean;
491
  
492
  // Range selection methods (SelectRange module)
493
  getRanges(): RangeComponent[];
494
  
495
  // Validation methods (Validate module)
496
  isValid(): boolean;
497
  clearValidation(): void;
498
  validate(): boolean | string | any;
499
  
500
  // Popup methods (Popup module)
501
  popup(contents: any, position?: string): any;
502
}
503

504
class GroupComponent {
505
  getKey(): any;
506
  getField(): string;
507
  getElement(): HTMLElement;
508
  getRows(): RowComponent[];
509
  getSubGroups(): GroupComponent[];
510
  getParentGroup(): GroupComponent | false;
511
  isVisible(): boolean;
512
  show(): void;
513
  hide(): void;
514
  toggle(): void;
515
}
516

517
class RangeComponent {
518
  getElement(): HTMLElement;
519
  getData(): any[][];
520
  getCells(): CellComponent[];
521
  getStructuredCells(): { [row: number]: { [col: number]: CellComponent } };
522
  getRows(): RowComponent[];
523
  getColumns(): ColumnComponent[];
524
  getBounds(): RangeBounds;
525
  getTopEdge(): number;
526
  getBottomEdge(): number;
527
  getLeftEdge(): number;
528
  getRightEdge(): number;
529
  remove(): void;
530
}
531
```
532

533
## Types
534

535
```javascript { .api }
536
interface ColumnDefinition {
537
  title?: string;
538
  field: string;
539
  visible?: boolean;
540
  width?: number | string;
541
  minWidth?: number;
542
  maxWidth?: number;
543
  resizable?: boolean;
544
  frozen?: boolean;
545
  responsive?: number;
546
  tooltip?: boolean | string | Function;
547
  cssClass?: string;
548
  rowHandle?: boolean;
549
  hideInHtml?: boolean;
550
  sorter?: string | Function | boolean;
551
  sorterParams?: any;
552
  formatter?: string | Function;
553
  formatterParams?: any;
554
  variableHeight?: boolean;
555
  editable?: boolean | Function;
556
  editor?: string | Function | boolean;
557
  editorParams?: any;
558
  validator?: string | Function | string[] | Function[];
559
  mutator?: Function;
560
  accessor?: Function;
561
  accessorParams?: any;
562
  maxInitialWidth?: number;
563
  headerFilter?: string | Function | boolean;
564
  headerFilterParams?: any;
565
  headerFilterPlaceholder?: string;
566
  headerFilterEmptyCheck?: Function;
567
  headerFilterFunc?: string | Function;
568
  headerFilterFuncParams?: any;
569
  headerFilterLiveFilter?: boolean;
570
  htmlOutput?: boolean;
571
  print?: boolean;
572
  download?: boolean;
573
  titleDownload?: string;
574
  topCalc?: string | Function;
575
  topCalcParams?: any;
576
  topCalcFormatter?: string | Function;
577
  topCalcFormatterParams?: any;
578
  bottomCalc?: string | Function;
579
  bottomCalcParams?: any;
580
  bottomCalcFormatter?: string | Function;
581
  bottomCalcFormatterParams?: any;
582
  columns?: ColumnDefinition[];
583
  // ... additional column-specific options
584
}
585

586
interface FilterParams {
587
  field: string;
588
  type: FilterType;
589
  value: any;
590
  params?: any;
591
}
592

593
type FilterType = "=" | "!=" | "like" | "not like" | "<" | "<=" | ">" | ">=" | 
594
                  "in" | "not in" | "regex" | "starts" | "ends";
595

596
interface TabulatorOptions {
597
  // Data options
598
  data?: any[] | string;
599
  ajaxURL?: string;
600
  ajaxParams?: any;
601
  ajaxConfig?: any;
602
  ajaxContentType?: string;
603
  ajaxRequestFunc?: Function;
604
  ajaxResponse?: Function;
605
  
606
  // Layout options
607
  height?: number | string | false;
608
  minHeight?: number | string;
609
  maxHeight?: number | string;
610
  layout?: "fitData" | "fitColumns" | "fitDataFill" | "fitDataStretch" | "fitDataTable";
611
  layoutColumnsOnNewData?: boolean;
612
  responsiveLayout?: boolean | "hide" | "collapse";
613
  responsiveLayoutCollapseStartOpen?: boolean;
614
  responsiveLayoutCollapseUseFormatters?: boolean;
615
  responsiveLayoutCollapseFormatter?: Function;
616
  
617
  // Column options  
618
  columns?: ColumnDefinition[];
619
  autoColumns?: boolean;
620
  autoColumnsDefinitions?: Function | ColumnDefinition;
621
  
622
  // Row options
623
  index?: string;
624
  addRowPos?: "top" | "bottom";
625
  selectable?: boolean | number | "highlight";
626
  selectableRollingSelection?: boolean;
627
  selectableCheck?: Function;
628
  movableRows?: boolean;
629
  movableRowsConnectedTables?: string | string[] | HTMLElement | HTMLElement[];
630
  movableRowsSender?: boolean | string | Function;
631
  movableRowsReceiver?: boolean | string | Function;
632
  resizableRows?: boolean;
633
  scrollToRowPosition?: "top" | "center" | "bottom" | "nearest";
634
  scrollToRowIfVisible?: boolean;
635
  
636
  // Pagination options
637
  pagination?: boolean | "local" | "remote";
638
  paginationMode?: "local" | "remote";
639
  paginationSize?: number;
640
  paginationSizeSelector?: boolean | number[];
641
  paginationElement?: string | HTMLElement;
642
  paginationDataReceived?: any;
643
  paginationDataSent?: any;
644
  paginationAddRow?: "table" | "page";
645
  paginationButtonCount?: number;
646
  
647
  // Sorting options
648
  initialSort?: SorterParams[];
649
  sortOrderReverse?: boolean;
650
  headerSort?: boolean;
651
  headerSortTristate?: boolean;
652
  
653
  // Filtering options  
654
  initialFilter?: FilterParams[];
655
  initialHeaderFilter?: FilterParams[];
656
  headerFilterLiveFilterDelay?: number;
657
  
658
  // Appearance options
659
  cssClass?: string;
660
  textDirection?: "auto" | "ltr" | "rtl";
661
  
662
  // ... many additional configuration options
663
}