Posted on May 17, 2024

Can the VTable component be drag-and-drop to swap rows?

#visactor #vtable #webdev #visualization

Question Description

How can the VTable basic table ListTable perform drag-and-drop row swapping?

Solution

The VTable pivot table supports drag-and-drop header row swapping, while the basic table requires the configuration of serial numbers to achieve this. There is a configuration item called dragOrder that indicates whether the drag-and-drop order is enabled. After configuring this to true, a drag-and-drop button icon will be displayed, which requires mouse operation to perform drag-and-drop swapping. At the same time, this icon can be replaced with the icon required by your business.

export interface IRowSeriesNumber { width?: number | 'auto'; title?: string; format?: (col?: number, row?: number, table?: BaseTableAPI) => any; cellType?: 'text' | 'link' | 'image' | 'video' | 'checkbox'; style?: ITextStyleOption | ((styleArg: StylePropertyFunctionArg) => ITextStyleOption); headerStyle?: ITextStyleOption | ((styleArg: StylePropertyFunctionArg) => ITextStyleOption); headerIcon?: string | ColumnIconOption | (string | ColumnIconOption)[]; icon?: | string | ColumnIconOption | (string | ColumnIconOption)[] | ((args: CellInfo) => string | ColumnIconOption | (string | ColumnIconOption)[]); /** Whether it can be rearranged by drag and drop */ dragOrder?: boolean; }

Code Examples

const option = { records: data, columns, widthMode: 'standard', rowSeriesNumber: { title: '序号', dragOrder: true, width: 'auto', headerStyle: { color: 'black', bgColor: 'pink' }, style: { color: 'red' } } }; tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);