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

Column Configuration

Name: tessl/npm-vxe-table
Author: tessl

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

Capabilities

VxeColumn Component

Column definition component for flexible table column configuration.

/**
 * Column definition component for table columns
 */
interface VxeColumn extends ComponentPublicInstance {
  // Basic column properties
  field?: string;
  title?: string;
  width?: number | string;
  minWidth?: number | string;
  maxWidth?: number | string;
  type?: VxeColumnPropTypes.Type;
  fixed?: VxeColumnPropTypes.Fixed;
  
  // Alignment
  align?: VxeColumnPropTypes.Align;
  headerAlign?: VxeColumnPropTypes.HeaderAlign;
  footerAlign?: VxeColumnPropTypes.FooterAlign;
  
  // Display options
  showOverflow?: VxeColumnPropTypes.ShowOverflow;
  showHeaderOverflow?: VxeColumnPropTypes.ShowHeaderOverflow;
  showFooterOverflow?: VxeColumnPropTypes.ShowFooterOverflow;
  
  // Visibility and state
  visible?: boolean;
  resizable?: boolean;
  sortable?: boolean;
  
  // Formatting and rendering
  formatter?: VxeColumnPropTypes.Formatter;
  cellRender?: VxeColumnPropTypes.CellRender;
  editRender?: VxeColumnPropTypes.EditRender;
  headerRender?: VxeColumnPropTypes.HeaderRender;
  footerRender?: VxeColumnPropTypes.FooterRender;
  
  // Sorting configuration
  sortBy?: string | string[];
  sortType?: 'auto' | 'string' | 'number' | 'date';
  sortMethod?: VxeColumnPropTypes.SortMethod;
  remoteSort?: boolean;
  
  // Filtering configuration
  filters?: VxeColumnPropTypes.Filter[];
  filterMultiple?: boolean;
  filterMethod?: VxeColumnPropTypes.FilterMethod;
  filterResetMethod?: VxeColumnPropTypes.FilterResetMethod;
  filterRecoverMethod?: VxeColumnPropTypes.FilterRecoverMethod;
  
  // Tree column configuration
  treeNode?: boolean;
  
  // Grouping (for column groups)
  children?: VxeColumn[];
}

Column Types

Built-in column types with specific behaviors and rendering.

interface ColumnTypes {
  /** Column type */
  type?: 
    | 'seq'        // Sequence/index column
    | 'radio'      // Radio selection column
    | 'checkbox'   // Checkbox selection column
    | 'expand'     // Row expand column
    | 'html'       // HTML content column
    | null;        // Regular data column
}

// Sequence column configuration
interface SeqColumnConfig {
  type: 'seq';
  /** Starting number */
  seqMethod?: (params: VxeColumnDefines.CellRenderBodyParams) => number;
}

// Radio column configuration
interface RadioColumnConfig {
  type: 'radio';
  /** Radio selection configuration */
  radioConfig?: {
    /** Disable radio for specific rows */
    checkMethod?: (params: VxeColumnDefines.CellRenderBodyParams) => boolean;
    /** Trigger event ('default' | 'cell' | 'row') */
    trigger?: string;
    /** Strict mode (only allow one selection) */
    strict?: boolean;
    /** Label field */
    labelField?: string;
  };
}

// Checkbox column configuration
interface CheckboxColumnConfig {
  type: 'checkbox';
  /** Checkbox selection configuration */
  checkboxConfig?: {
    /** Disable checkbox for specific rows */
    checkMethod?: (params: VxeColumnDefines.CellRenderBodyParams) => boolean;
    /** Trigger event ('default' | 'cell' | 'row') */
    trigger?: string;
    /** Strict mode */
    strict?: boolean;
    /** Label field */
    labelField?: string;
    /** Show header checkbox for select all */
    showHeader?: boolean;
  };
}

Column Rendering

Custom cell rendering and editing configuration.

interface ColumnRendering {
  /** Cell content formatter */
  formatter?: VxeColumnPropTypes.Formatter;
  
  /** Cell display renderer */
  cellRender?: VxeColumnPropTypes.CellRender;
  
  /** Cell editor renderer */
  editRender?: VxeColumnPropTypes.EditRender;
  
  /** Header renderer */
  headerRender?: VxeColumnPropTypes.HeaderRender;
  
  /** Footer renderer */
  footerRender?: VxeColumnPropTypes.FooterRender;
}

// Formatter function type
type VxeColumnPropTypes.Formatter = (params: VxeColumnDefines.CellRenderBodyParams) => string | number;

// Cell renderer configuration
interface VxeColumnPropTypes.CellRender {
  /** Renderer name */
  name?: string;
  /** Renderer properties */
  props?: any;
  /** Renderer options */
  options?: any[];
  /** Renderer events */
  events?: { [key: string]: Function };
  /** Custom render function */
  content?: string | Function;
}

// Edit renderer configuration
interface VxeColumnPropTypes.EditRender {
  /** Editor name */
  name?: string;
  /** Editor properties */
  props?: any;
  /** Editor options */
  options?: any[];
  /** Editor events */
  events?: { [key: string]: Function };
  /** Auto focus */
  autoFocus?: boolean;
  /** Immediate validation */
  immediate?: boolean;
  /** Custom render function */
  content?: string | Function;
}

Column Sorting

Sorting configuration and custom sort methods.

interface ColumnSorting {
  /** Enable sorting */
  sortable?: boolean;
  
  /** Sort by specific field(s) */
  sortBy?: string | string[];
  
  /** Sort data type */
  sortType?: 'auto' | 'string' | 'number' | 'date';
  
  /** Custom sort method */
  sortMethod?: VxeColumnPropTypes.SortMethod;
  
  /** Remote sorting */
  remoteSort?: boolean;
}

// Custom sort method type
type VxeColumnPropTypes.SortMethod = (
  a: any, 
  b: any, 
  params: VxeColumnDefines.SortMethodParams
) => number;

interface VxeColumnDefines.SortMethodParams {
  column: VxeColumnDefines.ColumnInfo;
  property: string;
  order: 'asc' | 'desc';
  sortBy: string;
}

Column Filtering

Filtering configuration with built-in and custom filters.

interface ColumnFiltering {
  /** Filter options */
  filters?: VxeColumnPropTypes.Filter[];
  
  /** Multiple selection */
  filterMultiple?: boolean;
  
  /** Custom filter method */
  filterMethod?: VxeColumnPropTypes.FilterMethod;
  
  /** Filter reset method */
  filterResetMethod?: VxeColumnPropTypes.FilterResetMethod;
  
  /** Filter recover method */
  filterRecoverMethod?: VxeColumnPropTypes.FilterRecoverMethod;
}

// Filter option configuration
interface VxeColumnPropTypes.Filter {
  /** Filter label */
  label?: string;
  /** Filter value */
  value?: any;
  /** Filter data */
  data?: any;
  /** Reset value */
  resetValue?: any;
  /** Checked state */
  checked?: boolean;
}

// Custom filter method
type VxeColumnPropTypes.FilterMethod = (
  params: VxeColumnDefines.FilterMethodParams
) => boolean;

interface VxeColumnDefines.FilterMethodParams {
  value: any;
  option: VxeColumnPropTypes.Filter;
  cellValue: any;
  row: any;
  column: VxeColumnDefines.ColumnInfo;
}

VxeColgroup Component

Column group component for multi-level headers.

/**
 * Column group component for organizing columns into groups
 */
interface VxeColgroup extends ComponentPublicInstance {
  /** Group title */
  title?: string;
  /** Group field (optional) */
  field?: string;
  /** Fixed position */
  fixed?: VxeColumnPropTypes.Fixed;
  /** Alignment */
  align?: VxeColumnPropTypes.Align;
  /** Header alignment */
  headerAlign?: VxeColumnPropTypes.HeaderAlign;
  /** Header overflow */
  showHeaderOverflow?: VxeColumnPropTypes.ShowHeaderOverflow;
  /** Resizable */
  resizable?: boolean;
  /** Width */
  width?: number | string;
  /** Minimum width */
  minWidth?: number | string;
  /** Maximum width */
  maxWidth?: number | string;
  /** Header renderer */
  headerRender?: VxeColumnPropTypes.HeaderRender;
  /** Child columns */
  children?: VxeColumn[];
}

Usage Examples:

// Basic column configuration
<VxeTable :data="tableData">
  <VxeColumn field="id" title="ID" width="80" type="seq"></VxeColumn>
  <VxeColumn field="name" title="Name" min-width="120" sortable></VxeColumn>
  <VxeColumn field="age" title="Age" width="80" sortable sort-type="number"></VxeColumn>
  <VxeColumn field="email" title="Email" min-width="180" show-overflow="tooltip"></VxeColumn>
</VxeTable>

// Column with custom formatter
<VxeColumn 
  field="status" 
  title="Status" 
  width="100"
  :formatter="statusFormatter"
>
</VxeColumn>

const statusFormatter = ({ cellValue }: any) => {
  return cellValue === 1 ? 'Active' : 'Inactive';
};

// Editable column with select renderer
<VxeColumn 
  field="category" 
  title="Category" 
  width="120"
  :edit-render="{ name: 'select', options: categoryOptions }"
>
</VxeColumn>

// Column with custom cell renderer
<VxeColumn 
  field="avatar" 
  title="Avatar" 
  width="80"
  :cell-render="{ name: 'VxeImage', props: { width: 40, height: 40 } }"
>
</VxeColumn>

// Multi-level headers with column groups
<VxeTable :data="tableData">
  <VxeColgroup title="Personal Info">
    <VxeColumn field="name" title="Name"></VxeColumn>
    <VxeColumn field="age" title="Age"></VxeColumn>
  </VxeColgroup>
  <VxeColgroup title="Contact Info">
    <VxeColumn field="email" title="Email"></VxeColumn>
    <VxeColumn field="phone" title="Phone"></VxeColumn>
  </VxeColgroup>
</VxeTable>

// Column with filtering
<VxeColumn 
  field="status" 
  title="Status" 
  width="100"
  :filters="[
    { label: 'Active', value: 1 },
    { label: 'Inactive', value: 0 }
  ]"
  filter-multiple
>
</VxeColumn>

// Fixed columns
<VxeTable :data="tableData">
  <VxeColumn field="id" title="ID" width="80" fixed="left"></VxeColumn>
  <VxeColumn field="name" title="Name" min-width="120" fixed="left"></VxeColumn>
  <!-- ... other columns ... -->
  <VxeColumn field="actions" title="Actions" width="120" fixed="right">
    <template #default="{ row }">
      <vxe-button @click="editRow(row)">Edit</vxe-button>
      <vxe-button @click="deleteRow(row)">Delete</vxe-button>
    </template>
  </VxeColumn>
</VxeTable>

Types

// Column alignment types
type VxeColumnPropTypes.Align = 'left' | 'center' | 'right';
type VxeColumnPropTypes.HeaderAlign = 'left' | 'center' | 'right';
type VxeColumnPropTypes.FooterAlign = 'left' | 'center' | 'right';

// Column fixed position
type VxeColumnPropTypes.Fixed = 'left' | 'right' | null;

// Column type
type VxeColumnPropTypes.Type = 'seq' | 'radio' | 'checkbox' | 'expand' | 'html' | null;

// Overflow display
type VxeColumnPropTypes.ShowOverflow = boolean | 'ellipsis' | 'title' | 'tooltip';

// Column instance type
interface VxeColumnInstance extends ComponentPublicInstance, VxeColumn {}

// Column information type
interface VxeColumnDefines.ColumnInfo {
  id: string;
  type: VxeColumnPropTypes.Type;
  field: string;
  title: string;
  width: number;
  minWidth: number;
  maxWidth: number;
  fixed: VxeColumnPropTypes.Fixed;
  align: VxeColumnPropTypes.Align;
  headerAlign: VxeColumnPropTypes.HeaderAlign;
  footerAlign: VxeColumnPropTypes.FooterAlign;
  showOverflow: VxeColumnPropTypes.ShowOverflow;
  showHeaderOverflow: VxeColumnPropTypes.ShowHeaderOverflow;
  showFooterOverflow: VxeColumnPropTypes.ShowFooterOverflow;
  className: string;
  headerClassName: string;
  footerClassName: string;
  visible: boolean;
  resizable: boolean;
  sortable: boolean;
  filters: VxeColumnPropTypes.Filter[];
  formatter: VxeColumnPropTypes.Formatter;
  cellRender: VxeColumnPropTypes.CellRender;
  editRender: VxeColumnPropTypes.EditRender;
  headerRender: VxeColumnPropTypes.HeaderRender;
  footerRender: VxeColumnPropTypes.FooterRender;
  children: VxeColumnDefines.ColumnInfo[];
  level: number;
  rowSpan: number;
  colSpan: number;
  parentId: string;
  [key: string]: any;
}

Install with Tessl CLI