0
# Vxe Table
1
2
Vxe Table is a comprehensive Vue.js table component library built on top of Vxe UI, providing advanced features for PC-end applications including virtual scrolling for high-performance rendering of large datasets, copy-paste functionality, data pivot tables, column and row drag-and-drop operations, multi-level headers, cell merging, data validation, keyboard navigation, and extensive customization options through renderers and slots.
3
4
## Package Information
5
6
- **Package Name**: vxe-table
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install vxe-table`
10
- **Vue Version**: Vue 3.x
11
- **Dependencies**: vxe-pc-ui ^4.8.0
12
13
## Core Imports
14
15
```typescript
16
import VxeTable from "vxe-table";
17
import { VxeTable, VxeColumn, VxeGrid, VxeToolbar } from "vxe-table";
18
```
19
20
For Vue 3 app installation:
21
22
```typescript
23
import { createApp } from "vue";
24
import VxeTable from "vxe-table";
25
import "vxe-table/lib/style.css";
26
27
const app = createApp();
28
app.use(VxeTable);
29
```
30
31
## Basic Usage
32
33
```typescript
34
import { VxeTable, VxeColumn } from "vxe-table";
35
36
// Basic table with data
37
const tableData = [
38
{ id: 1, name: "Alice", age: 25, city: "New York" },
39
{ id: 2, name: "Bob", age: 30, city: "San Francisco" },
40
{ id: 3, name: "Charlie", age: 35, city: "London" }
41
];
42
43
// Template usage
44
<VxeTable :data="tableData">
45
<VxeColumn field="id" title="ID"></VxeColumn>
46
<VxeColumn field="name" title="Name"></VxeColumn>
47
<VxeColumn field="age" title="Age"></VxeColumn>
48
<VxeColumn field="city" title="City"></VxeColumn>
49
</VxeTable>
50
```
51
52
## Architecture
53
54
Vxe Table is built around several key components:
55
56
- **VxeTable**: Core table component with virtual scrolling and advanced features
57
- **VxeGrid**: Enhanced table with integrated toolbar, pagination, and data proxy
58
- **VxeColumn**: Column definition component for flexible column configuration
59
- **VxeToolbar**: Toolbar component with built-in tools and custom buttons
60
- **VxeUI Core**: Configuration system, event management, and plugin architecture
61
- **Renderer System**: Extensible cell renderer system for custom displays and editors
62
- **Virtual Scrolling**: High-performance rendering for large datasets
63
64
## Capabilities
65
66
### Core Table Component
67
68
The foundational table component with comprehensive configuration options for data display, interaction, and customization. Supports virtual scrolling for millions of rows with optimal performance.
69
70
```typescript { .api }
71
interface VxeTable {
72
// Core props
73
data: any[];
74
height?: number | string;
75
maxHeight?: number | string;
76
stripe?: boolean;
77
border?: boolean | string;
78
size?: VxeTablePropTypes.Size;
79
fit?: boolean;
80
loading?: boolean;
81
82
// Configuration objects
83
columnConfig?: VxeTablePropTypes.ColumnConfig;
84
rowConfig?: VxeTablePropTypes.RowConfig;
85
resizableConfig?: VxeTablePropTypes.ResizableConfig;
86
sortConfig?: VxeTablePropTypes.SortConfig;
87
filterConfig?: VxeTablePropTypes.FilterConfig;
88
editConfig?: VxeTablePropTypes.EditConfig;
89
virtualXConfig?: VxeTablePropTypes.VirtualXConfig;
90
virtualYConfig?: VxeTablePropTypes.VirtualYConfig;
91
}
92
```
93
94
[Core Table](./table.md)
95
96
### Enhanced Grid Component
97
98
Advanced grid component that extends the table with integrated toolbar, pagination, form controls, and data proxy capabilities for complete data management solutions.
99
100
```typescript { .api }
101
interface VxeGrid extends VxeTable {
102
columns?: VxeGridPropTypes.Columns;
103
pagerConfig?: VxeGridPropTypes.PagerConfig;
104
proxyConfig?: VxeGridPropTypes.ProxyConfig;
105
toolbarConfig?: VxeGridPropTypes.ToolbarConfig;
106
formConfig?: VxeGridPropTypes.FormConfig;
107
}
108
```
109
110
[Enhanced Grid](./grid.md)
111
112
### Column Configuration
113
114
Column definition system supporting various column types, custom renderers, editors, formatters, and complex header structures including multi-level headers and column groups.
115
116
```typescript { .api }
117
interface VxeColumn {
118
field?: string;
119
title?: string;
120
width?: number | string;
121
minWidth?: number | string;
122
type?: VxeColumnPropTypes.Type;
123
fixed?: VxeColumnPropTypes.Fixed;
124
align?: VxeColumnPropTypes.Align;
125
headerAlign?: VxeColumnPropTypes.HeaderAlign;
126
footerAlign?: VxeColumnPropTypes.FooterAlign;
127
showOverflow?: VxeColumnPropTypes.ShowOverflow;
128
showHeaderOverflow?: VxeColumnPropTypes.ShowHeaderOverflow;
129
showFooterOverflow?: VxeColumnPropTypes.ShowFooterOverflow;
130
formatter?: VxeColumnPropTypes.Formatter;
131
sortable?: boolean;
132
sortBy?: string | string[];
133
filters?: VxeColumnPropTypes.Filter[];
134
filterMultiple?: boolean;
135
filterMethod?: VxeColumnPropTypes.FilterMethod;
136
editRender?: VxeColumnPropTypes.EditRender;
137
cellRender?: VxeColumnPropTypes.CellRender;
138
headerRender?: VxeColumnPropTypes.HeaderRender;
139
footerRender?: VxeColumnPropTypes.FooterRender;
140
}
141
```
142
143
[Column Configuration](./columns.md)
144
145
### Toolbar and Tools
146
147
Comprehensive toolbar component with built-in tools for common table operations including refresh, import/export, print, fullscreen, and custom column management.
148
149
```typescript { .api }
150
interface VxeToolbar {
151
loading?: boolean;
152
refresh?: VxeToolbarPropTypes.Refresh;
153
import?: VxeToolbarPropTypes.Import;
154
export?: VxeToolbarPropTypes.Export;
155
print?: VxeToolbarPropTypes.Print;
156
zoom?: VxeToolbarPropTypes.Zoom;
157
custom?: VxeToolbarPropTypes.Custom;
158
buttons?: VxeToolbarPropTypes.Buttons;
159
tools?: VxeToolbarPropTypes.Tools;
160
}
161
```
162
163
[Toolbar and Tools](./toolbar.md)
164
165
### Advanced Features
166
167
Advanced table capabilities including drag-and-drop operations, tree structures, data aggregation, cell area selection, copy-paste functionality, and data validation.
168
169
```typescript { .api }
170
interface AdvancedFeatures {
171
// Drag and drop
172
rowDragConfig?: VxeTablePropTypes.RowDragConfig;
173
columnDragConfig?: VxeTablePropTypes.ColumnDragConfig;
174
175
// Tree structure
176
treeConfig?: VxeTablePropTypes.TreeConfig;
177
178
// Data aggregation
179
aggregateConfig?: VxeTablePropTypes.AggregateConfig;
180
181
// Area selection
182
areaConfig?: VxeTablePropTypes.AreaConfig;
183
184
// Clipboard operations
185
clipConfig?: VxeTablePropTypes.ClipConfig;
186
187
// Validation
188
validConfig?: VxeTablePropTypes.ValidConfig;
189
editRules?: VxeTablePropTypes.EditRules;
190
}
191
```
192
193
[Advanced Features](./advanced-features.md)
194
195
### Configuration and Utilities
196
197
Global configuration system, utility functions, event management, and plugin architecture for customizing table behavior and extending functionality.
198
199
```typescript { .api }
200
interface VxeUI {
201
// Configuration
202
setConfig(options: VxeGlobalConfig): void;
203
getConfig(): VxeGlobalConfig;
204
setTheme(theme: string): void;
205
getTheme(): string;
206
207
// Internationalization
208
setLanguage(language: string): void;
209
setI18n(language: string, i18nMap: object): void;
210
getI18n(key: string, args?: any): string;
211
212
// Registry systems
213
renderer: RendererRegistry;
214
validators: ValidatorRegistry;
215
menus: MenuRegistry;
216
formats: FormatRegistry;
217
commands: CommandRegistry;
218
interceptor: InterceptorSystem;
219
}
220
```
221
222
[Configuration and Utilities](./configuration.md)
223
224
## Types
225
226
```typescript { .api }
227
// Global configuration interface
228
interface VxeGlobalConfig {
229
table?: VxeTableConfig;
230
grid?: VxeGridConfig;
231
toolbar?: VxeToolbarConfig;
232
[key: string]: any;
233
}
234
235
// Size options
236
type VxeSize = 'mini' | 'small' | 'medium' | 'large';
237
238
// Component export interface
239
interface VxeUIExport {
240
install(app: App, options?: VxeGlobalConfig): void;
241
setConfig(options: VxeGlobalConfig): void;
242
getConfig(): VxeGlobalConfig;
243
[key: string]: any;
244
}
245
```