CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

—

Pending
Overview
Eval results
Files

configuration.mddocs/

Configuration and Utilities

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

Capabilities

VxeUI Core System

Core utility system providing configuration, internationalization, and extension capabilities.

/**
 * Core VxeUI system for global configuration and utilities
 */
interface VxeUI {
  // Version information
  version: string;
  tableVersion: string;
  
  // Configuration methods
  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;
  hasLanguage(language: string): boolean;
  
  // Icon management
  setIcon(iconMap: object): void;
  getIcon(name: string): string;
  
  // Registry systems
  renderer: RendererRegistry;
  validators: ValidatorRegistry;
  menus: MenuRegistry;
  formats: FormatRegistry;
  commands: CommandRegistry;
  interceptor: InterceptorSystem;
  
  // Event systems
  globalEvents: GlobalEventSystem;
  globalResize: GlobalResizeSystem;
  clipboard: ClipboardUtilities;
  log: LogUtilities;
  
  // Plugin system
  hooks: HookSystem;
  use(plugin: VxeUIPlugin): void;
  
  // Component registration
  component(component: any): void;
  dynamicApp?: App;
  
  // Utility methods
  saveFile(options: VxeUploadDefines.SaveFileOptions): Promise<void>;
  readFile(options: VxeUploadDefines.ReadFileOptions): Promise<any>;
  print(options: VxePrintDefines.PrintOptions): Promise<void>;
  modal: ModalUtilities;
}

Global Configuration

Comprehensive global configuration for all table and grid components.

interface VxeGlobalConfig {
  /** Empty cell placeholder */
  emptyCell?: string;
  
  /** Table configuration */
  table?: VxeTableConfig;
  
  /** Grid configuration */
  grid?: VxeGridConfig;
  
  /** Toolbar configuration */
  toolbar?: VxeToolbarConfig;
  
  /** Gantt configuration (reserved) */
  gantt?: VxeGanttConfig;
  
  /** Custom configurations */
  [key: string]: any;
}

interface VxeTableConfig {
  // Basic settings
  fit?: boolean;
  showHeader?: boolean;
  animat?: boolean;
  delayHover?: number;
  autoResize?: boolean;
  
  // Performance settings
  resizeInterval?: number;
  
  // Display settings
  size?: VxeTablePropTypes.Size;
  zIndex?: number;
  stripe?: boolean;
  border?: boolean;
  round?: boolean;
  emptyText?: string;
  emptyRender?: VxeTablePropTypes.EmptyRender;
  
  // Configuration objects with defaults
  rowConfig?: VxeTablePropTypes.RowConfig;
  columnConfig?: VxeTablePropTypes.ColumnConfig;
  resizeConfig?: VxeTablePropTypes.ResizeConfig;
  resizableConfig?: VxeTablePropTypes.ResizableConfig;
  radioConfig?: VxeTablePropTypes.RadioConfig;
  checkboxConfig?: VxeTablePropTypes.CheckboxConfig;
  tooltipConfig?: VxeTablePropTypes.TooltipConfig;
  validConfig?: VxeTablePropTypes.ValidConfig;
  sortConfig?: VxeTablePropTypes.SortConfig;
  filterConfig?: VxeTablePropTypes.FilterConfig;
  customConfig?: VxeTablePropTypes.CustomConfig;
  editConfig?: VxeTablePropTypes.EditConfig;
  expandConfig?: VxeTablePropTypes.ExpandConfig;
  treeConfig?: VxeTablePropTypes.TreeConfig;
  menuConfig?: VxeTablePropTypes.MenuConfig;
  mouseConfig?: VxeTablePropTypes.MouseConfig;
  areaConfig?: VxeTablePropTypes.AreaConfig;
  keyboardConfig?: VxeTablePropTypes.KeyboardConfig;
  clipConfig?: VxeTablePropTypes.ClipConfig;
  fnrConfig?: VxeTablePropTypes.FnrConfig;
  importConfig?: VxeTablePropTypes.ImportConfig;
  exportConfig?: VxeTablePropTypes.ExportConfig;
  printConfig?: VxeTablePropTypes.PrintConfig;
  virtualXConfig?: VxeTablePropTypes.VirtualXConfig;
  virtualYConfig?: VxeTablePropTypes.VirtualYConfig;
  scrollbarConfig?: VxeTablePropTypes.ScrollbarConfig;
  
  // Drag configurations
  rowDragConfig?: VxeTablePropTypes.RowDragConfig;
  columnDragConfig?: VxeTablePropTypes.ColumnDragConfig;
  
  // Data structure configurations
  aggregateConfig?: VxeTablePropTypes.AggregateConfig;
}

Renderer Registry

Custom renderer system for cells, editors, and other components.

interface RendererRegistry {
  /** Register a new renderer */
  add(name: string, options: RendererOptions): void;
  
  /** Remove a renderer */
  delete(name: string): void;
  
  /** Get renderer by name */
  get(name: string): RendererOptions | null;
  
  /** Check if renderer exists */
  has(name: string): boolean;
  
  /** Get all registered renderers */
  map(): Map<string, RendererOptions>;
}

interface RendererOptions {
  /** Render function for display */
  renderDefault?: (renderOpts: any, params: any) => VNode | string;
  /** Render function for editing */
  renderEdit?: (renderOpts: any, params: any) => VNode | string;
  /** Render function for filter */
  renderFilter?: (renderOpts: any, params: any) => VNode | string;
  /** Render function for cell */
  renderCell?: (renderOpts: any, params: any) => VNode | string;
  /** Auto focus method */
  autofocus?: string;
  /** Get cell value method */
  cellValueMethod?: (renderOpts: any, params: any) => any;
  /** Set cell value method */
  cellChangeMethod?: (renderOpts: any, params: any) => void;
  /** Component properties */
  props?: object;
  /** Component events */
  events?: object;
}

Validator Registry

Custom validator system for data validation.

interface ValidatorRegistry {
  /** Register a new validator */
  add(name: string, validatorFn: ValidatorFunction): void;
  
  /** Remove a validator */
  delete(name: string): void;
  
  /** Get validator by name */
  get(name: string): ValidatorFunction | null;
  
  /** Check if validator exists */
  has(name: string): boolean;
  
  /** Get all registered validators */
  map(): Map<string, ValidatorFunction>;
}

type ValidatorFunction = (params: VxeTableDefines.ValidatorMethodParams) => boolean | string | Error;

Menu Registry

Context menu system for custom menu items.

interface MenuRegistry {
  /** Register a new menu */
  add(name: string, options: MenuOptions): void;
  
  /** Remove a menu */
  delete(name: string): void;
  
  /** Get menu by name */
  get(name: string): MenuOptions | null;
  
  /** Check if menu exists */
  has(name: string): boolean;
  
  /** Get all registered menus */
  map(): Map<string, MenuOptions>;
}

interface MenuOptions {
  /** Menu code */
  code?: string;
  /** Menu name */
  name?: string;
  /** Menu render function */
  renderItem?: (params: any) => VNode | string;
  /** Menu click handler */
  clickMethod?: (params: any) => void;
  /** Menu visibility check */
  visibleMethod?: (params: any) => boolean;
}

Format Registry

Data formatter system for custom data formatting.

interface FormatRegistry {
  /** Register a new formatter */
  add(name: string, formatFn: FormatFunction): void;
  
  /** Remove a formatter */
  delete(name: string): void;
  
  /** Get formatter by name */
  get(name: string): FormatFunction | null;
  
  /** Check if formatter exists */
  has(name: string): boolean;
  
  /** Get all registered formatters */
  map(): Map<string, FormatFunction>;
}

type FormatFunction = (value: any, ...args: any[]) => string;

Command Registry

Command system for custom table operations.

interface CommandRegistry {
  /** Register a new command */
  add(name: string, options: CommandOptions): void;
  
  /** Remove a command */
  delete(name: string): void;
  
  /** Get command by name */
  get(name: string): CommandOptions | null;
  
  /** Check if command exists */
  has(name: string): boolean;
  
  /** Get all registered commands */
  map(): Map<string, CommandOptions>;
}

interface CommandOptions {
  /** Command execute function */
  commandMethod?: (params: any) => any;
  /** Undo function */
  undoMethod?: (params: any) => any;
  /** Redo function */
  redoMethod?: (params: any) => any;
}

Interceptor System

Request/response interceptor system for data operations.

interface InterceptorSystem {
  /** Add interceptor */
  add(type: string, callback: InterceptorCallback): void;
  
  /** Remove interceptor */
  delete(type: string, callback?: InterceptorCallback): void;
  
  /** Get interceptors by type */
  get(type: string): InterceptorCallback[];
  
  /** Execute interceptors */
  handle(type: string, params: any, ...args: any[]): any;
}

type InterceptorCallback = (params: any, ...args: any[]) => any;

// Built-in interceptor types
type InterceptorTypes = 
  | 'event.clearFilter'
  | 'event.clearSort'
  | 'event.showMenu'
  | 'event.keydown'
  | string;

Global Event System

Global event management for cross-component communication.

interface GlobalEventSystem {
  /** Add event listener */
  on(type: string, callback: EventCallback): void;
  
  /** Remove event listener */
  off(type: string, callback?: EventCallback): void;
  
  /** Emit event */
  emit(type: string, ...args: any[]): void;
  
  /** Add one-time event listener */
  once(type: string, callback: EventCallback): void;
}

type EventCallback = (...args: any[]) => void;

Utility Functions

Various utility functions for common operations.

interface UtilityFunctions {
  /** Cell view composable */
  useCellView(props: any): CellViewComposable;
  
  /** Install function for Vue app */
  install(app: App, options?: VxeGlobalConfig): void;
  
  /** File operations */
  saveFile(options: VxeUploadDefines.SaveFileOptions): Promise<void>;
  readFile(options: VxeUploadDefines.ReadFileOptions): Promise<any>;
  
  /** Print functionality */
  print(options: VxePrintDefines.PrintOptions): Promise<void>;
  
  /** Modal utilities */
  modal: {
    get(id: string): any;
    close(id: string): Promise<void>;
    open(options: any): Promise<any>;
    alert(content: any, title?: any, options?: any): Promise<any>;
    confirm(content: any, title?: any, options?: any): Promise<any>;
    message(content: any, options?: any): Promise<any>;
    notification(content: any, title?: any, options?: any): Promise<any>;
  };
  
  /** Component registration and dynamic app handling */
  component(component: any): void;
  dynamicApp?: App;
  
  /** Version information */
  version: string;
  tableVersion: string;
}

interface CellViewComposable {
  // Cell view utilities
  [key: string]: any;
}

Usage Examples:

// Global configuration
import VxeTable from "vxe-table";

VxeTable.setConfig({
  table: {
    stripe: true,
    border: true,
    fit: true,
    showHeader: true,
    autoResize: true,
    emptyText: 'No data available',
    virtualYConfig: {
      enabled: true,
      gt: 100
    },
    editConfig: {
      trigger: 'click',
      mode: 'cell',
      showIcon: true
    }
  },
  grid: {
    pagerConfig: {
      enabled: true,
      pageSize: 20
    },
    toolbarConfig: {
      enabled: true
    }
  }
});

// Theme configuration
VxeTable.setTheme('dark');

// Internationalization
VxeTable.setI18n('en-US', {
  'vxe.table.emptyText': 'No data',
  'vxe.table.confirmDelete': 'Are you sure you want to delete?'
});
VxeTable.setLanguage('en-US');

// Custom renderer registration
VxeTable.renderer.add('MyCustomInput', {
  renderEdit(renderOpts, params) {
    const { row, column } = params;
    return h('input', {
      value: row[column.field],
      onInput: (event) => {
        row[column.field] = event.target.value;
      }
    });
  }
});

// Custom validator registration
VxeTable.validators.add('phone', (params) => {
  const { cellValue } = params;
  const phoneRegex = /^\d{3}-\d{3}-\d{4}$/;
  if (cellValue && !phoneRegex.test(cellValue)) {
    return 'Please enter a valid phone number (xxx-xxx-xxxx)';
  }
  return true;
});

// Custom formatter registration
VxeTable.formats.add('currency', (value, decimals = 2) => {
  if (value == null) return '';
  return `$${Number(value).toFixed(decimals)}`;
});

// Global event handling
VxeTable.globalEvents.on('table-created', (tableInstance) => {
  console.log('New table created:', tableInstance);
});

// Interceptor registration
VxeTable.interceptor.add('event.keydown', (params, event) => {
  // Custom keydown handling
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    // Custom save logic
    return false; // Prevent default
  }
});

// Plugin usage
const myPlugin = {
  install(VxeUI) {
    // Add custom functionality
    VxeUI.renderer.add('my-renderer', {
      // renderer implementation
    });
  }
};

VxeTable.use(myPlugin);

// Component registration with Vue app
const app = createApp(App);
app.use(VxeTable, {
  table: {
    border: true,
    stripe: true
  }
});

Types

// Plugin interface
interface VxeUIPlugin {
  install(VxeUI: VxeUI): void;
}

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

// Core export interface
interface VxeUIExport extends VxeUI {
  install(app: App, options?: VxeGlobalConfig): void;
}

// File operation types
interface VxeUploadDefines.SaveFileOptions {
  filename?: string;
  type?: string;
  content?: string | ArrayBuffer;
}

interface VxeUploadDefines.ReadFileOptions {
  multiple?: boolean;
  types?: string[];
}

// Print options
interface VxePrintDefines.PrintOptions {
  sheetName?: string;
  mode?: string;
  content?: string;
  [key: string]: any;
}

// Deprecated functions (for backward compatibility)
interface DeprecatedFunctions {
  /** @deprecated Use setConfig instead */
  setup(options?: VxeGlobalConfig): void;
  
  /** @deprecated Use setConfig instead */
  config(options?: VxeGlobalConfig): void;
  
  /** @deprecated Use getI18n instead */
  t(key: string, args?: any): string;
  
  /** @deprecated Internal function */
  _t(content: string | number | boolean | null | undefined, args?: any): string;
  
  /** @deprecated Use VxeUI instead */
  VXETable: VxeUIExport;
}

Migration Guide for Deprecated APIs

This section provides clear migration paths for deprecated APIs to help users upgrade to the latest version.

Global API Migration

// ❌ Deprecated - Old way
import VxeTable from "vxe-table";
VxeTable.setup({ table: { border: true } });
VxeTable.config({ table: { stripe: true } });
const text = VxeTable.t('vxe.table.emptyText');

// ✅ Current - New way
import VxeTable from "vxe-table";
VxeTable.setConfig({ table: { border: true, stripe: true } });
const text = VxeTable.getI18n('vxe.table.emptyText');

Component Props Migration

// ❌ Deprecated props
<VxeTable
  :data="tableData"
  row-key="id"
  column-key="field"
  :highlight-current-column="true"
  :highlight-hover-column="true"
  resizable
  :scroll-x="{ enabled: true }"
  :scroll-y="{ enabled: true }"
>
</VxeTable>

// ✅ Current props
<VxeTable
  :data="tableData"
  :row-config="{ useKey: true, keyField: 'id' }"
  :column-config="{ useKey: true }"
  :virtual-x-config="{ enabled: true }"
  :virtual-y-config="{ enabled: true }"
  :column-config="{ resizable: true }"
>
</VxeTable>

Event Migration

// ❌ Deprecated events
<VxeTable
  @current-change="handleCurrentChange"
  @resizable-change="handleResizableChange"
  @edit-actived="handleEditActived"
  @change-fnr="handleChangeFnr"
>
</VxeTable>

// ✅ Current events
<VxeTable
  @current-row-change="handleCurrentRowChange"
  @column-resizable-change="handleColumnResizableChange"
  @edit-activated="handleEditActivated"
  @fnr-change="handleFnrChange"
>
</VxeTable>

Renderer Migration

// ❌ Deprecated renderers
<VxeColumn
  field="status"
  title="Status"
  :cell-render="{ name: '$select', options: statusOptions }"
>
</VxeColumn>

<VxeColumn
  field="name"
  title="Name"
  :edit-render="{ name: '$input' }"
>
</VxeColumn>

// ✅ Current renderers
<VxeColumn
  field="status"
  title="Status"
  :cell-render="{ name: 'VxeSelect', options: statusOptions }"
>
</VxeColumn>

<VxeColumn
  field="name"
  title="Name"
  :edit-render="{ name: 'VxeInput' }"
>
</VxeColumn>

Configuration Object Migration

// ❌ Deprecated configuration
<VxeTable
  :data="tableData"
  :drag-config="{ enabled: true }"
  :row-group-config="{ enabled: true }"
  padding
  animat
  delay-hover="300"
>
</VxeTable>

// ✅ Current configuration
<VxeTable
  :data="tableData"
  :row-drag-config="{ enabled: true }"
  :aggregate-config="{ enabled: true }"
  :cell-config="{ padding: true }"
>
</VxeTable>

File Operations Migration

// ❌ Deprecated file operations
import { saveFile, readFile, print } from "vxe-table";
await saveFile({ filename: 'data.csv', content: csvData });
const files = await readFile({ types: ['csv'] });
await print({ content: htmlContent });

// ✅ Current file operations
import VxeTable from "vxe-table";
await VxeTable.saveFile({ filename: 'data.csv', content: csvData });
const files = await VxeTable.readFile({ types: ['csv'] });
await VxeTable.print({ content: htmlContent });

Modal API Migration

// ❌ Deprecated modal API
import { modal } from "vxe-table";
await modal.alert('Message');
await modal.confirm('Are you sure?');
await modal.message('Success!');

// ✅ Current modal API
import VxeTable from "vxe-table";
await VxeTable.modal.alert('Message');
await VxeTable.modal.confirm('Are you sure?');
await VxeTable.modal.message('Success!');

Global Object Migration

// ❌ Deprecated global access
window.VXETable.setConfig({ /* config */ });
const VXETable = window.VXETable;

// ✅ Current global access
window.VxeUITable.setConfig({ /* config */ });
const VxeTable = window.VxeUITable;

Breaking Changes Summary

Version 4.x Changes

  1. Global API: setup() and config() replaced with setConfig()
  2. Props: Many shorthand props moved to configuration objects
  3. Events: Event names standardized with consistent naming
  4. Renderers: Deprecated $ prefix renderers replaced with Vxe prefix
  5. Virtual Scrolling: scrollX/scrollY replaced with virtualXConfig/virtualYConfig
  6. Configuration: Related settings grouped into config objects
  7. File Operations: Moved from named exports to VxeUI methods
  8. Modal API: Moved from named exports to VxeUI.modal methods

Compatibility Notes

  • Most deprecated APIs still work but will show console warnings
  • Deprecated APIs will be removed in future major versions
  • New features are only available through current APIs
  • Performance optimizations require using current configuration patterns

Install with Tessl CLI

npx tessl i tessl/npm-vxe-table

docs

advanced-features.md

columns.md

configuration.md

grid.md

index.md

table.md

toolbar.md

tile.json