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

advanced-features.mddocs/

Advanced Features

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

Capabilities

Drag and Drop Operations

Comprehensive drag-and-drop support for rows and columns with visual feedback and customizable behavior.

interface DragDropConfiguration {
  /** Row drag configuration */
  rowDragConfig?: {
    /** Enable row dragging */
    enabled?: boolean;
    /** Show drag icon */
    showIcon?: boolean;
    /** Drag animation */
    animation?: boolean;
    /** Show guide status */
    showGuidesStatus?: boolean;
    /** Show drag tip */
    showDragTip?: boolean;
    /** Drag trigger area */
    trigger?: 'default' | 'row' | 'cell';
    /** Plugin configuration */
    plugin?: any;
  };
  
  /** Column drag configuration */
  columnDragConfig?: {
    /** Enable column dragging */
    enabled?: boolean;
    /** Show drag icon */
    showIcon?: boolean;
    /** Drag animation */
    animation?: boolean;
    /** Show guide status */
    showGuidesStatus?: boolean;
    /** Show drag tip */
    showDragTip?: boolean;
    /** Drag trigger area */
    trigger?: 'default' | 'header';
    /** Plugin configuration */
    plugin?: any;
  };
}

// Drag event types
interface DragEvents {
  'row-dragstart': (params: VxeTableDefines.RowDragstartEventParams) => void;
  'row-dragover': (params: VxeTableDefines.RowDragoverEventParams) => void;
  'row-dragend': (params: VxeTableDefines.RowDragendEventParams) => void;
  'row-remove-dragend': (params: VxeTableDefines.RowRemoveDragendEventParams) => void;
  'row-insert-dragend': (params: VxeTableDefines.RowInsertDragendEventParams) => void;
  'column-dragstart': (params: VxeTableDefines.ColumnDragstartEventParams) => void;
  'column-dragover': (params: VxeTableDefines.ColumnDragoverEventParams) => void;
  'column-dragend': (params: VxeTableDefines.ColumnDragendEventParams) => void;
}

Tree Structure Support

Hierarchical data display with expandable tree nodes and customizable tree icons.

interface TreeConfiguration {
  /** Tree structure configuration */
  treeConfig?: {
    /** Transform to tree structure */
    transform?: boolean;
    /** Row key field */
    rowField?: string;
    /** Parent key field */
    parentField?: string;
    /** Children field */
    childrenField?: string;
    /** Has children field */
    hasChildField?: string;
    /** Mapped children field */
    mapChildrenField?: string;
    /** Tree node indent */
    indent?: number;
    /** Show tree icon */
    showIcon?: boolean;
    /** Show tree line */
    showLine?: boolean;
    /** Accordion mode (only one expanded at a time) */
    accordion?: boolean;
    /** Trigger expand event */
    trigger?: 'default' | 'cell' | 'row';
    /** Lazy loading */
    lazy?: boolean;
    /** Load method for lazy loading */
    loadMethod?: (params: VxeTableDefines.TreeLoadMethodParams) => Promise<any[]>;
    /** Icon configuration */
    iconOpen?: string;
    iconClose?: string;
    iconLoaded?: string;
  };
}

// Tree-related methods
interface TreeMethods {
  /** Set tree expansion state */
  setTreeExpand(rows: any[], expanded: boolean): Promise<void>;
  /** Set all tree expansion state */
  setAllTreeExpand(expanded: boolean): Promise<void>;
  /** Clear tree expansion state */
  clearTreeExpand(): Promise<void>;
  /** Get tree expansion records */
  getTreeExpandRecords(): any[];
  /** Check if tree node is expanded */
  isTreeExpandByRow(row: any): boolean;
}

// Tree events
interface TreeEvents {
  'toggle-tree-expand': (params: VxeTableDefines.ToggleTreeExpandEventParams) => void;
}

Data Aggregation and Grouping

Advanced data aggregation with pivot table functionality and customizable grouping.

interface AggregationConfiguration {
  /** Data aggregation configuration */
  aggregateConfig?: {
    /** Enable aggregation */
    enabled?: boolean;
    /** Padding */
    padding?: boolean;
    /** Row key field */
    rowField?: string;
    /** Parent key field */
    parentField?: string;
    /** Children field */
    childrenField?: string;
    /** Mapped children field */
    mapChildrenField?: string;
    /** Group indent */
    indent?: number;
    /** Show aggregation icon */
    showIcon?: boolean;
    /** Maximum group size */
    maxGroupSize?: number;
    /** Show aggregation function title */
    showAggFuncTitle?: boolean;
    /** Aggregation methods */
    aggregateMethods?: {
      [field: string]: VxeTableDefines.AggregateMethod;
    };
  };
}

// Aggregation method type
type VxeTableDefines.AggregateMethod = (
  params: VxeTableDefines.AggregateMethodParams
) => number | string;

interface VxeTableDefines.AggregateMethodParams {
  data: any[];
  column: VxeColumnDefines.ColumnInfo;
  property: string;
}

Cell Area Selection

Excel-like cell area selection with keyboard navigation and copy-paste operations.

interface AreaSelectionConfiguration {
  /** Area selection configuration */
  areaConfig?: {
    /** Enable area selection */
    enabled?: boolean;
    /** Auto clear selection */
    autoClear?: boolean;
    /** Multiple area selection */
    multiple?: boolean;
    /** Select cell by header click */
    selectCellByHeader?: boolean;
    /** Select cell by body click */
    selectCellByBody?: boolean;
    /** Extend selection directions */
    extendDirection?: {
      top?: boolean;
      left?: boolean;
      bottom?: boolean;
      right?: boolean;
    };
  };
}

// Area selection methods
interface AreaSelectionMethods {
  /** Set cell area selection */
  setCellAreaSelection(areas: VxeTableDefines.CellAreaParams[]): Promise<void>;
  /** Get cell area selection */
  getCellAreaSelection(): VxeTableDefines.CellAreaParams[];
  /** Clear cell area selection */
  clearCellAreaSelection(): Promise<void>;
  /** Set cell area merge */
  setCellAreaMerge(merges: VxeTableDefines.CellMergeParams[]): Promise<void>;
  /** Get cell area merge */
  getCellAreaMerge(): VxeTableDefines.CellMergeParams[];
  /** Clear cell area merge */
  clearCellAreaMerge(): Promise<void>;
}

// Area selection events
interface AreaSelectionEvents {
  'cell-area-selection-start': (params: VxeTableDefines.CellAreaSelectionStartEventParams) => void;
  'cell-area-selection-drag': (params: VxeTableDefines.CellAreaSelectionDragEventParams) => void;
  'cell-area-selection-end': (params: VxeTableDefines.CellAreaSelectionEndEventParams) => void;
  'cell-area-extension-start': (params: VxeTableDefines.CellAreaExtensionStartEventParams) => void;
  'cell-area-extension-drag': (params: VxeTableDefines.CellAreaExtensionDragEventParams) => void;
  'cell-area-extension-end': (params: VxeTableDefines.CellAreaExtensionEndEventParams) => void;
}

Clipboard Operations

Copy, cut, and paste functionality with support for various data formats.

interface ClipboardConfiguration {
  /** Clipboard configuration */
  clipConfig?: {
    /** Enable clipboard operations */
    enabled?: boolean;
    /** Enable copy operation */
    isCopy?: boolean;
    /** Enable cut operation */
    isCut?: boolean;
    /** Enable paste operation */
    isPaste?: boolean;
    /** Copy format */
    copyFormat?: 'text' | 'html' | 'json';
    /** Paste format */
    pasteFormat?: 'text' | 'html' | 'json';
    /** Include header in copy */
    includeHeader?: boolean;
    /** Use original value */
    useOriginalValue?: boolean;
    /** Before copy method */
    beforeCopyMethod?: (params: VxeTableDefines.BeforeCopyMethodParams) => boolean;
    /** After copy method */
    afterCopyMethod?: (params: VxeTableDefines.AfterCopyMethodParams) => void;
    /** Before paste method */
    beforePasteMethod?: (params: VxeTableDefines.BeforePasteMethodParams) => boolean;
    /** After paste method */
    afterPasteMethod?: (params: VxeTableDefines.AfterPasteMethodParams) => void;
  };
}

// Clipboard events
interface ClipboardEvents {
  'copy': (params: VxeTableDefines.CopyEventParams) => void;
  'cut': (params: VxeTableDefines.CutEventParams) => void;
  'paste': (params: VxeTableDefines.PasteEventParams) => void;
  'cell-area-copy': (params: VxeTableDefines.CellAreaCopyEventParams) => void;
  'cell-area-cut': (params: VxeTableDefines.CellAreaCutEventParams) => void;
  'cell-area-paste': (params: VxeTableDefines.CellAreaPasteEventParams) => void;
}

Data Validation

Comprehensive validation system with built-in and custom validators.

interface ValidationConfiguration {
  /** Validation configuration */
  validConfig?: {
    /** Auto clear validation errors */
    autoClear?: boolean;
    /** Auto position validation message */
    autoPos?: boolean;
    /** Show validation message */
    showMessage?: boolean;
    /** Message display mode */
    message?: 'inline' | 'tooltip' | 'none';
    /** Message mode */
    msgMode?: 'single' | 'all';
    /** Validation theme */
    theme?: 'default' | 'beautify';
  };
  
  /** Validation rules */
  editRules?: VxeTablePropTypes.EditRules;
}

// Edit rules type
interface VxeTablePropTypes.EditRules {
  [field: string]: VxeTableDefines.ValidatorRule[];
}

// Validator rule
interface VxeTableDefines.ValidatorRule {
  /** Validator type */
  type?: 'required' | 'min' | 'max' | 'number' | 'integer' | 'length' | 'pattern' | 'custom';
  /** Required field */
  required?: boolean;
  /** Minimum value/length */
  min?: number;
  /** Maximum value/length */
  max?: number;
  /** Pattern for regex validation */
  pattern?: RegExp | string;
  /** Custom validator function */
  validator?: VxeTableDefines.ValidatorMethod;
  /** Error message */
  message?: string;
  /** Trigger event */
  trigger?: 'blur' | 'change' | 'manual';
}

// Custom validator method
type VxeTableDefines.ValidatorMethod = (params: VxeTableDefines.ValidatorMethodParams) => boolean | string | Error;

interface VxeTableDefines.ValidatorMethodParams {
  cellValue: any;
  rule: VxeTableDefines.ValidatorRule;
  rules: VxeTableDefines.ValidatorRule[];
  row: any;
  column: VxeColumnDefines.ColumnInfo;
  rowIndex: number;
  columnIndex: number;
}

// Validation methods
interface ValidationMethods {
  /** Validate table data */
  validate(): Promise<VxeTableDefines.ValidateErrorParams[]>;
  /** Validate specific row */
  validateRow(row: any): Promise<VxeTableDefines.ValidateErrorParams[]>;
  /** Clear validation errors */
  clearValidate(): Promise<void>;
}

Keyboard Navigation

Advanced keyboard navigation and shortcuts configuration.

interface KeyboardConfiguration {
  /** Keyboard configuration */
  keyboardConfig?: {
    /** Enable all keyboard shortcuts */
    isAll?: boolean;
    /** Enable arrow key navigation */
    isArrow?: boolean;
    /** Enable Tab key navigation */
    isTab?: boolean;
    /** Enable Enter key navigation */
    isEnter?: boolean;
    /** Enable Delete key */
    isDel?: boolean;
    /** Enable Escape key */
    isEsc?: boolean;
    /** Enable F2 key for editing */
    isF2?: boolean;
    /** Enable context menu key */
    isContext?: boolean;
    /** Edit method */
    editMethod?: (params: VxeTableDefines.KeyboardEditMethodParams) => boolean;
  };
}

// Keyboard events
interface KeyboardEvents {
  'keydown-start': (params: VxeTableDefines.KeydownStartEventParams) => void;
  'keydown': (params: VxeTableDefines.KeydownEventParams) => void;
  'keydown-end': (params: VxeTableDefines.KeydownEndEventParams) => void;
}

Usage Examples:

// Tree structure configuration
<VxeTable
  :data="treeData"
  :tree-config="{
    transform: true,
    rowField: 'id',
    parentField: 'parentId',
    childrenField: 'children',
    indent: 20,
    showIcon: true
  }"
>
  <VxeColumn field="name" title="Name" tree-node></VxeColumn>
  <VxeColumn field="type" title="Type"></VxeColumn>
  <VxeColumn field="size" title="Size"></VxeColumn>
</VxeTable>

// Drag and drop configuration
<VxeTable
  :data="tableData"
  :row-drag-config="{ enabled: true, showIcon: true, animation: true }"
  :column-drag-config="{ enabled: true, showIcon: true }"
  @row-dragend="handleRowDrag"
  @column-dragend="handleColumnDrag"
>
  <!-- columns -->
</VxeTable>

// Area selection and clipboard
<VxeTable
  :data="tableData"
  :area-config="{ enabled: true, multiple: true }"
  :clip-config="{ isCopy: true, isCut: true, isPaste: true }"
  :keyboard-config="{ isAll: true }"
  @copy="handleCopy"
  @paste="handlePaste"
>
  <!-- columns -->
</VxeTable>

// Data validation
<VxeTable
  :data="tableData"
  :edit-config="{ trigger: 'click', mode: 'cell' }"
  :valid-config="{ showMessage: true, autoClear: true }"
  :edit-rules="validationRules"
  @valid-error="handleValidationError"
>
  <VxeColumn field="name" title="Name" :edit-render="{ name: 'input' }"></VxeColumn>
  <VxeColumn field="email" title="Email" :edit-render="{ name: 'input' }"></VxeColumn>
  <VxeColumn field="age" title="Age" :edit-render="{ name: 'input', props: { type: 'number' } }"></VxeColumn>
</VxeTable>

const validationRules = {
  name: [
    { required: true, message: 'Name is required' },
    { min: 2, max: 50, message: 'Name must be between 2 and 50 characters' }
  ],
  email: [
    { required: true, message: 'Email is required' },
    { 
      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, 
      message: 'Please enter a valid email address' 
    }
  ],
  age: [
    { type: 'number', min: 18, max: 120, message: 'Age must be between 18 and 120' }
  ]
};

// Aggregation configuration
<VxeTable
  :data="salesData"
  :aggregate-config="{
    enabled: true,
    showIcon: true,
    aggregateMethods: {
      total: ({ data }) => data.reduce((sum, row) => sum + row.amount, 0),
      average: ({ data }) => data.reduce((sum, row) => sum + row.amount, 0) / data.length
    }
  }"
>
  <!-- columns -->
</VxeTable>

// Event handlers
const handleRowDrag = (params) => {
  console.log('Row dragged:', params);
  // Update data order
};

const handleValidationError = (params) => {
  console.log('Validation error:', params);
  // Handle validation errors
};

Types

// Cell area parameter
interface VxeTableDefines.CellAreaParams {
  startRow: Record<string, any>;
  endRow: Record<string, any>;
  startColumn: VxeColumnDefines.ColumnInfo;
  endColumn: VxeColumnDefines.ColumnInfo;
}

// Cell merge parameter
interface VxeTableDefines.CellMergeParams {
  row: Record<string, any>;
  column: VxeColumnDefines.ColumnInfo;
  rowspan: number;
  colspan: number;
}

// Validation error parameter
interface VxeTableDefines.ValidateErrorParams {
  row: Record<string, any>;
  column: VxeColumnDefines.ColumnInfo;
  rules: VxeTableDefines.ValidatorRule[];
  rule: VxeTableDefines.ValidatorRule;
  cellValue: any;
}

// Tree load method parameters
interface VxeTableDefines.TreeLoadMethodParams {
  row: Record<string, any>;
  level: number;
  $table: VxeTableInstance;
}

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