0
# Advanced Features
1

2
Advanced table capabilities including drag-and-drop operations, tree structures, data aggregation, cell area selection, copy-paste functionality, and data validation.
3

4
## Capabilities
5

6
### Drag and Drop Operations
7

8
Comprehensive drag-and-drop support for rows and columns with visual feedback and customizable behavior.
9

10
```typescript { .api }
11
interface DragDropConfiguration {
12
  /** Row drag configuration */
13
  rowDragConfig?: {
14
    /** Enable row dragging */
15
    enabled?: boolean;
16
    /** Show drag icon */
17
    showIcon?: boolean;
18
    /** Drag animation */
19
    animation?: boolean;
20
    /** Show guide status */
21
    showGuidesStatus?: boolean;
22
    /** Show drag tip */
23
    showDragTip?: boolean;
24
    /** Drag trigger area */
25
    trigger?: 'default' | 'row' | 'cell';
26
    /** Plugin configuration */
27
    plugin?: any;
28
  };
29
  
30
  /** Column drag configuration */
31
  columnDragConfig?: {
32
    /** Enable column dragging */
33
    enabled?: boolean;
34
    /** Show drag icon */
35
    showIcon?: boolean;
36
    /** Drag animation */
37
    animation?: boolean;
38
    /** Show guide status */
39
    showGuidesStatus?: boolean;
40
    /** Show drag tip */
41
    showDragTip?: boolean;
42
    /** Drag trigger area */
43
    trigger?: 'default' | 'header';
44
    /** Plugin configuration */
45
    plugin?: any;
46
  };
47
}
48

49
// Drag event types
50
interface DragEvents {
51
  'row-dragstart': (params: VxeTableDefines.RowDragstartEventParams) => void;
52
  'row-dragover': (params: VxeTableDefines.RowDragoverEventParams) => void;
53
  'row-dragend': (params: VxeTableDefines.RowDragendEventParams) => void;
54
  'row-remove-dragend': (params: VxeTableDefines.RowRemoveDragendEventParams) => void;
55
  'row-insert-dragend': (params: VxeTableDefines.RowInsertDragendEventParams) => void;
56
  'column-dragstart': (params: VxeTableDefines.ColumnDragstartEventParams) => void;
57
  'column-dragover': (params: VxeTableDefines.ColumnDragoverEventParams) => void;
58
  'column-dragend': (params: VxeTableDefines.ColumnDragendEventParams) => void;
59
}
60
```
61

62
### Tree Structure Support
63

64
Hierarchical data display with expandable tree nodes and customizable tree icons.
65

66
```typescript { .api }
67
interface TreeConfiguration {
68
  /** Tree structure configuration */
69
  treeConfig?: {
70
    /** Transform to tree structure */
71
    transform?: boolean;
72
    /** Row key field */
73
    rowField?: string;
74
    /** Parent key field */
75
    parentField?: string;
76
    /** Children field */
77
    childrenField?: string;
78
    /** Has children field */
79
    hasChildField?: string;
80
    /** Mapped children field */
81
    mapChildrenField?: string;
82
    /** Tree node indent */
83
    indent?: number;
84
    /** Show tree icon */
85
    showIcon?: boolean;
86
    /** Show tree line */
87
    showLine?: boolean;
88
    /** Accordion mode (only one expanded at a time) */
89
    accordion?: boolean;
90
    /** Trigger expand event */
91
    trigger?: 'default' | 'cell' | 'row';
92
    /** Lazy loading */
93
    lazy?: boolean;
94
    /** Load method for lazy loading */
95
    loadMethod?: (params: VxeTableDefines.TreeLoadMethodParams) => Promise<any[]>;
96
    /** Icon configuration */
97
    iconOpen?: string;
98
    iconClose?: string;
99
    iconLoaded?: string;
100
  };
101
}
102

103
// Tree-related methods
104
interface TreeMethods {
105
  /** Set tree expansion state */
106
  setTreeExpand(rows: any[], expanded: boolean): Promise<void>;
107
  /** Set all tree expansion state */
108
  setAllTreeExpand(expanded: boolean): Promise<void>;
109
  /** Clear tree expansion state */
110
  clearTreeExpand(): Promise<void>;
111
  /** Get tree expansion records */
112
  getTreeExpandRecords(): any[];
113
  /** Check if tree node is expanded */
114
  isTreeExpandByRow(row: any): boolean;
115
}
116

117
// Tree events
118
interface TreeEvents {
119
  'toggle-tree-expand': (params: VxeTableDefines.ToggleTreeExpandEventParams) => void;
120
}
121
```
122

123
### Data Aggregation and Grouping
124

125
Advanced data aggregation with pivot table functionality and customizable grouping.
126

127
```typescript { .api }
128
interface AggregationConfiguration {
129
  /** Data aggregation configuration */
130
  aggregateConfig?: {
131
    /** Enable aggregation */
132
    enabled?: boolean;
133
    /** Padding */
134
    padding?: boolean;
135
    /** Row key field */
136
    rowField?: string;
137
    /** Parent key field */
138
    parentField?: string;
139
    /** Children field */
140
    childrenField?: string;
141
    /** Mapped children field */
142
    mapChildrenField?: string;
143
    /** Group indent */
144
    indent?: number;
145
    /** Show aggregation icon */
146
    showIcon?: boolean;
147
    /** Maximum group size */
148
    maxGroupSize?: number;
149
    /** Show aggregation function title */
150
    showAggFuncTitle?: boolean;
151
    /** Aggregation methods */
152
    aggregateMethods?: {
153
      [field: string]: VxeTableDefines.AggregateMethod;
154
    };
155
  };
156
}
157

158
// Aggregation method type
159
type VxeTableDefines.AggregateMethod = (
160
  params: VxeTableDefines.AggregateMethodParams
161
) => number | string;
162

163
interface VxeTableDefines.AggregateMethodParams {
164
  data: any[];
165
  column: VxeColumnDefines.ColumnInfo;
166
  property: string;
167
}
168
```
169

170
### Cell Area Selection
171

172
Excel-like cell area selection with keyboard navigation and copy-paste operations.
173

174
```typescript { .api }
175
interface AreaSelectionConfiguration {
176
  /** Area selection configuration */
177
  areaConfig?: {
178
    /** Enable area selection */
179
    enabled?: boolean;
180
    /** Auto clear selection */
181
    autoClear?: boolean;
182
    /** Multiple area selection */
183
    multiple?: boolean;
184
    /** Select cell by header click */
185
    selectCellByHeader?: boolean;
186
    /** Select cell by body click */
187
    selectCellByBody?: boolean;
188
    /** Extend selection directions */
189
    extendDirection?: {
190
      top?: boolean;
191
      left?: boolean;
192
      bottom?: boolean;
193
      right?: boolean;
194
    };
195
  };
196
}
197

198
// Area selection methods
199
interface AreaSelectionMethods {
200
  /** Set cell area selection */
201
  setCellAreaSelection(areas: VxeTableDefines.CellAreaParams[]): Promise<void>;
202
  /** Get cell area selection */
203
  getCellAreaSelection(): VxeTableDefines.CellAreaParams[];
204
  /** Clear cell area selection */
205
  clearCellAreaSelection(): Promise<void>;
206
  /** Set cell area merge */
207
  setCellAreaMerge(merges: VxeTableDefines.CellMergeParams[]): Promise<void>;
208
  /** Get cell area merge */
209
  getCellAreaMerge(): VxeTableDefines.CellMergeParams[];
210
  /** Clear cell area merge */
211
  clearCellAreaMerge(): Promise<void>;
212
}
213

214
// Area selection events
215
interface AreaSelectionEvents {
216
  'cell-area-selection-start': (params: VxeTableDefines.CellAreaSelectionStartEventParams) => void;
217
  'cell-area-selection-drag': (params: VxeTableDefines.CellAreaSelectionDragEventParams) => void;
218
  'cell-area-selection-end': (params: VxeTableDefines.CellAreaSelectionEndEventParams) => void;
219
  'cell-area-extension-start': (params: VxeTableDefines.CellAreaExtensionStartEventParams) => void;
220
  'cell-area-extension-drag': (params: VxeTableDefines.CellAreaExtensionDragEventParams) => void;
221
  'cell-area-extension-end': (params: VxeTableDefines.CellAreaExtensionEndEventParams) => void;
222
}
223
```
224

225
### Clipboard Operations
226

227
Copy, cut, and paste functionality with support for various data formats.
228

229
```typescript { .api }
230
interface ClipboardConfiguration {
231
  /** Clipboard configuration */
232
  clipConfig?: {
233
    /** Enable clipboard operations */
234
    enabled?: boolean;
235
    /** Enable copy operation */
236
    isCopy?: boolean;
237
    /** Enable cut operation */
238
    isCut?: boolean;
239
    /** Enable paste operation */
240
    isPaste?: boolean;
241
    /** Copy format */
242
    copyFormat?: 'text' | 'html' | 'json';
243
    /** Paste format */
244
    pasteFormat?: 'text' | 'html' | 'json';
245
    /** Include header in copy */
246
    includeHeader?: boolean;
247
    /** Use original value */
248
    useOriginalValue?: boolean;
249
    /** Before copy method */
250
    beforeCopyMethod?: (params: VxeTableDefines.BeforeCopyMethodParams) => boolean;
251
    /** After copy method */
252
    afterCopyMethod?: (params: VxeTableDefines.AfterCopyMethodParams) => void;
253
    /** Before paste method */
254
    beforePasteMethod?: (params: VxeTableDefines.BeforePasteMethodParams) => boolean;
255
    /** After paste method */
256
    afterPasteMethod?: (params: VxeTableDefines.AfterPasteMethodParams) => void;
257
  };
258
}
259

260
// Clipboard events
261
interface ClipboardEvents {
262
  'copy': (params: VxeTableDefines.CopyEventParams) => void;
263
  'cut': (params: VxeTableDefines.CutEventParams) => void;
264
  'paste': (params: VxeTableDefines.PasteEventParams) => void;
265
  'cell-area-copy': (params: VxeTableDefines.CellAreaCopyEventParams) => void;
266
  'cell-area-cut': (params: VxeTableDefines.CellAreaCutEventParams) => void;
267
  'cell-area-paste': (params: VxeTableDefines.CellAreaPasteEventParams) => void;
268
}
269
```
270

271
### Data Validation
272

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

275
```typescript { .api }
276
interface ValidationConfiguration {
277
  /** Validation configuration */
278
  validConfig?: {
279
    /** Auto clear validation errors */
280
    autoClear?: boolean;
281
    /** Auto position validation message */
282
    autoPos?: boolean;
283
    /** Show validation message */
284
    showMessage?: boolean;
285
    /** Message display mode */
286
    message?: 'inline' | 'tooltip' | 'none';
287
    /** Message mode */
288
    msgMode?: 'single' | 'all';
289
    /** Validation theme */
290
    theme?: 'default' | 'beautify';
291
  };
292
  
293
  /** Validation rules */
294
  editRules?: VxeTablePropTypes.EditRules;
295
}
296

297
// Edit rules type
298
interface VxeTablePropTypes.EditRules {
299
  [field: string]: VxeTableDefines.ValidatorRule[];
300
}
301

302
// Validator rule
303
interface VxeTableDefines.ValidatorRule {
304
  /** Validator type */
305
  type?: 'required' | 'min' | 'max' | 'number' | 'integer' | 'length' | 'pattern' | 'custom';
306
  /** Required field */
307
  required?: boolean;
308
  /** Minimum value/length */
309
  min?: number;
310
  /** Maximum value/length */
311
  max?: number;
312
  /** Pattern for regex validation */
313
  pattern?: RegExp | string;
314
  /** Custom validator function */
315
  validator?: VxeTableDefines.ValidatorMethod;
316
  /** Error message */
317
  message?: string;
318
  /** Trigger event */
319
  trigger?: 'blur' | 'change' | 'manual';
320
}
321

322
// Custom validator method
323
type VxeTableDefines.ValidatorMethod = (params: VxeTableDefines.ValidatorMethodParams) => boolean | string | Error;
324

325
interface VxeTableDefines.ValidatorMethodParams {
326
  cellValue: any;
327
  rule: VxeTableDefines.ValidatorRule;
328
  rules: VxeTableDefines.ValidatorRule[];
329
  row: any;
330
  column: VxeColumnDefines.ColumnInfo;
331
  rowIndex: number;
332
  columnIndex: number;
333
}
334

335
// Validation methods
336
interface ValidationMethods {
337
  /** Validate table data */
338
  validate(): Promise<VxeTableDefines.ValidateErrorParams[]>;
339
  /** Validate specific row */
340
  validateRow(row: any): Promise<VxeTableDefines.ValidateErrorParams[]>;
341
  /** Clear validation errors */
342
  clearValidate(): Promise<void>;
343
}
344
```
345

346
### Keyboard Navigation
347

348
Advanced keyboard navigation and shortcuts configuration.
349

350
```typescript { .api }
351
interface KeyboardConfiguration {
352
  /** Keyboard configuration */
353
  keyboardConfig?: {
354
    /** Enable all keyboard shortcuts */
355
    isAll?: boolean;
356
    /** Enable arrow key navigation */
357
    isArrow?: boolean;
358
    /** Enable Tab key navigation */
359
    isTab?: boolean;
360
    /** Enable Enter key navigation */
361
    isEnter?: boolean;
362
    /** Enable Delete key */
363
    isDel?: boolean;
364
    /** Enable Escape key */
365
    isEsc?: boolean;
366
    /** Enable F2 key for editing */
367
    isF2?: boolean;
368
    /** Enable context menu key */
369
    isContext?: boolean;
370
    /** Edit method */
371
    editMethod?: (params: VxeTableDefines.KeyboardEditMethodParams) => boolean;
372
  };
373
}
374

375
// Keyboard events
376
interface KeyboardEvents {
377
  'keydown-start': (params: VxeTableDefines.KeydownStartEventParams) => void;
378
  'keydown': (params: VxeTableDefines.KeydownEventParams) => void;
379
  'keydown-end': (params: VxeTableDefines.KeydownEndEventParams) => void;
380
}
381
```
382

383
**Usage Examples:**
384

385
```typescript
386
// Tree structure configuration
387
<VxeTable
388
  :data="treeData"
389
  :tree-config="{
390
    transform: true,
391
    rowField: 'id',
392
    parentField: 'parentId',
393
    childrenField: 'children',
394
    indent: 20,
395
    showIcon: true
396
  }"
397
>
398
  <VxeColumn field="name" title="Name" tree-node></VxeColumn>
399
  <VxeColumn field="type" title="Type"></VxeColumn>
400
  <VxeColumn field="size" title="Size"></VxeColumn>
401
</VxeTable>
402

403
// Drag and drop configuration
404
<VxeTable
405
  :data="tableData"
406
  :row-drag-config="{ enabled: true, showIcon: true, animation: true }"
407
  :column-drag-config="{ enabled: true, showIcon: true }"
408
  @row-dragend="handleRowDrag"
409
  @column-dragend="handleColumnDrag"
410
>
411
  <!-- columns -->
412
</VxeTable>
413

414
// Area selection and clipboard
415
<VxeTable
416
  :data="tableData"
417
  :area-config="{ enabled: true, multiple: true }"
418
  :clip-config="{ isCopy: true, isCut: true, isPaste: true }"
419
  :keyboard-config="{ isAll: true }"
420
  @copy="handleCopy"
421
  @paste="handlePaste"
422
>
423
  <!-- columns -->
424
</VxeTable>
425

426
// Data validation
427
<VxeTable
428
  :data="tableData"
429
  :edit-config="{ trigger: 'click', mode: 'cell' }"
430
  :valid-config="{ showMessage: true, autoClear: true }"
431
  :edit-rules="validationRules"
432
  @valid-error="handleValidationError"
433
>
434
  <VxeColumn field="name" title="Name" :edit-render="{ name: 'input' }"></VxeColumn>
435
  <VxeColumn field="email" title="Email" :edit-render="{ name: 'input' }"></VxeColumn>
436
  <VxeColumn field="age" title="Age" :edit-render="{ name: 'input', props: { type: 'number' } }"></VxeColumn>
437
</VxeTable>
438

439
const validationRules = {
440
  name: [
441
    { required: true, message: 'Name is required' },
442
    { min: 2, max: 50, message: 'Name must be between 2 and 50 characters' }
443
  ],
444
  email: [
445
    { required: true, message: 'Email is required' },
446
    { 
447
      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, 
448
      message: 'Please enter a valid email address' 
449
    }
450
  ],
451
  age: [
452
    { type: 'number', min: 18, max: 120, message: 'Age must be between 18 and 120' }
453
  ]
454
};
455

456
// Aggregation configuration
457
<VxeTable
458
  :data="salesData"
459
  :aggregate-config="{
460
    enabled: true,
461
    showIcon: true,
462
    aggregateMethods: {
463
      total: ({ data }) => data.reduce((sum, row) => sum + row.amount, 0),
464
      average: ({ data }) => data.reduce((sum, row) => sum + row.amount, 0) / data.length
465
    }
466
  }"
467
>
468
  <!-- columns -->
469
</VxeTable>
470

471
// Event handlers
472
const handleRowDrag = (params) => {
473
  console.log('Row dragged:', params);
474
  // Update data order
475
};
476

477
const handleValidationError = (params) => {
478
  console.log('Validation error:', params);
479
  // Handle validation errors
480
};
481
```
482

483
## Types
484

485
```typescript { .api }
486
// Cell area parameter
487
interface VxeTableDefines.CellAreaParams {
488
  startRow: Record<string, any>;
489
  endRow: Record<string, any>;
490
  startColumn: VxeColumnDefines.ColumnInfo;
491
  endColumn: VxeColumnDefines.ColumnInfo;
492
}
493

494
// Cell merge parameter
495
interface VxeTableDefines.CellMergeParams {
496
  row: Record<string, any>;
497
  column: VxeColumnDefines.ColumnInfo;
498
  rowspan: number;
499
  colspan: number;
500
}
501

502
// Validation error parameter
503
interface VxeTableDefines.ValidateErrorParams {
504
  row: Record<string, any>;
505
  column: VxeColumnDefines.ColumnInfo;
506
  rules: VxeTableDefines.ValidatorRule[];
507
  rule: VxeTableDefines.ValidatorRule;
508
  cellValue: any;
509
}
510

511
// Tree load method parameters
512
interface VxeTableDefines.TreeLoadMethodParams {
513
  row: Record<string, any>;
514
  level: number;
515
  $table: VxeTableInstance;
516
}
517
```