0
# Column Configuration
1

2
Column definition system supporting various column types, custom renderers, editors, formatters, and complex header structures including multi-level headers and column groups.
3

4
## Capabilities
5

6
### VxeColumn Component
7

8
Column definition component for flexible table column configuration.
9

10
```typescript { .api }
11
/**
12
 * Column definition component for table columns
13
 */
14
interface VxeColumn extends ComponentPublicInstance {
15
  // Basic column properties
16
  field?: string;
17
  title?: string;
18
  width?: number | string;
19
  minWidth?: number | string;
20
  maxWidth?: number | string;
21
  type?: VxeColumnPropTypes.Type;
22
  fixed?: VxeColumnPropTypes.Fixed;
23
  
24
  // Alignment
25
  align?: VxeColumnPropTypes.Align;
26
  headerAlign?: VxeColumnPropTypes.HeaderAlign;
27
  footerAlign?: VxeColumnPropTypes.FooterAlign;
28
  
29
  // Display options
30
  showOverflow?: VxeColumnPropTypes.ShowOverflow;
31
  showHeaderOverflow?: VxeColumnPropTypes.ShowHeaderOverflow;
32
  showFooterOverflow?: VxeColumnPropTypes.ShowFooterOverflow;
33
  
34
  // Visibility and state
35
  visible?: boolean;
36
  resizable?: boolean;
37
  sortable?: boolean;
38
  
39
  // Formatting and rendering
40
  formatter?: VxeColumnPropTypes.Formatter;
41
  cellRender?: VxeColumnPropTypes.CellRender;
42
  editRender?: VxeColumnPropTypes.EditRender;
43
  headerRender?: VxeColumnPropTypes.HeaderRender;
44
  footerRender?: VxeColumnPropTypes.FooterRender;
45
  
46
  // Sorting configuration
47
  sortBy?: string | string[];
48
  sortType?: 'auto' | 'string' | 'number' | 'date';
49
  sortMethod?: VxeColumnPropTypes.SortMethod;
50
  remoteSort?: boolean;
51
  
52
  // Filtering configuration
53
  filters?: VxeColumnPropTypes.Filter[];
54
  filterMultiple?: boolean;
55
  filterMethod?: VxeColumnPropTypes.FilterMethod;
56
  filterResetMethod?: VxeColumnPropTypes.FilterResetMethod;
57
  filterRecoverMethod?: VxeColumnPropTypes.FilterRecoverMethod;
58
  
59
  // Tree column configuration
60
  treeNode?: boolean;
61
  
62
  // Grouping (for column groups)
63
  children?: VxeColumn[];
64
}
65
```
66

67
### Column Types
68

69
Built-in column types with specific behaviors and rendering.
70

71
```typescript { .api }
72
interface ColumnTypes {
73
  /** Column type */
74
  type?: 
75
    | 'seq'        // Sequence/index column
76
    | 'radio'      // Radio selection column
77
    | 'checkbox'   // Checkbox selection column
78
    | 'expand'     // Row expand column
79
    | 'html'       // HTML content column
80
    | null;        // Regular data column
81
}
82

83
// Sequence column configuration
84
interface SeqColumnConfig {
85
  type: 'seq';
86
  /** Starting number */
87
  seqMethod?: (params: VxeColumnDefines.CellRenderBodyParams) => number;
88
}
89

90
// Radio column configuration
91
interface RadioColumnConfig {
92
  type: 'radio';
93
  /** Radio selection configuration */
94
  radioConfig?: {
95
    /** Disable radio for specific rows */
96
    checkMethod?: (params: VxeColumnDefines.CellRenderBodyParams) => boolean;
97
    /** Trigger event ('default' | 'cell' | 'row') */
98
    trigger?: string;
99
    /** Strict mode (only allow one selection) */
100
    strict?: boolean;
101
    /** Label field */
102
    labelField?: string;
103
  };
104
}
105

106
// Checkbox column configuration
107
interface CheckboxColumnConfig {
108
  type: 'checkbox';
109
  /** Checkbox selection configuration */
110
  checkboxConfig?: {
111
    /** Disable checkbox for specific rows */
112
    checkMethod?: (params: VxeColumnDefines.CellRenderBodyParams) => boolean;
113
    /** Trigger event ('default' | 'cell' | 'row') */
114
    trigger?: string;
115
    /** Strict mode */
116
    strict?: boolean;
117
    /** Label field */
118
    labelField?: string;
119
    /** Show header checkbox for select all */
120
    showHeader?: boolean;
121
  };
122
}
123
```
124

125
### Column Rendering
126

127
Custom cell rendering and editing configuration.
128

129
```typescript { .api }
130
interface ColumnRendering {
131
  /** Cell content formatter */
132
  formatter?: VxeColumnPropTypes.Formatter;
133
  
134
  /** Cell display renderer */
135
  cellRender?: VxeColumnPropTypes.CellRender;
136
  
137
  /** Cell editor renderer */
138
  editRender?: VxeColumnPropTypes.EditRender;
139
  
140
  /** Header renderer */
141
  headerRender?: VxeColumnPropTypes.HeaderRender;
142
  
143
  /** Footer renderer */
144
  footerRender?: VxeColumnPropTypes.FooterRender;
145
}
146

147
// Formatter function type
148
type VxeColumnPropTypes.Formatter = (params: VxeColumnDefines.CellRenderBodyParams) => string | number;
149

150
// Cell renderer configuration
151
interface VxeColumnPropTypes.CellRender {
152
  /** Renderer name */
153
  name?: string;
154
  /** Renderer properties */
155
  props?: any;
156
  /** Renderer options */
157
  options?: any[];
158
  /** Renderer events */
159
  events?: { [key: string]: Function };
160
  /** Custom render function */
161
  content?: string | Function;
162
}
163

164
// Edit renderer configuration
165
interface VxeColumnPropTypes.EditRender {
166
  /** Editor name */
167
  name?: string;
168
  /** Editor properties */
169
  props?: any;
170
  /** Editor options */
171
  options?: any[];
172
  /** Editor events */
173
  events?: { [key: string]: Function };
174
  /** Auto focus */
175
  autoFocus?: boolean;
176
  /** Immediate validation */
177
  immediate?: boolean;
178
  /** Custom render function */
179
  content?: string | Function;
180
}
181
```
182

183
### Column Sorting
184

185
Sorting configuration and custom sort methods.
186

187
```typescript { .api }
188
interface ColumnSorting {
189
  /** Enable sorting */
190
  sortable?: boolean;
191
  
192
  /** Sort by specific field(s) */
193
  sortBy?: string | string[];
194
  
195
  /** Sort data type */
196
  sortType?: 'auto' | 'string' | 'number' | 'date';
197
  
198
  /** Custom sort method */
199
  sortMethod?: VxeColumnPropTypes.SortMethod;
200
  
201
  /** Remote sorting */
202
  remoteSort?: boolean;
203
}
204

205
// Custom sort method type
206
type VxeColumnPropTypes.SortMethod = (
207
  a: any, 
208
  b: any, 
209
  params: VxeColumnDefines.SortMethodParams
210
) => number;
211

212
interface VxeColumnDefines.SortMethodParams {
213
  column: VxeColumnDefines.ColumnInfo;
214
  property: string;
215
  order: 'asc' | 'desc';
216
  sortBy: string;
217
}
218
```
219

220
### Column Filtering
221

222
Filtering configuration with built-in and custom filters.
223

224
```typescript { .api }
225
interface ColumnFiltering {
226
  /** Filter options */
227
  filters?: VxeColumnPropTypes.Filter[];
228
  
229
  /** Multiple selection */
230
  filterMultiple?: boolean;
231
  
232
  /** Custom filter method */
233
  filterMethod?: VxeColumnPropTypes.FilterMethod;
234
  
235
  /** Filter reset method */
236
  filterResetMethod?: VxeColumnPropTypes.FilterResetMethod;
237
  
238
  /** Filter recover method */
239
  filterRecoverMethod?: VxeColumnPropTypes.FilterRecoverMethod;
240
}
241

242
// Filter option configuration
243
interface VxeColumnPropTypes.Filter {
244
  /** Filter label */
245
  label?: string;
246
  /** Filter value */
247
  value?: any;
248
  /** Filter data */
249
  data?: any;
250
  /** Reset value */
251
  resetValue?: any;
252
  /** Checked state */
253
  checked?: boolean;
254
}
255

256
// Custom filter method
257
type VxeColumnPropTypes.FilterMethod = (
258
  params: VxeColumnDefines.FilterMethodParams
259
) => boolean;
260

261
interface VxeColumnDefines.FilterMethodParams {
262
  value: any;
263
  option: VxeColumnPropTypes.Filter;
264
  cellValue: any;
265
  row: any;
266
  column: VxeColumnDefines.ColumnInfo;
267
}
268
```
269

270
### VxeColgroup Component
271

272
Column group component for multi-level headers.
273

274
```typescript { .api }
275
/**
276
 * Column group component for organizing columns into groups
277
 */
278
interface VxeColgroup extends ComponentPublicInstance {
279
  /** Group title */
280
  title?: string;
281
  /** Group field (optional) */
282
  field?: string;
283
  /** Fixed position */
284
  fixed?: VxeColumnPropTypes.Fixed;
285
  /** Alignment */
286
  align?: VxeColumnPropTypes.Align;
287
  /** Header alignment */
288
  headerAlign?: VxeColumnPropTypes.HeaderAlign;
289
  /** Header overflow */
290
  showHeaderOverflow?: VxeColumnPropTypes.ShowHeaderOverflow;
291
  /** Resizable */
292
  resizable?: boolean;
293
  /** Width */
294
  width?: number | string;
295
  /** Minimum width */
296
  minWidth?: number | string;
297
  /** Maximum width */
298
  maxWidth?: number | string;
299
  /** Header renderer */
300
  headerRender?: VxeColumnPropTypes.HeaderRender;
301
  /** Child columns */
302
  children?: VxeColumn[];
303
}
304
```
305

306
**Usage Examples:**
307

308
```typescript
309
// Basic column configuration
310
<VxeTable :data="tableData">
311
  <VxeColumn field="id" title="ID" width="80" type="seq"></VxeColumn>
312
  <VxeColumn field="name" title="Name" min-width="120" sortable></VxeColumn>
313
  <VxeColumn field="age" title="Age" width="80" sortable sort-type="number"></VxeColumn>
314
  <VxeColumn field="email" title="Email" min-width="180" show-overflow="tooltip"></VxeColumn>
315
</VxeTable>
316

317
// Column with custom formatter
318
<VxeColumn 
319
  field="status" 
320
  title="Status" 
321
  width="100"
322
  :formatter="statusFormatter"
323
>
324
</VxeColumn>
325

326
const statusFormatter = ({ cellValue }: any) => {
327
  return cellValue === 1 ? 'Active' : 'Inactive';
328
};
329

330
// Editable column with select renderer
331
<VxeColumn 
332
  field="category" 
333
  title="Category" 
334
  width="120"
335
  :edit-render="{ name: 'select', options: categoryOptions }"
336
>
337
</VxeColumn>
338

339
// Column with custom cell renderer
340
<VxeColumn 
341
  field="avatar" 
342
  title="Avatar" 
343
  width="80"
344
  :cell-render="{ name: 'VxeImage', props: { width: 40, height: 40 } }"
345
>
346
</VxeColumn>
347

348
// Multi-level headers with column groups
349
<VxeTable :data="tableData">
350
  <VxeColgroup title="Personal Info">
351
    <VxeColumn field="name" title="Name"></VxeColumn>
352
    <VxeColumn field="age" title="Age"></VxeColumn>
353
  </VxeColgroup>
354
  <VxeColgroup title="Contact Info">
355
    <VxeColumn field="email" title="Email"></VxeColumn>
356
    <VxeColumn field="phone" title="Phone"></VxeColumn>
357
  </VxeColgroup>
358
</VxeTable>
359

360
// Column with filtering
361
<VxeColumn 
362
  field="status" 
363
  title="Status" 
364
  width="100"
365
  :filters="[
366
    { label: 'Active', value: 1 },
367
    { label: 'Inactive', value: 0 }
368
  ]"
369
  filter-multiple
370
>
371
</VxeColumn>
372

373
// Fixed columns
374
<VxeTable :data="tableData">
375
  <VxeColumn field="id" title="ID" width="80" fixed="left"></VxeColumn>
376
  <VxeColumn field="name" title="Name" min-width="120" fixed="left"></VxeColumn>
377
  <!-- ... other columns ... -->
378
  <VxeColumn field="actions" title="Actions" width="120" fixed="right">
379
    <template #default="{ row }">
380
      <vxe-button @click="editRow(row)">Edit</vxe-button>
381
      <vxe-button @click="deleteRow(row)">Delete</vxe-button>
382
    </template>
383
  </VxeColumn>
384
</VxeTable>
385
```
386

387
## Types
388

389
```typescript { .api }
390
// Column alignment types
391
type VxeColumnPropTypes.Align = 'left' | 'center' | 'right';
392
type VxeColumnPropTypes.HeaderAlign = 'left' | 'center' | 'right';
393
type VxeColumnPropTypes.FooterAlign = 'left' | 'center' | 'right';
394

395
// Column fixed position
396
type VxeColumnPropTypes.Fixed = 'left' | 'right' | null;
397

398
// Column type
399
type VxeColumnPropTypes.Type = 'seq' | 'radio' | 'checkbox' | 'expand' | 'html' | null;
400

401
// Overflow display
402
type VxeColumnPropTypes.ShowOverflow = boolean | 'ellipsis' | 'title' | 'tooltip';
403

404
// Column instance type
405
interface VxeColumnInstance extends ComponentPublicInstance, VxeColumn {}
406

407
// Column information type
408
interface VxeColumnDefines.ColumnInfo {
409
  id: string;
410
  type: VxeColumnPropTypes.Type;
411
  field: string;
412
  title: string;
413
  width: number;
414
  minWidth: number;
415
  maxWidth: number;
416
  fixed: VxeColumnPropTypes.Fixed;
417
  align: VxeColumnPropTypes.Align;
418
  headerAlign: VxeColumnPropTypes.HeaderAlign;
419
  footerAlign: VxeColumnPropTypes.FooterAlign;
420
  showOverflow: VxeColumnPropTypes.ShowOverflow;
421
  showHeaderOverflow: VxeColumnPropTypes.ShowHeaderOverflow;
422
  showFooterOverflow: VxeColumnPropTypes.ShowFooterOverflow;
423
  className: string;
424
  headerClassName: string;
425
  footerClassName: string;
426
  visible: boolean;
427
  resizable: boolean;
428
  sortable: boolean;
429
  filters: VxeColumnPropTypes.Filter[];
430
  formatter: VxeColumnPropTypes.Formatter;
431
  cellRender: VxeColumnPropTypes.CellRender;
432
  editRender: VxeColumnPropTypes.EditRender;
433
  headerRender: VxeColumnPropTypes.HeaderRender;
434
  footerRender: VxeColumnPropTypes.FooterRender;
435
  children: VxeColumnDefines.ColumnInfo[];
436
  level: number;
437
  rowSpan: number;
438
  colSpan: number;
439
  parentId: string;
440
  [key: string]: any;
441
}
442
```