0
# Enhanced Grid
1

2
The VxeGrid component extends VxeTable with integrated toolbar, pagination, form controls, and data proxy capabilities for complete data management solutions.
3

4
## Capabilities
5

6
### VxeGrid Component
7

8
Enhanced grid component with integrated features for comprehensive data management.
9

10
```typescript { .api }
11
/**
12
 * Enhanced grid component extending table with integrated features
13
 */
14
interface VxeGrid extends VxeTable {
15
  // Grid-specific configuration
16
  layouts?: VxeGridPropTypes.Layouts;
17
  columns?: VxeGridPropTypes.Columns;
18
  
19
  // Integrated components
20
  pagerConfig?: VxeGridPropTypes.PagerConfig;
21
  proxyConfig?: VxeGridPropTypes.ProxyConfig;
22
  toolbarConfig?: VxeGridPropTypes.ToolbarConfig;
23
  formConfig?: VxeGridPropTypes.FormConfig;
24
  zoomConfig?: VxeGridPropTypes.ZoomConfig;
25
  
26
  // Grid methods extending table methods
27
  commitProxy(code: string, ...args: any[]): Promise<any>;
28
  getProxyInfo(): VxeGridDefines.ProxyInfo;
29
  
30
  // Form management methods
31
  setFormData(data: any): Promise<void>;
32
  getFormData(): any;
33
  clearFormData(): Promise<void>;
34
  validateForm(): Promise<any>;
35
  submitForm(): Promise<void>;
36
  resetForm(): Promise<void>;
37
  toggleFormCollapse(): Promise<void>;
38
  
39
  // Pagination methods
40
  getPagerInfo(): VxeGridDefines.PagerInfo;
41
  setPagerInfo(info: VxeGridDefines.PagerInfo): Promise<void>;
42
  prevPage(): Promise<void>;
43
  nextPage(): Promise<void>;
44
  prevJump(): Promise<void>;
45
  nextJump(): Promise<void>;
46
  
47
  // Toolbar methods
48
  getToolbar(): VxeToolbarInstance;
49
  
50
  // Zoom functionality
51
  zoom(): Promise<void>;
52
  maximize(): Promise<void>;
53
  revert(): Promise<void>;
54
  isMaximized(): boolean;
55
  
56
  // Query and data proxy methods
57
  query(params?: any): Promise<void>;
58
  save(): Promise<void>;
59
  remove(rows?: any[]): Promise<void>;
60
  refresh(): Promise<void>;
61
}
62
```
63

64
### Layout Configuration
65

66
Grid layout and responsive design configuration.
67

68
```typescript { .api }
69
interface GridLayouts {
70
  /** Layout configuration for different screen sizes */
71
  layouts?: string | string[];
72
}
73

74
type VxeGridPropTypes.Layouts = 
75
  | 'Form,Toolbar,Table,Pager' 
76
  | 'Toolbar,Table,Pager' 
77
  | 'Table,Pager' 
78
  | 'Table'
79
  | string[];
80
```
81

82
### Column Definitions
83

84
Declarative column configuration for grid setup.
85

86
```typescript { .api }
87
interface GridColumns {
88
  /** Array of column configurations */
89
  columns?: VxeGridPropTypes.Columns;
90
}
91

92
interface VxeGridPropTypes.Columns extends Array<VxeGridDefines.ColumnOptions> {}
93

94
interface VxeGridDefines.ColumnOptions {
95
  field?: string;
96
  title?: string;
97
  width?: number | string;
98
  minWidth?: number | string;
99
  type?: VxeColumnPropTypes.Type;
100
  fixed?: VxeColumnPropTypes.Fixed;
101
  align?: VxeColumnPropTypes.Align;
102
  headerAlign?: VxeColumnPropTypes.HeaderAlign;
103
  showOverflow?: VxeColumnPropTypes.ShowOverflow;
104
  showHeaderOverflow?: VxeColumnPropTypes.ShowHeaderOverflow;
105
  sortable?: boolean;
106
  filters?: VxeColumnPropTypes.Filter[];
107
  editRender?: VxeColumnPropTypes.EditRender;
108
  cellRender?: VxeColumnPropTypes.CellRender;
109
  children?: VxeGridDefines.ColumnOptions[];
110
}
111
```
112

113
### Pagination Configuration
114

115
Integrated pagination with customizable options.
116

117
```typescript { .api }
118
interface PagerConfiguration {
119
  /** Pagination configuration */
120
  pagerConfig?: {
121
    /** Enable pagination */
122
    enabled?: boolean;
123
    /** Current page */
124
    currentPage?: number;
125
    /** Page size */
126
    pageSize?: number;
127
    /** Total records */
128
    total?: number;
129
    /** Page size options */
130
    pageSizes?: number[];
131
    /** Pagination layouts */
132
    layouts?: string[];
133
    /** Show page size selector */
134
    showSizes?: boolean;
135
    /** Show pagination info */
136
    showInfo?: boolean;
137
    /** Show page jumper */
138
    showJumper?: boolean;
139
    /** Show refresh button */
140
    showRefresh?: boolean;
141
    /** Perfect mode (no borders) */
142
    perfect?: boolean;
143
    /** Custom pagination text */
144
    infoText?: string;
145
    /** Background color */
146
    background?: boolean;
147
  };
148
}
149

150
interface VxeGridDefines.PagerInfo {
151
  currentPage: number;
152
  pageSize: number;
153
  total: number;
154
}
155
```
156

157
### Data Proxy Configuration
158

159
Server-side data management with automatic loading and CRUD operations.
160

161
```typescript { .api }
162
interface ProxyConfiguration {
163
  /** Data proxy configuration for server-side operations */
164
  proxyConfig?: {
165
    /** Enable proxy */
166
    enabled?: boolean;
167
    /** Auto load data on mount */
168
    autoLoad?: boolean;
169
    /** Show loading indicator */
170
    showLoading?: boolean;
171
    /** Show response messages */
172
    showResponseMsg?: boolean;
173
    /** Show action messages */
174
    showActionMsg?: boolean;
175
    
176
    /** Response data mapping */
177
    response?: {
178
      /** Data list field */
179
      list?: string | null;
180
      /** Result field */
181
      result?: string;
182
      /** Total count field */
183
      total?: string;
184
      /** Message field */
185
      message?: string;
186
    };
187
    
188
    /** AJAX configuration */
189
    ajax?: {
190
      /** Query data URL/function */
191
      query?: string | Function;
192
      /** Delete data URL/function */
193
      delete?: string | Function;
194
      /** Save data URL/function */
195
      save?: string | Function;
196
    };
197
    
198
    /** Data processing hooks */
199
    beforeQuery?: (params: any) => any;
200
    afterQuery?: (params: any) => any;
201
    beforeDelete?: (params: any) => any;
202
    afterDelete?: (params: any) => any;
203
    beforeSave?: (params: any) => any;
204
    afterSave?: (params: any) => any;
205
  };
206
}
207

208
interface VxeGridDefines.ProxyInfo {
209
  data: any[];
210
  loading: boolean;
211
  total: number;
212
}
213
```
214

215
### Toolbar Configuration
216

217
Integrated toolbar with grid-specific tools and custom buttons.
218

219
```typescript { .api }
220
interface ToolbarConfiguration {
221
  /** Toolbar configuration */
222
  toolbarConfig?: {
223
    /** Enable toolbar */
224
    enabled?: boolean;
225
    /** Toolbar buttons */
226
    buttons?: VxeToolbarPropTypes.Buttons;
227
    /** Toolbar tools */
228
    tools?: VxeToolbarPropTypes.Tools;
229
    /** Refresh configuration */
230
    refresh?: VxeToolbarPropTypes.Refresh;
231
    /** Import configuration */
232
    import?: VxeToolbarPropTypes.Import;
233
    /** Export configuration */
234
    export?: VxeToolbarPropTypes.Export;
235
    /** Print configuration */
236
    print?: VxeToolbarPropTypes.Print;
237
    /** Zoom configuration */
238
    zoom?: VxeToolbarPropTypes.Zoom;
239
    /** Custom column configuration */
240
    custom?: VxeToolbarPropTypes.Custom;
241
    /** Perfect mode */
242
    perfect?: boolean;
243
    /** Toolbar size */
244
    size?: VxeToolbarPropTypes.Size;
245
  };
246
}
247
```
248

249
### Form Configuration
250

251
Integrated search/filter form with automatic data binding.
252

253
```typescript { .api }
254
interface FormConfiguration {
255
  /** Form configuration for search and filtering */
256
  formConfig?: {
257
    /** Enable form */
258
    enabled?: boolean;
259
    /** Form data */
260
    data?: any;
261
    /** Form items configuration */
262
    items?: VxeGridDefines.FormItemOptions[];
263
    /** Form title */
264
    title?: string;
265
    /** Show title */
266
    showTitle?: boolean;
267
    /** Title align */
268
    titleAlign?: 'left' | 'center' | 'right';
269
    /** Title width */
270
    titleWidth?: number | string;
271
    /** Title overflow */
272
    titleOverflow?: boolean | 'ellipsis' | 'title' | 'tooltip';
273
    /** Collapse form */
274
    collapsed?: boolean;
275
    /** Show collapse button */
276
    collapsable?: boolean;
277
    /** Perfect mode */
278
    perfect?: boolean;
279
    /** Form size */
280
    size?: VxeFormPropTypes.Size;
281
  };
282
}
283

284
interface VxeGridDefines.FormItemOptions {
285
  field?: string;
286
  title?: string;
287
  span?: number;
288
  align?: 'left' | 'center' | 'right';
289
  titleAlign?: 'left' | 'center' | 'right';
290
  itemRender?: VxeFormPropTypes.ItemRender;
291
  visible?: boolean;
292
  visibleMethod?: (params: any) => boolean;
293
  className?: string | ((params: any) => string);
294
  titlePrefix?: VxeFormPropTypes.TitlePrefix;
295
  titleSuffix?: VxeFormPropTypes.TitleSuffix;
296
}
297
```
298

299
**Usage Examples:**
300

301
```typescript
302
// Basic grid with pagination
303
<VxeGrid
304
  ref="gridRef"
305
  :columns="gridColumns"
306
  :proxy-config="proxyConfig"
307
  :pager-config="pagerConfig"
308
  :toolbar-config="toolbarConfig"
309
>
310
</VxeGrid>
311

312
// Grid configuration
313
const gridColumns = [
314
  { field: 'id', title: 'ID', width: 80 },
315
  { field: 'name', title: 'Name', minWidth: 120, editRender: { name: 'input' } },
316
  { field: 'age', title: 'Age', width: 80, editRender: { name: 'input', props: { type: 'number' } } },
317
  { 
318
    field: 'status', 
319
    title: 'Status', 
320
    width: 100,
321
    editRender: { 
322
      name: 'select', 
323
      options: [
324
        { label: 'Active', value: 'active' },
325
        { label: 'Inactive', value: 'inactive' }
326
      ]
327
    }
328
  }
329
];
330

331
const proxyConfig = {
332
  ajax: {
333
    query: '/api/users',
334
    save: '/api/users/save',
335
    delete: '/api/users/delete'
336
  },
337
  response: {
338
    result: 'data',
339
    total: 'total'
340
  }
341
};
342

343
const pagerConfig = {
344
  pageSize: 20,
345
  pageSizes: [10, 20, 50, 100]
346
};
347

348
const toolbarConfig = {
349
  buttons: [
350
    { code: 'add', name: 'Add' },
351
    { code: 'delete', name: 'Delete' }
352
  ],
353
  tools: ['refresh', 'export']
354
};
355

356
// Form integration
357
const formConfig = {
358
  enabled: true,
359
  items: [
360
    { field: 'name', title: 'Name', itemRender: { name: 'input' } },
361
    { field: 'status', title: 'Status', itemRender: { name: 'select', options: statusOptions } }
362
  ]
363
};
364

365
// Programmatic operations
366
const gridRef = ref<VxeGridInstance>();
367

368
// Commit proxy operations
369
await gridRef.value?.commitProxy('query');
370
await gridRef.value?.commitProxy('save');
371

372
// Form operations
373
const formData = gridRef.value?.getFormData();
374
await gridRef.value?.setFormData({ name: 'John', status: 'active' });
375
```
376

377
## Types
378

379
```typescript { .api }
380
// Grid instance type
381
interface VxeGridInstance extends ComponentPublicInstance, VxeGrid {}
382

383
// Grid events extending table events
384
interface VxeGridEmits extends VxeTableEmits {
385
  'page-change': (params: VxeGridDefines.PageChangeEventParams) => void;
386
  'form-submit': (params: VxeGridDefines.FormSubmitEventParams) => void;
387
  'form-submit-invalid': (params: VxeGridDefines.FormSubmitInvalidEventParams) => void;
388
  'form-reset': (params: VxeGridDefines.FormResetEventParams) => void;
389
  'form-collapse': (params: VxeGridDefines.FormCollapseEventParams) => void;
390
  'form-toggle-collapse': (params: VxeGridDefines.FormToggleCollapseEventParams) => void;
391
  'proxy-query': (params: VxeGridDefines.ProxyQueryEventParams) => void;
392
  'proxy-delete': (params: VxeGridDefines.ProxyDeleteEventParams) => void;
393
  'proxy-save': (params: VxeGridDefines.ProxyDeleteEventParams) => void;
394
  'toolbar-button-click': (params: VxeGridDefines.ToolbarButtonClickEventParams) => void;
395
  'toolbar-tool-click': (params: VxeGridDefines.ToolbarToolClickEventParams) => void;
396
  'zoom': (params: VxeGridDefines.ZoomEventParams) => void;
397
}
398

399
// Grid layout types
400
type VxeGridPropTypes.Layouts = string | string[];
401

402
// Grid size type
403
type VxeGridPropTypes.Size = 'mini' | 'small' | 'medium' | 'large';
404

405
// Grid information types
406
interface VxeGridDefines.ProxyInfo {
407
  data: any[];
408
  pendingRecords: any[];
409
  sort: VxeTableDefines.SortCheckedParams[];
410
  filters: VxeTableDefines.FilterCheckedParams[];
411
  form: any;
412
  pager: VxeGridDefines.PagerInfo;
413
}
414

415
interface VxeGridDefines.PagerInfo {
416
  total: number;
417
  pageSize: number;
418
  currentPage: number;
419
  layouts: string[];
420
  sizes: number[];
421
  perfect: boolean;
422
}
423

424
// Grid column options
425
interface VxeGridDefines.ColumnOptions extends VxeColumnDefines.ColumnOptions {
426
  slots?: {
427
    default?: string;
428
    header?: string;
429
    footer?: string;
430
    edit?: string;
431
    filter?: string;
432
  };
433
}
434

435
// Event parameter types
436
interface VxeGridDefines.PageChangeEventParams {
437
  type: string;
438
  currentPage: number;
439
  pageSize: number;
440
  $event: Event;
441
}
442

443
interface VxeGridDefines.FormSubmitEventParams {
444
  data: any;
445
  $event: Event;
446
}
447

448
interface VxeGridDefines.FormSubmitInvalidEventParams {
449
  data: any;
450
  errMap: any;
451
  $event: Event;
452
}
453

454
interface VxeGridDefines.FormResetEventParams {
455
  data: any;
456
  $event: Event;
457
}
458

459
interface VxeGridDefines.FormCollapseEventParams {
460
  collapse: boolean;
461
  $event: Event;
462
}
463

464
interface VxeGridDefines.FormToggleCollapseEventParams {
465
  collapse: boolean;
466
  $event: Event;
467
}
468

469
interface VxeGridDefines.ProxyQueryEventParams {
470
  page: VxeGridDefines.PagerInfo;
471
  sorts: VxeTableDefines.SortCheckedParams[];
472
  filters: VxeTableDefines.FilterCheckedParams[];
473
  form: any;
474
}
475

476
interface VxeGridDefines.ProxyDeleteEventParams {
477
  body: {
478
    removeRecords: any[];
479
  };
480
}
481

482
interface VxeGridDefines.ToolbarButtonClickEventParams {
483
  code: string;
484
  button: VxeToolbarPropTypes.Button;
485
  $event: Event;
486
}
487

488
interface VxeGridDefines.ToolbarToolClickEventParams {
489
  code: string;
490
  tool: VxeToolbarPropTypes.Tool;
491
  $event: Event;
492
}
493

494
interface VxeGridDefines.ZoomEventParams {
495
  type: 'max' | 'revert';
496
  $event: Event;
497
}
498
```