VTable

https://visactor.io/vtable/
Admin
VTable is a high-performance multi-dimensional data analysis table component built on Canvas,...
Tokens:8,700
Snippets:132
Trust Score:8.5
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install VTable via Package Manager

Source: https://visactor.io/vtable/guide/Getting_Started/Getting_Started

Commands to install the VTable package using npm or yarn.

```bash
# 使用 npm 安装
npm install @visactor/vtable

# 使用 yarn 安装
yarn add @visactor/vtable
```

--------------------------------

### Configure Gantt Icons and Scale Settings

Source: https://visactor.io/vtable/demo/gantt/gantt-hide-hour-scale

Defines SVG icons for use in the Gantt chart and demonstrates the setup for custom icon objects.

```javascript
// import * as VTableGantt from '@visactor/vtable-gantt';
// import { VTable } from '@visactor/vtable-gantt';
let ganttInstance;
const flag = `<svg width="24" height="24" viewBox="0 0 24 24" fill="#e16531" xmlns="http://www.w3.org/2000/svg">
<path d="M5 15h15.415a1.5 1.5 0 0 0 1.303-2.244l-2.434-4.26a1 1 0 0 1 0-.992l2.434-4.26A1.5 1.5 0 0 0 20.415 1H5a2 
2 0 0 0-2 2v19a1 1 0 0 0 2 .003V15Z" fill="#e16531"/>
</svg>
`;
const report = `<svg width="24" height="24" viewBox="0 0 24 24" fill="#FFD43C" xmlns="http://www.w3.org/2000/svg">
<path d="M13.732 2c-.77-1.333-2.694-1.333-3.464 0L.742 19c-.77 1.334.192 3 1.732 3h19.052c1.54 0 2.502-1.666 
1.733-3L13.732 2ZM10.75 8.25a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-.75.75h-1a.75.75 0 0 
1-.75-.75v-6Zm0 8.5a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-.75.75h-1a.75.75 0 0 1-.75-.75v-1Z" 
fill="#FFD43C"/>
</svg>
`;
const flagIcon = {
type: 'svg',
svg: flag,
width: 20,
height: 20,
name: 'flag',
positionType: VTable.TYPES.IconPosition.left,
cursor: 'pointer'
};
const reportIcon = {
type: 'svg',
svg: report,
width: 20,
height: 20,
name: 'report',

```

--------------------------------

### Import VTable via CDN

Source: https://visactor.io/vtable/guide/Getting_Started/Getting_Started

Include the VTable library via script tag and initialize a ListTable instance.

```html
<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>
<script>
  const tableInstance = new VTable.ListTable(option);
</script>
```

--------------------------------

### Initialize Table Instance

Source: https://visactor.io/vtable/demo/basic-functionality/width-mode-adaptive

Basic declaration of the table instance variable.

```javascript
let tableInstance;
```

--------------------------------

### Import VTable Gantt

Source: https://visactor.io/vtable/demo/gantt/gantt-interaction-drag-taskBar

Initial import statement for the VTable Gantt module.

```javascript
// import * as VTableGantt from '@visactor/vtable-gantt';
```

--------------------------------

### Configure Gantt Chart with Hour Unit and Custom Icons

Source: https://visactor.io/vtable/demo/gantt/gantt-hour

Defines SVG icons and initializes the Gantt chart instance with specific time scale settings.

```javascript
// import * as VTableGantt from '@visactor/vtable-gantt';
// import { VTable } from '@visactor/vtable-gantt';
let ganttInstance;
const flag = `<svg width="24" height="24" viewBox="0 0 24 24" fill="#e16531" xmlns="http://www.w3.org/2000/svg">
<path d="M5 15h15.415a1.5 1.5 0 0 0 1.303-2.244l-2.434-4.26a1 1 0 0 1 0-.992l2.434-4.26A1.5 1.5 0 0 0 20.415 1H5a2 
2 0 0 0-2 2v19a1 1 0 0 0 2 .003V15Z" fill="#e16531"/>
</svg>
`;
const report = `<svg width="24" height="24" viewBox="0 0 24 24" fill="#FFD43C" xmlns="http://www.w3.org/2000/svg">
<path d="M13.732 2c-.77-1.333-2.694-1.333-3.464 0L.742 19c-.77 1.334.192 3 1.732 3h19.052c1.54 0 2.502-1.666 
1.733-3L13.732 2ZM10.75 8.25a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-.75.75h-1a.75.75 0 0 
1-.75-.75v-6Zm0 8.5a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-.75.75h-1a.75.75 0 0 1-.75-.75v-1Z" 
fill="#FFD43C"/>
</svg>
`;
const flagIcon = {
type: 'svg',
svg: flag,
width: 20,
height: 20,
name: 'flag',
positionType: VTable.TYPES.IconPosition.left,
cursor: 'pointer'
};
const reportIcon = {
type: 'svg',
svg: report,
width: 20,
height: 20,
```

--------------------------------

### Initialize Gantt Chart with Records

Source: https://visactor.io/vtable/demo/gantt/gantt-basic

Defines the data structure for Gantt tasks, including hierarchical children for project-type tasks.

```javascript
// import * as VTableGantt from '@visactor/vtable-gantt';
let ganttInstance;
const records = [
{
id: 1,
title: 'Software Development',
developer: 'liufangfang.jane@bytedance.com',
start: '2024-07-24',
end: '2024-08-15',
progress: 31,
priority: 'P0',
children: [
{
id: 2,
title: 'Project Feature Review',
developer: 'liufangfang.jane@bytedance.com',
start: '2024-07-24',
end: '2024-07-24',
progress: 60,
priority: 'P0'
},
{
id: 3,
title: 'Determine project scope',
developer: 'liufangfang.jane@bytedance.com',
start: '2024/07/25',
end: '2024/07/26',
progress: 100,
priority: 'P1'
},

```

--------------------------------

### Import VTable via NPM

Source: https://visactor.io/vtable/guide/Getting_Started/Getting_Started

Import VTable modules into your JavaScript project.

```javascript
import * as VTable from '@visactor/vtable';

or;

import { ListTable, PivotTable, TYPES, themes } from '@visactor/vtable';
```

--------------------------------

### Configure Table Export Plugin with ignoreIcon

Source: https://visactor.io/vtable/demo/export/table-export-ignore-icon

Initialize the TableExportPlugin with export options, setting ignoreIcon to true to exclude icons from the exported output.

```javascript
// You need to introduce the plug-in package when using it `@visactor/vtable-plugins`
// import * as VTablePlugins from '@visactor/vtable-plugins';
// 正常使用方式 const tableExportPlugin = new VTablePlugins.TableExportPlugin({});
// 官网编辑器中将 VTable.plugins重命名成了VTablePlugins
const tableExportPlugin = new VTablePlugins.TableExportPlugin({
exportExcelOptions: {
downloadFile: true,
fileName: 'fff-excel',
ignoreIcon: true
},
exportCsvOptions: {
downloadFile: true,
fileName: 'fff'
}
});
const data = [
{
类别: '办公用品',
销售额: 129.696,
数量: 2,
利润: -60.704,
children: [
{
类别: '信封', // 对应原子类别
销售额: 125.44,
数量: 2,
利润: 42.56,
children: [
{
类别: '黄色信封',
```

--------------------------------

### Initialize Gantt Data Records

Source: https://visactor.io/vtable/demo/gantt/gantt-dependency-link-line

Defines the initial task records for a Gantt chart, including task IDs, titles, developers, start/end dates, progress, and priority.

```javascript
// import * as VTableGantt from '@visactor/vtable-gantt';
let ganttInstance;
const records = [
{
id: 1,
title: 'Software Development',
developer: 'liufangfang.jane@bytedance.com',
start: '2024-07-15',
end: '2024-07-16',
progress: 31,
priority: 'P0'
},
{
id: 2,
title: 'Scope',
developer: 'liufangfang.jane@bytedance.com',
start: '2024-07-16',
end: '2024-07-17',
progress: 60,
priority: 'P0'
},
{
id: 3,
title: 'Software Development',
developer: 'liufangfang.jane@bytedance.com',
start: '2024-07-18',
end: '2024-07-19',
progress: 90,
priority: 'P0'
},
```

--------------------------------

### Configure Gantt Task Layout Mode

Source: https://visactor.io/vtable/demo/gantt/gantt-taskShowMode

Initializes the Gantt chart data structure with task records. The layout behavior is determined by the tasksShowMode property.

```javascript
// import * as VTableGantt from '@visactor/vtable-gantt';
let ganttInstance;
const records = [
{
id: 0,
name: 'Planning',
start: '2024-11-15',
end: '2024-11-21',
children: [
{
id: 1,
name: 'Michael Smith',
start: '2024-11-15',
end: '2024-11-17',
avatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg'
},
{
id: 2,
name: 'Emily',
start: '2024-11-17',
end: '2024-11-18',
avatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg'
},
{
id: 3,
name: 'Rramily',
start: '2024-11-19',
end: '2024-11-20',
avatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg'
},

```

--------------------------------

### Enable Auto-wrap in VTable

Source: https://visactor.io/vtable/demo/basic-functionality/auto-wrap-text

Configure columns and set heightMode to 'autoHeight' to enable automatic text wrapping.

```javascript
let tableInstance;
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
.then(res => res.json())
.then(data => {
const columns = [
{
field: 'Order ID',
title: 'Order ID'
},
{
field: 'Customer ID',
title: 'Customer ID'
},
{
field: 'Product Name',
title: 'Product Name'
},
{
field: 'Category',
title: 'Category'
},
{
field: 'Sub-Category',
title: 'Sub-Category'
},
{
field: 'Region',
title: 'Region'
},
{
```

--------------------------------

### Configure Multi-level Headers in ListTable

Source: https://visactor.io/vtable/faq/1-How%20to%20implement%20multi-level%20headers%20in%20a%20basic%20table

Use the 'columns' property within a column definition to create nested header structures.

```javascript
{
  field: 'full name',
  title: 'Full name',
  columns: [
    {
      field: 'name',
      title: 'First Name',
      width: 120
    },
    {
      field: 'lastName',
      title: 'Last Name',
      width: 100
    }
  ]
},
```

--------------------------------

### Registering and configuring Gantt chart editors

Source: https://visactor.io/vtable/demo/gantt/gantt-edit

Registers InputEditor and DateInputEditor for use in the Gantt chart task table. Requires the @visactor/vtable-editors package.

```javascript
// import * as VTableGantt from '@visactor/vtable-gantt';
// 使用时需要引入插件包@visactor/vtable-editors
// import * as VTable_editors from '@visactor/vtable-editors';
// 正常使用方式 const input_editor = new VTable.editors.InputEditor();
// 官网编辑器中将 VTable.editors重命名成了VTable_editors
const input_editor = new VTable_editors.InputEditor();
const date_input_editor = new VTable_editors.DateInputEditor();
VTableGantt.VTable.register.editor('input', input_editor);
VTableGantt.VTable.register.editor('date-input', date_input_editor);
let ganttInstance;
const records = [
{
id: 1,
title: 'Software Development',
developer: 'liufangfang.jane@bytedance.com',
start: '2024-07-24',
end: '2024-08-15',
progress: 31,
priority: 'P0',
children: [
{
id: 2,
title: 'Project Feature Review',
developer: 'liufangfang.jane@bytedance.com',
start: '2024-07-24',
end: '2024-07-24',
progress: 60,
priority: 'P0'
},
{
```

--------------------------------

### Define DOM Container for VTable

Source: https://visactor.io/vtable/guide/Getting_Started/Getting_Started

Create a container element with defined dimensions for the table to render into.

```html
<body>
  <div id="tableContainer" style="position: absolute; width: 600px;height:400px;"></div>
</body>
```

--------------------------------

### Configure aggregation rules for pivot table data

Source: https://visactor.io/vtable/changelog/important-release

Use this configuration to specify aggregation rules for indicators, such as setting the aggregation type to NONE to prevent default SUM calculations.

```javascript
records:[{
  region: '中南',
  province: '广西',
  year: '2016',
  quarter: '2016-Q1',
  sales: 'NULL',
  profit: 1546
}],
dataConfig:{
    aggregationRules: [
        {
          indicatorKey: 'sales', 
          field: 'sales', 
          aggregationType: VTable.TYPES.AggregationType.NONE, 
        }
      ]
}
```

--------------------------------

### Configure Edit Cell Trigger

Source: https://visactor.io/vtable/demo/edit/edit-cell

Defines the event types that trigger the edit state for a cell. The default behavior is a double-click.

```typescript
/** Edit triggering time: double click event | single click event | api to manually start editing | keydown event. Default is double click 'doubleclick' */
editCellTrigger?: 'doubleclick' | 'click' | 'api' | 'keydown' | ('doubleclick' | 'click' | 'api' | 'keydown')[];
```
Tokens:
Raw