0
# Column Management
1

2
Dynamic column configuration, manipulation, and display control for flexible table layouts with comprehensive column definition options.
3

4
## Capabilities
5

6
### Column Configuration
7

8
Methods for setting and updating column definitions dynamically.
9

10
```javascript { .api }
11
/**
12
 * Set complete column definition array, replacing existing columns
13
 * @param definition - Array of column definition objects
14
 */
15
setColumns(definition: ColumnDefinition[]): void;
16

17
/**
18
 * Get all column components
19
 * @param structured - If true, return nested structure for column groups
20
 * @returns Array of ColumnComponents
21
 */
22
getColumns(structured?: boolean): ColumnComponent[];
23

24
/**
25
 * Get specific column component by field name
26
 * @param field - Column field identifier
27
 * @returns ColumnComponent or false if not found
28
 */
29
getColumn(field: string): ColumnComponent | false;
30

31
/**
32
 * Get current column definitions tree
33
 * @returns Array of column definition objects including nested structure
34
 */
35
getColumnDefinitions(): ColumnDefinition[];
36
```
37

38
**Usage Examples:**
39

40
```javascript
41
// Set initial columns
42
table.setColumns([
43
  { title: "Name", field: "name", width: 200 },
44
  { title: "Age", field: "age", width: 100, sorter: "number" },
45
  { title: "Email", field: "email", width: 250 }
46
]);
47

48
// Get column references
49
const nameColumn = table.getColumn("name");
50
const allColumns = table.getColumns();
51

52
// Access nested column groups
53
const structuredColumns = table.getColumns(true);
54
```
55

56
### Dynamic Column Manipulation
57

58
Add, remove, and modify columns after table initialization.
59

60
```javascript { .api }
61
/**
62
 * Add new column to table
63
 * @param definition - Column definition object
64
 * @param before - If true, add before target column; if false, add after
65
 * @param field - Field name of target column for positioning
66
 * @returns Promise resolving to new ColumnComponent
67
 */
68
addColumn(definition: ColumnDefinition, before?: boolean, field?: string): Promise<ColumnComponent>;
69

70
/**
71
 * Delete column from table
72
 * @param field - Field name of column to delete
73
 * @returns Promise resolving when deletion completes
74
 */
75
deleteColumn(field: string): Promise<void>;
76

77
/**
78
 * Update existing column definition
79
 * @param field - Field name of column to update
80
 * @param definition - New column definition properties
81
 * @returns Promise resolving when update completes
82
 */
83
updateColumnDefinition(field: string, definition: ColumnDefinition): Promise<void>;
84
```
85

86
### Column Visibility Control
87

88
Show, hide, and toggle column visibility dynamically.
89

90
```javascript { .api }
91
/**
92
 * Show hidden column
93
 * @param field - Field name of column to show
94
 */
95
showColumn(field: string): void;
96

97
/**
98
 * Hide visible column
99
 * @param field - Field name of column to hide
100
 */
101
hideColumn(field: string): void;
102

103
/**
104
 * Toggle column visibility state
105
 * @param field - Field name of column to toggle
106
 */
107
toggleColumn(field: string): void;
108
```
109

110
**Usage Examples:**
111

112
```javascript
113
// Add new column dynamically
114
await table.addColumn({
115
  title: "Status", 
116
  field: "status", 
117
  formatter: "tickCross",
118
  width: 100
119
}, true, "email"); // Add before email column
120

121
// Update column properties
122
await table.updateColumnDefinition("age", {
123
  title: "Age (Years)",
124
  validator: ["min:0", "max:120"]
125
});
126

127
// Column visibility management
128
table.hideColumn("email");
129
table.showColumn("status");
130
table.toggleColumn("age");
131

132
// Delete column
133
await table.deleteColumn("status");
134
```
135

136
### Column Movement and Positioning
137

138
Reorder columns and control their positioning within the table.
139

140
```javascript { .api }
141
/**
142
 * Move column to new position
143
 * @param from - Field name of column to move
144
 * @param to - Field name of target column
145
 * @param after - If true, move after target; if false, move before
146
 */
147
moveColumn(from: string, to: string, after?: boolean): void;
148

149
/**
150
 * Scroll table horizontally to show specific column
151
 * @param field - Field name of column to scroll to
152
 * @param position - Position in viewport ("left", "center", "right") 
153
 * @param ifVisible - Only scroll if column is not currently visible
154
 * @returns Promise resolving when scroll completes
155
 */
156
scrollToColumn(field: string, position?: string, ifVisible?: boolean): Promise<void>;
157
```
158

159
## Column Definition Interface
160

161
### Core Column Properties
162

163
```javascript { .api }
164
interface ColumnDefinition {
165
  /** Display title for column header */
166
  title?: string;
167
  /** Field name in data object */
168
  field: string;
169
  /** Column visibility */
170
  visible?: boolean;
171
  /** Column width (number=pixels, string=CSS) */
172
  width?: number | string;
173
  /** Minimum column width */
174
  minWidth?: number;
175
  /** Maximum column width */
176
  maxWidth?: number;
177
  /** Allow column resizing */
178
  resizable?: boolean;
179
  /** Freeze column position */
180
  frozen?: boolean;
181
  /** Responsive breakpoint for hiding */
182
  responsive?: number;
183
  /** CSS class for column */
184
  cssClass?: string;
185
}
186
```
187

188
### Data Processing Properties
189

190
```javascript { .api }
191
interface DataProcessingProperties {
192
  /** Format cell display value */
193
  formatter?: string | Function;
194
  /** Parameters for formatter */
195
  formatterParams?: any;
196
  /** Process data before storage */
197
  mutator?: Function;
198
  /** Access nested or calculated data */
199
  accessor?: Function;
200
  /** Parameters for accessor */
201
  accessorParams?: any;
202
  /** Allow variable row height for content */
203
  variableHeight?: boolean;
204
}
205
```
206

207
### Editing Properties
208

209
```javascript { .api }
210
interface EditingProperties {
211
  /** Enable cell editing */
212
  editable?: boolean | Function;
213
  /** Cell editor type */
214
  editor?: string | Function | boolean;
215
  /** Parameters for editor */
216
  editorParams?: any;
217
  /** Validation rules */
218
  validator?: string | Function | Array<string | Function>;
219
}
220
```
221

222
### Sorting Properties
223

224
```javascript { .api }
225
interface SortingProperties {
226
  /** Sort function or type */
227
  sorter?: string | Function | boolean;
228
  /** Parameters for sorter */
229
  sorterParams?: any;
230
  /** Custom sort value accessor */
231
  sorterAccessor?: Function;
232
}
233
```
234

235
### Header Filter Properties
236

237
```javascript { .api }
238
interface HeaderFilterProperties {
239
  /** Header filter type */
240
  headerFilter?: string | Function | boolean;
241
  /** Parameters for header filter */
242
  headerFilterParams?: any;
243
  /** Placeholder text */
244
  headerFilterPlaceholder?: string;
245
  /** Empty value check function */
246
  headerFilterEmptyCheck?: Function;
247
  /** Filter comparison function */
248
  headerFilterFunc?: string | Function;
249
  /** Parameters for filter function */
250
  headerFilterFuncParams?: any;
251
  /** Enable live filtering as user types */
252
  headerFilterLiveFilter?: boolean;
253
}
254
```
255

256
### Display and Export Properties
257

258
```javascript { .api }
259
interface DisplayExportProperties {
260
  /** Show tooltip on hover */
261
  tooltip?: boolean | string | Function;
262
  /** Parameters for tooltip */
263
  tooltipParams?: any;
264
  /** Include in HTML output */
265
  htmlOutput?: boolean;
266
  /** Include in print output */
267
  print?: boolean;
268
  /** Include in downloads */
269
  download?: boolean;
270
  /** Title for download files */
271
  titleDownload?: string;
272
}
273
```
274

275
### Column Calculations
276

277
```javascript { .api }
278
interface ColumnCalculations {
279
  /** Top calculation function */
280
  topCalc?: string | Function;
281
  /** Parameters for top calculation */
282
  topCalcParams?: any;
283
  /** Formatter for top calculation */
284
  topCalcFormatter?: string | Function;
285
  /** Parameters for top calc formatter */
286
  topCalcFormatterParams?: any;
287
  /** Bottom calculation function */
288
  bottomCalc?: string | Function;
289
  /** Parameters for bottom calculation */
290
  bottomCalcParams?: any;
291
  /** Formatter for bottom calculation */
292
  bottomCalcFormatter?: string | Function;
293
  /** Parameters for bottom calc formatter */
294
  bottomCalcFormatterParams?: any;
295
}
296
```
297

298
### Column Groups
299

300
```javascript { .api }
301
interface ColumnGroupProperties {
302
  /** Child columns for grouping */
303
  columns?: ColumnDefinition[];
304
  /** Column group header tooltip */
305
  headerTooltip?: boolean | string | Function;
306
  /** Header context menu */
307
  headerMenu?: MenuOption[];
308
  /** Header click handler */
309
  headerClick?: Function;
310
  /** Header double-click handler */
311
  headerDblClick?: Function;
312
  /** Header context menu handler */
313
  headerContext?: Function;
314
}
315
```
316

317
**Usage Examples:**
318

319
```javascript
320
// Comprehensive column definition
321
const advancedColumns = [
322
  {
323
    title: "User Info",
324
    columns: [
325
      {
326
        title: "Full Name", 
327
        field: "name",
328
        width: 200,
329
        editor: "input",
330
        validator: "required",
331
        headerFilter: "input",
332
        headerFilterPlaceholder: "Search names...",
333
        sorter: "string"
334
      },
335
      {
336
        title: "Age",
337
        field: "age", 
338
        width: 80,
339
        editor: "number",
340
        validator: ["required", "min:0", "max:120"],
341
        formatter: "money",
342
        formatterParams: { symbol: "", precision: 0 },
343
        headerFilter: "number",
344
        sorter: "number"
345
      }
346
    ]
347
  },
348
  {
349
    title: "Contact",
350
    field: "email",
351
    width: 250,
352
    editor: "input",
353
    validator: "email",
354
    formatter: "link",
355
    formatterParams: { target: "_blank" },
356
    headerFilter: "input"
357
  },
358
  {
359
    title: "Status",
360
    field: "active",
361
    width: 100,
362
    formatter: "tickCross",
363
    editor: "tickCross",
364
    headerFilter: "tickCross",
365
    headerFilterParams: { tristate: true },
366
    hozAlign: "center"
367
  },
368
  {
369
    title: "Actions",
370
    formatter: "buttonCross",
371
    formatterParams: {
372
      text: "Delete",
373
      action: function(e, cell) {
374
        cell.getRow().delete();
375
      }
376
    },
377
    width: 100,
378
    print: false,
379
    download: false
380
  }
381
];
382

383
table.setColumns(advancedColumns);
384
```