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

Enhanced Grid

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

The VxeGrid component extends VxeTable with integrated toolbar, pagination, form controls, and data proxy capabilities for complete data management solutions.

Capabilities

VxeGrid Component

Enhanced grid component with integrated features for comprehensive data management.

/**
 * Enhanced grid component extending table with integrated features
 */
interface VxeGrid extends VxeTable {
  // Grid-specific configuration
  layouts?: VxeGridPropTypes.Layouts;
  columns?: VxeGridPropTypes.Columns;
  
  // Integrated components
  pagerConfig?: VxeGridPropTypes.PagerConfig;
  proxyConfig?: VxeGridPropTypes.ProxyConfig;
  toolbarConfig?: VxeGridPropTypes.ToolbarConfig;
  formConfig?: VxeGridPropTypes.FormConfig;
  zoomConfig?: VxeGridPropTypes.ZoomConfig;
  
  // Grid methods extending table methods
  commitProxy(code: string, ...args: any[]): Promise<any>;
  getProxyInfo(): VxeGridDefines.ProxyInfo;
  
  // Form management methods
  setFormData(data: any): Promise<void>;
  getFormData(): any;
  clearFormData(): Promise<void>;
  validateForm(): Promise<any>;
  submitForm(): Promise<void>;
  resetForm(): Promise<void>;
  toggleFormCollapse(): Promise<void>;
  
  // Pagination methods
  getPagerInfo(): VxeGridDefines.PagerInfo;
  setPagerInfo(info: VxeGridDefines.PagerInfo): Promise<void>;
  prevPage(): Promise<void>;
  nextPage(): Promise<void>;
  prevJump(): Promise<void>;
  nextJump(): Promise<void>;
  
  // Toolbar methods
  getToolbar(): VxeToolbarInstance;
  
  // Zoom functionality
  zoom(): Promise<void>;
  maximize(): Promise<void>;
  revert(): Promise<void>;
  isMaximized(): boolean;
  
  // Query and data proxy methods
  query(params?: any): Promise<void>;
  save(): Promise<void>;
  remove(rows?: any[]): Promise<void>;
  refresh(): Promise<void>;
}

Layout Configuration

Grid layout and responsive design configuration.

interface GridLayouts {
  /** Layout configuration for different screen sizes */
  layouts?: string | string[];
}

type VxeGridPropTypes.Layouts = 
  | 'Form,Toolbar,Table,Pager' 
  | 'Toolbar,Table,Pager' 
  | 'Table,Pager' 
  | 'Table'
  | string[];

Column Definitions

Declarative column configuration for grid setup.

interface GridColumns {
  /** Array of column configurations */
  columns?: VxeGridPropTypes.Columns;
}

interface VxeGridPropTypes.Columns extends Array<VxeGridDefines.ColumnOptions> {}

interface VxeGridDefines.ColumnOptions {
  field?: string;
  title?: string;
  width?: number | string;
  minWidth?: number | string;
  type?: VxeColumnPropTypes.Type;
  fixed?: VxeColumnPropTypes.Fixed;
  align?: VxeColumnPropTypes.Align;
  headerAlign?: VxeColumnPropTypes.HeaderAlign;
  showOverflow?: VxeColumnPropTypes.ShowOverflow;
  showHeaderOverflow?: VxeColumnPropTypes.ShowHeaderOverflow;
  sortable?: boolean;
  filters?: VxeColumnPropTypes.Filter[];
  editRender?: VxeColumnPropTypes.EditRender;
  cellRender?: VxeColumnPropTypes.CellRender;
  children?: VxeGridDefines.ColumnOptions[];
}

Pagination Configuration

Integrated pagination with customizable options.

interface PagerConfiguration {
  /** Pagination configuration */
  pagerConfig?: {
    /** Enable pagination */
    enabled?: boolean;
    /** Current page */
    currentPage?: number;
    /** Page size */
    pageSize?: number;
    /** Total records */
    total?: number;
    /** Page size options */
    pageSizes?: number[];
    /** Pagination layouts */
    layouts?: string[];
    /** Show page size selector */
    showSizes?: boolean;
    /** Show pagination info */
    showInfo?: boolean;
    /** Show page jumper */
    showJumper?: boolean;
    /** Show refresh button */
    showRefresh?: boolean;
    /** Perfect mode (no borders) */
    perfect?: boolean;
    /** Custom pagination text */
    infoText?: string;
    /** Background color */
    background?: boolean;
  };
}

interface VxeGridDefines.PagerInfo {
  currentPage: number;
  pageSize: number;
  total: number;
}

Data Proxy Configuration

Server-side data management with automatic loading and CRUD operations.

interface ProxyConfiguration {
  /** Data proxy configuration for server-side operations */
  proxyConfig?: {
    /** Enable proxy */
    enabled?: boolean;
    /** Auto load data on mount */
    autoLoad?: boolean;
    /** Show loading indicator */
    showLoading?: boolean;
    /** Show response messages */
    showResponseMsg?: boolean;
    /** Show action messages */
    showActionMsg?: boolean;
    
    /** Response data mapping */
    response?: {
      /** Data list field */
      list?: string | null;
      /** Result field */
      result?: string;
      /** Total count field */
      total?: string;
      /** Message field */
      message?: string;
    };
    
    /** AJAX configuration */
    ajax?: {
      /** Query data URL/function */
      query?: string | Function;
      /** Delete data URL/function */
      delete?: string | Function;
      /** Save data URL/function */
      save?: string | Function;
    };
    
    /** Data processing hooks */
    beforeQuery?: (params: any) => any;
    afterQuery?: (params: any) => any;
    beforeDelete?: (params: any) => any;
    afterDelete?: (params: any) => any;
    beforeSave?: (params: any) => any;
    afterSave?: (params: any) => any;
  };
}

interface VxeGridDefines.ProxyInfo {
  data: any[];
  loading: boolean;
  total: number;
}

Toolbar Configuration

Integrated toolbar with grid-specific tools and custom buttons.

interface ToolbarConfiguration {
  /** Toolbar configuration */
  toolbarConfig?: {
    /** Enable toolbar */
    enabled?: boolean;
    /** Toolbar buttons */
    buttons?: VxeToolbarPropTypes.Buttons;
    /** Toolbar tools */
    tools?: VxeToolbarPropTypes.Tools;
    /** Refresh configuration */
    refresh?: VxeToolbarPropTypes.Refresh;
    /** Import configuration */
    import?: VxeToolbarPropTypes.Import;
    /** Export configuration */
    export?: VxeToolbarPropTypes.Export;
    /** Print configuration */
    print?: VxeToolbarPropTypes.Print;
    /** Zoom configuration */
    zoom?: VxeToolbarPropTypes.Zoom;
    /** Custom column configuration */
    custom?: VxeToolbarPropTypes.Custom;
    /** Perfect mode */
    perfect?: boolean;
    /** Toolbar size */
    size?: VxeToolbarPropTypes.Size;
  };
}

Form Configuration

Integrated search/filter form with automatic data binding.

interface FormConfiguration {
  /** Form configuration for search and filtering */
  formConfig?: {
    /** Enable form */
    enabled?: boolean;
    /** Form data */
    data?: any;
    /** Form items configuration */
    items?: VxeGridDefines.FormItemOptions[];
    /** Form title */
    title?: string;
    /** Show title */
    showTitle?: boolean;
    /** Title align */
    titleAlign?: 'left' | 'center' | 'right';
    /** Title width */
    titleWidth?: number | string;
    /** Title overflow */
    titleOverflow?: boolean | 'ellipsis' | 'title' | 'tooltip';
    /** Collapse form */
    collapsed?: boolean;
    /** Show collapse button */
    collapsable?: boolean;
    /** Perfect mode */
    perfect?: boolean;
    /** Form size */
    size?: VxeFormPropTypes.Size;
  };
}

interface VxeGridDefines.FormItemOptions {
  field?: string;
  title?: string;
  span?: number;
  align?: 'left' | 'center' | 'right';
  titleAlign?: 'left' | 'center' | 'right';
  itemRender?: VxeFormPropTypes.ItemRender;
  visible?: boolean;
  visibleMethod?: (params: any) => boolean;
  className?: string | ((params: any) => string);
  titlePrefix?: VxeFormPropTypes.TitlePrefix;
  titleSuffix?: VxeFormPropTypes.TitleSuffix;
}

Usage Examples:

// Basic grid with pagination
<VxeGrid
  ref="gridRef"
  :columns="gridColumns"
  :proxy-config="proxyConfig"
  :pager-config="pagerConfig"
  :toolbar-config="toolbarConfig"
>
</VxeGrid>

// Grid configuration
const gridColumns = [
  { field: 'id', title: 'ID', width: 80 },
  { field: 'name', title: 'Name', minWidth: 120, editRender: { name: 'input' } },
  { field: 'age', title: 'Age', width: 80, editRender: { name: 'input', props: { type: 'number' } } },
  { 
    field: 'status', 
    title: 'Status', 
    width: 100,
    editRender: { 
      name: 'select', 
      options: [
        { label: 'Active', value: 'active' },
        { label: 'Inactive', value: 'inactive' }
      ]
    }
  }
];

const proxyConfig = {
  ajax: {
    query: '/api/users',
    save: '/api/users/save',
    delete: '/api/users/delete'
  },
  response: {
    result: 'data',
    total: 'total'
  }
};

const pagerConfig = {
  pageSize: 20,
  pageSizes: [10, 20, 50, 100]
};

const toolbarConfig = {
  buttons: [
    { code: 'add', name: 'Add' },
    { code: 'delete', name: 'Delete' }
  ],
  tools: ['refresh', 'export']
};

// Form integration
const formConfig = {
  enabled: true,
  items: [
    { field: 'name', title: 'Name', itemRender: { name: 'input' } },
    { field: 'status', title: 'Status', itemRender: { name: 'select', options: statusOptions } }
  ]
};

// Programmatic operations
const gridRef = ref<VxeGridInstance>();

// Commit proxy operations
await gridRef.value?.commitProxy('query');
await gridRef.value?.commitProxy('save');

// Form operations
const formData = gridRef.value?.getFormData();
await gridRef.value?.setFormData({ name: 'John', status: 'active' });

Types

// Grid instance type
interface VxeGridInstance extends ComponentPublicInstance, VxeGrid {}

// Grid events extending table events
interface VxeGridEmits extends VxeTableEmits {
  'page-change': (params: VxeGridDefines.PageChangeEventParams) => void;
  'form-submit': (params: VxeGridDefines.FormSubmitEventParams) => void;
  'form-submit-invalid': (params: VxeGridDefines.FormSubmitInvalidEventParams) => void;
  'form-reset': (params: VxeGridDefines.FormResetEventParams) => void;
  'form-collapse': (params: VxeGridDefines.FormCollapseEventParams) => void;
  'form-toggle-collapse': (params: VxeGridDefines.FormToggleCollapseEventParams) => void;
  'proxy-query': (params: VxeGridDefines.ProxyQueryEventParams) => void;
  'proxy-delete': (params: VxeGridDefines.ProxyDeleteEventParams) => void;
  'proxy-save': (params: VxeGridDefines.ProxyDeleteEventParams) => void;
  'toolbar-button-click': (params: VxeGridDefines.ToolbarButtonClickEventParams) => void;
  'toolbar-tool-click': (params: VxeGridDefines.ToolbarToolClickEventParams) => void;
  'zoom': (params: VxeGridDefines.ZoomEventParams) => void;
}

// Grid layout types
type VxeGridPropTypes.Layouts = string | string[];

// Grid size type
type VxeGridPropTypes.Size = 'mini' | 'small' | 'medium' | 'large';

// Grid information types
interface VxeGridDefines.ProxyInfo {
  data: any[];
  pendingRecords: any[];
  sort: VxeTableDefines.SortCheckedParams[];
  filters: VxeTableDefines.FilterCheckedParams[];
  form: any;
  pager: VxeGridDefines.PagerInfo;
}

interface VxeGridDefines.PagerInfo {
  total: number;
  pageSize: number;
  currentPage: number;
  layouts: string[];
  sizes: number[];
  perfect: boolean;
}

// Grid column options
interface VxeGridDefines.ColumnOptions extends VxeColumnDefines.ColumnOptions {
  slots?: {
    default?: string;
    header?: string;
    footer?: string;
    edit?: string;
    filter?: string;
  };
}

// Event parameter types
interface VxeGridDefines.PageChangeEventParams {
  type: string;
  currentPage: number;
  pageSize: number;
  $event: Event;
}

interface VxeGridDefines.FormSubmitEventParams {
  data: any;
  $event: Event;
}

interface VxeGridDefines.FormSubmitInvalidEventParams {
  data: any;
  errMap: any;
  $event: Event;
}

interface VxeGridDefines.FormResetEventParams {
  data: any;
  $event: Event;
}

interface VxeGridDefines.FormCollapseEventParams {
  collapse: boolean;
  $event: Event;
}

interface VxeGridDefines.FormToggleCollapseEventParams {
  collapse: boolean;
  $event: Event;
}

interface VxeGridDefines.ProxyQueryEventParams {
  page: VxeGridDefines.PagerInfo;
  sorts: VxeTableDefines.SortCheckedParams[];
  filters: VxeTableDefines.FilterCheckedParams[];
  form: any;
}

interface VxeGridDefines.ProxyDeleteEventParams {
  body: {
    removeRecords: any[];
  };
}

interface VxeGridDefines.ToolbarButtonClickEventParams {
  code: string;
  button: VxeToolbarPropTypes.Button;
  $event: Event;
}

interface VxeGridDefines.ToolbarToolClickEventParams {
  code: string;
  tool: VxeToolbarPropTypes.Tool;
  $event: Event;
}

interface VxeGridDefines.ZoomEventParams {
  type: 'max' | 'revert';
  $event: Event;
}

Install with Tessl CLI