or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-features.mdcolumns.mdconfiguration.mdgrid.mdindex.mdtable.mdtoolbar.md
tile.json

tessl/npm-vxe-table

A PC-end table component based on Vxe UI, supporting copy-paste, data pivot table, and high-performance virtual list table solution.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vxe-table@4.16.x

To install, run

npx @tessl/cli install tessl/npm-vxe-table@4.16.0

index.mddocs/

Vxe Table

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.

Package Information

  • Package Name: vxe-table
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install vxe-table
  • Vue Version: Vue 3.x
  • Dependencies: vxe-pc-ui ^4.8.0

Core Imports

import VxeTable from "vxe-table";
import { VxeTable, VxeColumn, VxeGrid, VxeToolbar } from "vxe-table";

For Vue 3 app installation:

import { createApp } from "vue";
import VxeTable from "vxe-table";
import "vxe-table/lib/style.css";

const app = createApp();
app.use(VxeTable);

Basic Usage

import { VxeTable, VxeColumn } from "vxe-table";

// Basic table with data
const tableData = [
  { id: 1, name: "Alice", age: 25, city: "New York" },
  { id: 2, name: "Bob", age: 30, city: "San Francisco" },
  { id: 3, name: "Charlie", age: 35, city: "London" }
];

// Template usage
<VxeTable :data="tableData">
  <VxeColumn field="id" title="ID"></VxeColumn>
  <VxeColumn field="name" title="Name"></VxeColumn>
  <VxeColumn field="age" title="Age"></VxeColumn>
  <VxeColumn field="city" title="City"></VxeColumn>
</VxeTable>

Architecture

Vxe Table is built around several key components:

  • VxeTable: Core table component with virtual scrolling and advanced features
  • VxeGrid: Enhanced table with integrated toolbar, pagination, and data proxy
  • VxeColumn: Column definition component for flexible column configuration
  • VxeToolbar: Toolbar component with built-in tools and custom buttons
  • VxeUI Core: Configuration system, event management, and plugin architecture
  • Renderer System: Extensible cell renderer system for custom displays and editors
  • Virtual Scrolling: High-performance rendering for large datasets

Capabilities

Core Table Component

The foundational table component with comprehensive configuration options for data display, interaction, and customization. Supports virtual scrolling for millions of rows with optimal performance.

interface VxeTable {
  // Core props
  data: any[];
  height?: number | string;
  maxHeight?: number | string;
  stripe?: boolean;
  border?: boolean | string;
  size?: VxeTablePropTypes.Size;
  fit?: boolean;
  loading?: boolean;
  
  // Configuration objects
  columnConfig?: VxeTablePropTypes.ColumnConfig;
  rowConfig?: VxeTablePropTypes.RowConfig;
  resizableConfig?: VxeTablePropTypes.ResizableConfig;
  sortConfig?: VxeTablePropTypes.SortConfig;
  filterConfig?: VxeTablePropTypes.FilterConfig;
  editConfig?: VxeTablePropTypes.EditConfig;
  virtualXConfig?: VxeTablePropTypes.VirtualXConfig;
  virtualYConfig?: VxeTablePropTypes.VirtualYConfig;
}

Core Table

Enhanced Grid Component

Advanced grid component that extends the table with integrated toolbar, pagination, form controls, and data proxy capabilities for complete data management solutions.

interface VxeGrid extends VxeTable {
  columns?: VxeGridPropTypes.Columns;
  pagerConfig?: VxeGridPropTypes.PagerConfig;
  proxyConfig?: VxeGridPropTypes.ProxyConfig;
  toolbarConfig?: VxeGridPropTypes.ToolbarConfig;
  formConfig?: VxeGridPropTypes.FormConfig;
}

Enhanced Grid

Column Configuration

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

interface VxeColumn {
  field?: string;
  title?: string;
  width?: number | string;
  minWidth?: number | string;
  type?: VxeColumnPropTypes.Type;
  fixed?: VxeColumnPropTypes.Fixed;
  align?: VxeColumnPropTypes.Align;
  headerAlign?: VxeColumnPropTypes.HeaderAlign;
  footerAlign?: VxeColumnPropTypes.FooterAlign;
  showOverflow?: VxeColumnPropTypes.ShowOverflow;
  showHeaderOverflow?: VxeColumnPropTypes.ShowHeaderOverflow;
  showFooterOverflow?: VxeColumnPropTypes.ShowFooterOverflow;
  formatter?: VxeColumnPropTypes.Formatter;
  sortable?: boolean;
  sortBy?: string | string[];
  filters?: VxeColumnPropTypes.Filter[];
  filterMultiple?: boolean;
  filterMethod?: VxeColumnPropTypes.FilterMethod;
  editRender?: VxeColumnPropTypes.EditRender;
  cellRender?: VxeColumnPropTypes.CellRender;
  headerRender?: VxeColumnPropTypes.HeaderRender;
  footerRender?: VxeColumnPropTypes.FooterRender;
}

Column Configuration

Toolbar and Tools

Comprehensive toolbar component with built-in tools for common table operations including refresh, import/export, print, fullscreen, and custom column management.

interface VxeToolbar {
  loading?: boolean;
  refresh?: VxeToolbarPropTypes.Refresh;
  import?: VxeToolbarPropTypes.Import;
  export?: VxeToolbarPropTypes.Export;
  print?: VxeToolbarPropTypes.Print;
  zoom?: VxeToolbarPropTypes.Zoom;
  custom?: VxeToolbarPropTypes.Custom;
  buttons?: VxeToolbarPropTypes.Buttons;
  tools?: VxeToolbarPropTypes.Tools;
}

Toolbar and Tools

Advanced Features

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

interface AdvancedFeatures {
  // Drag and drop
  rowDragConfig?: VxeTablePropTypes.RowDragConfig;
  columnDragConfig?: VxeTablePropTypes.ColumnDragConfig;
  
  // Tree structure
  treeConfig?: VxeTablePropTypes.TreeConfig;
  
  // Data aggregation
  aggregateConfig?: VxeTablePropTypes.AggregateConfig;
  
  // Area selection
  areaConfig?: VxeTablePropTypes.AreaConfig;
  
  // Clipboard operations
  clipConfig?: VxeTablePropTypes.ClipConfig;
  
  // Validation
  validConfig?: VxeTablePropTypes.ValidConfig;
  editRules?: VxeTablePropTypes.EditRules;
}

Advanced Features

Configuration and Utilities

Global configuration system, utility functions, event management, and plugin architecture for customizing table behavior and extending functionality.

interface VxeUI {
  // Configuration
  setConfig(options: VxeGlobalConfig): void;
  getConfig(): VxeGlobalConfig;
  setTheme(theme: string): void;
  getTheme(): string;
  
  // Internationalization
  setLanguage(language: string): void;
  setI18n(language: string, i18nMap: object): void;
  getI18n(key: string, args?: any): string;
  
  // Registry systems
  renderer: RendererRegistry;
  validators: ValidatorRegistry;
  menus: MenuRegistry;
  formats: FormatRegistry;
  commands: CommandRegistry;
  interceptor: InterceptorSystem;
}

Configuration and Utilities

Types

// Global configuration interface
interface VxeGlobalConfig {
  table?: VxeTableConfig;
  grid?: VxeGridConfig;
  toolbar?: VxeToolbarConfig;
  [key: string]: any;
}

// Size options
type VxeSize = 'mini' | 'small' | 'medium' | 'large';

// Component export interface
interface VxeUIExport {
  install(app: App, options?: VxeGlobalConfig): void;
  setConfig(options: VxeGlobalConfig): void;
  getConfig(): VxeGlobalConfig;
  [key: string]: any;
}