0
# Table Construction
1

2
Core functionality for creating and configuring interactive tables with extensive customization options and lifecycle management.
3

4
## Capabilities
5

6
### Tabulator Constructor
7

8
Creates a new interactive table instance with comprehensive configuration options.
9

10
```javascript { .api }
11
/**
12
 * Creates a new Tabulator table instance
13
 * @param element - DOM element or CSS selector string where table will be created
14
 * @param options - Configuration object for table behavior and appearance
15
 * @param modules - Optional specific modules to load (uses all modules if not specified)
16
 */
17
constructor(element: string | HTMLElement, options?: TabulatorOptions, modules?: any);
18
```
19

20
**Usage Examples:**
21

22
```javascript
23
// Basic table creation
24
const table = new Tabulator("#my-table", {
25
  data: tableData,
26
  columns: columnDefinitions,
27
  height: 400
28
});
29

30
// Advanced configuration
31
const table = new Tabulator("#advanced-table", {
32
  data: "/api/data",
33
  columns: [
34
    { title: "Name", field: "name", editor: "input" },
35
    { title: "Age", field: "age", editor: "number", validator: "min:0" },
36
    { title: "Active", field: "active", formatter: "tickCross", editor: "tickCross" }
37
  ],
38
  height: 600,
39
  layout: "fitColumns",
40
  pagination: true,
41
  paginationSize: 20,
42
  movableColumns: true,
43
  resizableColumns: true,
44
  selectable: true,
45
  editTrigger: "click"
46
});
47
```
48

49
### Static Module Methods
50

51
Register and extend module functionality globally across all Tabulator instances.
52

53
```javascript { .api }
54
/**
55
 * Extend existing module functionality
56
 * @param args - Module extension parameters
57
 */
58
static extendModule(...args: any[]): void;
59

60
/**
61
 * Register new custom module
62
 * @param args - Module registration parameters  
63
 */
64
static registerModule(...args: any[]): void;
65
```
66

67
### Table Display Control
68

69
Methods for controlling table rendering and display characteristics.
70

71
```javascript { .api }
72
/**
73
 * Force table redraw without reloading data
74
 * @param force - Force complete redraw including recalculating column widths
75
 */
76
redraw(force?: boolean): void;
77

78
/**
79
 * Block all table redrawing operations
80
 */
81
blockRedraw(): void;
82

83
/**
84
 * Restore table redrawing after being blocked
85
 */
86
restoreRedraw(): void;
87

88
/**
89
 * Set table height dynamically
90
 * @param height - New height as number (pixels) or CSS string
91
 */
92
setHeight(height: number | string): void;
93
```
94

95
### Table Lifecycle Methods
96

97
Control table initialization state and cleanup.
98

99
```javascript { .api }
100
/**
101
 * Check if table has completed initialization
102
 * @param func - Function name for debugging (optional)
103
 * @param msg - Additional debug message (optional)
104
 * @returns True if table is initialized
105
 */
106
initGuard(func?: string, msg?: string): boolean;
107

108
/**
109
 * Completely destroy table instance and clean up DOM
110
 */
111
destroy(): void;
112
```
113

114
### Module System Integration
115

116
Access and check module availability within table instances.
117

118
```javascript { .api }
119
/**
120
 * Check if specific module exists and is loaded
121
 * @param plugin - Module name to check
122
 * @param required - Whether to log error if module missing
123
 * @returns True if module exists
124
 */
125
modExists(plugin: string, required?: boolean): boolean;
126

127
/**
128
 * Get reference to specific module instance
129
 * @param key - Module name
130
 * @returns Module instance or undefined
131
 */
132
module(key: string): any;
133
```
134

135
## Configuration Options
136

137
### Core Display Options
138

139
```javascript { .api }
140
interface CoreDisplayOptions {
141
  /** Table height - false for auto-height, number for pixels, string for CSS */
142
  height?: number | string | false;
143
  /** Minimum table height */
144
  minHeight?: number | string;
145
  /** Maximum table height */  
146
  maxHeight?: number | string;
147
  /** Layout mode for column sizing */
148
  layout?: "fitData" | "fitColumns" | "fitDataFill" | "fitDataStretch" | "fitDataTable";
149
  /** Show/hide table header */
150
  headerVisible?: boolean;
151
  /** Custom CSS class for table */
152
  cssClass?: string;
153
  /** Text direction for RTL support */
154
  textDirection?: "auto" | "ltr" | "rtl";
155
}
156
```
157

158
### Data Configuration Options
159

160
```javascript { .api }
161
interface DataConfigOptions {
162
  /** Initial data as array or URL string */
163
  data?: any[] | string;
164
  /** Column definitions array */
165
  columns?: ColumnDefinition[];
166
  /** Auto-generate columns from data */
167
  autoColumns?: boolean;
168
  /** Field name to use as row index/key */
169
  index?: string;
170
  /** Default position for new rows */
171
  addRowPos?: "top" | "bottom";
172
  /** Separator for nested field access */
173
  nestedFieldSeparator?: string;
174
}
175
```
176

177
### Rendering Performance Options
178

179
```javascript { .api }
180
interface RenderingOptions {
181
  /** Vertical rendering mode - virtual for performance */
182
  renderVertical?: "virtual" | "basic";
183
  /** Horizontal rendering mode */
184
  renderHorizontal?: "basic";  
185
  /** Buffer size for virtual DOM rendering */
186
  renderVerticalBuffer?: number;
187
  /** Start rendering at specific row */
188
  renderStartRow?: number;
189
}
190
```
191

192
**Usage Examples:**
193

194
```javascript
195
// Performance-optimized large dataset
196
const largeTable = new Tabulator("#large-data", {
197
  data: largeDataset, // 10,000+ rows
198
  height: 400,
199
  renderVertical: "virtual",
200
  renderVerticalBuffer: 50,
201
  pagination: true,
202
  paginationSize: 100,
203
  columns: columnDefs
204
});
205

206
// Auto-sizing table with column generation  
207
const autoTable = new Tabulator("#auto-table", {
208
  data: dynamicData,
209
  height: false, // Auto-height
210
  layout: "fitData", // Size to content
211
  autoColumns: true, // Generate columns from data
212
  headerVisible: true
213
});
214

215
// RTL language support
216
const rtlTable = new Tabulator("#rtl-table", {
217
  data: arabicData,
218
  textDirection: "rtl",
219
  columns: arabicColumns,
220
  height: 300
221
});
222
```