### Start VTable Plugin Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/en/source-code-details/0-VTable-Engineering.md

Navigate to the 'packages/vtable-plugins' directory and run 'rushx demo' to start the plugin example.

```bash
# 进入 vtable-plugins 包目录
cd packages/vtable-plugins

# 启动示例
rushx demo

```

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

### Start VTable Calendar Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/en/source-code-details/0-VTable-Engineering.md

Navigate to the 'packages/vtable-calendar' directory and run 'rushx demo' to start the calendar component example.

```bash
# 进入 vtable-calendar 包目录
cd packages/vtable-calendar

# 启动示例
rushx demo

```

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

### Start React VTable Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/en/source-code-details/0-VTable-Engineering.md

Navigate to the 'packages/react-vtable' directory and run 'rushx demo' to start the React VTable example.

```bash
# 进入 react-vtable 包目录
cd packages/react-vtable

# 启动示例
rushx demo

```

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

### Start Core VTable Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/en/source-code-details/0-VTable-Engineering.md

Navigate to the 'packages/vtable' directory and run 'rushx demo' to start the core VTable library example.

```bash
# 进入 vtable 包目录
cd packages/vtable
# 启动示例
rushx demo

```

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

### Start Vue VTable Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/en/source-code-details/0-VTable-Engineering.md

Navigate to the 'packages/vue-vtable' directory and run 'rushx demo' to start the Vue VTable example.

```bash
# 进入 vue-vtable 包目录
cd packages/vue-vtable

# 启动示例
rushx demo

```

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

### Start Openinula VTable Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/en/source-code-details/0-VTable-Engineering.md

Navigate to the 'packages/openinula-vtable' directory and run 'rushx demo' to start the Openinula VTable example.

```bash
# 进入 vue-vtable 包目录
cd packages/openinula-vtable

# 启动示例
rushx demo

```

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

### Start VTable Demo

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/en/source-code-details/0-VTable-Engineering.md

Start the local development server for VTable examples by running 'rushx demo' in the root directory.

```bash
# 启动 vtable包目录示例
rushx demo

```

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

### Start VTable Gantt Chart Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/en/source-code-details/0-VTable-Engineering.md

Navigate to the 'packages/vtable-gantt' directory and run 'rushx demo' to start the Gantt chart example.

```bash
# 进入 vtable-gantt 包目录
cd packages/vtable-gantt

# 启动示例
rushx demo

```

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

### Development Environment Setup

Source: https://github.com/visactor/vtable/blob/develop/README.md

Commands to set up the development environment, including installing Rush, cloning the repository, and running local development servers.

```bash
npm i --global @microsoft/rush
git clone git@github.com:VisActor/VTable.git
cd VTable
rush update
cd packages/vtable
rushx demo
rush docs
rush change-all
```

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

### Full VTable Initialization and Keyboard Listener Setup

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/faq/en/51-  How to delete the content of the selected cell using hotkeys in VTable.md

A complete example showing the initialization of a VTable instance with data fetching and the integration of the keyboard event listener for cell deletion.

```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 option = {
      records: data,
      columns: [{ field: 'Order ID', title: 'Order ID' }],
      widthMode: 'standard'
    };
    tableInstance = new VTable.ListTable(document.getElementById('table-container'), option);
    
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Delete' || e.key === 'Backspace') {
        let selectCells = tableInstance.getSelectedCellInfos();
        if (selectCells?.length > 0) {
          deleteSelectRange(selectCells);
        }
      }
    });
  });

function deleteSelectRange(selectCells) {
  for (let i = 0; i < selectCells.length; i++) {
    for (let j = 0; j < selectCells[i].length; j++) {
      tableInstance.changeCellValue(selectCells[i][j].col, selectCells[i][j].row, '');
    }
  }
}
```

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

### Initialize React19 Dependencies

Source: https://github.com/visactor/vtable/blob/develop/packages/react-vtable/docs/react18-react19-demo.md

Run this command within the .react19-deps directory to install specific dependencies for React19 demos. This is required only for the initial setup or after changes to .react19-deps.

```bash
cd .react19-deps
npm ci
```

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

### Get Baseline Info API Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/guide/en/gantt/gantt_baseline.md

Demonstrates how to retrieve baseline start date, end date, and duration using the getBaselineInfoByTaskListIndex method from a Gantt instance. This is useful for calculating schedule variances.

```javascript
const info = ganttInstance.getBaselineInfoByTaskListIndex(0);
// { baselineStartDate, baselineEndDate, baselineDays }
```

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

### Start VTable Documentation Site

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/en/source-code-details/0-VTable-Engineering.md

Launch the VTable documentation site by running 'rush docs' in the project root directory.

```bash
# 在项目根目录执行
rush docs

```

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

### Full Implementation Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/guide/en/plugin/table-carousel-animation.md

A complete example demonstrating data generation, plugin configuration, and table initialization within a browser environment.

```javascript
const generatePersons = count => {
  return Array.from(new Array(count)).map((_, i) => ({
    id: i + 1,
    email1: `${i + 1}@xxx.com`,
    name: `小明${i + 1}`,
    lastName: '王',
    date1: '2022年9月1日',
    tel: '000-0000-0000',
    sex: i % 2 === 0 ? 'boy' : 'girl',
    work: i % 2 === 0 ? 'back-end engineer' + (i + 1) : 'front-end engineer' + (i + 1),
    city: 'beijing'
  }));
};

const animationPlugin = new VTablePlugins.TableCarouselAnimationPlugin({
  rowCount: 2,
  autoPlay: true,
  autoPlayDelay: 1000
});

const option = {
  records: generatePersons(30),
  columns: [
    { field: 'email1', title: 'email', width: 200 },
    { field: 'name', title: 'First Name', width: 200 }
  ],
  plugins: [animationPlugin]
};

const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
```

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

### VTable Get Cell Origin Value Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/api/zh/methods.md

Example showing how to get the original cell value and comparing it with the formatted display value.

```javascript
// 获取第3行第2列的原始数据值
const originValue = tableInstance.getCellOriginValue(1, 2);
console.log('原始数据值:', originValue);

// 对比格式化前后的值
const displayValue = tableInstance.getCellValue(1, 2); // 格式化后的显示值
const originValue = tableInstance.getCellOriginValue(1, 2); // 原始数据值
console.log('显示值:', displayValue, '原始值:', originValue);
```

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

### State Persistence Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/guide/zh/plugin/filter.md

Demonstrates how to get, save, and restore filter states.

```APIDOC
## State Persistence

```javascript
// Get current filter state
const filterState = filterPlugin.getFilterState();

// Save to local storage
localStorage.setItem('tableFilterState', JSON.stringify(filterState));

// Restore from local storage
const savedState = JSON.parse(localStorage.getItem('tableFilterState'));
if (savedState) {
  filterPlugin.setFilterState(savedState);
}
```
```

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

### Start Documentation Development Server

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/en/5-How to Contribute Code.md

Initializes the official website development server for testing documentation and demos locally.

```bash
rush docs
```

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

### Get Record by Cell Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/api/zh/methods.md

Provides examples for retrieving data records from both ListTable and PivotTable instances. Shows how to access specific fields within the retrieved record.

```javascript
// ListTable示例
const record = tableInstance.getRecordByCell(1, 2);
console.log('该单元格的数据记录:', record);
// 输出: { name: "张三", age: 25, department: "技术部" }

// PivotTable示例
const records = tableInstance.getRecordByCell(1, 2);
console.log('该单元格的数据记录数组:', records);
// 输出: [{ product: "手机", sales: 1000 }, { product: "电脑", sales: 500 }]

// 访问记录中的特定字段
const record = tableInstance.getRecordByCell(col, row);
if (record && record.name) {
  console.log('姓名:', record.name);
}
```

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

### Start VTable Demo Page

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/zh/1-Setting-Up-the-Development-Environment.md

Builds and starts the development server for the VTable component's demo page. Navigate to the specified URL in your browser to view.

```bash
# Start vtable's demo page
$ cd ./packages/vtable && rushx demo
```

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

### VTable Get Cell Raw Value Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/api/zh/methods.md

Example demonstrating how to retrieve the raw cell value and comparing it with origin and display values, highlighting its use for nested data.

```javascript
// 获取第3行第2列的最原始数据值
const rawValue = tableInstance.getCellRawValue(1, 2);
console.log('最原始数据值:', rawValue);

// 三种值获取方式的对比
const displayValue = tableInstance.getCellValue(1, 2); // 格式化显示值: "$1,234.56"
const originValue = tableInstance.getCellOriginValue(1, 2); // 原始数据值: 1234.56
const rawValue = tableInstance.getCellRawValue(1, 2); // 最原始值: { price: 1234.56, currency: "USD" }
```

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

### Start Documentation Site Development Server

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/zh/5-How to Contribute Code.md

Execute this command in the outer directory to start the official website's development server for updating documentation and demos.

```bash
# Comment: Start the official website page in the outer directory. start site development server, execute in file path: ./
$ rush docs
```

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

### VTable Get Cell Value Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/api/zh/methods.md

Example demonstrating how to retrieve the formatted display value of a specific cell and how to use `skipCustomMerge` within a custom merge cell function.

```javascript
// 获取第3行第2列的单元格显示值
const cellValue = tableInstance.getCellValue(1, 2);
console.log('单元格显示值:', cellValue);

// 在自定义合并单元格函数中使用
function customMergeCell(col, row) {
  const value = tableInstance.getCellValue(col, row, true); // 必须传true
  // ...自定义合并逻辑
}
```

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

### Start Local Documentation Site

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/zh/1-Setting-Up-the-Development-Environment.md

Builds and serves the local documentation website for VTable. This allows you to preview documentation changes.

```bash
$ rush docs
```

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

### GET /table_type/Pivot_table/pivot_table_multi_tree

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/demo/en/table-type/pivot-table-multi-tree.md

Configuration guide for implementing a multi-column tree display in a VTable pivot table.

```APIDOC
## GET /table_type/Pivot_table/pivot_table_multi_tree

### Description
Configures the pivot table to display multiple columns in a tree structure. This requires specific data structures for rowTree, columnTree, and extensionRows.

### Method
GET

### Endpoint
/table_type/Pivot_table/pivot_table_multi_tree

### Parameters
#### Request Body
- **rowHierarchyType** (string) - Required - Set to 'tree' to enable hierarchical tree presentation.
- **extensionRows** (Array<IExtensionRowDefine>) - Required - Defines the extension row headers used when rowHierarchyType is set to 'tree'.

### Request Example
{
  "rowHierarchyType": "tree",
  "extensionRows": [
    { "field": "category", "title": "Category" }
  ]
}

### Response
#### Success Response (200)
- **status** (string) - Success confirmation of table configuration.

#### Response Example
{
  "status": "success",
  "message": "Pivot table configured for multi-tree display."
}
```

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

### Complete VTable-Sheet Data Filtering Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/guide/zh/sheet/filter.md

A comprehensive example demonstrating the initialization of VTableSheet with data and enabling the global filtering feature. This setup allows users to interact with the filter icons on the table headers.

```javascript
// 引入VTableSheet
// import * as VTableSheet from '@visactor/vtable-sheet';
// 容器
const container = document.getElementById(CONTAINER_ID);
// 创建产品数据表
const productData = [
  ['产品', '价格', '库存', '销量', '评分'],
  ['笔记本电脑', 5999, 120, 78, 4.5],
  ['智能手机', 3999, 200, 156, 4.2],
  ['平板电脑', 2599, 150, 92, 4.0],
  ['耳机', 899, 300, 210, 4.7],
  ['鼠标', 129, 500, 310, 4.3],
  ['键盘', 239, 400, 180, 4.4],
  ['显示器', 1299, 100, 60, 4.6],
  ['摄像头', 399, 200, 85, 3.9],
  ['音箱', 599, 150, 75, 4.1],
  ['移动硬盘', 499, 250, 120, 4.2],
  ['充电器', 99, 600, 350, 4.0],
  ['手表', 1999, 80, 45, 4.8],
  ['路由器', 349, 180, 95, 4.3],
  ['打印机', 799, 70, 30, 4.0],
  ['投影仪', 3499, 40, 15, 4.5]
];

// 初始化VTableSheet
const sheet = new VTableSheet.VTableSheet(container, {
  sheets: [
    {
      sheetTitle: "产品数据",
      sheetKey: "products",
      columns: [
        { title: '产品', field: 'product' },
        { title: '价格', field: 'price' },
        { title: '库存', field: 'stock' },
        { title: '销量', field: 'sales' },
        { title: '评分', field: 'rating' }
      ], 
      data: productData,
      filter: true  //s 启用过滤功能
    }
  ]
});
window['sheetInstance'] = sheet;
```

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

### Start React-VTable Demo Page

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/zh/1-Setting-Up-the-Development-Environment.md

Builds and starts the development server for the react-vtable component's demo page. This is used for testing React integration.

```bash
# Start react-vtable's demo page
$ cd ./packages/react-vtable && rushx start
```

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

### GET getBaselineInfoByTaskListIndex

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/guide/en/gantt/gantt_baseline.md

Retrieves the baseline start date, end date, and duration for a specific task identified by its list index.

```APIDOC
## GET getBaselineInfoByTaskListIndex

### Description
Retrieves the baseline information for a specific task in the Gantt chart based on its index in the task list.

### Method
GET

### Endpoint
ganttInstance.getBaselineInfoByTaskListIndex(index, subIndex?)

### Parameters
#### Path Parameters
- **index** (number) - Required - The index of the task in the task list.
- **subIndex** (number) - Optional - The sub-index if the task is part of a nested structure.

### Response
#### Success Response (200)
- **baselineStartDate** (string) - The start date of the baseline.
- **baselineEndDate** (string) - The end date of the baseline.
- **baselineDays** (number) - The total duration of the baseline in days.

### Response Example
{
  "baselineStartDate": "2024-07-01",
  "baselineEndDate": "2024-07-10",
  "baselineDays": 9
}
```

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

### Listening to Table Events

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/api/en/GanttAPI.md

Provides an example of how to get the task list table instance and attach an event listener for cell clicks.

```APIDOC
## Listening to Table Events

### Description
This section demonstrates how to obtain the `taskListTableInstance` from a Gantt chart instance and attach event listeners to it, such as the `click_cell` event.

### Method
JavaScript

### Endpoint
N/A (Client-side JavaScript)

### Parameters
None

### Request Example
```javascript
  const tableInstance = new Gantt(containerDom, options);
  tableInstance.taskListTableInstance.on('click_cell', (args) => {});
```

### Response
N/A
```

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

### Live Demo Implementation

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/guide/en/plugin/row-column-series.md

A practical example of using the plugins within a VTable instance, demonstrating the integration pattern for live environments.

```javascript
const columnSeries = new VTablePlugins.ColumnSeriesPlugin({
  columnCount: 100,
  generateColumnField: (index) => `field_${index}`
});

const rowSeries = new VTablePlugins.RowSeriesPlugin({
  rowCount: 100,
  fillRowRecord: (index) => ([])
});

const option = {
  records: [],
  plugins: [columnSeries, rowSeries]
};

const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
```

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

### Get Cell Style Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/api/zh/methods.md

Demonstrates how to retrieve and use the cell style object. Useful for conditional formatting or inspecting cell appearance.

```javascript
// 获取第3行第2列的单元格样式
const cellStyle = tableInstance.getCellStyle(1, 2);
console.log('单元格样式:', cellStyle);

// 根据样式做条件判断
const style = tableInstance.getCellStyle(col, row);
if (style.bgColor === '#ff0000') {
  console.log('该单元格背景为红色');
}
```

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

### VTable Project Setup and Build Commands (Shell)

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/guide/en/Contribution_Guide.md

This snippet provides essential shell commands for setting up the VTable development environment, updating dependencies, building packages, running demos, and managing documentation.

```shell
# install dependencies
$ rush update
# enter vtable package
$ cd packages/vtable
# execute in file path: ./packages/vtable
$ rushx demo
# build all packages
$ rush build
# build vtable package . execute in file path: ./packages/vtable
$ rushx build
# start site development server, execute in file path: ./ 
$ rush docs
# after execut git commit, please run the following command to update the change log. Please execute in file path: ./ 
$ rush change-all
```

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

### Setting up and Running Demos with Rush

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/guide/en/Contribution_Guide.md

This section provides commands for setting up and running demo tasks within the VTable project using Rush. It includes global installation of Rush, updating dependencies, and previewing demo content locally.

```shell
npm i --global @microsoft/rush
```

```shell
rush update
```

```shell
rush docs
```

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

### Get Baseline Info API

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/guide/zh/gantt/gantt_baseline.md

Use this API to retrieve baseline start date, end date, and duration for a specific task in the Gantt chart.

```javascript
const info = ganttInstance.getBaselineInfoByTaskListIndex(0);
// { baselineStartDate, baselineEndDate, baselineDays }
```

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

### Update Dependencies and Preview Docs

Source: https://github.com/visactor/vtable/blob/develop/CONTRIBUTING.zh-CN.md

Run 'rush update' to install all project dependencies and then 'rush docs' to preview the documentation locally.

```bash
rush update
```

```bash
rush docs
```

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

### Node Server-Side Rendering Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/guide/zh/Developer_Ecology/node.md

This example demonstrates how to initialize VTable in a Node.js environment for server-side rendering. It requires setting the 'mode' to 'node' and providing necessary parameters for canvas creation, image data, and image loading via 'modeParams'. Ensure you have 'canvas' and '@resvg/resvg-js' installed.

```typescript
const fs = require('fs');

const VTable = require('@visactor/vtable');
const Canvas = require('canvas');
const {Resvg} = require('@resvg/resvg-js');

const generatePersons = (count) => {
  return Array.from(new Array(count)).map((_, i) => ({
    id: i + 1,
    email1: `${i + 1}@xxx.com`,
    name: `小明${i + 1}`,
    lastName: '王',
    date1: '2022年9月1日',
    tel: '000-0000-0000',
    sex: i % 2 === 0 ? 'boy' : 'girl',
    work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
    city: 'beijing'
  }));
};

const records = generatePersons(20);
const columns: VTable.ColumnsDefine = [
  {
    field: 'id',
    title: 'ID ff',
    width: '1%',
    minWidth: 200,
    sort: true
  },
  {
    field: 'email1',
    title: 'email',
    width: 200,
    sort: true
  },
  {
    title: 'full name',
    columns: [
      {
        field: 'name',
        title: 'First Name',
        width: 200
      },
      {
        field: 'name',
        title: 'Last Name',
        width: 200
      }
    ]
  },
  {
    field: 'date1',
    title: 'birthday',
    width: 200
  },
  {
    field: 'sex',
    title: 'sex',
    width: 100
  },
  {
    field: 'tel',
    title: 'telephone',
    width: 150
  },
  {
    field: 'work',
    title: 'job',
    width: 200
  },
  {
    field: 'city',
    title: 'city',
    width: 150
  }
];
const option: VTable.ListTableConstructorOptions = {
  records,
  columns,

  // 声明使用的渲染环境以及传染对应的渲染环境参数
  pixelRatio: 2, // dpr
  mode: 'node',
  modeParams: {
    createCanvas: canvas.createCanvas,
    createImageData: canvas.createImageData,
    loadImage: canvas.loadImage,
    Resvg: Resvg // for svg
  },
  canvasWidth: 1000,
  canvasHeight: 700
};
const tableInstance = new VTable.ListTable(option);


// 导出图片
const buffer = tableInstance.getImageBuffer();
fs.writeFileSync(`./list-table.png`, buffer);
```

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

### VTable Initialization with Columns and Options

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/demo/en/custom-render/custom-icon.md

Demonstrates the setup of a VTable instance, including defining column configurations, data records, and various table options like width modes and frozen columns. It also shows how to attach the table to a DOM element.

```javascript
const CONTAINER_ID = 'vtable';

const data = [
  { 'Category': 'Food', 'Sub-Category': 'Fruit', 'Region': 'North', 'City': 'New York', 'null': 'text icon', '2234': '123' },
  { 'Category': 'Food', 'Sub-Category': 'Vegetable', 'Region': 'South', 'City': 'Los Angeles', 'null': 'text icon', '2234': '456' },
  { 'Category': 'Drink', 'Sub-Category': 'Juice', 'Region': 'East', 'City': 'Chicago', 'null': 'text icon', '2234': '789' },
  { 'Category': 'Drink', 'Sub-Category': 'Soda', 'Region': 'West', 'City': 'Houston', 'null': 'text icon', '2234': '101' }
];

const columns = [
  {
    field: 'svg',
    title: 'svg',
    width: 100,
    header: {
      icon: [
        {
          name: 'order',
          type: 'svg',
          svg: 'svg:"<svg t=\"1706853751091\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"4226\" width=\"200\" height=\"200\"><path d=\"M533.333333 85.333333c-247.426667 0-448 200.573333-448 448s200.573333 448 448 448 448-200.573333 448-448-200.573333-448-448-448z m0 853.333334c-223.86 0-405.333333-181.473333-405.333333-405.333334s181.473333-405.333333 405.333333-405.333333 405.333333 181.473333 405.333334 405.333333-181.473333 405.333333-405.333334 405.333334z m21.333334-192a21.333333 21.333333 0 1 1-21.333334-21.333334 21.333333 21.333333 0 0 1 21.333334 21.333334z m-21.333334-85.333334a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 6.246667-15.086666c13.1-13.093333 28.9-24.886667 45.633333-37.333334C601.333333 516.966667 640 488.1 640 448c0-58.813333-47.853333-106.666667-106.666667-106.666667s-106.666667 47.853333-106.666666 106.666667a21.333333 21.333333 0 0 1-42.666667 0 149.333333 149.333333 0 0 1 298.666667 0c0 28.113333-10.6 53.873333-32.406667 78.74-17.593333 20.046667-39.593333 36.466667-60.873333 52.34-12.666667 9.453333-24.76 18.473333-34.72 27.433333V640a21.333333 21.333333 0 0 1-21.333334 21.333333z" fill=\"#5C5C66\" p-id=\"4227\"></path></svg>"
        }
      ]
    },
    tooltip: {
      style: { arrowMark: true },
      title: 'this is product name',
      placement: VTable.TYPES.Placement.right
    }
  },
  {
    field: 'Category',
    title: 'Category',
    width: 'auto'
  },
  {
    field: 'Sub-Category',
    title: 'Sub-Category',
    width: 'auto'
  },
  {
    field: 'Region',
    title: 'Region',
    width: 'auto'
  },
  {
    field: 'City',
    title: 'City',
    width: 'auto'
  },
  {
    field: 'null',
    title: 'text icon',
    width: 'auto',
    icon: ['text-button', 'text-button1']
  },
  {
    field: '2234',
    title: 'single line',
    width: 120,
    icon: [
      {
        name: 'edit',
        type: 'svg',
        marginLeft: 10,
        positionType: VTable.TYPES.IconPosition.left,
        width: 20,
        height: 20,
        svg: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/edit.svg',
        tooltip: {
          style: { arrowMark: true },
          title: '编辑',
          placement: VTable.TYPES.Placement.right
        }
      },
      {
        name: 'delete',
        type: 'svg',
        marginLeft: 20,
        positionType: VTable.TYPES.IconPosition.left,
        width: 20,
        height: 20,
        svg: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/delete.svg',
        tooltip: {
          style: { arrowMark: true },
          title: '删除',
          placement: VTable.TYPES.Placement.right
        }
      }
    ]
  }
];

const option = {
  records: data,
  columns,
  widthMode: 'standard',
  allowFrozenColCount: 3,
  frozenColCount: 1,
  rightFrozenColCount: 2
};

let tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
window['tableInstance'] = tableInstance;
```

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

### Get Visible Row Range in Table Body

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/api/zh/methods.md

Retrieves the start and end row indices for the currently visible rows within the table's body.

```typescript
/** 获取表格body部分的显示行号范围 */
  getBodyVisibleRowRange: () => { rowStart: number; rowEnd: number };
```

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

### Install Project Dependencies

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/en/source-code-details/0-VTable-Engineering.md

Install all project dependencies by running 'rush update' in the VTable root directory.

```bash
# 在 VTable 根目录下执行以下命令，安装所有依赖
rush update

```

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

### Get Cell Merged Range

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/api/en/methods.md

Retrieves the merged range of a cell, defined by its start and end cell addresses. This is useful for understanding how cells are combined in the table.

```typescript
/**
   * @param {number} col column index
   * @param {number} row row index
   * @returns {Rect}
*/
getCellRange(col: number, row: number): CellRange

export interface CellRange {
  start: CellAddress;
  end: CellAddress;
}

export interface CellAddress {
  col: number;
  row: number;
}
```

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

### VTable Initialization with Tooltip Configuration

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/faq/en/54- Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content.md

Example demonstrating how to initialize a VTable with specific tooltip configurations for overflowing text.

```APIDOC
## VTable Initialization Example

### Description
This example shows how to initialize a VTable with data and configure its tooltip to display overflowing text with a delay for selection and size constraints.

### Method
JavaScript (VTable API)

### Endpoint
N/A (Client-side initialization)

### Parameters
See the `VTable Tooltip Configuration API` for detailed parameter descriptions.

### Request Example
```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', width: 'auto' },
      { field: 'Customer ID', title: 'Customer ID', width: 'auto' },
      { field: 'Product Name', title: 'Product Name', width: '200' },
      { field: 'Category', title: 'Category', width: 'auto' },
      { field: 'Sub-Category', title: 'Sub-Category', width: 'auto' },
      { field: 'Region', title: 'Region', width: 'auto' },
      { field: 'City', title: 'City', width: 'auto' },
      { field: 'Order Date', title: 'Order Date', width: 'auto' },
      { field: 'Quantity', title: 'Quantity', width: 'auto' },
      { field: 'Sales', title: 'Sales', width: 'auto' },
      { field: 'Profit', title: 'Profit', width: 'auto' }
    ];

    const option = {
      records: data,
      columns,
      widthMode: 'standard',
      tooltip: {
        renderMode: 'html',
        isShowOverflowTextTooltip: true,
        overflowTextTooltipDisappearDelay: 1000
      },
      theme: {
          tooltipStyle: {
              maxWidth: 200,
              maxHeight: 60
          }
      }
    };
    tableInstance = new VTable.ListTable(document.getElementById('vtable-container'), option);
    window['tableInstance'] = tableInstance;
  });
```

### Response
N/A (This is a client-side initialization example)

### Error Handling
Ensure the `CONTAINER_ID` is a valid DOM element ID where the VTable will be rendered.
```

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

### Rebuild and Start VTable Demo

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/contributing/en/source-code-details/0-VTable-Engineering.md

Commands to rebuild the project and then start the VTable demo. Useful for troubleshooting demo startup failures.

```bash
# 重新构建并启动示例
rush build
cd packages/vtable
rushx demo

```

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

### Get Visible Column Range in Table Body

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/api/zh/methods.md

Retrieves the start and end column indices for the currently visible columns within the table's body.

```typescript
/** 获取表格body部分的显示列号范围 */
  getBodyVisibleColRange: () => { colStart: number; colEnd: number };
```

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

### VTable Initialization with PasteAddRowColumnPlugin

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/guide/zh/plugin/paste-add-row-column.md

Complete VTable initialization example including the PasteAddRowColumnPlugin. This setup requires `keyboardOptions` with `copySelected` and `pasteValueToCell` set to `true` for the plugin to work.

```javascript
const input_editor = new VTable_editors.InputEditor();
VTable.register.editor('input-editor', input_editor);
const generatePersons = count => {
  return Array.from(new Array(count)).map((_, i) => ({
    id: i + 1,
    email1: `${i + 1}@xxx.com`,
    name: `小明${i + 1}`,
    lastName: '王',
    date1: '2022年9月1日',
    tel: '000-0000-0000',
    sex: i % 2 === 0 ? 'boy' : 'girl',
    work: i % 2 === 0 ? 'back-end engineer' + (i + 1) : 'front-end engineer' + (i + 1),
    city: 'beijing'
  }));
};
const pasteAddRowColumnPlugin = new VTablePlugins.PasteAddRowColumnPlugin();
const option = {
  records: generatePersons(20),
  rowSeriesNumber: {},
  columns: [
    {
      field: 'email1',
      title: 'email',
      width: 200
    },
    {
      field: 'name',
      title: 'First Name',
      width: 200
    },
    {
      field: 'date1',
      title: 'birthday',
      width: 200
    },
    {
      field: 'sex',
      title: 'sex',
      width: 100
    }
  ],
  editor: 'input-editor',
  editCellTrigger: 'doubleclick', // 编辑单元格触发方式
  keyboardOptions: {
    copySelected: true,
    pasteValueToCell: true
  },
  plugins: [pasteAddRowColumnPlugin]
};
const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
window.tableInstance = tableInstance;
```

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

### Usage Example

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/guide/en/plugin/header-highlight.md

Example demonstrating how to integrate and use the HighlightHeaderWhenSelectCellPlugin in a VTable instance.

```APIDOC
## Usage Example

This example shows how to initialize VTable with the `HighlightHeaderWhenSelectCellPlugin` enabled.

### JavaScript Code

```javascript
// Ensure you have imported VTable and VTablePlugins
// import * as VTable from '@visactor/vtable';
// import * as VTablePlugins from '@visactor/vtable-plugins';

const generatePersons = count => {
  return Array.from(new Array(count)).map((_, i) => ({
    id: i + 1,
    email1: `${i + 1}@xxx.com`,
    name: `小明${i + 1}`,
    lastName: '王',
    date1: '2022年9月1日',
    tel: '000-0000-0000',
    sex: i % 2 === 0 ? 'boy' : 'girl',
    work: i % 2 === 0 ? 'back-end engineer' + (i + 1) : 'front-end engineer' + (i + 1),
    city: 'beijing',
    image:
      '<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34 10V4H8V38L14 35" stroke="#f5a623" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 44V10H40V44L27 37.7273L14 44Z" fill="#f5a623" stroke="#f5a623" stroke-width="1" stroke-linejoin="round"/></svg>'
  }));
};

// Initialize the plugin with desired options
const highlightPlugin = new VTablePlugins.HighlightHeaderWhenSelectCellPlugin({
  colHighlight: true,
  rowHighlight: true
});

const option = {
  records: generatePersons(20),
  rowSeriesNumber: {},
  columns: [
    {
      field: 'email1',
      title: 'email',
      width: 200,
      sort: true,
      style: {
        underline: true,
        underlineDash: [2, 0],
        underlineOffset: 3
      }
    },
    {
      field: 'name',
      title: 'First Name',
      width: 200
    },
    {
      field: 'name',
      title: 'Last Name',
      width: 200
    },
    {
      field: 'date1',
      title: 'birthday',
      width: 200
    },
    {
      field: 'sex',
      title: 'sex',
      width: 100
    }
  ],
  // Add the plugin to the table options
  plugins: [highlightPlugin]
};

// Instantiate the VTable
const tableInstance = new VTable.ListTable( document.getElementById(CONTAINER_ID), option);
window.tableInstance = tableInstance;
```

### Further Information

For more details and interactive examples, refer to the [demo](..\/..\/demo/interaction/head-highlight).
```

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

### Full Example: VTable with AutoFillPlugin and Data Generation

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/guide/zh/plugin/auto-fill.md

A comprehensive example demonstrating VTable initialization with AutoFillPlugin, including data generation for various column types like dates, numbers, and text.

```typescript
//  import * as VTable from '@visactor/vtable';
// 使用时需要引入插件包@visactor/vtable-plugins
// import * as VTablePlugins from '@visactor/vtable-plugins';
// 生成示例数据
const generateTestData = count => {
  return Array.from(new Array(count)).map((_, i) => {
    return i <= 2
      ? {
          id: i + 1,
          name: `第${i + 1}章`,
          arithmetic: i * 100 + 100,
          geometric: Math.pow(2, i),
          date: new Date(2024, 0, i + 27).toLocaleDateString(),
          week: i < 1 ? `星期一` : null,
          chineseNumber: i < 1 ? `一` : null,
          otherDirection_1: null,
          otherDirection_2: null
        }
      : {};
  });
};
const records = generateTestData(20);

const columns = [
  {
    field: 'id',
    title: 'ID',
    width: 80
  },
  {
    field: 'name',
    title: '章节',
    width: 150
  },
  {
    field: 'arithmetic',
    title: '等差',
    width: 120
  },
  {
    field: 'geometric',
    title: '等比',
    width: 120
  },
  {
    field: 'date',
    title: '日期',
    width: 120
  },
  {
    field: 'week',
    title: '星期',
    width: 120
  },
  {
    field: 'chineseNumber',
    title: '中文数字',
    width: 120
  },
  {
    field: 'otherDirection_1',
    title: '向其他方向拖拽',
    width: 150
  },
  {
    field: 'otherDirection_2',
    title: '',
    width: 120
  }
];

// 创建自动填充插件
const autoFillPlugin = new VTablePlugins.AutoFillPlugin();

// 创建表格配置
const option = {
  columns,
  records,
  excelOptions: {
    fillHandle: true // 启用填充炳功能
  },
  plugins: [autoFillPlugin]
};

// 创建表格实例
const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
```

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

### VTable Full Example: Fetch Data and Get Dimensions

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/faq/zh/29-How to obtain the total number of rows in a table and the actual height of the content.md

This example demonstrates fetching data from a remote JSON file, initializing a VTable ListTable, and then logging its column count, row count, total row height, and total column width. Ensure the `CONTAINER_ID` is defined in your HTML.

```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",
        "width": "auto"
    },
    {
        "field": "Customer ID",
        "title": "Customer ID",
        "width": "auto"
    },
    {
        "field": "Product Name",
        "title": "Product Name",
        "width": "auto"
    },
    {
        "field": "Category",
        "title": "Category",
        "width": "auto"
    },
    {
        "field": "Sub-Category",
        "title": "Sub-Category",
        "width": "auto"
    },
    {
        "field": "Region",
        "title": "Region",
        "width": "auto"
    },
    {
        "field": "City",
        "title": "City",
        "width": "auto"
    },
    {
        "field": "Order Date",
        "title": "Order Date",
        "width": "auto"
    },
    {
        "field": "Quantity",
        "title": "Quantity",
        "width": "auto"
    },
    {
        "field": "Sales",
        "title": "Sales",
        "width": "auto"
    },
    {
        "field": "Profit",
        "title": "Profit",
        "width": "auto"
    }
];

const option = {
  records:data,
  columns,
  widthMode:'standard'
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;

console.log(tableInstance.colCount);
console.log(tableInstance.rowCount);
console.log(tableInstance.getAllRowsHeight());
console.log(tableInstance.getAllColsWidth());
    })
```

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

### Get Visible Cell Range in Table Body

Source: https://github.com/visactor/vtable/blob/develop/docs/assets/api/zh/methods.md

Retrieves the start and end row and column indices for the currently visible cells within the table's body.

```typescript
/** 获取表格body部分的显示单元格范围 */
  getBodyVisibleCellRange: () => { rowStart: number; colStart: number; rowEnd: number; colEnd: number };
```