From e6d741a6b11c6502d5d60da83a565d1470c244ff Mon Sep 17 00:00:00 2001
From: xuanhun <717532978@qq.com>
Date: Wed, 25 Sep 2024 11:12:11 +0800
Subject: [PATCH] docs: add faq,from 23 to 60
---
...-How to edit a table's cell with VTable.md | 53 +++
...oblem: How to display table row numbers.md | 66 ++++
...gate values of the VTable's pivot table.md | 40 +++
... copy, paste and delete cells in VTable.md | 97 ++++++
...d collapsed state of the tree structure.md | 131 ++++++++
...Excel fill handle to batch modify cells.md | 105 ++++++
...le and the actual height of the content.md | 126 ++++++++
...with the truncation of dots at the edge.md | 57 ++++
...ell to show or hide part of the content.md | 221 +++++++++++++
...crollbar DOM container boundary display.md | 194 +++++++++++
...drag-and-drop adjustment of line-height.md | 53 +++
...sue: How to implement text type buttons.md | 216 +++++++++++++
...he border style around cells separately.md | 130 ++++++++
...n the content width of the table header.md | 78 +++++
...e are not displayed when it is scrolled.md | 58 ++++
...component be drag-and-drop to swap rows.md | 67 ++++
...ed on the data items of the current row.md | 68 ++++
...ferent hover colors for different cells.md | 99 ++++++
...cent sparklines in the VTable component.md | 131 ++++++++
...dd column total information to the list.md | 65 ++++
... area selection and cancellation events.md | 73 +++++
...column to not be selected for operation.md | 83 +++++
...to manually control the tooltip display.md | 75 +++++
...e: How to set multi-level table headers.md | 76 +++++
...custom rendering with VTable components.md | 160 +++++++++
... indicator results in a separate column.md | 170 ++++++++++
...when using VTable pivot table component.md | 93 ++++++
...ng the Checkbox in the VTable component.md | 43 +++
...e selected cell using hotkeys in VTable.md | 157 +++++++++
...the editor and whether it can be reused.md | 54 ++++
...ing editable cells in VTable components.md | 218 +++++++++++++
...crolling effect for overflowing content.md | 160 +++++++++
... configuration fails- How to solve this.md | 127 ++++++++
..., similar to the DOM's mouseenter event.md | 231 +++++++++++++
...ext style of the VTable table component.md | 105 ++++++
...ghlighted cells in the VTable component.md | 99 ++++++
...progressively loads sub-nodes in a list.md | 65 ++++
...ssively loads sub-nodes in pivot tables.md | 65 ++++
docs/assets/faq/menu.json | 304 ++++++++++++++++++
...-How to edit a table's cell with VTable.md | 52 +++
...oblem: How to display table row numbers.md | 67 ++++
...gate values of the VTable's pivot table.md | 44 +++
... copy, paste and delete cells in VTable.md | 97 ++++++
...d collapsed state of the tree structure.md | 131 ++++++++
...Excel fill handle to batch modify cells.md | 108 +++++++
...le and the actual height of the content.md | 124 +++++++
...with the truncation of dots at the edge.md | 56 ++++
...ell to show or hide part of the content.md | 221 +++++++++++++
...crollbar DOM container boundary display.md | 194 +++++++++++
...drag-and-drop adjustment of line-height.md | 53 +++
...sue: How to implement text type buttons.md | 216 +++++++++++++
...he border style around cells separately.md | 130 ++++++++
...n the content width of the table header.md | 78 +++++
...e are not displayed when it is scrolled.md | 59 ++++
...component be drag-and-drop to swap rows.md | 67 ++++
...ed on the data items of the current row.md | 70 ++++
...ferent hover colors for different cells.md | 99 ++++++
...cent sparklines in the VTable component.md | 131 ++++++++
...dd column total information to the list.md | 65 ++++
... area selection and cancellation events.md | 73 +++++
...column to not be selected for operation.md | 83 +++++
...to manually control the tooltip display.md | 75 +++++
...e: How to set multi-level table headers.md | 76 +++++
...custom rendering with VTable components.md | 160 +++++++++
... indicator results in a separate column.md | 170 ++++++++++
...when using VTable pivot table component.md | 93 ++++++
...ng the Checkbox in the VTable component.md | 43 +++
...e selected cell using hotkeys in VTable.md | 156 +++++++++
...the editor and whether it can be reused.md | 54 ++++
...ing editable cells in VTable components.md | 218 +++++++++++++
...crolling effect for overflowing content.md | 160 +++++++++
... configuration fails- How to solve this.md | 128 ++++++++
..., similar to the DOM's mouseenter event.md | 231 +++++++++++++
...ext style of the VTable table component.md | 105 ++++++
...ghlighted cells in the VTable component.md | 100 ++++++
...progressively loads sub-nodes in a list.md | 65 ++++
...ssively loads sub-nodes in pivot tables.md | 65 ++++
77 files changed, 8530 insertions(+)
create mode 100644 docs/assets/faq/en/23-How to edit a table's cell with VTable.md
create mode 100644 docs/assets/faq/en/24-VTable usage problem: How to display table row numbers.md
create mode 100644 docs/assets/faq/en/25-How to automatically calculate and display the aggregate values of the VTable's pivot table.md
create mode 100644 docs/assets/faq/en/26- How to use the right-click menu to copy, paste and delete cells in VTable.md
create mode 100644 docs/assets/faq/en/27-VTable usage problem: How to set the expanded and collapsed state of the tree structure.md
create mode 100644 docs/assets/faq/en/28- How can VTable implement a capability similar to the Excel fill handle to batch modify cells.md
create mode 100644 docs/assets/faq/en/29- VTable usage issue: How to obtain the total number of rows in a table and the actual height of the content.md
create mode 100644 docs/assets/faq/en/30- In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge.md
create mode 100644 docs/assets/faq/en/31-VTable usage issue: How to implement hover to a cell to show or hide part of the content.md
create mode 100644 docs/assets/faq/en/32-VTable usage issue: How to implement scrollbar DOM container boundary display.md
create mode 100644 docs/assets/faq/en/33-VTable usage issue: How to implement drag-and-drop adjustment of line-height.md
create mode 100644 docs/assets/faq/en/34-VTable usage issue: How to implement text type buttons.md
create mode 100644 docs/assets/faq/en/35-VTable usage issue: How to set the border style around cells separately.md
create mode 100644 docs/assets/faq/en/36-VTable usage issue: How to make the table automatically calculate column width based only on the content width of the table header.md
create mode 100644 docs/assets/faq/en/37- What should I do if the bottom and right borders of VTable are not displayed when it is scrolled.md
create mode 100644 docs/assets/faq/en/38- Can the VTable component be drag-and-drop to swap rows.md
create mode 100644 docs/assets/faq/en/39- How to dynamically set the min and max values of the progressBar type in the VTable component based on the data items of the current row.md
create mode 100644 docs/assets/faq/en/40- Can the VTable component achieve different hover colors for different cells.md
create mode 100644 docs/assets/faq/en/41- How can I increase the gap between adjacent sparklines in the VTable component.md
create mode 100644 docs/assets/faq/en/42-VTable usage issue: How to add column total information to the list.md
create mode 100644 docs/assets/faq/en/43-VTable usage issue: How to listen to table area selection and cancellation events.md
create mode 100644 docs/assets/faq/en/44-VTable usage issue: How to set only one column to not be selected for operation.md
create mode 100644 docs/assets/faq/en/45-VTable usage issue: How to manually control the tooltip display.md
create mode 100644 docs/assets/faq/en/46-VTable usage issue: How to set multi-level table headers.md
create mode 100644 docs/assets/faq/en/47- How to make text automatically omitted based on cell width when using custom rendering with VTable components.md
create mode 100644 docs/assets/faq/en/48- When using the pivot table of the VTable component, how to display the calculated indicator results in a separate column.md
create mode 100644 docs/assets/faq/en/49- How to implement dimension drill-down function when using VTable pivot table component.md
create mode 100644 docs/assets/faq/en/50- How to manually update the state when using the Checkbox in the VTable component.md
create mode 100644 docs/assets/faq/en/51- How to delete the content of the selected cell using hotkeys in VTable.md
create mode 100644 docs/assets/faq/en/52- Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused.md
create mode 100644 docs/assets/faq/en/53- How to control the timing of exiting edit mode after implementing editable cells in VTable components.md
create mode 100644 docs/assets/faq/en/54- Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content.md
create mode 100644 docs/assets/faq/en/55- After custom rendering in the column configuration of the VTable component, the icon configuration fails- How to solve this.md
create mode 100644 docs/assets/faq/en/56-VTable table component, using customLayout to customize the drawing elements, how to listen for mouse hover events on the elements, similar to the DOM's mouseenter event.md
create mode 100644 docs/assets/faq/en/57-How to set the text style of the VTable table component.md
create mode 100644 docs/assets/faq/en/58-How to customize highlighted cells in the VTable component.md
create mode 100644 docs/assets/faq/en/59-How the VTable component progressively loads sub-nodes in a list.md
create mode 100644 docs/assets/faq/en/60-How the VTable component progressively loads sub-nodes in pivot tables.md
create mode 100644 docs/assets/faq/zh/23-How to edit a table's cell with VTable.md
create mode 100644 docs/assets/faq/zh/24-VTable usage problem: How to display table row numbers.md
create mode 100644 docs/assets/faq/zh/25-How to automatically calculate and display the aggregate values of the VTable's pivot table.md
create mode 100644 docs/assets/faq/zh/26- How to use the right-click menu to copy, paste and delete cells in VTable.md
create mode 100644 docs/assets/faq/zh/27-VTable usage problem: How to set the expanded and collapsed state of the tree structure.md
create mode 100644 docs/assets/faq/zh/28- How can VTable implement a capability similar to the Excel fill handle to batch modify cells.md
create mode 100644 docs/assets/faq/zh/29- VTable usage issue: How to obtain the total number of rows in a table and the actual height of the content.md
create mode 100644 docs/assets/faq/zh/30- In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge.md
create mode 100644 docs/assets/faq/zh/31-VTable usage issue: How to implement hover to a cell to show or hide part of the content.md
create mode 100644 docs/assets/faq/zh/32-VTable usage issue: How to implement scrollbar DOM container boundary display.md
create mode 100644 docs/assets/faq/zh/33-VTable usage issue: How to implement drag-and-drop adjustment of line-height.md
create mode 100644 docs/assets/faq/zh/34-VTable usage issue: How to implement text type buttons.md
create mode 100644 docs/assets/faq/zh/35-VTable usage issue: How to set the border style around cells separately.md
create mode 100644 docs/assets/faq/zh/36-VTable usage issue: How to make the table automatically calculate column width based only on the content width of the table header.md
create mode 100644 docs/assets/faq/zh/37- What should I do if the bottom and right borders of VTable are not displayed when it is scrolled.md
create mode 100644 docs/assets/faq/zh/38- Can the VTable component be drag-and-drop to swap rows.md
create mode 100644 docs/assets/faq/zh/39- How to dynamically set the min and max values of the progressBar type in the VTable component based on the data items of the current row.md
create mode 100644 docs/assets/faq/zh/40- Can the VTable component achieve different hover colors for different cells.md
create mode 100644 docs/assets/faq/zh/41- How can I increase the gap between adjacent sparklines in the VTable component.md
create mode 100644 docs/assets/faq/zh/42-VTable usage issue: How to add column total information to the list.md
create mode 100644 docs/assets/faq/zh/43-VTable usage issue: How to listen to table area selection and cancellation events.md
create mode 100644 docs/assets/faq/zh/44-VTable usage issue: How to set only one column to not be selected for operation.md
create mode 100644 docs/assets/faq/zh/45-VTable usage issue: How to manually control the tooltip display.md
create mode 100644 docs/assets/faq/zh/46-VTable usage issue: How to set multi-level table headers.md
create mode 100644 docs/assets/faq/zh/47- How to make text automatically omitted based on cell width when using custom rendering with VTable components.md
create mode 100644 docs/assets/faq/zh/48- When using the pivot table of the VTable component, how to display the calculated indicator results in a separate column.md
create mode 100644 docs/assets/faq/zh/49- How to implement dimension drill-down function when using VTable pivot table component.md
create mode 100644 docs/assets/faq/zh/50- How to manually update the state when using the Checkbox in the VTable component.md
create mode 100644 docs/assets/faq/zh/51- How to delete the content of the selected cell using hotkeys in VTable.md
create mode 100644 docs/assets/faq/zh/52- Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused.md
create mode 100644 docs/assets/faq/zh/53- How to control the timing of exiting edit mode after implementing editable cells in VTable components.md
create mode 100644 docs/assets/faq/zh/54- Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content.md
create mode 100644 docs/assets/faq/zh/55- After custom rendering in the column configuration of the VTable component, the icon configuration fails- How to solve this.md
create mode 100644 docs/assets/faq/zh/56-VTable table component, using customLayout to customize the drawing elements, how to listen for mouse hover events on the elements, similar to the DOM's mouseenter event.md
create mode 100644 docs/assets/faq/zh/57-How to set the text style of the VTable table component.md
create mode 100644 docs/assets/faq/zh/58-How to customize highlighted cells in the VTable component.md
create mode 100644 docs/assets/faq/zh/59-How the VTable component progressively loads sub-nodes in a list.md
create mode 100644 docs/assets/faq/zh/60-How the VTable component progressively loads sub-nodes in pivot tables.md
diff --git a/docs/assets/faq/en/23-How to edit a table's cell with VTable.md b/docs/assets/faq/en/23-How to edit a table's cell with VTable.md
new file mode 100644
index 000000000..71b70f188
--- /dev/null
+++ b/docs/assets/faq/en/23-How to edit a table's cell with VTable.md
@@ -0,0 +1,53 @@
+---
+title: How to edit a table's cell with VTable?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+
+
+## Title
+
+Can an editable table enter the editing state directly when clicked, instead of double clicking a cell to make it editable?
+
+
+## Description
+
+In the table editing scenario, double-clicking to enter the editing state would be cumbersome, and you need to enter the editing state directly.
+
+
+## Solution
+
+You can configure editCellTrigger to click in the table initialization option. The configuration item is defined as follows:
+```
+/** Edit triggering time: double click event | single click event | api to manually start editing. Default is double click 'doubleclick' */
+editCellTrigger?: 'doubleclick' | 'click' | 'api';
+```
+
+
+## Code Example
+
+```
+ const option = {
+ records,
+ columns,
+ autoWrapText: true,
+ limitMaxAutoWidth: 600,
+ heightMode: 'autoHeight',
+ editCellTrigger: 'click' // Set the edit trigger timing
+ };
+ const tableInstance = new VTable.ListTable(container, option);
+```
+
+
+## Results
+
+Online effect reference: https://visactor.io/vtable/demo/edit/edit-cell
+
+
+
+
+## Related Documents
+
+Edit table demo: https://visactor.io/vtable/demo/edit/edit-cell
+Edit table tutorial: https://visactor.io/vtable/guide/edit/edit_cell
+Related API: https://visactor.io/vtable/option/ListTable#editCellTrigger
+github: https://github.com/VisActor/VTable
\ No newline at end of file
diff --git a/docs/assets/faq/en/24-VTable usage problem: How to display table row numbers.md b/docs/assets/faq/en/24-VTable usage problem: How to display table row numbers.md
new file mode 100644
index 000000000..38a7f3d12
--- /dev/null
+++ b/docs/assets/faq/en/24-VTable usage problem: How to display table row numbers.md
@@ -0,0 +1,66 @@
+---
+title: VTable usage problem: How to display table row numbers
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+# Question title
+
+How to display the serial number of each row in a table.
+
+
+# Problem Description
+
+Through configuration, add a column before the first column of the table to display the row number of each row.
+
+
+# Solution
+
+`rowSeriesNumber` can be configured in the `option` of table initialization. This configuration item is defined as follows:
+```
+interface IRowSeriesNumber {
+ width?: number | 'auto'; // width of the line number column
+ title?: string; // Row serial number title, empty by default
+ format?: (col?: number, row?: number, table?: BaseTableAPI) => any; // Row serial number formatting function, empty by default. Through this configuration, you can convert numerical type serial numbers into custom serial numbers, such as using a, b, c...
+ cellType?: 'text' | 'link' | 'image' | 'video' | 'checkbox'; // Row serial number cell type, default is text
+ style?: ITextStyleOption | ((styleArg: StylePropertyFunctionArg) => ITextStyleOption); // Body cell style, please refer to:[style](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Foption%2FListTable-columns-text%23style.bgColor)
+ headerStyle?: ITextStyleOption | ((styleArg: StylePropertyFunctionArg) => ITextStyleOption); // Header cell style, please refer to:[headerStyle](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Foption%2FPivotTable-columns-text%23headerStyle.bgColor)
+ dragOrder?: boolean; // Whether the row serial number sequence can be dragged. The default is false. If set to true, the icon at the dragging position will be displayed, and you can drag and drop on the icon to change its position. If you need to replace the icon, you can configure it yourself. Please refer to the tutorial: https://visactor.io/vtable/guide/custom_define/custom_icon for the chapter on resetting function icons.
+}
+```
+
+
+## code example
+
+```
+const option = {
+ records: data,
+ columns,
+ widthMode: 'standard',
+ rowSeriesNumber: {
+ title: '序号',
+ width: 'auto',
+ headerStyle: {
+ color: 'black',
+ bgColor: 'pink'
+ },
+ style: {
+ color: 'red'
+ }
+ }
+};
+const tableInstance = new VTable.ListTable(container, option);
+```
+## Results display
+
+Online effect reference: https://www.visactor.io/vtable/demo/basic-functionality/row-series-number
+
+
+
+
+## Related documents
+
+Line number demo: https://www.visactor.io/vtable/demo/basic-functionality/row-series-number
+Related API: https://www.visactor.io/vtable/option/ListTable#rowSeriesNumber
+github: https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/25-How to automatically calculate and display the aggregate values of the VTable's pivot table.md b/docs/assets/faq/en/25-How to automatically calculate and display the aggregate values of the VTable's pivot table.md
new file mode 100644
index 000000000..912598803
--- /dev/null
+++ b/docs/assets/faq/en/25-How to automatically calculate and display the aggregate values of the VTable's pivot table.md
@@ -0,0 +1,40 @@
+---
+title: How to automatically calculate and display the aggregate values of the VTable's pivot table?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to automatically calculate and display the aggregate values of the VTable's pivot table?
+## Description
+
+Why is the aggregate node data not displayed after the pivot table is set to display in tree structure?
+
+
+## Solution
+
+Aggregation rules need to be configured so that data can be automatically aggregated during data analysis and the aggregated value can be used as the display value of the parent cell.
+## Code Example
+
+```
+ dataConfig: {
+ totals: {
+ row: {
+ showSubTotals: true,
+ subTotalsDimensions: ['Category'],
+ subTotalLabel: 'subtotal'
+ }
+ }
+ },
+```
+## Results
+
+Online effect reference:https://visactor.io/vtable/demo/table-type/pivot-analysis-table-tree
+
+
+## Related Documents
+
+Tree Table Demo：https://visactor.io/vtable/demo/table-type/pivot-analysis-table-tree
+Tutorial on pivot table data analysis：https://visactor.io/vtable/guide/data_analysis/pivot_table_dataAnalysis
+Related api：https://visactor.io/vtable/option/PivotTable#dataConfig.totals
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/en/26- How to use the right-click menu to copy, paste and delete cells in VTable.md b/docs/assets/faq/en/26- How to use the right-click menu to copy, paste and delete cells in VTable.md
new file mode 100644
index 000000000..b4364bc1c
--- /dev/null
+++ b/docs/assets/faq/en/26- How to use the right-click menu to copy, paste and delete cells in VTable.md
@@ -0,0 +1,97 @@
+---
+title: 4. How to use the right-click menu to copy, paste and delete cells in VTable?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+How to use the right-click menu to copy, paste and delete cells in VTable?
+## Description
+
+Currently, ctrl+c is supported for copying and ctrl+v for pasting. However, in our project requirements, we expect to use the right-click menu to copy, paste, and delete cell values, but we don't know how to implement this capability.
+## Solution
+
+Listen to the event `dropdown_menu_click` to determine the clicked menu item.
+Get the content to be copied through the vtable interface `getCopyValue`, and when pasting it into the table, investigate the interface `changeCellValues` to set the value to the cell.
+To delete the selected content, you need to get the selected cells through the `getSelectedCellInfos` interface, and then assign the value to empty for each cell through the `changeCellValue` interface.
+Related interface addresses:
+[https://visactor.io/vtable/api/Methods#getSelectedCellInfos](https%3A%2F%2Fvisactor.io%2Fvtable%2Fapi%2FMethods%23getSelectedCellInfos)
+[https://visactor.io/vtable/api/Methods#changeCellValue](https%3A%2F%2Fvisactor.io%2Fvtable%2Fapi%2FMethods%23changeCellValue)
+## Code Example
+
+```
+const option = {
+ menu: {
+ contextMenuItems: ['copy', 'paste', 'delete', '...']
+ }
+ ...
+}
+
+const tableInstance = new VTable.ListTable(container, option);
+
+ let copyData;
+ tableInstance.on('dropdown_menu_click', args => {
+ console.log('dropdown_menu_click', args);
+ if (args.menuKey === 'copy') {
+ copyData = tableInstance.getCopyValue();
+ } else if (args.menuKey === 'paste') {
+ const rows = copyData.split('\n'); // 将数据拆分为行
+ const values = [];
+ rows.forEach(function (rowCells, rowIndex) {
+ const cells = rowCells.split('\t'); // 将行数据拆分为单元格
+ const rowValues = [];
+ values.push(rowValues);
+ cells.forEach(function (cell, cellIndex) {
+ // 去掉单元格数据末尾的 '\r'
+ if (cellIndex === cells.length - 1) {
+ cell = cell.trim();
+ }
+ rowValues.push(cell);
+ });
+ });
+ tableInstance.changeCellValues(args.col, args.row, values);
+ } else if (args.menuKey === 'delete') {
+ let selectCells = tableInstance.getSelectedCellInfos();
+ if (selectCells?.length > 0 && cellIsSelectRange(args.col, args.row, selectCells)) {
+ // 如果选中的是范围，则删除范围内的所有单元格
+ deleteSelectRange(selectCells);
+ } else {
+ // 否则只删除单个单元格
+ tableInstance.changeCellValue(args.col, args.row, '');
+ }
+ }
+ });
+ //将选中单元格的值设置为空
+ 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, '');
+ }
+ }
+ }
+ // 判断单元格col,row是否在选中范围中
+ function cellIsSelectRange(col, row, selectCells) {
+ for (let i = 0; i < selectCells.length; i++) {
+ for (let j = 0; j < selectCells[i].length; j++) {
+ if (selectCells[i][j].col === col && selectCells[i][j].row === row) {
+ return true;
+ }
+ }
+ }
+ return false;
+ }
+ });
+```
+## Results
+
+Online effect reference: https://visactor.io/vtable/demo/interaction/context-menu
+
+
+## Related Documents
+
+Right-click menu Copy Paste Delete demo：https://visactor.io/vtable/demo/interaction/context-menu
+Dropdown menu tutorial：https://visactor.io/vtable/guide/components/dropdown
+Related api：https://visactor.io/vtable/option/ListTable#menu.contextMenuItems
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/27-VTable usage problem: How to set the expanded and collapsed state of the tree structure.md b/docs/assets/faq/en/27-VTable usage problem: How to set the expanded and collapsed state of the tree structure.md
new file mode 100644
index 000000000..f7c930c0a
--- /dev/null
+++ b/docs/assets/faq/en/27-VTable usage problem: How to set the expanded and collapsed state of the tree structure.md
@@ -0,0 +1,131 @@
+---
+title: VTable usage problem: How to set the expanded and collapsed state of the tree structure
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to set the expanded and collapsed state of the tree structure in a tree-structured table.
+
+
+## Problem Description
+
+Through configuration, set the expanded and collapsed state of the tree structure table and customize the display style of the tree structure.
+
+
+## Solution
+
+1. 1. `hierarchyExpandLevel` can be configured in the `option` of table initialization. This configuration item is defined as follows: When displayed as a tree structure, the number of levels is expanded by default. The default setting is 1 to display only the root node, and the configuration of `Infinity` will expand all nodes.
+1. You can also obtain the expanded and collapsed status of a certain cell through the API after the table is initialized, and set the expanded and collapsed status of a certain cell through the API.
+```
+// Get the tree-shaped expanded or collapsed state of a certain cell
+getHierarchyState(col: number, row: number) : HierarchyState | null;
+enum HierarchyState {
+ expand = 'expand',
+ collapse = 'collapse',
+ none = 'none'
+}
+
+// Header switch level status
+toggleHierarchyState(col: number, row: number): viod;
+```
+## Code example
+
+```
+const option = {
+ records:data,
+ columns,
+ widthMode:'standard',
+ hierarchyExpandLevel: 2,
+};
+const tableInstance = new VTable.ListTable(container, option);
+
+const state = tableInstance.getHierarchyState(0,1);
+if (state === 'expand') {
+ tableInstance.toggleHierarchyState(0,1);
+}
+```
+## Results display
+
+
+
+Complete sample code (you can paste it into the [editor](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree) to try it out):
+```
+let tableInstance;
+ fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/company_struct.json')
+ .then((res) => res.json())
+ .then((data) => {
+
+const columns =[
+ {
+ "field": "group",
+ "title": "department",
+ "width": "auto",
+ tree: true,
+ fieldFormat(rec){
+ return rec['department']??rec['group']??rec['name'];
+ }
+ },
+ {
+ "field": "total_children",
+ "title": "memebers count",
+ "width": "auto",
+ fieldFormat(rec){
+ if(rec?.['position']){
+ return `position: ${rec['position']}`
+ }else
+ return rec?.['total_children'];
+ }
+ },
+ {
+ "field": "monthly_expense",
+ "title": "monthly expense",
+ "width": "auto",
+ fieldFormat(rec){
+ if(rec?.['salary']){
+ return `salary: ${rec['salary']}`
+ }else
+ return rec?.['monthly_expense'];
+ }
+ },
+ {
+ "field": "new_hires_this_month",
+ "title": "new hires this month",
+ "width": "auto"
+ },
+ {
+ "field": "resignations_this_month",
+ "title": "resignations this month",
+ "width": "auto"
+ },
+ {
+ "field": "complaints_and_suggestions",
+ "title": "recived complaints counts",
+ "width": "auto"
+ },
+
+];
+
+const option = {
+ records:data,
+ columns,
+ widthMode:'standard',
+ hierarchyExpandLevel: 2,
+};
+
+tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+
+const state = tableInstance.getHierarchyState(0,1);
+if (state === 'expand') {
+ tableInstance.toggleHierarchyState(0,1);
+}
+ })
+```
+## Related documents
+
+Tree mode demo：https://www.visactor.io/vtable/demo/table-type/list-table-tree
+Related api：https://www.visactor.io/vtable/option/ListTable#hierarchyExpandLevel
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/28- How can VTable implement a capability similar to the Excel fill handle to batch modify cells.md b/docs/assets/faq/en/28- How can VTable implement a capability similar to the Excel fill handle to batch modify cells.md
new file mode 100644
index 000000000..6f993a4db
--- /dev/null
+++ b/docs/assets/faq/en/28- How can VTable implement a capability similar to the Excel fill handle to batch modify cells.md
@@ -0,0 +1,105 @@
+---
+title: 6. How can VTable implement a capability similar to the Excel fill handle to batch modify cells?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Background Feature
+
+Users have the requirement to filter tables first and then update them in batches. This operation is similar to Excel's drag-and-drop fill capability, which can greatly improve user operation efficiency.
+Expected results:
+
+
+## Configuration instructions
+
+1. fillHandle
+fillHandle is a configuration option that allows the user to fill or modify multiple cells by dragging the cell corners. To enable the fill handle, make sure this option is configured when initializing the table.
+```
+const visactorOptions = {
+ fillHandle: true, // 启用填充手柄
+};
+```
+## Event Handling
+
+1. mousedown_fill_handle
+When the user starts dragging the fill handle, the `mousedown_fill_handle` event is triggered. You can prepare some necessary data in this event.
+```
+// 记录 拖拽填充柄之前的选中范围
+ let beforeDragMaxCol: number;
+ let beforeDragMinCol: number;
+ let beforeDragMaxRow: number;
+ let beforeDragMinRow: number;
+
+vtableInstance.addEventListener('mousedown_fill_handle', function(event) {
+ const startSelectCellRange = tableInstance.getSelectedCellRanges()[0];
+ beforeDragMaxCol = Math.max(startSelectCellRange.start.col, startSelectCellRange.end.col);
+ beforeDragMinCol = Math.min(startSelectCellRange.start.col, startSelectCellRange.end.col);
+ beforeDragMaxRow = Math.max(startSelectCellRange.start.row, startSelectCellRange.end.row);
+ beforeDragMinRow = Math.min(startSelectCellRange.start.row, startSelectCellRange.end.row);
+});
+```
+### 2. drag_fill_handle_end
+
+When the dragging operation of the fill handle ends, the `drag_fill_handle_end` event is triggered
+```
+vtableInstance.addEventListener('drag_fill_handle_end', function(event) {
+ const direciton = arg.direction;
+ let startChangeCellCol;
+ let startChangeCellRow;
+ let endChangeCellCol;
+ let endChangeCellRow;
+ const endSelectCellRange = tableInstance.getSelectedCellRanges()[0];
+ //根据填充方向 确定需要填充值的范围
+ if (direciton === 'bottom') {
+ startChangeCellCol = beforeDragMinCol;
+ startChangeCellRow = beforeDragMaxRow + 1;
+ endChangeCellCol = beforeDragMaxCol;
+ endChangeCellRow = endSelectCellRange.end.row;
+ } else if (direciton === 'right') {
+ startChangeCellCol = beforeDragMaxCol + 1;
+ startChangeCellRow = beforeDragMinRow;
+ endChangeCellCol = endSelectCellRange.end.col;
+ endChangeCellRow = beforeDragMaxRow;
+ } else if (direciton === 'top') {
+ startChangeCellCol = beforeDragMinCol;
+ startChangeCellRow = beforeDragMinRow - 1;
+ endChangeCellCol = beforeDragMaxCol;
+ endChangeCellRow = endSelectCellRange.end.row;
+ } else if (direciton === 'left') {
+ startChangeCellCol = beforeDragMinCol - 1;
+ startChangeCellRow = beforeDragMinRow;
+ endChangeCellCol = endSelectCellRange.end.col;
+ endChangeCellRow = beforeDragMaxRow;
+ }
+ changeTableValues(startChangeCellCol, startChangeCellRow, endChangeCellCol, endChangeCellRow);
+});
+```
+## API Usage
+
+1. changeCellValues
+`changeCellValues` allows programmatic modification of the values of one or more cells in a table.
+```
+ const changeTableValues = useCallback((startChangeCellCol: number, startChangeCellRow: number, endChangeCellCol: number, endChangeCellRow: number) => {
+ const startCol = Math.min(startChangeCellCol, endChangeCellCol);
+ const startRow = Math.min(startChangeCellRow, endChangeCellRow);
+ const endCol = Math.max(startChangeCellCol, endChangeCellCol);
+ const endRow = Math.max(startChangeCellRow, endChangeCellRow);
+ const values = [];
+ for (let row = startRow; row <= endRow; row++) {
+ const rowValues = [];
+ for (let col = startCol; col <= endCol; col++) {
+ rowValues.push(clickedCellValue);
+ }
+ values.push(rowValues);
+ }
+ // values：[['第一行第一列的值', '第一行第二列的值'],['第二行第一列', '第二行第二列']]
+ window['tableInstance'].changeCellValues(startCol, startRow, values); // 表格更新
+ // toto: 在这里调用后端接口update
+
+ }, [clickedCellValue]);
+```
+## Related Documents
+
+fillHandle demo：https://visactor.io/vtable/demo/edit/fill-handle
+fillHandle tutorial：https://visactor.io/vtable/guide/edit/fill_handle
+Related pi：https://visactor.io/vtable/option/ListTable#excelOptions.fillHandle
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/en/29- VTable usage issue: How to obtain the total number of rows in a table and the actual height of the content.md b/docs/assets/faq/en/29- VTable usage issue: How to obtain the total number of rows in a table and the actual height of the content.md
new file mode 100644
index 000000000..fc5739782
--- /dev/null
+++ b/docs/assets/faq/en/29- VTable usage issue: How to obtain the total number of rows in a table and the actual height of the content.md
@@ -0,0 +1,126 @@
+---
+title: 7. VTable usage issue: How to obtain the total number of rows in a table and the actual height of the content
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to get the total number of rows in the table and the actual height of the content
+
+
+## Problem Description
+
+How to obtain the total number of rows in the current table and the actual height of the content from the table instance through the API
+
+
+## Solution
+
+1. 1. The `colCount` and `rowCount` attributes in the table instance can obtain the number of rows and columns of the current table.
+1. The table example provides methods `getAllRowsHeight` and `getAllColsWidth`, which can obtain the total column width and total row height of the current table content.
+
+
+## Code example
+
+```
+const tableInstance = new VTable.ListTable(container, option);
+
+console.log(tableInstance.colCount);
+console.log(tableInstance.rowCount);
+console.log(tableInstance.getAllRowsHeight());
+console.log(tableInstance.getAllColsWidth());
+```
+## Results display
+
+
+
+
+
+Complete sample code (you can paste it into the [editor](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree) to try it out):
+```
+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());
+ })
+```
+## Related documents
+
+Related API：
+https://www.visactor.io/vtable/api/Properties#rowCount
+https://www.visactor.io/vtable/api/Properties#colCount
+https://www.visactor.io/vtable/api/Methods#getAllColsWidth
+https://www.visactor.io/vtable/api/Methods#getAllRowsHeight
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/30- In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge.md b/docs/assets/faq/en/30- In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge.md
new file mode 100644
index 000000000..3a946b5d5
--- /dev/null
+++ b/docs/assets/faq/en/30- In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge.md
@@ -0,0 +1,57 @@
+---
+title: 8. In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Title
+
+In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge?
+## Description
+
+In the VTable integrated VChart chart scenario, how to avoid the edge points being truncated when drawing points on the chart.
+
+
+## Solution
+
+Configure innerOffset on the axes axis. After adding it as above, there will be a certain distance between the elements on the chart and the edge of the table.
+
+
+## Code Example
+
+```
+
+const option = {
+ axes: [
+ {
+ orient: 'left',
+ type: 'linear',
+ innerOffset: {
+ top: 4,
+ bottom: 4,
+ }
+ },
+ {
+ orient: 'bottom',
+ type: 'band',
+ innerOffset: {
+ left: 4,
+ right: 4,
+ }
+ }
+ ]
+ ...
+}
+
+const tableInstance = new VTable.ListTable(container, option);
+```
+## Results
+
+Online effect reference:https://visactor.io/vtable/demo/table-type/pivot-chart-scatter
+
+
+## Related Documents
+
+Related api：https://visactor.io/vtable/option/PivotTable#axes
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/31-VTable usage issue: How to implement hover to a cell to show or hide part of the content.md b/docs/assets/faq/en/31-VTable usage issue: How to implement hover to a cell to show or hide part of the content.md
new file mode 100644
index 000000000..7a1c293ae
--- /dev/null
+++ b/docs/assets/faq/en/31-VTable usage issue: How to implement hover to a cell to show or hide part of the content.md
@@ -0,0 +1,221 @@
+---
+title: VTable usage issue: How to implement hover to a cell to show or hide part of the content
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to implement hover to a cell to show or hide part of the content
+
+
+## Problem description
+
+When you want to hover the mouse over a cell, show or hide some elements (icons, text, etc.) in the cell.
+
+
+## Solution
+
+You can use [customLayout ](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fguide%2Fcustom_define%2Fcustom_layout)to do this: listen to the `onMouseEnter `and `onMouseLeave `events on the container `Group `, and set the corresponding primitive to show or hide in the event callback.
+
+
+## Code example
+
+```
+const option = {
+ columns: [
+ {
+ title: 'name',
+ field: 'name',
+ },
+ {
+ title: 'custom',
+ field: 'custom',
+ width: 120,
+ customLayout: (args) => {
+ const { height, width } = args.rect;
+ const container = (
+ {
+ // 查找图元
+ const hoverShowText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-show';
+ }, true);
+ // 更新图元
+ hoverShowText.setAttribute('opacity', 1);
+ // 查找图元
+ const hoverHideText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-hide';
+ }, true);
+ hoverHideText.setAttribute('opacity', 0);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ onMouseLeave={event => {
+ // 查找图元
+ const hoverShowText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-show';
+ }, true);
+ // 更新图元
+ hoverShowText.setAttribute('opacity', 0);
+ // 查找图元
+ const hoverHideText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-hide';
+ }, true);
+ // 更新图元
+ hoverHideText.setAttribute('opacity', 1);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ >
+
+
+
+ );
+
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }
+ }
+ ],
+ records:data,
+}
+
+const tableInstance = new VTable.ListTable(container, option);
+```
+## Results show
+
+
+
+
+
+Full sample code (you can try pasting it into the [editor ](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree)):
+```
+const { VGroup, VText } = VTable;
+const data = [
+ {
+ name: '1',
+ custom: '1',
+ },
+ {
+ name: '2',
+ custom: '2',
+ },
+ {
+ name: '3',
+ custom: '3',
+ },
+ {
+ name: '4',
+ custom: '4',
+ },
+ {
+ name: '5',
+ custom: '5',
+ },
+]
+const option = {
+ columns: [
+ {
+ title: 'name',
+ field: 'name',
+ },
+ {
+ title: 'custom',
+ field: 'custom',
+ width: 120,
+ customLayout: (args) => {
+ const { height, width } = args.rect;
+ const container = (
+ {
+ const hoverShowText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-show';
+ }, true);
+ hoverShowText.setAttribute('opacity', 1);
+ const hoverHideText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-hide';
+ }, true);
+ hoverHideText.setAttribute('opacity', 0);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ onMouseLeave={event => {
+ const hoverShowText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-show';
+ }, true);
+ hoverShowText.setAttribute('opacity', 0);
+ const hoverHideText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-hide';
+ }, true);
+ hoverHideText.setAttribute('opacity', 1);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ >
+
+
+
+ );
+
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }
+ }
+ ],
+ records:data,
+}
+
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+```
+## Related Documents
+
+Related api: https://www.visactor.io/vtable/guide/custom_define/custom_layout
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/32-VTable usage issue: How to implement scrollbar DOM container boundary display.md b/docs/assets/faq/en/32-VTable usage issue: How to implement scrollbar DOM container boundary display.md
new file mode 100644
index 000000000..43a40a2e6
--- /dev/null
+++ b/docs/assets/faq/en/32-VTable usage issue: How to implement scrollbar DOM container boundary display.md
@@ -0,0 +1,194 @@
+---
+title: VTable usage issue: How to implement scrollbar DOM container boundary display
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to implement scrollbar DOM container boundary display
+
+
+## Problem description
+
+When the height of the table content is low, the scroll bar will not display well in the table. I hope to display the scroll bar at the bottom of the canvas.
+
+
+## Solution
+
+You can configure the `barToSide `property of the scrollbar in the theme to configure the display position of the scrollbar:
+* True: The scrollbar is displayed at the edge of the container (canvas)
+* False: The scroll bar is displayed at the edge of the table area
+
+
+## Code example
+
+```
+const option = {
+ records,
+ columns,
+ theme: VTable.themes.DEFAULT.extends({
+ scrollStyle: {
+ barToSide: true
+ }
+ })
+};
+
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+```
+## Results show
+
+
+
+Full sample code (you can try pasting it into the [editor ](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree)):
+```
+function generateRandomString(length) {
+ let result = '';
+ const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+ for (let i = 0; i < length; i++) {
+ result += characters.charAt(Math.floor(Math.random() * characters.length));
+ }
+ return result;
+}
+function generateRandomHobbies() {
+ const hobbies = [
+ 'Reading books',
+ 'Playing video games',
+ 'Watching movies',
+ 'Cooking',
+ 'Hiking',
+ 'Traveling',
+ 'Photography',
+ 'Playing musical instruments',
+ 'Gardening',
+ 'Painting',
+ 'Writing',
+ 'Swimming'
+ ];
+
+ const numHobbies = Math.floor(Math.random() * 3) + 1; // 生成 1-3 之间的随机整数
+ const selectedHobbies = [];
+
+ for (let i = 0; i < numHobbies; i++) {
+ const randomIndex = Math.floor(Math.random() * hobbies.length);
+ const hobby = hobbies[randomIndex];
+ selectedHobbies.push(hobby);
+ hobbies.splice(randomIndex, 1); // 确保每个爱好只选一次
+ }
+
+ return selectedHobbies.join(', ');
+}
+function generateRandomBirthday() {
+ const start = new Date('1970-01-01');
+ const end = new Date('2000-12-31');
+ const randomDate = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+ const year = randomDate.getFullYear();
+ const month = randomDate.getMonth() + 1;
+ const day = randomDate.getDate();
+ return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
+}
+
+function generateRandomPhoneNumber() {
+ const areaCode = ['130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '150', '151', '152', '153', '155', '156', '157', '158', '159', '170', '176', '177', '178', '180', '181', '182', '183', '184', '185', '186', '187', '188', '189'];
+ const prefix = areaCode[Math.floor(Math.random() * areaCode.length)];
+ const suffix = String(Math.random()).substr(2, 8);
+ return prefix + suffix;
+}
+
+const generatePersons = (count) => {
+ return Array.from(new Array(count)).map((_, i) => {
+ const first=generateRandomString(10);
+ const last=generateRandomString(4);
+ return {
+ id: i+1,
+ email1: `${first}_${last}@xxx.com`,
+ name: first,
+ lastName: last,
+ hobbies: generateRandomHobbies(),
+ birthday: generateRandomBirthday(),
+ tel: generateRandomPhoneNumber(),
+ sex: i % 2 === 0 ? 'boy' : 'girl',
+ work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
+ city: 'beijing',
+ }});
+};
+
+const records = generatePersons(1);
+const columns = [
+ {
+ field: 'id',
+ title: 'ID',
+ width: 80,
+ sort: true,
+ },
+ {
+ field: 'email1',
+ title: 'email',
+ width: 250,
+ sort: false,
+ },
+ {
+ field: 'full name',
+ title: 'Full name',
+ columns: [
+ {
+ field: 'name',
+ title: 'First Name',
+ width: 120,
+ },
+ {
+ field: 'lastName',
+ title: 'Last Name',
+ width: 100,
+ },
+ ],
+ },
+ {
+ field: 'hobbies',
+ title: 'hobbies',
+ width: 200,
+ },
+ {
+ field: 'birthday',
+ title: 'birthday',
+ width: 120,
+ },
+ {
+ 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 = {
+ records,
+ columns,
+ theme: VTable.themes.DEFAULT.extends({
+ scrollStyle: {
+ barToSide: true
+ }
+ })
+};
+
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+```
+## Related Documents
+
+Related api: https://www.visactor.io/vtable/option/ListTable#theme.scrollStyle.barToSide
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/33-VTable usage issue: How to implement drag-and-drop adjustment of line-height.md b/docs/assets/faq/en/33-VTable usage issue: How to implement drag-and-drop adjustment of line-height.md
new file mode 100644
index 000000000..448695994
--- /dev/null
+++ b/docs/assets/faq/en/33-VTable usage issue: How to implement drag-and-drop adjustment of line-height.md
@@ -0,0 +1,53 @@
+---
+title: VTable usage issue: How to implement drag-and-drop adjustment of line-height
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to implement drag-and-drop adjustment of line-height
+
+
+## Problem description
+
+Drag the bottom border of the cell to adjust the line-height of the row.
+
+
+## Solution
+
+`Option `in the `rowResizeMode `configuration can enable or disable the line-height adjustment function:
+* `All `: The entire column, including the cells at the head and body, can adjust the column width/line-height
+* `None `: Cannot adjust column width/line-height
+* `Header `: Column width/line-height can only be adjusted in the header unit
+* `Body `: Column width/line-height can only be adjusted in body cells
+`rowResizeType `configuration controls the scope of adjustment:
+* `Column `/ `row `: Default value, only adjust the width of the current column/row;
+* `Indicator `: Adjust the column width/line-height of the same indicator column together;
+* `All `: Adjust the column width/line-height of all columns together;
+* `Indicator Group `: The indicator column of the same group is adjusted together. For example, there are two indicators under the northeast dimension value: sales and profit. When adjusting the column width of sales, the profit column will also be adjusted.
+
+
+## Code example
+
+```
+const option = {
+ rowResizeType: 'row',
+ rowResizeMode: 'all',
+ // ......
+};
+tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID),option);
+```
+## Results show
+
+
+
+Complete example: https://www.visactor.io/vtable/demo/interaction/resize-row-height
+
+
+## Related Documents
+
+Line-height column width adjustment: https://www.visactor.io/vtable/guide/interaction/resize_column_width
+Related api: https://www.visactor.io/vtable/option/ListTable#rowResizeMode
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/34-VTable usage issue: How to implement text type buttons.md b/docs/assets/faq/en/34-VTable usage issue: How to implement text type buttons.md
new file mode 100644
index 000000000..417f2fd8a
--- /dev/null
+++ b/docs/assets/faq/en/34-VTable usage issue: How to implement text type buttons.md
@@ -0,0 +1,216 @@
+---
+title: VTable usage issue: How to implement text type buttons
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to implement text type buttons
+
+
+## Problem description
+
+Hope to display text type buttons in the cell, click to operate.
+
+
+## Solution
+
+You can use the `customLayout `feature to customize button elements and bind corresponding events
+
+
+## Code example
+
+```
+ const option: VTable.ListTableConstructorOptions = {
+ columns: [
+ // ......
+ {
+ field: 'worksCount',
+ title: 'operation',
+ width: 110,
+ customLayout: (args: VTable.TYPES.CustomRenderFunctionArg) => {
+ const { table, row, col, rect } = args;
+ const { height, width } = rect ?? table.getCellRect(col, row);
+
+ const container = new VTable.CustomLayout.Group({
+ height,
+ width,
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'nowrap'
+ });
+
+ const editText = new VTable.CustomLayout.Text({
+ text: '编辑',
+ fontSize: 13,
+ fontFamily: 'sans-serif',
+ fill: '#2440b3', // #315efb
+ boundsPadding: [10, 0, 0, 10],
+ underline: 0,
+ cursor: 'pointer'
+ });
+ editText.stateProxy = (stateName: string) => {
+ if (stateName === 'hover') {
+ return {
+ fill: '#315efb',
+ underline: 1
+ };
+ }
+ };
+ editText.addEventListener('mouseenter', e => {
+ editText.addState('hover', true, false);
+ table.scenegraph.updateNextFrame();
+ });
+ editText.addEventListener('mouseleave', e => {
+ editText.removeState('hover', false);
+ table.scenegraph.updateNextFrame();
+ });
+ editText.addEventListener('click', e => {
+ console.log('edit click');
+ });
+ container.add(editText);
+
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }
+ }
+ ],
+ // ......
+ };
+```
+## Results show
+
+
+
+
+
+Complete sample code (you can try pasting it into the [editor ](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree)):
+```
+ const option = {
+ container: document.getElementById(CONTAINER_ID),
+ columns: [
+ {
+ field: 'bloggerId',
+ title: 'index'
+ },
+ {
+ field: 'worksCount',
+ title: 'operation',
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ },
+ width: 110,
+ customLayout: (args) => {
+ const { table, row, col, rect } = args;
+ const { height, width } = rect ?? table.getCellRect(col, row);
+
+ const container = new VTable.CustomLayout.Group({
+ height,
+ width,
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'nowrap'
+ });
+
+ const editText = new VTable.CustomLayout.Text({
+ text: '编辑',
+ fontSize: 13,
+ fontFamily: 'sans-serif',
+ fill: '#2440b3', // #315efb
+ boundsPadding: [10, 0, 0, 10],
+ underline: 0,
+ cursor: 'pointer'
+ });
+ editText.stateProxy = (stateName) => {
+ if (stateName === 'hover') {
+ return {
+ fill: '#315efb',
+ underline: 1
+ };
+ }
+ };
+ editText.addEventListener('mouseenter', e => {
+ editText.addState('hover', true, false);
+ table.scenegraph.updateNextFrame();
+ });
+ editText.addEventListener('mouseleave', e => {
+ editText.removeState('hover', false);
+ table.scenegraph.updateNextFrame();
+ });
+ editText.addEventListener('click', e => {
+ console.log('edit click');
+ });
+ container.add(editText);
+
+ const deleteText = new VTable.CustomLayout.Text({
+ text: '删除',
+ fontSize: 13,
+ fontFamily: 'sans-serif',
+ fill: '#2440b3', // #315efb
+ boundsPadding: [10, 0, 0, 10],
+ underline: 0,
+ cursor: 'pointer'
+ });
+ deleteText.stateProxy = (stateName) => {
+ if (stateName === 'hover') {
+ return {
+ fill: '#315efb',
+ underline: 1
+ };
+ }
+ };
+ deleteText.addEventListener('mouseenter', e => {
+ deleteText.addState('hover', true, false);
+ table.scenegraph.updateNextFrame();
+ });
+ deleteText.addEventListener('mouseleave', e => {
+ deleteText.removeState('hover', false);
+ table.scenegraph.updateNextFrame();
+ });
+ deleteText.addEventListener('click', e => {
+ console.log('delete click');
+ });
+ container.add(deleteText);
+
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }
+ }
+ ],
+ records: [
+ {
+ bloggerId: 1,
+ },
+ {
+ bloggerId: 2,
+ },
+ {
+ bloggerId: 3,
+ },
+ {
+ bloggerId: 4,
+ },
+ {
+ bloggerId: 5,
+ },
+ {
+ bloggerId: 6,
+ }
+ ],
+ defaultRowHeight: 40
+ };
+
+ const instance = new VTable.ListTable(option);
+```
+## Related Documents
+
+Related api: https://www.visactor.io/vtable/guide/custom_define/custom_layout
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/35-VTable usage issue: How to set the border style around cells separately.md b/docs/assets/faq/en/35-VTable usage issue: How to set the border style around cells separately.md
new file mode 100644
index 000000000..5e66f5c09
--- /dev/null
+++ b/docs/assets/faq/en/35-VTable usage issue: How to set the border style around cells separately.md
@@ -0,0 +1,130 @@
+---
+title: VTable usage issue: How to set the border style around cells separately
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to set the border style around cells separately
+
+
+## Problem description
+
+How to set the border styles around cells separately to achieve a border with only upper and lower cell borders, without left and right borders.
+
+
+## Solution
+
+The cell styles in the table, whether in the column style or theme, support configuring the cell border-related configurations as arrays, representing the border styles in the top, right, bottom, and left directions, respectively
+
+
+## Code example
+
+```
+const option = {
+ columns: [
+ {
+ // ...
+ style: {
+ cellBorderLineWidth: [1, 0, 1, 0]
+ // ...
+ }
+ }
+ ]
+ // ...
+}
+```
+## Results show
+
+
+
+
+
+Complete sample code (you can try pasting it into the [editor ](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree)):
+```
+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',
+ theme: {
+ headerStyle: {
+ borderLineWidth: [1, 0, 1, 0]
+ },
+ bodyStyle: {
+ borderLineWidth: [1, 0, 1, 0]
+ }
+ }
+ // theme: VTable.themes.SIMPLIFY
+ };
+ tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+ window['tableInstance'] = tableInstance;
+ });
+```
+## Related Documents
+
+Related api: https://www.visactor.io/vtable/option/ListTable#theme.bodyStyle.borderColor
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/36-VTable usage issue: How to make the table automatically calculate column width based only on the content width of the table header.md b/docs/assets/faq/en/36-VTable usage issue: How to make the table automatically calculate column width based only on the content width of the table header.md
new file mode 100644
index 000000000..3f500d69d
--- /dev/null
+++ b/docs/assets/faq/en/36-VTable usage issue: How to make the table automatically calculate column width based only on the content width of the table header.md
@@ -0,0 +1,78 @@
+---
+title: VTable usage issue: How to make the table automatically calculate column width based only on the content width of the table header
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to make the table automatically calculate column width based only on the content width of the table header
+
+
+## Problem description
+
+In automatic width mode, you want the width of a column to be determined only by the content width of the header cell and not affected by the content cell.
+
+
+## Solution
+
+VTable provides `columnWidthComputeMode `configuration for specifying the bounded areas that are involved in content width calculations:
+* 'Only-header ': Only the header content is calculated.
+* 'Only-body ': Only calculate the content of the body cell.
+* 'Normal ': Calculate normally, that is, calculate the contents of the header and body cells.
+
+
+## Code example
+
+```
+const options = {
+ //......
+ columnWidthComputeMode: 'only-header'
+};
+```
+
+
+## Results show
+
+
+
+Full sample code (you can try pasting it into the [editor ](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree)):
+```
+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"
+ }
+];
+
+const option = {
+ records:data,
+ columns,
+ widthMode:'standard',
+ columnWidthComputeMode: 'only-header'
+};
+tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+ })
+```
+## Related Documents
+
+Related api: https://www.visactor.io/vtable/option/ListTable # columnWidthComputeMode
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/37- What should I do if the bottom and right borders of VTable are not displayed when it is scrolled.md b/docs/assets/faq/en/37- What should I do if the bottom and right borders of VTable are not displayed when it is scrolled.md
new file mode 100644
index 000000000..5f3db04a1
--- /dev/null
+++ b/docs/assets/faq/en/37- What should I do if the bottom and right borders of VTable are not displayed when it is scrolled.md
@@ -0,0 +1,58 @@
+---
+title: 15. What should I do if the bottom and right borders of VTable are not displayed when it is scrolled?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+What should I do if the bottom and right borders of VTable are not displayed when it is scrolled?
+## Problem description
+
+As shown in the screenshot, the table contents in VTable are not fully displayed (when there is a scroll bar). How can I display the right and bottom borders of the table?
+
+
+## Solution
+
+You can add borderLineWidth and borderColor configurations in the frameStyle in the theme. However, after adding the above configurations, the borders on the top and left sides of the table and the borders of the cells will have two layers of borders, and the effect is not good.
+
+
+After further research on the configuration, I found the cellInnerBorder configuration item, which is specifically designed to handle this situation. If you set it to false, the border lines of the cells on the edge will no longer be drawn.
+The configuration items used are defined as follows:
+```
+/** frameStyle 是配置表格整体的样式 */
+frameStyle ?:FrameStyle;
+/** 单元格是否绘制内边框,如果为true，边界单元格靠近边界的边框会被隐藏 */
+cellInnerBoder?:boolean; // true | false
+```
+
+
+## Code example
+
+```
+ const option = {
+ records,
+ columns,
+ autoWrapText: true,
+ limitMaxAutoWidth: 600,
+ heightMode: 'autoHeight',
+ theme:{
+ frameStyle:{ // 配置的表格整体的边框
+ borderLineWidth: 1, // 设置边框宽度
+ borderColor: "#CBCBCB" // 设置边框颜色
+ },
+ cellInnerBorder:true // 单元格是否绘制内边框，可结合情况设置true或false
+ }
+ };
+ const tableInstance = new VTable.ListTable(container, option);
+```
+## Results show
+
+Complete example：https://codesandbox.io/p/sandbox/vtable-frame-border-demo-forked-zn4n9j
+
+
+## Related Documents
+
+Set table frame demo：https://codesandbox.io/p/sandbox/vtable-frame-border-demo-forked-zn4n9j
+Related api：https://www.visactor.io/vtable/option/ListTable#theme.cellInnerBorder
+https://www.visactor.io/vtable/option/ListTable#theme.frameStyle.borderLineWidth
+https://www.visactor.io/vtable/option/ListTable#theme.frameStyle.borderColor
+github：https://github.com/VisActor/VTable
\ No newline at end of file
diff --git a/docs/assets/faq/en/38- Can the VTable component be drag-and-drop to swap rows.md b/docs/assets/faq/en/38- Can the VTable component be drag-and-drop to swap rows.md
new file mode 100644
index 000000000..3f9994067
--- /dev/null
+++ b/docs/assets/faq/en/38- Can the VTable component be drag-and-drop to swap rows.md
@@ -0,0 +1,67 @@
+---
+title: 16. Can the VTable component be drag-and-drop to swap rows
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+Can the VTable component be drag-and-drop to swap rows?
+## 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);
+```
+## Results Show
+
+Online effect reference: [https://visactor.io/vtable/demo/interaction/move-row-position](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Finteraction%2Fmove-row-position)
+
+
+## Related documents
+
+Demo of drag-and-drop row movement: [https://visactor.io/vtable/demo/interaction/move-row-position](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Finteraction%2Fmove-row-position)
+Tutorial on drag-and-drop row movement: [https://visactor.io/vtable/guide/basic_function/row_series_number](https%3A%2F%2Fvisactor.io%2Fvtable%2Fguide%2Fbasic_function%2Frow_series_number)
+API: [https://visactor.io/vtable/option/ListTable#rowSeriesNumber](https%3A%2F%2Fvisactor.io%2Fvtable%2Foption%2FListTable%23rowSeriesNumber)
+GitHub: [https://github.com/VisActor/VTable](https%3A%2F%2Fgithub.com%2FVisActor%2FVTable)
+
diff --git a/docs/assets/faq/en/39- How to dynamically set the min and max values of the progressBar type in the VTable component based on the data items of the current row.md b/docs/assets/faq/en/39- How to dynamically set the min and max values of the progressBar type in the VTable component based on the data items of the current row.md
new file mode 100644
index 000000000..eea519c06
--- /dev/null
+++ b/docs/assets/faq/en/39- How to dynamically set the min and max values of the progressBar type in the VTable component based on the data items of the current row.md
@@ -0,0 +1,68 @@
+---
+title: 17. How to dynamically set the min and max values of the progressBar type in the VTable component based on the data items of the current row?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+How to dynamically set the min and max values of the progressBar type in the VTable component based on the data items of the current row?
+## Question Description
+
+Business Scenario: For example, I have a column in my table that uses the progressBar cell type, but the maximum and minimum values of the bar chart in each row are different. That is, the max value of each data I get is not fixed. How can I achieve that the maximum and minimum values of the progressBar can be dynamically set in this case?
+## Solution
+
+Currently, the专属配置项 max and min of the progressBar type in VTable support functional writing, so that you can obtain the data records needed to be combined according to the function parameters.
+
+
+## Code Example
+
+```
+const records = [
+ {
+ "name":"pigeon",
+ "introduction":"The pigeon is a common urban bird with gray feathers and a short, thick beak."
+ "image":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/pigeon.jpeg",
+ "video":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/pigeon.mp4",
+ "YoY":60,
+ "QoQ":10,
+ "min":-20,
+ "max":100
+ }
+];
+
+const columns = [
+ {
+ field: 'YoY',
+ title: 'count Year-over-Year',
+ cellType: 'progressbar',
+ width:200,
+ barType:'negative',
+ min(args){
+ const rowRecord=args.table.getCellOriginRecord(args.col,args.row);
+ return rowRecord.min;
+ },
+ max(args){
+ const rowRecord=args.table.getCellOriginRecord(args.col,args.row);
+ return rowRecord.max;
+ }
+ },
+];
+const option = {
+ records,
+ columns
+};
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+```
+## Result Display
+
+Related Demo reference: [https://visactor.io/vtable/demo/cell-type/progressbar](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Fcell-type%2Fprogressbar)
+Just paste the code in the example into the official editor to present.
+
+
+## Relevant Documents
+
+Progressbar usage reference demo: [https://visactor.io/vtable/demo/cell-type/progressbar](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Fcell-type%2Fprogressbar)
+Progressbar usage tutorial: [https://visactor.io/vtable/guide/cell_type/progressbar](https%3A%2F%2Fvisactor.io%2Fvtable%2Fguide%2Fcell_type%2Fprogressbar)
+Related API: [https://visactor.io/vtable/option/ListTable-columns-progressbar#min](https%3A%2F%2Fvisactor.io%2Fvtable%2Foption%2FListTable-columns-progressbar%23min)
+GitHub: [https://github.com/VisActor/VTable](https%3A%2F%2Fgithub.com%2FVisActor%2FVTable)
+
diff --git a/docs/assets/faq/en/40- Can the VTable component achieve different hover colors for different cells.md b/docs/assets/faq/en/40- Can the VTable component achieve different hover colors for different cells.md
new file mode 100644
index 000000000..3e18f4f02
--- /dev/null
+++ b/docs/assets/faq/en/40- Can the VTable component achieve different hover colors for different cells.md
@@ -0,0 +1,99 @@
+---
+title: 18. Can the VTable component achieve different hover colors for different cells?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+Can the VTable component achieve different hover colors for different cells?
+## Question Description
+
+Can different cells have different hover colors?
+Use case: By default, the hover color is set to blue. Under certain conditions, some cells are highlighted in purple. However, the requirement is that when hovering over the highlighted cells, they should not change to the hover blue color.
+
+
+## Solution
+
+It can be solved by the background color function. Set `bgColor` as a function to set the highlight background color for special values. Set the background color through `theme.bodyStyle.hover.cellBgColor`, which also needs to be set as a function to return different background colors. If some cells do not want a background color, an empty string can be returned.
+
+
+## Code Example
+
+```
+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": "Profit",
+ "title": "Profit",
+ "width": "auto",
+ style:{
+ bgColor(args){
+ if(args.value>200){
+ return 'rgba(153,0,255,0.2)'
+ }
+ // 以下代码参考DEFAULT主题配置实现 https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/DEFAULT.ts
+ const { col,row, table } = args;
+ const {row:index} = table.getBodyIndexByTableIndex(col,row);
+ if (!(index & 1)) {
+ return '#FAF9FB';
+ }
+ return '#FDFDFD';
+ }
+ }
+ },
+ {
+ "field": "Order ID",
+ "title": "Order ID",
+ "width": "auto"
+ },
+ {
+ "field": "Customer ID",
+ "title": "Customer ID",
+ "width": "auto"
+ },
+ {
+ "field": "Product Name",
+ "title": "Product Name",
+ "width": "auto"
+ }
+];
+
+const option = {
+ records:data,
+ columns,
+ widthMode:'standard',
+ hover:{
+ highlightMode:'cell'
+ },
+ theme:VTable.themes.DEFAULT.extends({
+ bodyStyle:{
+ hover:{
+ cellBgColor(args){
+ if(args.value>200){
+ return ''
+ }
+ return '#CCE0FF';
+ }
+ }
+ }
+ })
+};
+tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+})
+```
+## Result Display
+
+Just paste the code in the example directly into the official editor to display it.
+
+
+## Relevant Documents
+
+Theme Usage Reference Demo:https://visactor.io/vtable/demo/theme/extend
+Theme Usage Tutorial：https://visactor.io/vtable/guide/theme_and_style/theme
+Related api：https://visactor.io/vtable/option/ListTable#theme
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/en/41- How can I increase the gap between adjacent sparklines in the VTable component.md b/docs/assets/faq/en/41- How can I increase the gap between adjacent sparklines in the VTable component.md
new file mode 100644
index 000000000..1e0f8cb98
--- /dev/null
+++ b/docs/assets/faq/en/41- How can I increase the gap between adjacent sparklines in the VTable component.md
@@ -0,0 +1,131 @@
+---
+title: 19. How can I increase the gap between adjacent sparklines in the VTable component?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+How can I increase the gap between adjacent sparklines in the VTable component?
+## Question Description
+
+The mini graph in the product uses VTable, but the effect of generating the mini graph with data is that the users feel the distance between adjacent line segments is too close. How to adjust this spacing?
+
+
+## Solution
+
+First, it is necessary to clarify that the width and height of a cell include two parts: the padding margin and the content. The padding margin in the VTable is set to [10, 16, 10, 16] by default, and the row height of the VTable is 40px by default, with the top and bottom padding margins taking up 20px. Therefore, the height of the content is reduced to 20px.
+The top and bottom padding margins take up 20px, so the minimum distance between two adjacent sparklines charts is also 20px. In other words, the minimum distance between two adjacent sparklines charts is determined by the padding margin. In the official example, padding margin is adjusted to 20, and it is found that the line curve becomes a straight line after the adjustment. This is because the 40px row height is occupied by the padding margin, leaving no space for the line chart to stretch.
+
+
+So in this case, we need to increase the row height accordingly. The effect of setting defaultRowHeight to 60 is as follows:
+
+
+
+
+## Code Example
+
+```
+const records = [
+ {
+ 'lineData':[50,20,20,40,60,50,70],
+ 'lineData2':[{x:1,y:1500},{x:2,y:1480},{x:3,y:1520},{x:4,y:1550},{x:5,y:1600}],
+ },
+ {
+ 'lineData':[50,20,60,40,60,50,70],
+ 'lineData2':[{x:1,y:1500},{x:2,y:1480},{x:3,y:1520},{x:4,y:1550},{x:5,y:1600}],
+ },
+ {
+ 'lineData':[50,50,20,40,10,50,70],
+ 'lineData2':[{x:1,y:1500},{x:2,y:1480},{x:3,y:1520},{x:4,y:1550},{x:5,y:1600}],
+ },
+ {
+ 'lineData':[70,20,20,40,60,50,70],
+ 'lineData2':[{x:1,y:1500},{x:2,y:1480},{x:3,y:1520},{x:4,y:1550},{x:5,y:1600}],
+ }
+];
+
+const columns = [
+ {
+ field: 'lineData',
+ title: 'sparkline',
+ cellType: 'sparkline',
+ width:300,
+ style:{
+ padding:20
+ },
+ sparklineSpec: {
+ type: 'line',
+ pointShowRule: 'none',
+ smooth: true,
+ line: {
+ style: {
+ stroke: '#2E62F1',
+ strokeWidth: 2,
+ },
+ },
+ point: {
+ hover: {
+ stroke: 'blue',
+ strokeWidth: 1,
+ fill: 'red',
+ shape: 'circle',
+ size: 4,
+ },
+ style: {
+ stroke: 'red',
+ strokeWidth: 1,
+ fill: 'yellow',
+ shape: 'circle',
+ size: 2,
+ },
+ },
+ crosshair: {
+ style: {
+ stroke: 'gray',
+ strokeWidth: 1,
+ },
+ },
+ },
+ },
+ {
+ field: 'lineData2',
+ title: 'sparkline 2',
+ cellType: 'sparkline',
+ width:300,
+ style:{
+ padding:20
+ },
+ sparklineSpec: {
+ type: 'line',
+ xField: 'x',
+ yField: 'y',
+ pointShowRule: 'all',
+ smooth: true,
+ line: {
+ style: {
+ stroke: '#2E62F1',
+ strokeWidth: 2,
+ },
+ },
+ },
+ },
+];
+const option = {
+ records,
+ columns,
+ defaultRowHeight:60
+};
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+
+```
+## Result Display
+
+Just paste the code from the example directly into the official editor and it will be displayed.
+
+
+## Relevant Documents
+
+Sparkline Usage Reference Demo：https://visactor.io/vtable/guide/cell_type/sparkline
+Style Usage Toturial：https://visactor.io/vtable/guide/theme_and_style/style
+Related api：https://visactor.io/vtable/option/ListTable-columns-sparkline#style.padding
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/en/42-VTable usage issue: How to add column total information to the list.md b/docs/assets/faq/en/42-VTable usage issue: How to add column total information to the list.md
new file mode 100644
index 000000000..ddbd2866e
--- /dev/null
+++ b/docs/assets/faq/en/42-VTable usage issue: How to add column total information to the list.md
@@ -0,0 +1,65 @@
+---
+title: VTable usage issue: How to add column total information to the list
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to add column total information to the list
+
+
+## Problem description
+
+In the list, you hope to display the total information of a column, such as sum, average, etc.
+
+
+## Solution
+
+VTable provides `aggregation `configuration for configuring data aggregation rules and display positions in the table. You can configure `aggregation `to specify global rules for aggregation in options, or configure `aggregation `to specify aggregation rules for each column. The following properties need to be configured in `aggregation `:
+* aggregationType:
+* Sum, set `aggregationType `to `AggregationType. SUM`
+* Average, set `aggregationType `to `AggregationType. AVG`
+* Maximum value, set `aggregationType `to `AggregationType. MAX`
+* Minimum, set `aggregationType `to `AggregationType. MIN`
+* Count, set `aggregationType `to `AggregationType. COUNT`
+* Custom function, set `aggregationType `to `AggregationType. CUSTOM `, set custom aggregation logic through `aggregationFun `
+* aggregationFun: Custom aggregation logic when `aggregationType is AggregationType. CUSTOM `
+* showOnTop: Controls the display position of the aggregated results. The default is `false `, which means the aggregated results are displayed at the bottom of the body. If set to `true `, the aggregated results are displayed at the top of the body.
+* FormatFun: Set the formatting function of aggregate values, and customize the display format of aggregate values.
+
+
+## Code example
+
+```
+const options = {
+ //......
+ columns: [
+ {
+ aggregation: [
+ {
+ aggregationType: VTable.TYPES.AggregationType.MAX,
+ // showOnTop: true,
+ formatFun(value) {
+ return '最高薪资:' + Math.round(value) + '元';
+ }
+ }
+ ]
+ },
+ // ......
+ ]
+};
+```
+
+
+## Results show
+
+
+
+Example code: https://www.visactor.io/vtable/demo/list-table-data-analysis/list-table-aggregation-multiple
+## Related Documents
+
+Basic Table Data Analysis Tutorial: https://www.visactor.io/vtable/guide/data_analysis/list_table_dataAnalysis
+Related api: https://www.visactor.io/vtable/option/ListTable#aggregation
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/43-VTable usage issue: How to listen to table area selection and cancellation events.md b/docs/assets/faq/en/43-VTable usage issue: How to listen to table area selection and cancellation events.md
new file mode 100644
index 000000000..6f7ddec19
--- /dev/null
+++ b/docs/assets/faq/en/43-VTable usage issue: How to listen to table area selection and cancellation events.md
@@ -0,0 +1,73 @@
+---
+title: VTable usage issue: How to listen to table area selection and cancellation events
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to listen to the table area selection cancellation event
+
+
+## Problem description
+
+Hope to be able to select and cancel events through events (click other areas of the table or click outside the table).
+
+
+## Solution
+
+VTable provides `**SELECTED_CLEAR **`events that are triggered after an operation is deselected (and there are no selected areas in the current chart area)
+
+
+## Code example
+
+```
+const tableInstance = new VTable.ListTable(option);
+tableInstance.on(VTable.ListTable.EVENT_TYPE.SELECTED_CLEAR, () => {
+ console.log("selected clear!");
+});
+```
+
+
+Full sample code (you can try pasting it into the [editor ](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree)):
+```
+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"
+ }
+];
+
+const option = {
+ records:data,
+ columns
+};
+tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+
+tableInstance.on(VTable.ListTable.EVENT_TYPE.SELECTED_CLEAR, () => {
+ console.log("selected clear!");
+});
+ })
+```
+## Related Documents
+
+Related api: https://www.visactor.io/vtable/api/events#SELECTED_CLEAR
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/44-VTable usage issue: How to set only one column to not be selected for operation.md b/docs/assets/faq/en/44-VTable usage issue: How to set only one column to not be selected for operation.md
new file mode 100644
index 000000000..c5e5fa67f
--- /dev/null
+++ b/docs/assets/faq/en/44-VTable usage issue: How to set only one column to not be selected for operation.md
@@ -0,0 +1,83 @@
+---
+title: VTable usage issue: How to set only one column to not be selected for operation
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to set only one column that cannot be selected for operation
+
+
+## Problem description
+
+How to click a cell in a column of a table without selecting it?
+
+
+## Solution
+
+VTable provides `disableSelect `and `disableHeaderSelect `configurations in the `column `:
+* DisableSelect: The content of this column is partially disabled
+* disableHeaderSelect: Disable the selection of the header section of the list
+
+
+## Code example
+
+```
+const options = {
+ columns: [
+ {
+ field: 'name',
+ title: 'name',
+ disableSelect: true,
+ disableHeaderSelect: true
+ },
+ // ......
+ ],
+ //......
+};
+```
+
+
+Full sample code (you can try pasting it into the [editor ](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree)):
+```
+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",
+ disableSelect: true,
+ disableHeaderSelect: true
+ },
+ {
+ "field": "Customer ID",
+ "title": "Customer ID",
+ "width": "auto"
+ },
+ {
+ "field": "Product Name",
+ "title": "Product Name",
+ "width": "auto"
+ }
+];
+
+const option = {
+ records:data,
+ columns,
+ widthMode:'standard',
+ columnWidthComputeMode: 'only-header'
+};
+tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+ })
+```
+## Related Documents
+
+Related api: https://www.visactor.io/vtable/option/ListTable-columns-text#disableSelect
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/45-VTable usage issue: How to manually control the tooltip display.md b/docs/assets/faq/en/45-VTable usage issue: How to manually control the tooltip display.md
new file mode 100644
index 000000000..a0adb54e9
--- /dev/null
+++ b/docs/assets/faq/en/45-VTable usage issue: How to manually control the tooltip display.md
@@ -0,0 +1,75 @@
+---
+title: VTable usage issue: How to manually control the tooltip display
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to manually control the tooltip display
+
+
+## Problem description
+
+How to manually control the display content, display style, and display timing of tooltips
+
+
+## Solution
+
+VTable provides a `showTooltip `method for manually triggering tooltip display
+```
+showTooltip: (col: number, row: number, tooltipOptions?: TooltipOptions) => voild
+```
+* Col & row: limit the cell position of tooltip
+* tooltipOptions: Detailed configuration of tooltip:
+```
+type TooltipOptions = {
+ /** tooltip内容 */
+ content: string;
+ /** tooltip框的位置 优先级高于referencePosition */
+ position?: { x: number; y: number };
+ /** tooltip框的参考位置 如果设置了position则该配置不生效 */
+ referencePosition?: {
+ /** 参考位置设置为一个矩形边界 设置placement来指定处于边界位置的方位*/
+ rect: RectProps;
+ /** 指定处于边界位置的方位 */
+ placement?: Placement;
+ };
+ /** 需要自定义样式指定className dom的tooltip生效 */
+ className?: string;
+ /** 设置tooltip的样式 */
+ style?: {
+ bgColor?: string;
+ fontSize?: number;
+ fontFamily?: string;
+ color?: string;
+ padding?: number[];
+ arrowMark?: boolean;
+ };
+};
+```
+## Code example
+
+```
+tableInstance.showTooltip(col, row, {
+content: 'custom tooltip',
+ referencePosition: { rect, placement: VTable.TYPES.Placement.right }, //TODO
+ className: 'defineTooltip',
+ style: {
+ bgColor: 'black',
+ color: 'white',
+ font: 'normal bold normal 14px/1 STKaiti',
+ arrowMark: true,
+ },
+});
+```
+## Results show
+
+
+
+Complete example: https://www.visactor.io/vtable/demo/component/tooltip
+## Related Documents
+
+Related api: https://www.visactor.io/vtable/api/Methods#showTooltip
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/46-VTable usage issue: How to set multi-level table headers.md b/docs/assets/faq/en/46-VTable usage issue: How to set multi-level table headers.md
new file mode 100644
index 000000000..83fe84858
--- /dev/null
+++ b/docs/assets/faq/en/46-VTable usage issue: How to set multi-level table headers.md
@@ -0,0 +1,76 @@
+---
+title: VTable usage issue: How to set multi-level table headers
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to set up multi-level headers
+
+
+## Problem description
+
+How to configure headers to achieve multi-level header grouping effect
+
+
+## Solution
+
+In the `column `configuration in VTable, it supports specifying the subordinate table header of the column through the `columns `configuration, and this rule can be used for multi-level nesting
+
+
+## Code example
+
+```
+const columns = [
+ {
+ field: 'id',
+ title: 'ID',
+ width: 100
+ },
+ {
+ title: 'Name',
+ columns: [
+ {
+ field: 'name1',
+ title: 'name1',
+ width: 100
+ },
+ {
+ title: 'name-level-2',
+ width: 150,
+ columns: [
+ {
+ field: 'name2',
+ title: 'name2',
+ width: 100
+ },
+ {
+ title: 'name3',
+ field: 'name3',
+ width: 150
+ }
+ ]
+ }
+ ]
+ }
+];
+
+const option = {
+ records,
+ columns,
+ // ......
+};
+```
+
+
+## Results show
+
+
+
+Complete example: https://www.visactor.io/vtable/demo/basic-functionality/list-table-header-group
+## Related Documents
+
+Related api: https://www.visactor.io/vtable/option/ListTable-columns-text#columns
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/47- How to make text automatically omitted based on cell width when using custom rendering with VTable components.md b/docs/assets/faq/en/47- How to make text automatically omitted based on cell width when using custom rendering with VTable components.md
new file mode 100644
index 000000000..84738dd7f
--- /dev/null
+++ b/docs/assets/faq/en/47- How to make text automatically omitted based on cell width when using custom rendering with VTable components.md
@@ -0,0 +1,160 @@
+---
+title: 25. How to make text automatically omitted based on cell width when using custom rendering with VTable components?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+How to make text automatically omitted based on cell width when using custom rendering with VTable components?
+## Question Description
+
+When using custom rendering with VTable in the product, the cell contains icon and text elements. It is expected that the column width can be automatically calculated based on the content at initial, and when manually dragging to resize the column width, the text can automatically be omitted instead of having the button float over the text. I am not sure how to write the code to achieve this effect of shrinking the column width and making the text turn into an sign '...'
+
+
+## Solution
+
+We use the customLayout provided by VTable, which can automatically layout and automatically measure the width to adapt to the cell width. The specific writing method is as follows:
+```
+ customLayout: (args) => {
+ const { table,row,col,rect } = args;
+ const record = table.getRecordByCell(col,row);
+ const {height, width } = rect ?? table.getCellRect(col,row);
+ const container = new VTable.CustomLayout.Group({
+ height,
+ width,
+ display: 'flex',
+ flexWrap:'no-wrap',
+ alignItems: 'center',
+ justifyContent: 'flex-front'
+ });
+ const bloggerAvatar = new VTable.CustomLayout.Image({
+ id: 'icon0',
+ width: 20,
+ height: 20,
+ image:record.bloggerAvatar,
+ cornerRadius: 10,
+ });
+ container.add(bloggerAvatar);
+ const bloggerName = new VTable.CustomLayout.Text({
+ text:record.bloggerName,
+ fontSize: 13,
+ x:20,
+ fontFamily: 'sans-serif',
+ fill: 'black',
+ maxLineWidth:width===null?undefined:width-20+1
+ });
+ container.add(bloggerName);
+ return {
+ rootContainer: container,
+ renderDefault: false,
+ };
+ }
+```
+CustomLayout needs to return a rootContainer, usually a Group object, to serve as a container for other content. Here, `flexWrap` is set so that internal elements (icon and text) do not wrap, and `alignItems` and `justifyContent` are used for horizontal and vertical alignment. The Group contains an Image and Text. If you want the text to automatically truncate with... when the space is compressed, you need to configure `maxLineWidth`. A special point here is that when `column` is set to `'auto'`, the value of `width` received by the `customLayout` function is `null`, so you need to check if it is `null`. If it is `null`, set `maxLineWidth` to `undefined` to automatically expand the width of the cell. If it is not `null`, set `maxLineWidth` according to the value of `width`. Subtracting 20 here avoids the width of the image, and the additional +1 is a buffer value that can be ignored.
+## Code Examples
+
+```
+
+ const option = {
+ columns:[
+ {
+ field: 'bloggerId',
+ title:'order number'
+ },
+ {
+ field: 'bloggerName',
+ title:'anchor nickname',
+ width:'auto',
+ style:{
+ fontFamily:'Arial',
+ fontWeight:500
+ },
+ customLayout: (args) => {
+ const { table,row,col,rect } = args;
+ const record = table.getRecordByCell(col,row);
+ const {height, width } = rect ?? table.getCellRect(col,row);
+ const container = new VTable.CustomLayout.Group({
+ height,
+ width,
+ display: 'flex',
+ flexWrap:'no-wrap',
+ alignItems: 'center',
+ justifyContent: 'flex-front'
+ });
+ const bloggerAvatar = new VTable.CustomLayout.Image({
+ id: 'icon0',
+ width: 20,
+ height: 20,
+ image:record.bloggerAvatar,
+ cornerRadius: 10,
+ });
+ container.add(bloggerAvatar);
+ const bloggerName = new VTable.CustomLayout.Text({
+ text:record.bloggerName,
+ fontSize: 13,
+ x:20,
+ fontFamily: 'sans-serif',
+ fill: 'black',
+ maxLineWidth:width===null?undefined:width-20+1
+ });
+ container.add(bloggerName);
+ return {
+ rootContainer: container,
+ renderDefault: false,
+ };
+ }
+ },
+ {
+ field: 'fansCount',
+ title:'fansCount',
+ fieldFormat(rec){
+ return rec.fansCount + 'w'
+ },
+ style:{
+ fontFamily:'Arial',
+ fontSize:12,
+ fontWeight:'bold'
+ }
+ },
+ ],
+ records:[
+ {
+ 'bloggerId': 1,
+ "bloggerName": "Virtual Anchor Xiaohua duoduo",
+ "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg",
+ "introduction": "Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.",
+ "fansCount": 400,
+ "worksCount": 10,
+ "viewCount": 5,
+ "city": "Dream City",
+ "tags": ["game", "anime", "food"]
+ },
+ {
+ 'bloggerId': 2,
+ "bloggerName": "Virtual anchor little wolf",
+ "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg",
+ "introduction": "Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.",
+ "fansCount": 800,
+ "worksCount": 20,
+ "viewCount": 15,
+ "city": "City of Music",
+ "tags": ["music", "travel", "photography"]
+ }
+ ],
+ defaultRowHeight:30
+ };
+
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+```
+## Result Display
+
+Just paste the code in the example code directly into the official editor to present it.
+
+
+## Related documents
+
+Tutorial on customLayout usage: [https://visactor.io/vtable/guide/custom_define/custom_layout](https%3A%2F%2Fvisactor.io%2Fvtable%2Fguide%2Fcustom_define%2Fcustom_layout)
+Demo of customLayout usage: [https://visactor.io/vtable/demo/custom-render/custom-cell-layout](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Fcustom-render%2Fcustom-cell-layout)
+Related API: [https://visactor.io/vtable/option/ListTable-columns-text#customLayout](https%3A%2F%2Fvisactor.io%2Fvtable%2Foption%2FListTable-columns-text%23customLayout)
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/en/48- When using the pivot table of the VTable component, how to display the calculated indicator results in a separate column.md b/docs/assets/faq/en/48- When using the pivot table of the VTable component, how to display the calculated indicator results in a separate column.md
new file mode 100644
index 000000000..9976acd2b
--- /dev/null
+++ b/docs/assets/faq/en/48- When using the pivot table of the VTable component, how to display the calculated indicator results in a separate column.md
@@ -0,0 +1,170 @@
+---
+title: 26. When using the pivot table of the VTable component, how to display the calculated indicator results in a separate column?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+When using the pivot table of the VTable component, how to display the calculated indicator results in a separate column?
+## Question Description
+
+Is there any configuration that can generate derived indicators? Calculate the indicator results after aggregation, and then display them in the indicator.
+Description: For example, my row dimension is region - area, column dimension is month, and indicator is target, actual, and achievement (this achievement is calculated as actual / target). Achievement is the indicator I want to derive, because there is no achievement field in my data.
+Screenshot of the problem:
+
+
+## Solution
+
+**The best and latest solution: **There is now a better solution because VTable has launched the feature of Pivot Table calculated fields!!!
+**Previous solution:**
+Taking the pivot table on the official website of VTable as an example for similar target modifications, we add an indicator called `Profit Ratio` to the original demo, and use the `format` function to calculate the displayed value. The calculation logic depends on the values of the `Sales` and `Profit` indicators. That is, we calculate a profit ratio where `profit ratio = profit / sales`.
+```
+ {
+ indicatorKey: 'Profit Ratio',
+ title: 'Profit Ratio',
+ width: 'auto',
+ showSort: false,
+ headerStyle: {
+ fontWeight: 'normal'
+ },
+ format: (value,col,row,table) => {
+ const sales=table.getCellOriginValue(col-2,row);
+ const profit=table.getCellOriginValue(col-1,row);
+ const ratio= profit/sales;
+ var percentage = ratio * 100;
+ return percentage.toFixed(2) + "%";
+ }
+ }
+```
+## Code Examples
+
+```
+let tableInstance;
+fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_data.json')
+ .then(res => res.json())
+ .then(data => {
+ const option = {
+ records: data,
+ rows: [
+ {
+ dimensionKey: 'City',
+ title: 'City',
+ headerStyle: {
+ textStick: true
+ },
+ width: 'auto'
+ }
+ ],
+ columns: [
+ {
+ dimensionKey: 'Category',
+ title: 'Category',
+ headerStyle: {
+ textStick: true
+ },
+ width: 'auto'
+ }
+ ],
+ indicators: [
+ {
+ indicatorKey: 'Quantity',
+ title: 'Quantity',
+ width: 'auto',
+ showSort: false,
+ headerStyle: {
+ fontWeight: 'normal'
+ },
+ style: {
+ padding: [16, 28, 16, 28],
+ color(args) {
+ if (args.dataValue >= 0) return 'black';
+ return 'red';
+ }
+ }
+ },
+ {
+ indicatorKey: 'Sales',
+ title: 'Sales',
+ width: 'auto',
+ showSort: false,
+ headerStyle: {
+ fontWeight: 'normal'
+ },
+ format: rec => {
+ return '$' + Number(rec).toFixed(2);
+ },
+ style: {
+ padding: [16, 28, 16, 28],
+ color(args) {
+ if (args.dataValue >= 0) return 'black';
+ return 'red';
+ }
+ }
+ },
+ {
+ indicatorKey: 'Profit',
+ title: 'Profit',
+ width: 'auto',
+ showSort: false,
+ headerStyle: {
+ fontWeight: 'normal'
+ },
+ format: rec => {
+ return '$' + Number(rec).toFixed(2);
+ },
+ style: {
+ padding: [16, 28, 16, 28],
+ color(args) {
+ if (args.dataValue >= 0) return 'black';
+ return 'red';
+ }
+ }
+ },
+ {
+ indicatorKey: 'Profit Ratio',
+ title: 'Profit Ratio',
+ width: 'auto',
+ showSort: false,
+ headerStyle: {
+ fontWeight: 'normal'
+ },
+ format: (value,col,row,table) => {
+ const sales=table.getCellOriginValue(col-2,row);
+ const profit=table.getCellOriginValue(col-1,row);
+ const ratio= profit/sales;
+ var percentage = ratio * 100;
+ return percentage.toFixed(2) + "%";
+ }
+ }
+ ],
+ corner: {
+ titleOnDimension: 'row',
+ headerStyle: {
+ textStick: true
+ }
+ },
+ dataConfig: {
+ sortRules: [
+ {
+ sortField: 'Category',
+ sortBy: ['Office Supplies', 'Technology', 'Furniture']
+ }
+ ]
+ },
+ widthMode: 'standard'
+ };
+ tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID), option);
+ window['tableInstance'] = tableInstance;
+ });
+```
+## Result Display
+
+Just paste the code in the example code directly into the official editor to display it.
+
+
+## Related documents
+
+Tutorial on pivot table usage: [https://visactor.io/vtable/guide/table_type/Pivot_table/pivot_table_useage](https%3A%2F%2Fvisactor.io%2Fvtable%2Fguide%2Ftable_type%2FPivot_table%2Fpivot_table_useage)
+Demo of pivot table usage: [https://visactor.io/vtable/demo/table-type/pivot-analysis-table](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Ftable-type%2Fpivot-analysis-table)
+Related API: [https://visactor.io/vtable/option/PivotTable#indicators](https%3A%2F%2Fvisactor.io%2Fvtable%2Foption%2FPivotTable%23indicators)
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/en/49- How to implement dimension drill-down function when using VTable pivot table component.md b/docs/assets/faq/en/49- How to implement dimension drill-down function when using VTable pivot table component.md
new file mode 100644
index 000000000..9ed2f5305
--- /dev/null
+++ b/docs/assets/faq/en/49- How to implement dimension drill-down function when using VTable pivot table component.md
@@ -0,0 +1,93 @@
+---
+title: 27. How to implement dimension drill-down function when using VTable pivot table component?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+### Problem title
+
+How to implement dimension drill-down function when using VTable pivot table component?
+### Problem Description
+
+Does the VTable pivot table support drill-down interaction on the front end?
+### Solution
+
+
+
+Configuring this will give you an icon and listen for events ([https://visactor.io/vtable/api/events#DRILLMENU_CLICK](https%3A%2F%2Fvisactor.io%2Fvtable%2Fapi%2Fevents%23DRILLMENU_CLICK)). Call the interface `updateOption` to update the full configuration after obtaining new data.
+## Code Example
+
+You can refer to the official demo: [https://visactor.io/vtable/demo/data-analysis/pivot-analysis-table-drill](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Fdata-analysis%2Fpivot-analysis-table-drill).
+Key configuration for drillDown:
+```
+const option = {
+ records: data,
+ rows: [
+ {
+ dimensionKey: 'Category',
+ title: 'Category',
+ drillDown: true,
+ headerStyle: {
+ textStick: true
+ },
+ width: 'auto'
+ }
+ ],
+ columns: [
+ {
+ dimensionKey: 'Region',
+ title: 'Region',
+ headerStyle: {
+ textStick: true
+ },
+ width: 'auto'
+ }
+ ],
+ indicators: ...
+};
+```
+After configuration, the drill-down icon is displayed, and the click event of the icon `drillmenu_click` is listened. In the event processing logic, `updateOption` is called to update the configuration, and the configured drill-down icon changes to the drill-up icon drillUp.
+```
+tableInstance.on('drillmenu_click', args => {
+ if (args.drillDown) {
+ if (args.dimensionKey === 'Category') {
+ tableInstance.updateOption({
+ records: newData,
+ rows: [
+ {
+ dimensionKey: 'Category',
+ title: 'Category',
+ drillUp: true,
+ headerStyle: {
+ textStick: true
+ },
+ width: 'auto'
+ },
+ {
+ dimensionKey: 'Sub-Category',
+ title: 'Sub-Catogery',
+ headerStyle: {
+ textStick: true
+ },
+ width: 'auto'
+ }
+ ],
+ columns: ...,
+ indicators: ...
+ });
+ }
+ }
+```
+
+
+## Result Display
+
+Here is the official website example effect:
+
+
+## 相关文档
+
+Tutorial on using drill-down and drill-through in pivot tables: https://visactor.io/vtable/guide/data_analysis/pivot_table_dataAnalysis
+Demo of using Drill Down and Drill Through in pivot tables: https://visactor.io/vtable/demo/data-analysis/pivot-analysis-table-drill?open_in_browser=true
+Related APIs: https://visactor.io/vtable/option/PivotTable-columns-text#drillDown
+https://visactor.io/vtable/api/events?open_in_browser=true#DRILLMENU_CLICK
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/en/50- How to manually update the state when using the Checkbox in the VTable component.md b/docs/assets/faq/en/50- How to manually update the state when using the Checkbox in the VTable component.md
new file mode 100644
index 000000000..5e2121ff1
--- /dev/null
+++ b/docs/assets/faq/en/50- How to manually update the state when using the Checkbox in the VTable component.md
@@ -0,0 +1,43 @@
+---
+title: 28. How to manually update the state when using the Checkbox in the VTable component?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Problem Title
+
+How to manually update the state when using the Checkbox in the VTable component?
+## Problem Description
+
+Is there a way to manually set the checkbox of the ListTable in VTable, and how to clear the selected state of all checkboxes?
+## Solution
+
+### Call the interface to update the state
+
+You can call the interface `setCellCheckboxState`. This interface can set the checkbox state of a cell, and is defined as follows:
+```
+setCellCheckboxState(col: number, row: number, checked: boolean) => void
+```
+Parameter description:
+* `col`: Column number
+* `row`: Row number
+* `checked`: Whether checked
+Example: `tableInstance.setCellCheckboxState(0, 3, true)` sets the Checkbox state of the cell at position (0, 3) to checked state. The demo effect after modifying the official website is as follows: [https://visactor.io/vtable/demo/cell-type/checkbox](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Fcell-type%2Fcheckbox)
+
+
+### Batch update status
+
+For the second question about batch update, currently, there is no dedicated interface to reset the status of all checkboxes. However, you can achieve the goal of updating all checkbox statuses by resetting the data using `setRecords` or updating the column configuration using `updateColumns`.
+1. Update through column configuration
+Add "checked" as true or false in the column configuration to set the status of the entire column. However, if there is a field in the data records indicating the status, the data record will prevail.
+
+
+1. To batch set the checkbox status by updating the records data source, it is required to explicitly specify the checkbox value fields in the records.
+
+
+## Related documents
+
+Tutorial on checkbox type usage: [https://visactor.io/vtable/guide/cell_type/checkbox](https%3A%2F%2Fvisactor.io%2Fvtable%2Fguide%2Fcell_type%2Fcheckbox)
+Checkbox demo: [https://visactor.io/vtable/demo/cell-type/checkbox](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Fcell-type%2Fcheckbox)
+Related API：https://visactor.io/vtable/option/ListTable-columns-checkbox#cellType
+https://visactor.io/vtable/api/Methods#setCellCheckboxState
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/en/51- How to delete the content of the selected cell using hotkeys in VTable.md b/docs/assets/faq/en/51- How to delete the content of the selected cell using hotkeys in VTable.md
new file mode 100644
index 000000000..535a7a679
--- /dev/null
+++ b/docs/assets/faq/en/51- How to delete the content of the selected cell using hotkeys in VTable.md
@@ -0,0 +1,157 @@
+---
+title: 29. How to delete the content of the selected cell using hotkeys in VTable?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+How to delete the content of the selected cell using hotkeys in VTable?
+## Question Description
+
+We have implemented the editable table business scenario using the editing capabilities provided by VTable. However, there is a requirement to delete the content of the selected cell when the delete key or backspace key is pressed on the keyboard.
+## Solution
+
+Currently, VTable itself does not support this feature. You can implement it yourself by listening for keyboard events and calling the VTable interface to update cell values.
+First, listen for the `keydown` event and call the `changeCellValue` interface to update cell values in the event.
+See the demo for implementation logic: [https://visactor.io/vtable/demo/interaction/context-menu](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Finteraction%2Fcontext-menu).
+```
+ // 监听键盘事件
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Delete'||e.key === 'Backspace') {
+ let selectCells = tableInstance.getSelectedCellInfos();
+ if (selectCells?.length > 0) {
+ // 如果选中的是范围，则删除范围内的所有单元格
+ deleteSelectRange(selectCells);
+ } else {
+ // 否则只删除单个单元格
+ tableInstance.changeCellValue(args.col, args.row, '');
+ }
+ }
+ });
+ //将选中单元格的值设置为空
+ 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, '');
+ }
+ }
+ }
+```
+## Code Examples
+
+```
+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',
+ menu: {
+ contextMenuItems: ['copy', 'paste', 'delete', '...']
+ }
+ };
+ tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+ window['tableInstance'] = tableInstance;
+
+ // 监听键盘事件
+ document.addEventListener('keydown', (e) => {
+ debugger
+ if (e.key === 'Delete'||e.key === 'Backspace') {
+ let selectCells = tableInstance.getSelectedCellInfos();
+ if (selectCells?.length > 0 ) {
+ // 如果选中的是范围，则删除范围内的所有单元格
+ deleteSelectRange(selectCells);
+ } else {
+ // 否则只删除单个单元格
+ tableInstance.changeCellValue(args.col, args.row, '');
+ }
+ }
+ });
+ });
+
+ //将选中单元格的值设置为空
+ 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, '');
+ }
+ }
+ }
+
+```
+
+
+## Result Display
+
+You can copy the code to the official website's code editor and test the effect directly.
+
+
+## Related documents
+
+Demo of deleting data: [https://visactor.io/vtable/demo/interaction/context-menu](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Finteraction%2Fcontext-menu)
+Tutorial of data update: [https://visactor.io/vtable/guide/data/data_format](https%3A%2F%2Fvisactor.io%2Fvtable%2Fguide%2Fdata%2Fdata_format)
+Related API:
+https://visactor.io/vtable/api/Methods#changeCellValue
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/52- Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused.md b/docs/assets/faq/en/52- Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused.md
new file mode 100644
index 000000000..2eb453531
--- /dev/null
+++ b/docs/assets/faq/en/52- Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused.md
@@ -0,0 +1,54 @@
+---
+title: 30. Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused?
+## Problem Description
+
+In business scenarios, there are many columns in the table. If each column needs to be configured with an editor, it will be more cumbersome. Is there a simple way to define it?
+## Solution
+
+You can decide which way to configure the editor according to the specific degree of business reuse:
+1. Only configure a global editor and use it for all cells:
+```
+import { DateInputEditor, InputEditor, ListEditor, TextAreaEditor } from '@visactor/vtable-editors';
+const option={
+ editor: new InputEditor()
+}
+```
+After configuration, you can click on any cell to edit it.
+
+
+1. If a few columns can share the same editor, you can declare the same `editor` name in the `columns` column configuration for reuse.
+```
+import { DateInputEditor, InputEditor, ListEditor, TextAreaEditor } from '@visactor/vtable-editors';
+const input_editor = new InputEditor();
+VTable.register.editor('input-editor', input_editor);
+
+const option={
+ columns:[
+ {field:'id',title: 'ID'},
+ {field:'name',title: 'NAME',editor:'input-editor'},
+ {field:'address',title: 'ADDRESS',editor:'input-editor'},
+ ]
+}
+```
+After configuration, you will find that the cells in this column can all be edited.
+
+
+You can modify and debug the demo on the official website in the above two ways to verify. demo URL:https://visactor.io/vtable/demo/edit/edit-cell
+
+
+## Related documents
+
+* Editing form demo: [https://visactor.io/vtable/demo/edit/edit-cell](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Fedit%2Fedit-cell)
+* Editing form tutorial: [https://visactor.io/vtable/guide/edit/edit_cell](https%3A%2F%2Fvisactor.io%2Fvtable%2Fguide%2Fedit%2Fedit_cell)
+* Related API:
+https://visactor.io/vtable/option/ListTable#editor
+https://visactor.io/vtable/option/ListTable-columns-text#editor
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/53- How to control the timing of exiting edit mode after implementing editable cells in VTable components.md b/docs/assets/faq/en/53- How to control the timing of exiting edit mode after implementing editable cells in VTable components.md
new file mode 100644
index 000000000..85643065e
--- /dev/null
+++ b/docs/assets/faq/en/53- How to control the timing of exiting edit mode after implementing editable cells in VTable components.md
@@ -0,0 +1,218 @@
+---
+title: 31. How to control the timing of exiting edit mode after implementing editable cells in VTable components?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+How to control the timing of exiting edit mode after implementing editable cells in VTable components?
+## Question Description
+
+Referring to the flowchart provided on the official website, if a user clicks another cell or presses the Enter key while in edit mode, will VTable definitely trigger the onEnd event to exit edit mode? In my project, there is a scenario where I do not want the edit mode to be exited when these interactions are triggered. Is there a way to achieve this currently?
+
+
+## Solution
+
+### Click without exit edit
+
+You can use a custom editor to control when to exit the edit state. Because the VTable logic calls the editor's `isEditorElement` method, if it returns false, the VTable will follow the exit edit logic; if it returns true, it will not exit the edit mode. Therefore, we can use this method to meet the requirement of not exiting the edit mode. The specific tutorial address is: [https://visactor.io/vtable/guide/edit/edit_cell](https%3A%2F%2Fvisactor.io%2Fvtable%2Fguide%2Fedit%2Fedit_cell)
+
+
+### Type enter without exiting edit
+
+This can listen to the keydown event of editing `dom`, directly organize bubbling, and prevent `VTable` from listening, so it will not exit editing.
+## Example code
+
+```
+let tableInstance;
+ class MyInputEditor {
+ createElement() {
+ const input = document.createElement('input');
+ input.setAttribute('type', 'text');
+ input.style.position = 'absolute';
+ input.style.padding = '4px';
+ input.style.width = '100%';
+ input.style.boxSizing = 'border-box';
+ this.element = input;
+ this.container.appendChild(input);
+ // 监听键盘事件
+ input.addEventListener('keydown', (e) => {
+ // 阻止冒泡
+ e.stopPropagation();
+ });
+ }
+ setValue(value) {
+ this.element.value = typeof value !== 'undefined' ? value : '';
+ }
+ getValue() {
+ return this.element.value;
+ }
+ onStart({ value, referencePosition, container, endEdit }){
+ this.container = container;
+ this.successCallback = endEdit;
+ if (!this.element) {
+ this.createElement();
+
+ if (value !== undefined && value !== null) {
+ this.setValue(value);
+ }
+ if (referencePosition?.rect) {
+ this.adjustPosition(referencePosition.rect);
+ }
+ }
+ this.element.focus();
+ }
+
+ adjustPosition(rect) {
+ this.element.style.top = rect.top + 'px';
+ this.element.style.left = rect.left + 'px';
+ this.element.style.width = rect.width + 'px';
+ this.element.style.height = rect.height + 'px';
+ }
+ onEnd() {
+ this.container.removeChild(this.element);
+ this.element = undefined;
+ }
+
+ isEditorElement(target) {
+ // 仅允许点击到表格外部才会结束编辑
+ if(target.tagName === 'CANVAS')
+ return true;
+ return target === this.element;
+ }
+}
+
+const my_editor = new MyInputEditor();
+VTable.register.editor('my_editor', my_editor);
+
+const option = {
+ container: document.getElementById(CONTAINER_ID),
+ columns: [
+ {
+ field: 'bloggerName',
+ title: 'bloggerName'
+ },
+ {
+ field: 'fansCount',
+ title: 'fansCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
+ },
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'worksCount',
+ title: 'worksCount',
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
+ },
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
+ },
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ ],
+ records: [
+ {
+ bloggerId: 1,
+ bloggerName: 'Virtual Anchor Xiaohua',
+ fansCount: 400,
+ worksCount: 10,
+ viewCount: 5,
+ city: 'Dream City',
+ tags: ['game', 'anime', 'food']
+ },
+ {
+ bloggerId: 2,
+ bloggerName: 'Virtual anchor little wolf',
+ fansCount: 800,
+ worksCount: 20,
+ viewCount: 15,
+ city: 'City of Music',
+ tags: ['music', 'travel', 'photography']
+ },
+ {
+ bloggerId: 3,
+ bloggerName: 'Virtual anchor bunny',
+ fansCount: 600,
+ worksCount: 15,
+ viewCount: 10,
+ city: 'City of Art',
+ tags: ['painting', 'handmade', 'beauty makeup']
+ },
+ {
+ bloggerId: 4,
+ bloggerName: 'Virtual anchor kitten',
+ fansCount: 1000,
+ worksCount: 30,
+ viewCount: 20,
+ city: 'Health City',
+ tags: ['dance', 'fitness', 'cooking']
+ },
+ {
+ bloggerId: 5,
+ bloggerName: 'Virtual anchor Bear',
+ fansCount: 1200,
+ worksCount: 25,
+ viewCount: 18,
+ city: 'City of Wisdom',
+ tags: ['Movie', 'Literature']
+ },
+ {
+ bloggerId: 6,
+ bloggerName: 'Virtual anchor bird',
+ fansCount: 900,
+ worksCount: 12,
+ viewCount: 8,
+ city: 'Happy City',
+ tags: ['music', 'performance', 'variety']
+ }
+ ],
+ enableLineBreak: true,
+
+ editCellTrigger: 'click',
+ editor:'my_editor'
+};
+tableInstance = new VTable.ListTable(option);
+tableInstance.on('change_cell_value', arg => {
+ console.log(arg);
+});
+```
+
+
+## Related documents
+
+* Editing form demo: [https://visactor.io/vtable/demo/edit/edit-cell](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Fedit%2Fedit-cell)
+* Editing form tutorial: [https://visactor.io/vtable/guide/edit/edit_cell](https%3A%2F%2Fvisactor.io%2Fvtable%2Fguide%2Fedit%2Fedit_cell)
+* Related API:
+https://visactor.io/vtable/option/ListTable#editor
+https://visactor.io/vtable/option/ListTable-columns-text#editor
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/54- Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content.md b/docs/assets/faq/en/54- Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content.md
new file mode 100644
index 000000000..5e287cab9
--- /dev/null
+++ b/docs/assets/faq/en/54- Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content.md
@@ -0,0 +1,160 @@
+---
+title: 32. Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Problem Title
+
+Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content?
+## Problem Description
+
+I utilized the tooltip feature of the VTable component, which means when the cell content is too long, a tooltip will appear when the mouse hovers over the cell.
+However, I found that the content of this tooltip cannot be selected because when the mouse leaves the cell and tries to move to the tooltip, the tooltip disappears and it is impossible to move the mouse over it. Also, when the content is too long, the tooltip will be stretched very large, resulting in an ugly effect. I hope that when the content is very long, I can scroll through it. Can VTable achieve the effect I need?
+## Solution
+
+VTable provides a configuration solution to this problem. First, normally, as soon as the mouse leaves the cell with the overflowing text, the `tooltip` disappears immediately, making it impossible to move the mouse to the tooltip. Therefore, a new configuration called `overflowTextTooltipDisappearDelay` is added to the tooltip configuration to delay the disappearance of the tooltip. After configuring this, the mouse has enough time to move to the tooltip, thus solving the need to select and copy text. (The usage of tooltips for Icons is similar!)
+```
+ /** tooltip相关配置 */
+ tooltip?: {
+ /** html目前实现较完整 先默认html渲染方式 */
+ renderMode?: 'html'; // 目前暂不支持canvas方案
+ /** Whether to show the thumbnail tooltip. Instead of the original hover:isShowTooltip configuration, it is temporarily necessary to set the renderMode configuration to html in order to display it. canvas has not been developed yet.*/
+ isShowOverflowTextTooltip?: boolean;
+*** /** Abbreviation text prompt box delayed disappearance time **/***
+** overflowTextTooltipDisappearDelay?: number;**
+ /** 是否将 tooltip 框限制在画布区域内，默认开启。针对renderMode:"html"有效 */
+ confine?: boolean;
+ };
+```
+To limit the size of a tooltip pop-up box, you can configure it in the style of the tooltip. The specific style definition is as follows:
+```
+/**
+ * Bubble box, button explanation information
+ */
+export type TooltipStyle = {
+ fontFamily?: string;
+ fontSize?: number;
+ color?: string;
+ padding?: number[];
+ bgColor?: string;
+** maxWidth?: number;**
+** maxHeight?: number;**
+};
+```
+Configure it by putting it in the theme.
+```
+const option={
+ tooltip: {
+ renderMode: 'html',
+ isShowOverflowTextTooltip: true,
+ overflowTextTooltipDisappearDelay: 1000
+ },
+ theme:{
+ tooltipStyle:{
+ **maxWidth：200，**
+ **maxHeight：100**
+ }
+ }
+}
+```
+
+
+## Code Examples
+
+You can paste it into the official editor for testing:
+https://visactor.io/vtable/demo/component/tooltip
+```
+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(CONTAINER_ID), option);
+ window['tableInstance'] = tableInstance;
+
+ });
+```
+## Result Presentation
+
+
+
+## Related Documentation
+
+Related API: https://www.visactor.io/vtable/api/Methods#showTooltip
+Tutorial: https://www.visactor.io/vtable/guide/components/tooltip
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/55- After custom rendering in the column configuration of the VTable component, the icon configuration fails- How to solve this.md b/docs/assets/faq/en/55- After custom rendering in the column configuration of the VTable component, the icon configuration fails- How to solve this.md
new file mode 100644
index 000000000..c221d2d90
--- /dev/null
+++ b/docs/assets/faq/en/55- After custom rendering in the column configuration of the VTable component, the icon configuration fails- How to solve this.md
@@ -0,0 +1,127 @@
+---
+title: 33. After custom rendering in the column configuration of the VTable component, the icon configuration fails. How to solve this?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+After custom rendering in the column configuration of the VTable component, the icon configuration fails. How to solve this?
+## Problem Description
+
+We have used the customLayout or customRender configuration for custom rendering in business scenarios, but we also want to use the icon button icon feature of VTable itself. However, after both configurations are enabled, the icon does not display correctly. Is there any way to make both configurations work properly?
+As shown below, only the content of customRender is displayed. The icon configuration icon is not displayed.
+
+
+## Solution
+
+You can solve this problem by using renderDefault of the custom rendering configuration.
+However, after configuration, you may find unwanted content being drawn.
+
+
+
+
+To solve this problem, you can use fieldFormat to directly return an empty value with this custom function, so that the default text content will not be drawn.
+
+
+## Code Examples
+
+You can paste it into the official editor for testing:
+https://visactor.io/vtable/demo/custom-render/custom-render
+```
+const option = {
+ columns:[
+ {
+ field: 'not_urgency',
+ title:'not urgency',
+ width:400,
+ headerStyle:{
+ lineHeight:50,
+ bgColor:'#4991e3',
+ color:'white',
+ textAlign:'center',
+ fontSize:26,
+ fontWeight:600,
+ },
+ style:{
+ fontFamily:'Arial',
+ fontSize:12,
+ fontWeight:'bold'
+ },
+ fieldFormat:()=>'',
+ icon:{
+ name: 'detail',
+ type: 'svg',
+ svg: ``,
+ marginRight: 8,
+ positionType: VTable.TYPES.IconPosition.absoluteRight,
+ width: 16,
+ height: 16,
+ cursor: 'pointer',
+ visibleTime: 'mouseenter_cell',
+ funcType: 'record_detail',
+ tooltip: {
+ title:'展开详情',
+ style: {
+ fontSize: 12,
+ padding: [8, 8, 8, 8],
+ bgColor: '#46484a',
+ arrowMark: true,
+ color: 'white',
+ maxHeight: 100,
+ maxWidth: 200
+ },
+ placement: VTable.TYPES.Placement.top
+ }
+ },
+ customRender(args){
+ const { width, height}= args.rect;
+ const {dataValue,table,row} =args;
+ const elements=[];
+ let top=30;
+ const left=15;
+ let maxWidth=0;
+ elements.push({
+ type: 'text',
+ fill: 'red',
+ fontSize: 20,
+ fontWeight: 500,
+ textBaseline: 'middle',
+ text: row===1? 'important but not urgency':'not important and not urgency',
+ x: left+50,
+ y: top-5,
+ });
+ return {
+ elements,
+ expectedHeight:top+20,
+ expectedWidth: 300,
+ renderDefault:true
+ }
+ }
+ },
+ ],
+ records:[
+ {
+ 'type': 'important',
+ "urgency": ['crisis','urgent problem','tasks that must be completed within a limited time'],
+ "not_urgency": ['preventive measures','development relationship','identify new development opportunities','establish long-term goals'],
+ },
+ {
+ 'type': 'Not\nimportant',
+ "urgency": ['Receive visitors','Certain calls, reports, letters, etc','Urgent matters','Public activities'],
+ "not_urgency": ['Trivial busy work','Some letters','Some phone calls','Time-killing activities','Some pleasant activities'],
+ },
+ ],
+ defaultRowHeight:80,
+ heightMode:'autoHeight',
+ widthMode:'standard',
+ autoWrapText:true,
+ };
+
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+```
+## Relevant Documents
+
+Related API: [https://visactor.io/vtable/option/ListTable-columns-text#customRender.renderDefault](https%3A%2F%2Fvisactor.io%2Fvtable%2Foption%2FListTable-columns-text%23customRender.renderDefault)
+Tutorial：https://visactor.io/vtable/demo/custom-render/custom-render
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/en/56-VTable table component, using customLayout to customize the drawing elements, how to listen for mouse hover events on the elements, similar to the DOM's mouseenter event.md b/docs/assets/faq/en/56-VTable table component, using customLayout to customize the drawing elements, how to listen for mouse hover events on the elements, similar to the DOM's mouseenter event.md
new file mode 100644
index 000000000..8f82f8d66
--- /dev/null
+++ b/docs/assets/faq/en/56-VTable table component, using customLayout to customize the drawing elements, how to listen for mouse hover events on the elements, similar to the DOM's mouseenter event.md
@@ -0,0 +1,231 @@
+---
+title: VTable table component, using customLayout to customize the drawing elements, how to listen for mouse hover events on the elements, similar to the DOM's mouseenter event?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question Title
+
+VTable table component, using customLayout to customize the drawing elements, how to listen for mouse hover events on the elements, similar to the DOM's mouseenter event?
+## Question Description
+
+When customizing cell content using customLayout, including Text and Image, I would like to have some custom logic when hovering over the Image. Currently, the mouse-enter event for the cell cannot distinguish between specific targets.
+
+
+For DOM elements in JavaScript, the mouseenter event is triggered only once when the mouse pointer enters (moves over) the element. So is there an event like mouseenter_cell to monitor specified content in custom cells?
+## Solution
+
+You can bind the mouseenter and mouseleave events to the image dom of the custom layout 'customLayout'.
+
+
+Code example
+You can paste it into the official editor to test:
+https://visactor.io/vtable/demo/custom-render/custom-cell-layout-jsx
+```
+const VGroup = VTable.VGroup;
+const VText = VTable.VText;
+const VImage = VTable.VImage;
+const VTag = VTable.VTag;
+
+const option = {
+ container: document.getElementById('container'),
+ columns: [
+ {
+ field: 'bloggerId',
+ title: 'bloggerId'
+ },
+ {
+ field: 'bloggerName',
+ title: 'bloggerName',
+ width: 330,
+ customLayout: args => {
+ const { table, row, col, rect } = args;
+ const { height, width } = rect || table.getCellRect(col, row);
+ const record = table.getRecordByRowCol(col, row);
+ // const jsx = jsx;
+ const container = (
+
+
+
+
+ ',
+ boundsPadding: [0, 0, 0, 10],
+ cursor: 'pointer'
+ }}
+ stateProxy={stateName => {
+ if (stateName === 'hover') {
+ return {
+ background: {
+ fill: 'green',
+ cornerRadius: 5,
+ expandX: 1,
+ expandY: 1
+ }
+ };
+ }
+ }}
+ onPointerEnter={event => {
+ event.currentTarget.addState('hover', true, false);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ onPointerLeave={event => {
+ event.currentTarget.removeState('hover', false);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ >
+
+
+
+
+ );
+
+ // decode(container)
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }
+ },
+ {
+ field: 'fansCount',
+ title: 'fansCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
+ },
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'worksCount',
+ title: 'worksCount',
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
+ },
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
+ },
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: '',
+ title: 'operation',
+ width: 100,
+ icon: ['favorite', 'message']
+ }
+ ],
+ records: [
+ {
+ bloggerId: 6,
+ bloggerName: 'Virtual anchor bird',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
+ fansCount: 900,
+ worksCount: 12,
+ viewCount: 8,
+ city: 'Happy City',
+ tags: ['music', 'performance', 'variety']
+ }
+ ],
+ defaultRowHeight: 80
+};
+
+const instance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+// 只为了方便控制太调试用，不要拷贝
+window.tableInstance = instance;
+```
+## 相关文档
+
+demo: https://visactor.io/vtable/demo/custom-render/custom-cell-layout-jsx
+Relevant api：https://visactor.io/vtable/option/ListTable-columns-text#customLayout
+Tutorial：https://visactor.io/vtable/guide/custom_define/custom_layout
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/57-How to set the text style of the VTable table component.md b/docs/assets/faq/en/57-How to set the text style of the VTable table component.md
new file mode 100644
index 000000000..614016140
--- /dev/null
+++ b/docs/assets/faq/en/57-How to set the text style of the VTable table component.md
@@ -0,0 +1,105 @@
+---
+title: How to set the text style of the VTable table component?
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to set text style for VTable component?
+## Problem description
+
+What text styles are supported and how to configure them when using the VTable table component?
+## Solution
+
+VTable supports the following text styles:
+* `fontSize `: The font size of the text.
+* `FontFamily `: Font used for text. Multiple fonts can be specified, such as `Arial, sans-serif `, and the browser will search and use them in the specified order.
+* `FontWeight `: Set font thickness.
+* `FontVariant `: Sets the font variant.
+* `fontStyle `: Set font style.
+The places where VTable supports setting text styles are:
+* `Column (row/indicator) `, configure the style corresponding to the column (row/indicator)
+* `Style `: The style corresponding to the content cell
+* `headerStyle `: the style corresponding to the header cell
+* `In theme `, configure the theme style
+* `defaultStyle `: default style
+* `bodyStyle `: table content area style
+* `headerStyle `: header (list)/list header (pivot table) style
+* `rowHeaderStyle `: Row header style
+* `cornerHeaderStyle `: corner head style
+* `bottomFrozenStyle `: Bottom frozen cell style
+* `rightFrozenStyle `: Freeze cell style on the right
+
+
+## Code example
+
+You can paste it into the official website editor for testing: [https://visactor.io/vtable/demo/table-type/list-table](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table)
+```
+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",
+ style: {
+ fontSize: 14
+ },
+ headerStyle: {
+ fontSize: 16,
+ fontFamily: 'Verdana'
+ }
+ },
+ {
+ "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"
+ }
+];
+
+const option = {
+ records:data,
+ columns,
+ widthMode:'standard',
+ theme: VTable.themes.DEFAULT.extends({
+ bodyStyle: {
+ fontSize: 12
+ },
+ headerStyle: {
+ fontSize: 18
+ }
+ })
+};
+tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+ })
+```
+## Related Documents
+
+Related api: https://visactor.io/vtable/option/ListTable-columns-text#style.fontSize
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/58-How to customize highlighted cells in the VTable component.md b/docs/assets/faq/en/58-How to customize highlighted cells in the VTable component.md
new file mode 100644
index 000000000..e73db33e8
--- /dev/null
+++ b/docs/assets/faq/en/58-How to customize highlighted cells in the VTable component.md
@@ -0,0 +1,99 @@
+---
+title: How to customize highlighted cells in the VTable component
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to customize highlighted cells in the VTable component?
+## Problem description
+
+How to customize highlighted cells and specify the highlighting style using the VTable table component?
+## Solution
+
+VTable supports custom cell styles, which can be used to implement custom highlighting function.
+### Registration style
+
+First, you need to register a custom style
+Need to define `id `and `style `two attributes:
+* Id: the unique id of the custom style
+* Style: Custom cell style, the same as the `style `configuration in the `column `, the final presentation effect is the fusion of the original cell style and the custom style
+Custom style registration is divided into two ways, `option `configuration and API configuration:
+* The customCellStyle property in the option option receives an array composed of multiple custom style objects.
+```
+// init option
+const option = {
+ // ......
+ customCellStyle: [
+ {
+ id: 'custom-1',
+ style: {
+ bgColor: 'red'
+ }
+ }
+ ]
+}
+```
+* The API can register custom styles through the `registerCustomCellStyle `methods provided by the VTable instance:
+```
+instance.registerCustomCellStyle(id, style)
+```
+### Assignment style
+
+To use a registered custom style, you need to assign the custom style to the cell. Assignment requires defining two properties, `cellPosition `and `customStyleId `:
+* cellPosition: Cell position information, supports configuring individual cells and cell ranges.
+* Single cell: `{row: number, col: number}`
+* Cell range: `{range: {start: {row: number, col: number}, end: {row: number, col: number}}}`
+* customStyleId: Custom style id, the same as the id defined when registering custom styles
+There are two ways to allocate, configure in `option `and configure using API:
+* The `customCellStyleArrangement `property in option receives an array of custom assignment style objects:
+```
+// init option
+const option = {
+ // ......
+ customCellStyleArrangement: [
+ {
+ cellPosition: {
+ col: 3,
+ row: 4
+ },
+ customStyleId: 'custom-1'
+ },
+ {
+ cellPosition: {
+ range: {
+ start: {
+ col: 5,
+ row: 5
+ },
+ end: {
+ col: 7,
+ row: 7
+ }
+ }
+ },
+ customStyleId: 'custom-2'
+ }
+ ]
+}
+```
+* The API can assign custom styles through the `arrangeCustomCellStyle `methods provided by the VTable instance:
+```
+instance.arrangeCustomCellStyle(cellPosition, customStyleId)
+```
+### Update and delete styles
+
+Custom style After registration, you can update the custom style of the same id through `registerCustomCellStyle `method. After the update, the cell style of the assigned custom style will be updated; if `newStyle `is `undefined `| `null `, it means to delete the custom style. After deletion, the cell style of the assigned custom style will restore the default style
+```
+instance.registerCustomCellStyle(id, newStyle)
+```
+The assigned custom style cell area can be updated by `arrangeCustomCellStyle `method, and the style of the cell area will be updated after the update; if the `customStyleId `is `undefined `| `null `, it means that the restored cell style is the default style
+## Code example
+
+demo：https://visactor.io/vtable/demo/custom-render/custom-style
+## Related Documents
+
+Related api: https://visactor.io/vtable/option/ListTable-columns-text#style.fontSize
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/59-How the VTable component progressively loads sub-nodes in a list.md b/docs/assets/faq/en/59-How the VTable component progressively loads sub-nodes in a list.md
new file mode 100644
index 000000000..9502aaddd
--- /dev/null
+++ b/docs/assets/faq/en/59-How the VTable component progressively loads sub-nodes in a list.md
@@ -0,0 +1,65 @@
+---
+title: How the VTable component progressively loads sub-nodes in a list
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to progressively load sub-nodes in a list with the VTable component?
+## Problem description
+
+Using the VTable table component, how to gradually load sub-nodes in the list, click the expand button of the parent node, and then dynamically load the information of the sub-node
+## Solution
+
+VTable provides `setRecordChildren `API to update the sub-node status of a node, which can be used to implement progressive loading function
+1. Data preparation
+Normally, in the data of the tree structure list, the `children `attribute is an array, which is the sub-node information of the node
+```
+{
+ name: 'a',
+ value: 10,
+ children: [
+ {
+ name: 'a-1',
+ value: 5,
+ children: [
+ // ......
+ ]
+ },
+ // ......
+ ]
+}
+```
+How to dynamically load sub-node information, you can configure the `children `property to `true `. At this time, the node will be displayed as the parent node in the table, but clicking the expand button in the cell will trigger relevant events, but the table will not have any active changes.
+1. Monitoring events
+After the expand button is clicked, the `VTable. ListTable.EVENT_TYPE `event will be triggered. You need to listen to this event and use the `setRecordChildren `API to update the sub-node information
+```
+const { TREE_HIERARCHY_STATE_CHANGE } = VTable.ListTable.EVENT_TYPE;
+instance.on(TREE_HIERARCHY_STATE_CHANGE, args => {
+ if (args.hierarchyState === VTable.TYPES.HierarchyState.expand && !Array.isArray(args.originData.children)) {
+ setTimeout(() => {
+ const children = [
+ {
+ name: 'a-1',
+ value: 5,
+ },
+ {
+ name: 'a-2',
+ value: 5
+ }
+ ];
+ instance.setRecordChildren(children, args.col, args.row);
+ }, 200);
+ }
+});
+```
+## Code example
+
+demo：https://visactor.io/vtable/demo/table-type/list-table-tree-lazy-load
+## Related Documents
+
+Related api: https://visactor.io/vtable/option/ListTable-columns-text#tree
+Tutorial: https://visactor.io/vtable/guide/table_type/List_table/tree_list
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/en/60-How the VTable component progressively loads sub-nodes in pivot tables.md b/docs/assets/faq/en/60-How the VTable component progressively loads sub-nodes in pivot tables.md
new file mode 100644
index 000000000..94fd8e172
--- /dev/null
+++ b/docs/assets/faq/en/60-How the VTable component progressively loads sub-nodes in pivot tables.md
@@ -0,0 +1,65 @@
+---
+title: How the VTable component progressively loads sub-nodes in pivot tables
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## Question title
+
+How to progressively load sub-nodes in a pivot table using the VTable component?
+## Problem description
+
+Using the VTable table component, how to gradually load sub-nodes in the pivot table, click the expand button of the parent node, and then dynamically load the information of the sub-node
+## Solution
+
+VTable provides `setTreeNodeChildren `API, which is used to update the sub-node status of a node in the pivot structure and can be used to implement progressive loading function
+1. Dimension tree configuration
+Normally, in the dimension tree (columnTree/rowTree), the `children `attribute is an array, which is the sub-node information of the node
+```
+{
+ dimensionKey: 'name',
+ value: 'a',
+ children: [
+ {
+ dimensionKey: 'name-1',
+ value: 'a-1',
+ children: [
+ // ......
+ ]
+ },
+ // ......
+ ]
+}
+```
+How to dynamically load sub-node information, you can configure the `children `property to `true `. At this time, the node will be displayed as the parent node in the table, but clicking the expand button in the cell will trigger relevant events, but the table will not have any active changes.
+1. Monitoring events
+After the expand button is clicked, the `VTable. ListTable.EVENT_TYPE `event will be triggered. You need to listen to this event and use the `setTreeNodeChildren `API to update the sub-node information and the corresponding increased data
+```
+const { TREE_HIERARCHY_STATE_CHANGE } = VTable.ListTable.EVENT_TYPE;
+instance.on(TREE_HIERARCHY_STATE_CHANGE, args => {
+ if (args.hierarchyState === VTable.TYPES.HierarchyState.expand && !Array.isArray(args.originData.children)) {
+ setTimeout(() => {
+ const newData = [
+ // ......
+ ];
+ const children = [
+ {
+ dimensionKey: 'name-1',
+ value: 'a-1',
+ },
+ {
+ dimensionKey: 'name-1',
+ value: 'a-2'
+ }
+ ];
+ instance.setTreeNodeChildren(children, newData, args.col, args.row);
+ }, 200);
+ }
+});
+```
+## Code example
+
+demo：https://visactor.io/vtable/demo/table-type/pivot-table-tree-lazy-load
+## Related Documents
+
+Related api: https://visactor.io/vtable/option/PivotTable#rowHierarchyType ('grid'% 20% 7C% 20'tree ')
+Tutorial: https://visactor.io/vtable/guide/table_type/Pivot_table/pivot_table_tree
+github：https://github.com/VisActor/VTable
\ No newline at end of file
diff --git a/docs/assets/faq/menu.json b/docs/assets/faq/menu.json
index 5043fc4cd..38bca37a0 100644
--- a/docs/assets/faq/menu.json
+++ b/docs/assets/faq/menu.json
@@ -154,6 +154,310 @@
"zh": "22.怎么处理换行符？",
"en": "22.How to deal with line-break?"
}
+ },
+ {
+ "Index": 23,
+ "path": "23-How to edit a table\u0027s cell with VTable",
+ "title": {
+ "zh": "23. VTable编辑表格如何修改触发时机？",
+ "en": "23.How to edit a table\u0027s cell with VTable?"
+ }
+ },
+ {
+ "Index": 24,
+ "path": "24-VTable usage problem: How to display table row numbers",
+ "title": {
+ "zh": "24. VTable使用问题：如何显示表格行号",
+ "en": "24.VTable usage problem: How to display table row numbers"
+ }
+ },
+ {
+ "Index": 25,
+ "path": "25-How to automatically calculate and display the aggregate values of the VTable\u0027s pivot table",
+ "title": {
+ "zh": "25. VTable透视分析表聚合值怎么自动计算并显示？",
+ "en": "25.How to automatically calculate and display the aggregate values of the VTable\u0027s pivot table?"
+ }
+ },
+ {
+ "Index": 26,
+ "path": "26- How to use the right-click menu to copy, paste and delete cells in VTable",
+ "title": {
+ "zh": "26. VTable怎么通过右键菜单来实现复制粘贴删除单元格能力？",
+ "en": "26. How to use the right-click menu to copy, paste and delete cells in VTable?"
+ }
+ },
+ {
+ "Index": 27,
+ "path": "27-VTable usage problem: How to set the expanded and collapsed state of the tree structure",
+ "title": {
+ "zh": "27. VTable使用问题：如何设置树形结构展开收起状态",
+ "en": "27.VTable usage problem: How to set the expanded and collapsed state of the tree structure"
+ }
+ },
+ {
+ "Index": 28,
+ "path": "28- How can VTable implement a capability similar to the Excel fill handle to batch modify cells",
+ "title": {
+ "zh": "28. VTable如何实现类似Excel填充柄能力来批量修改单元格？",
+ "en": "28. How can VTable implement a capability similar to the Excel fill handle to batch modify cells?"
+ }
+ },
+ {
+ "Index": 29,
+ "path": "29- VTable usage issue: How to obtain the total number of rows in a table and the actual height of the content",
+ "title": {
+ "zh": "29. VTable使用问题：如何获取表格总行数和内容实际高度",
+ "en": "29. VTable usage issue: How to obtain the total number of rows in a table and the actual height of the content"
+ }
+ },
+ {
+ "Index": 30,
+ "path": "30- In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge",
+ "title": {
+ "zh": "30. VTable集成VChart图表场景下，边缘处的圆点被截断怎么处理？",
+ "en": "30. In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge?"
+ }
+ },
+ {
+ "Index": 31,
+ "path": "31-VTable usage issue: How to implement hover to a cell to show or hide part of the content",
+ "title": {
+ "zh": "31. VTable使用问题：如何实现hover到单元格显示或隐藏部分内容",
+ "en": "31.VTable usage issue: How to implement hover to a cell to show or hide part of the content"
+ }
+ },
+ {
+ "Index": 32,
+ "path": "32-VTable usage issue: How to implement scrollbar DOM container boundary display",
+ "title": {
+ "zh": "32. VTable使用问题：如何实现滚动条贴DOM容器边界展示",
+ "en": "32.VTable usage issue: How to implement scrollbar DOM container boundary display"
+ }
+ },
+ {
+ "Index": 33,
+ "path": "33-VTable usage issue: How to implement drag-and-drop adjustment of line-height",
+ "title": {
+ "zh": "33. VTable使用问题：如何实现拖拽调整行高",
+ "en": "33.VTable usage issue: How to implement drag-and-drop adjustment of line-height"
+ }
+ },
+ {
+ "Index": 34,
+ "path": "34-VTable usage issue: How to implement text type buttons",
+ "title": {
+ "zh": "34. VTable使用问题：如何实现文本类型的按钮",
+ "en": "34.VTable usage issue: How to implement text type buttons"
+ }
+ },
+ {
+ "Index": 35,
+ "path": "35-VTable usage issue: How to set the border style around cells separately",
+ "title": {
+ "zh": "35. VTable使用问题：如何分别设置单元格四周边框样式",
+ "en": "35.VTable usage issue: How to set the border style around cells separately"
+ }
+ },
+ {
+ "Index": 36,
+ "path": "36-VTable usage issue: How to make the table automatically calculate column width based only on the content width of the table header",
+ "title": {
+ "zh": "36. VTable使用问题：如何让表格只根据表头的内容宽度自动计算列宽",
+ "en": "36.VTable usage issue: How to make the table automatically calculate column width based only on the content width of the table header"
+ }
+ },
+ {
+ "Index": 37,
+ "path": "37- What should I do if the bottom and right borders of VTable are not displayed when it is scrolled",
+ "title": {
+ "zh": "37. VTable有滚动情况下底部和右侧边框不显示怎么办？",
+ "en": "37. What should I do if the bottom and right borders of VTable are not displayed when it is scrolled?"
+ }
+ },
+ {
+ "Index": 38,
+ "path": "38- Can the VTable component be drag-and-drop to swap rows",
+ "title": {
+ "zh": "38. VTable表格组件是否可以拖拽整行调换位置？",
+ "en": "38. Can the VTable component be drag-and-drop to swap rows"
+ }
+ },
+ {
+ "Index": 39,
+ "path": "39- How to dynamically set the min and max values of the progressBar type in the VTable component based on the data items of the current row",
+ "title": {
+ "zh": "39. VTable表格组件中，progressbar进度条类型中min和max如何结合当前行的数据来计算展示呢",
+ "en": "39. How to dynamically set the min and max values of the progressBar type in the VTable component based on the data items of the current row?"
+ }
+ },
+ {
+ "Index": 40,
+ "path": "40- Can the VTable component achieve different hover colors for different cells",
+ "title": {
+ "zh": "40. VTable表格组件是否可以实现不同单元格hover颜色不一样？",
+ "en": "40. Can the VTable component achieve different hover colors for different cells?"
+ }
+ },
+ {
+ "Index": 41,
+ "path": "41- How can I increase the gap between adjacent sparklines in the VTable component",
+ "title": {
+ "zh": "41. VTable表格组件如何让相邻迷你折线图的直接的间隔变大？",
+ "en": "41. How can I increase the gap between adjacent sparklines in the VTable component?"
+ }
+ },
+ {
+ "Index": 42,
+ "path": "42-VTable usage issue: How to add column total information to the list",
+ "title": {
+ "zh": "42. VTable使用问题：如何在列表中加入列总计信息",
+ "en": "42.VTable usage issue: How to add column total information to the list"
+ }
+ },
+ {
+ "Index": 43,
+ "path": "43-VTable usage issue: How to listen to table area selection and cancellation events",
+ "title": {
+ "zh": "43. VTable使用问题：如何监听表格区域选中取消事件",
+ "en": "43.VTable usage issue: How to listen to table area selection and cancellation events"
+ }
+ },
+ {
+ "Index": 44,
+ "path": "44-VTable usage issue: How to set only one column to not be selected for operation",
+ "title": {
+ "zh": "44. VTable使用问题：如何何设置只有一列不能选中操作",
+ "en": "44.VTable usage issue: How to set only one column to not be selected for operation"
+ }
+ },
+ {
+ "Index": 45,
+ "path": "45-VTable usage issue: How to manually control the tooltip display",
+ "title": {
+ "zh": "45. VTable使用问题：如何手动控制tooltip展示",
+ "en": "45.VTable usage issue: How to manually control the tooltip display"
+ }
+ },
+ {
+ "Index": 46,
+ "path": "46-VTable usage issue: How to set multi-level table headers",
+ "title": {
+ "zh": "46. VTable使用问题：如何设置多级表头",
+ "en": "46.VTable usage issue: How to set multi-level table headers"
+ }
+ },
+ {
+ "Index": 47,
+ "path": "47- How to make text automatically omitted based on cell width when using custom rendering with VTable components",
+ "title": {
+ "zh": "47. 使用VTable表格组件的自定义渲染写法时，怎么让文本根据单元格宽度自动省略？",
+ "en": "47. How to make text automatically omitted based on cell width when using custom rendering with VTable components?"
+ }
+ },
+ {
+ "Index": 48,
+ "path": "48- When using the pivot table of the VTable component, how to display the calculated indicator results in a separate column",
+ "title": {
+ "zh": "48. 使用VTable表格组件的透视表时，怎么将指标结果再计算后显示到单独的一列当中？",
+ "en": "48. When using the pivot table of the VTable component, how to display the calculated indicator results in a separate column?"
+ }
+ },
+ {
+ "Index": 49,
+ "path": "49- How to implement dimension drill-down function when using VTable pivot table component",
+ "title": {
+ "zh": "49. 使用VTable表格组件的透视表时，怎么做维度下钻的功能",
+ "en": "49. How to implement dimension drill-down function when using VTable pivot table component?"
+ }
+ },
+ {
+ "Index": 50,
+ "path": "50- How to manually update the state when using the Checkbox in the VTable component",
+ "title": {
+ "zh": "50. 使用VTable表格组件用到了复选框Checkbox，怎么手动更新状态？",
+ "en": "50. How to manually update the state when using the Checkbox in the VTable component?"
+ }
+ },
+ {
+ "Index": 51,
+ "path": "51- How to delete the content of the selected cell using hotkeys in VTable",
+ "title": {
+ "zh": "51. VTable怎么通过快捷键将选中单元格的内容删除掉？",
+ "en": "51. How to delete the content of the selected cell using hotkeys in VTable?"
+ }
+ },
+ {
+ "Index": 52,
+ "path": "52- Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused",
+ "title": {
+ "zh": "52. VTable表格组件的编辑单元格能力使用问题：编辑器怎么配置，是否可以复用？",
+ "en": "52. Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused?"
+ }
+ },
+ {
+ "Index": 53,
+ "path": "53- How to control the timing of exiting edit mode after implementing editable cells in VTable components",
+ "title": {
+ "zh": "53. VTable表格组件实现单元格可编辑后，怎么控制退出编辑的时机？",
+ "en": "53. How to control the timing of exiting edit mode after implementing editable cells in VTable components?"
+ }
+ },
+ {
+ "Index": 54,
+ "path": "54- Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content",
+ "title": {
+ "zh": "54.VTable表格组件的溢出文字弹框tooltip是否支持选中文本及内容超长滚动效果？",
+ "en": "54. Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content?"
+ }
+ },
+ {
+ "Index": 55,
+ "path": "55- After custom rendering in the column configuration of the VTable component, the icon configuration fails- How to solve this",
+ "title": {
+ "zh": "55. VTable表格组件的column的列配置中自定义渲染customRender后导致icon配置失效，应该怎么解决？",
+ "en": "55. After custom rendering in the column configuration of the VTable component, the icon configuration fails. How to solve this?"
+ }
+ },
+ {
+ "Index": 56,
+ "path": "56-VTable table component, using customLayout to customize the drawing elements, how to listen for mouse hover events on the elements, similar to the DOM\u0027s mouseenter event",
+ "title": {
+ "zh": "56. VTable表格组件，使用customLayout自定义了绘制图元怎么监听鼠标hover到图元的事件，类似dom的mouseenter事件？",
+ "en": "56.VTable table component, using customLayout to customize the drawing elements, how to listen for mouse hover events on the elements, similar to the DOM\u0027s mouseenter event?"
+ }
+ },
+ {
+ "Index": 57,
+ "path": "57-How to set the text style of the VTable table component",
+ "title": {
+ "zh": "57. VTable表格组件如何设置文字样式？",
+ "en": "57.How to set the text style of the VTable table component?"
+ }
+ },
+ {
+ "Index": 58,
+ "path": "58-How to customize highlighted cells in the VTable component",
+ "title": {
+ "zh": "58. VTable表格组件如何自定义高亮部分单元格",
+ "en": "58.How to customize highlighted cells in the VTable component"
+ }
+ },
+ {
+ "Index": 59,
+ "path": "59-How the VTable component progressively loads sub-nodes in a list",
+ "title": {
+ "zh": "59. VTable表格组件如何在列表中渐进加载子节点",
+ "en": "59.How the VTable component progressively loads sub-nodes in a list"
+ }
+ },
+ {
+ "Index": 60,
+ "path": "60-How the VTable component progressively loads sub-nodes in pivot tables",
+ "title": {
+ "zh": "60. VTable表格组件如何在透视表中渐进加载子节点",
+ "en": "60.How the VTable component progressively loads sub-nodes in pivot tables"
+ }
}
]
}
\ No newline at end of file
diff --git a/docs/assets/faq/zh/23-How to edit a table's cell with VTable.md b/docs/assets/faq/zh/23-How to edit a table's cell with VTable.md
new file mode 100644
index 000000000..36a4270b1
--- /dev/null
+++ b/docs/assets/faq/zh/23-How to edit a table's cell with VTable.md
@@ -0,0 +1,52 @@
+---
+title: 1. VTable编辑表格如何修改触发时机？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+可编辑表格能否在点击时直接进入编辑状态，而不是双击某一个单元格后才能进行可编辑？
+
+
+## 问题描述
+
+在编辑表格场景中，双击进入编辑会显得操作繁琐笨重，需要直接进入编辑状态。
+
+
+## 解决方案
+
+可在表格初始化的`option`中配置`editCellTrigger`为`click`。该配置项定义如下：
+```
+/** 编辑触发时机:双击事件 | 单击事件 | api手动开启编辑。默认为双击'doubleclick' */
+editCellTrigger?: 'doubleclick' | 'click' | 'api';
+```
+
+
+## 代码示例
+
+```
+ const option = {
+ records,
+ columns,
+ autoWrapText: true,
+ limitMaxAutoWidth: 600,
+ heightMode: 'autoHeight',
+ editCellTrigger: 'click' // 设置编辑触发时机
+ };
+ const tableInstance = new VTable.ListTable(container, option);
+```
+## 结果展示
+
+在线效果参考：https://visactor.io/vtable/demo/edit/edit-cell
+
+
+
+
+## 相关文档
+
+编辑表格demo：https://visactor.io/vtable/demo/edit/edit-cell
+编辑表格教程：https://visactor.io/vtable/guide/edit/edit_cell
+相关api：https://visactor.io/vtable/option/ListTable#editCellTrigger
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/24-VTable usage problem: How to display table row numbers.md b/docs/assets/faq/zh/24-VTable usage problem: How to display table row numbers.md
new file mode 100644
index 000000000..3b77b8524
--- /dev/null
+++ b/docs/assets/faq/zh/24-VTable usage problem: How to display table row numbers.md
@@ -0,0 +1,67 @@
+---
+title: 2. VTable使用问题：如何显示表格行号
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+如何在表格中每一行前，显示该行的序号。
+
+
+## 问题描述
+
+通过配置，在表格第一列前加入一列，显示每一行的行号
+
+
+## 解决方案
+
+可在表格初始化的`option`中配置`rowSeriesNumber`。该配置项定义如下：
+```
+interface IRowSeriesNumber {
+ width?: number | 'auto'; // 显示行号列的宽度
+ title?: string; // 行序号标题，默认为空
+ format?: (col?: number, row?: number, table?: BaseTableAPI) => any; // 行序号格式化函数，默认为空，通过该配置可以将数值类型的序号转换为自定义序号，如使用 a,b,c...
+ cellType?: 'text' | 'link' | 'image' | 'video' | 'checkbox'; // 行序号单元格类型，默认为text
+ style?: ITextStyleOption | ((styleArg: StylePropertyFunctionArg) => ITextStyleOption); // body 单元格样式，可参考：[style](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Foption%2FListTable-columns-text%23style.bgColor)
+ headerStyle?: ITextStyleOption | ((styleArg: StylePropertyFunctionArg) => ITextStyleOption); // 表头单元格样式，可参考： [headerStyle](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Foption%2FPivotTable-columns-text%23headerStyle.bgColor)
+ /** 是否可拖拽顺序 */
+ dragOrder?: boolean; // 是否可拖拽行序号顺序，默认为 false。如果设置为 true，会显示拖拽位置的图标，交互在该图标上可以拖拽来换位。如果需要替换该图标可以自行配置。可参考教程：[https://visactor.io/vtable/guide/custom_define/custom_icon](https%3A%2F%2Fvisactor.io%2Fvtable%2Fguide%2Fcustom_define%2Fcustom_icon) 中重置功能图标的章节。
+}
+```
+
+
+## 代码示例
+
+```
+const option = {
+ records: data,
+ columns,
+ widthMode: 'standard',
+ rowSeriesNumber: {
+ title: '序号',
+ width: 'auto',
+ headerStyle: {
+ color: 'black',
+ bgColor: 'pink'
+ },
+ style: {
+ color: 'red'
+ }
+ }
+};
+const tableInstance = new VTable.ListTable(container, option);
+```
+## 结果展示
+
+在线效果参考：https://www.visactor.io/vtable/demo/basic-functionality/row-series-number
+
+
+
+
+## 相关文档
+
+行序号demo：https://www.visactor.io/vtable/demo/basic-functionality/row-series-number
+相关api：https://www.visactor.io/vtable/option/ListTable#rowSeriesNumber
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/25-How to automatically calculate and display the aggregate values of the VTable's pivot table.md b/docs/assets/faq/zh/25-How to automatically calculate and display the aggregate values of the VTable's pivot table.md
new file mode 100644
index 000000000..c7b99b9d7
--- /dev/null
+++ b/docs/assets/faq/zh/25-How to automatically calculate and display the aggregate values of the VTable's pivot table.md
@@ -0,0 +1,44 @@
+---
+title: 3. VTable透视分析表聚合值怎么自动计算并显示？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable透视分析表聚合值怎么自动计算并显示？
+## 问题描述
+
+透视分析表设置树形结构展示后，聚合节点数据为什么不显示？
+
+
+## 解决方案
+
+需要配置上汇总规则，才会在数据分析时自动聚合数据就算聚合值作为父级单元格的展示值。
+## 代码示例
+
+```
+ dataConfig: {
+ totals: {
+ row: {
+ showSubTotals: true,
+ subTotalsDimensions: ['Category'],
+ subTotalLabel: 'subtotal'
+ }
+ }
+ },
+```
+## 结果展示
+
+在线效果参考：https://visactor.io/vtable/demo/table-type/pivot-analysis-table-tree
+
+
+
+
+## 相关文档
+
+树形表格demo：https://visactor.io/vtable/demo/table-type/pivot-analysis-table-tree
+透视表数据分析教程：https://visactor.io/vtable/guide/data_analysis/pivot_table_dataAnalysis
+相关api：https://visactor.io/vtable/option/PivotTable#dataConfig.totals
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/26- How to use the right-click menu to copy, paste and delete cells in VTable.md b/docs/assets/faq/zh/26- How to use the right-click menu to copy, paste and delete cells in VTable.md
new file mode 100644
index 000000000..343602be0
--- /dev/null
+++ b/docs/assets/faq/zh/26- How to use the right-click menu to copy, paste and delete cells in VTable.md
@@ -0,0 +1,97 @@
+---
+title: 4. VTable怎么通过右键菜单来实现复制粘贴删除单元格能力？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable怎么通过右键菜单来实现复制粘贴删除单元格能力？
+## 问题描述
+
+目前支持ctrl+c复制，ctrl+v粘贴。而在我们的项目需求中期望通过右键菜单然后复制或粘贴以及删除单元格的值，不知道怎么去实现这个能力。
+## 解决方案
+
+监听事件`dropdown_menu_click`来判断点击的菜单项。
+通过vtable的接口`getCopyValue` 获取需要复制的内容，粘贴到表格时调研接口`changeCellValues` 将值设置到单元格中。
+删除所选内容需要通过接口`getSelectedCellInfos`来获取选中的单元格，然后逐个单元格单元接口`changeCellValue`来赋值为空。
+相关接口地址：
+[https://visactor.io/vtable/api/Methods#getSelectedCellInfos](https%3A%2F%2Fvisactor.io%2Fvtable%2Fapi%2FMethods%23getSelectedCellInfos)
+[https://visactor.io/vtable/api/Methods#changeCellValue](https%3A%2F%2Fvisactor.io%2Fvtable%2Fapi%2FMethods%23changeCellValue)
+## 代码示例
+
+```
+const option = {
+ menu: {
+ contextMenuItems: ['复制单元格内容', '粘贴', '删除', '...']
+ }
+ ...
+}
+
+const tableInstance = new VTable.ListTable(container, option);
+
+ let copyData;
+ tableInstance.on('dropdown_menu_click', args => {
+ console.log('dropdown_menu_click', args);
+ if (args.menuKey === '复制单元格内容') {
+ copyData = tableInstance.getCopyValue();
+ } else if (args.menuKey === '粘贴') {
+ const rows = copyData.split('\n'); // 将数据拆分为行
+ const values = [];
+ rows.forEach(function (rowCells, rowIndex) {
+ const cells = rowCells.split('\t'); // 将行数据拆分为单元格
+ const rowValues = [];
+ values.push(rowValues);
+ cells.forEach(function (cell, cellIndex) {
+ // 去掉单元格数据末尾的 '\r'
+ if (cellIndex === cells.length - 1) {
+ cell = cell.trim();
+ }
+ rowValues.push(cell);
+ });
+ });
+ tableInstance.changeCellValues(args.col, args.row, values);
+ } else if (args.menuKey === '删除') {
+ let selectCells = tableInstance.getSelectedCellInfos();
+ if (selectCells?.length > 0 && cellIsSelectRange(args.col, args.row, selectCells)) {
+ // 如果选中的是范围，则删除范围内的所有单元格
+ deleteSelectRange(selectCells);
+ } else {
+ // 否则只删除单个单元格
+ tableInstance.changeCellValue(args.col, args.row, '');
+ }
+ }
+ });
+ //将选中单元格的值设置为空
+ 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, '');
+ }
+ }
+ }
+ // 判断单元格col,row是否在选中范围中
+ function cellIsSelectRange(col, row, selectCells) {
+ for (let i = 0; i < selectCells.length; i++) {
+ for (let j = 0; j < selectCells[i].length; j++) {
+ if (selectCells[i][j].col === col && selectCells[i][j].row === row) {
+ return true;
+ }
+ }
+ }
+ return false;
+ }
+ });
+```
+## 结果展示
+
+在线效果参考：https://visactor.io/vtable/demo/interaction/context-menu
+
+
+## 相关文档
+
+右键菜单复制粘贴删除demo：https://visactor.io/vtable/demo/interaction/context-menu
+下拉菜单教程：https://visactor.io/vtable/guide/components/dropdown
+相关api：https://visactor.io/vtable/option/ListTable#menu.contextMenuItems
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/27-VTable usage problem: How to set the expanded and collapsed state of the tree structure.md b/docs/assets/faq/zh/27-VTable usage problem: How to set the expanded and collapsed state of the tree structure.md
new file mode 100644
index 000000000..6e71edec4
--- /dev/null
+++ b/docs/assets/faq/zh/27-VTable usage problem: How to set the expanded and collapsed state of the tree structure.md
@@ -0,0 +1,131 @@
+---
+title: 5. VTable使用问题：如何设置树形结构展开收起状态
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+如何树形结构的表格中，设置树形结构的展开收起状态。
+
+
+## 问题描述
+
+通过配置，设置树形结构表格的展开收起状态，自定义树形结构的展现样式
+
+
+## 解决方案
+
+1. 可在表格初始化的`option`中配置`hierarchyExpandLevel`。该配置项定义如下：展示为树形结构时，默认展开层数。默认为 1 只显示根节点，配置为`Infinity`则全部展开。
+1. 也可以在表格完成初始化后，通过API获取某一个单元格的展开收起状态，通过API设置某个单元格的展开收起状态
+```
+// 获取某个单元格树形展开 or 收起状态
+getHierarchyState(col: number, row: number) : HierarchyState | null;
+enum HierarchyState {
+ expand = 'expand',
+ collapse = 'collapse',
+ none = 'none'
+}
+
+// 表头切换层级状态
+toggleHierarchyState(col: number, row: number): viod;
+```
+## 代码示例
+
+```
+const option = {
+ records:data,
+ columns,
+ widthMode:'standard',
+ hierarchyExpandLevel: 2,
+};
+const tableInstance = new VTable.ListTable(container, option);
+
+const state = tableInstance.getHierarchyState(0,1);
+if (state === 'expand') {
+ tableInstance.toggleHierarchyState(0,1);
+}
+```
+## 结果展示
+
+
+
+完整示例代码（可以粘贴到 [编辑器](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree) 上尝试一下）：
+```
+let tableInstance;
+ fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/company_struct.json')
+ .then((res) => res.json())
+ .then((data) => {
+
+const columns =[
+ {
+ "field": "group",
+ "title": "department",
+ "width": "auto",
+ tree: true,
+ fieldFormat(rec){
+ return rec['department']??rec['group']??rec['name'];
+ }
+ },
+ {
+ "field": "total_children",
+ "title": "memebers count",
+ "width": "auto",
+ fieldFormat(rec){
+ if(rec?.['position']){
+ return `position: ${rec['position']}`
+ }else
+ return rec?.['total_children'];
+ }
+ },
+ {
+ "field": "monthly_expense",
+ "title": "monthly expense",
+ "width": "auto",
+ fieldFormat(rec){
+ if(rec?.['salary']){
+ return `salary: ${rec['salary']}`
+ }else
+ return rec?.['monthly_expense'];
+ }
+ },
+ {
+ "field": "new_hires_this_month",
+ "title": "new hires this month",
+ "width": "auto"
+ },
+ {
+ "field": "resignations_this_month",
+ "title": "resignations this month",
+ "width": "auto"
+ },
+ {
+ "field": "complaints_and_suggestions",
+ "title": "recived complaints counts",
+ "width": "auto"
+ },
+
+];
+
+const option = {
+ records:data,
+ columns,
+ widthMode:'standard',
+ hierarchyExpandLevel: 2,
+};
+
+tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+
+const state = tableInstance.getHierarchyState(0,1);
+if (state === 'expand') {
+ tableInstance.toggleHierarchyState(0,1);
+}
+ })
+```
+## 相关文档
+
+树形结构demo：https://www.visactor.io/vtable/demo/table-type/list-table-tree
+相关api：https://www.visactor.io/vtable/option/ListTable#hierarchyExpandLevel
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/28- How can VTable implement a capability similar to the Excel fill handle to batch modify cells.md b/docs/assets/faq/zh/28- How can VTable implement a capability similar to the Excel fill handle to batch modify cells.md
new file mode 100644
index 000000000..b3fbce5ac
--- /dev/null
+++ b/docs/assets/faq/zh/28- How can VTable implement a capability similar to the Excel fill handle to batch modify cells.md
@@ -0,0 +1,108 @@
+---
+title: 6. VTable如何实现类似Excel填充柄能力来批量修改单元格？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 背景需求
+
+用户对表格有**先筛选，再批量更新**的诉求。该操作对标Excel的拖拽填充能力，可以极大提高用户操作效率。
+效果预期：
+## **配置说明**
+
+### **1. **`**fillHandle**`
+
+`fillHandle` 是一个配置选项，允许用户通过拖拽单元格角落来填充或修改多个单元格。为了启用填充手柄，请确保在初始化表格时配置了此选项。
+```
+const visactorOptions = {
+ fillHandle: true, // 启用填充手柄
+};
+```
+## **事件处理**
+
+### **1. **`**mousedown_fill_handle**`
+
+当用户开始拖动填充手柄时，会触发 `mousedown_fill_handle` 事件。您可以在此事件中准备一些必要的数据。
+
+
+```
+// 记录 拖拽填充柄之前的选中范围
+ let beforeDragMaxCol: number;
+ let beforeDragMinCol: number;
+ let beforeDragMaxRow: number;
+ let beforeDragMinRow: number;
+
+vtableInstance.addEventListener('mousedown_fill_handle', function(event) {
+ const startSelectCellRange = tableInstance.getSelectedCellRanges()[0];
+ beforeDragMaxCol = Math.max(startSelectCellRange.start.col, startSelectCellRange.end.col);
+ beforeDragMinCol = Math.min(startSelectCellRange.start.col, startSelectCellRange.end.col);
+ beforeDragMaxRow = Math.max(startSelectCellRange.start.row, startSelectCellRange.end.row);
+ beforeDragMinRow = Math.min(startSelectCellRange.start.row, startSelectCellRange.end.row);
+});
+```
+### **2. **`**drag_fill_handle_end**`
+
+当填充手柄的拖动操作结束时，会触发 `drag_fill_handle_end` 事件
+```
+vtableInstance.addEventListener('drag_fill_handle_end', function(event) {
+ const direciton = arg.direction;
+ let startChangeCellCol;
+ let startChangeCellRow;
+ let endChangeCellCol;
+ let endChangeCellRow;
+ const endSelectCellRange = tableInstance.getSelectedCellRanges()[0];
+ //根据填充方向 确定需要填充值的范围
+ if (direciton === 'bottom') {
+ startChangeCellCol = beforeDragMinCol;
+ startChangeCellRow = beforeDragMaxRow + 1;
+ endChangeCellCol = beforeDragMaxCol;
+ endChangeCellRow = endSelectCellRange.end.row;
+ } else if (direciton === 'right') {
+ startChangeCellCol = beforeDragMaxCol + 1;
+ startChangeCellRow = beforeDragMinRow;
+ endChangeCellCol = endSelectCellRange.end.col;
+ endChangeCellRow = beforeDragMaxRow;
+ } else if (direciton === 'top') {
+ startChangeCellCol = beforeDragMinCol;
+ startChangeCellRow = beforeDragMinRow - 1;
+ endChangeCellCol = beforeDragMaxCol;
+ endChangeCellRow = endSelectCellRange.end.row;
+ } else if (direciton === 'left') {
+ startChangeCellCol = beforeDragMinCol - 1;
+ startChangeCellRow = beforeDragMinRow;
+ endChangeCellCol = endSelectCellRange.end.col;
+ endChangeCellRow = beforeDragMaxRow;
+ }
+ changeTableValues(startChangeCellCol, startChangeCellRow, endChangeCellCol, endChangeCellRow);
+});
+```
+## **API 使用**
+
+### **1. **`**changeCellValues**`
+
+`changeCellValues` 允许程序化地修改表格中一个或多个单元格的值。
+```
+ const changeTableValues = useCallback((startChangeCellCol: number, startChangeCellRow: number, endChangeCellCol: number, endChangeCellRow: number) => {
+ const startCol = Math.min(startChangeCellCol, endChangeCellCol);
+ const startRow = Math.min(startChangeCellRow, endChangeCellRow);
+ const endCol = Math.max(startChangeCellCol, endChangeCellCol);
+ const endRow = Math.max(startChangeCellRow, endChangeCellRow);
+ const values = [];
+ for (let row = startRow; row <= endRow; row++) {
+ const rowValues = [];
+ for (let col = startCol; col <= endCol; col++) {
+ rowValues.push(clickedCellValue);
+ }
+ values.push(rowValues);
+ }
+ // values：[['第一行第一列的值', '第一行第二列的值'],['第二行第一列', '第二行第二列']]
+ window['tableInstance'].changeCellValues(startCol, startRow, values); // 表格更新
+ // toto: 在这里调用后端接口update
+
+ }, [clickedCellValue]);
+```
+## Related Documents
+
+填充柄demo：https://visactor.io/vtable/demo/edit/fill-handle
+填充柄教程：https://visactor.io/vtable/guide/edit/fill_handle
+相关api：https://visactor.io/vtable/option/ListTable#excelOptions.fillHandle
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/zh/29- VTable usage issue: How to obtain the total number of rows in a table and the actual height of the content.md b/docs/assets/faq/zh/29- VTable usage issue: How to obtain the total number of rows in a table and the actual height of the content.md
new file mode 100644
index 000000000..78d6faf2e
--- /dev/null
+++ b/docs/assets/faq/zh/29- VTable usage issue: How to obtain the total number of rows in a table and the actual height of the content.md
@@ -0,0 +1,124 @@
+---
+title: 7. VTable使用问题：如何获取表格总行数和内容实际高度
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+如何获取表格总行数和内容实际高度
+
+
+## 问题描述
+
+如何通过API，从表格实例中获取当前表格总行数和内容实际高度
+
+
+## 解决方案
+
+1. table实例中`colCount`和`rowCount`属性，可以获取当前表格的行列数量
+1. table示例提供方法`getAllRowsHeight`和`getAllColsWidth`，可以获取当前表格内容的总列宽和总行高
+## 代码示例
+
+```
+const tableInstance = new VTable.ListTable(container, option);
+
+console.log(tableInstance.colCount);
+console.log(tableInstance.rowCount);
+console.log(tableInstance.getAllRowsHeight());
+console.log(tableInstance.getAllColsWidth());
+```
+## 结果展示
+
+
+
+
+
+完整示例代码（可以粘贴到 [编辑器](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree) 上尝试一下）：
+```
+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());
+ })
+```
+## 相关文档
+
+相关api：
+https://www.visactor.io/vtable/api/Properties#rowCount
+https://www.visactor.io/vtable/api/Properties#colCount
+https://www.visactor.io/vtable/api/Methods#getAllColsWidth
+https://www.visactor.io/vtable/api/Methods#getAllRowsHeight
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/30- In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge.md b/docs/assets/faq/zh/30- In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge.md
new file mode 100644
index 000000000..01096bbbe
--- /dev/null
+++ b/docs/assets/faq/zh/30- In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge.md
@@ -0,0 +1,56 @@
+---
+title: 8. VTable集成VChart图表场景下，边缘处的圆点被截断怎么处理？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable集成VChart图表场景下，边缘处的圆点被截断怎么处理？
+## 问题描述
+
+VTable集成VChart图表场景下，绘制图表上点时怎么规避边缘位置的点被截断的情况。
+
+
+## 解决方案
+
+axes轴上配置innerOffset，如上加上之后图表上元素与表格边缘就有一定的间距了。
+
+
+## 代码示例
+
+```
+const option = {
+ axes: [
+ {
+ orient: 'left',
+ type: 'linear',
+ innerOffset: {
+ top: 4,
+ bottom: 4,
+ }
+ },
+ {
+ orient: 'bottom',
+ type: 'band',
+ innerOffset: {
+ left: 4,
+ right: 4,
+ }
+ }
+ ]
+ ...
+}
+
+const tableInstance = new VTable.ListTable(container, option);
+```
+## 结果展示
+
+在线效果参考：https://visactor.io/vtable/demo/table-type/pivot-chart-scatter
+
+
+## 相关文档
+
+相关api：https://visactor.io/vtable/option/PivotTable#axes
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/31-VTable usage issue: How to implement hover to a cell to show or hide part of the content.md b/docs/assets/faq/zh/31-VTable usage issue: How to implement hover to a cell to show or hide part of the content.md
new file mode 100644
index 000000000..3acd01040
--- /dev/null
+++ b/docs/assets/faq/zh/31-VTable usage issue: How to implement hover to a cell to show or hide part of the content.md
@@ -0,0 +1,221 @@
+---
+title: 9. VTable使用问题：如何实现hover到单元格显示或隐藏部分内容
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+如果实现hover到单元格显示或隐藏部分内容
+
+
+## 问题描述
+
+希望鼠标hover到单元格中时，显示或隐藏单元格中的部分元素（图标，文字等）
+
+
+## 解决方案
+
+可以使用[customLayout](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fguide%2Fcustom_define%2Fcustom_layout)来实现这个功能：在容器`Group`上监听`onMouseEnter`和`onMouseLeave`事件，在事件回调中设置相应图元的显示或隐藏。
+
+
+## 代码示例
+
+```
+const option = {
+ columns: [
+ {
+ title: 'name',
+ field: 'name',
+ },
+ {
+ title: 'custom',
+ field: 'custom',
+ width: 120,
+ customLayout: (args) => {
+ const { height, width } = args.rect;
+ const container = (
+ {
+ // 查找图元
+ const hoverShowText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-show';
+ }, true);
+ // 更新图元
+ hoverShowText.setAttribute('opacity', 1);
+ // 查找图元
+ const hoverHideText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-hide';
+ }, true);
+ hoverHideText.setAttribute('opacity', 0);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ onMouseLeave={event => {
+ // 查找图元
+ const hoverShowText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-show';
+ }, true);
+ // 更新图元
+ hoverShowText.setAttribute('opacity', 0);
+ // 查找图元
+ const hoverHideText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-hide';
+ }, true);
+ // 更新图元
+ hoverHideText.setAttribute('opacity', 1);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ >
+
+
+
+ );
+
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }
+ }
+ ],
+ records:data,
+}
+
+const tableInstance = new VTable.ListTable(container, option);
+```
+## 结果展示
+
+
+
+
+
+完整示例代码（可以粘贴到 [编辑器](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree) 上尝试一下）：
+```
+const { VGroup, VText } = VTable;
+const data = [
+ {
+ name: '1',
+ custom: '1',
+ },
+ {
+ name: '2',
+ custom: '2',
+ },
+ {
+ name: '3',
+ custom: '3',
+ },
+ {
+ name: '4',
+ custom: '4',
+ },
+ {
+ name: '5',
+ custom: '5',
+ },
+]
+const option = {
+ columns: [
+ {
+ title: 'name',
+ field: 'name',
+ },
+ {
+ title: 'custom',
+ field: 'custom',
+ width: 120,
+ customLayout: (args) => {
+ const { height, width } = args.rect;
+ const container = (
+ {
+ const hoverShowText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-show';
+ }, true);
+ hoverShowText.setAttribute('opacity', 1);
+ const hoverHideText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-hide';
+ }, true);
+ hoverHideText.setAttribute('opacity', 0);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ onMouseLeave={event => {
+ const hoverShowText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-show';
+ }, true);
+ hoverShowText.setAttribute('opacity', 0);
+ const hoverHideText = event.currentTarget.find(child => {
+ return child.attribute.id === 'hover-cell-hide';
+ }, true);
+ hoverHideText.setAttribute('opacity', 1);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ >
+
+
+
+ );
+
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }
+ }
+ ],
+ records:data,
+}
+
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+```
+## 相关文档
+
+相关api：https://www.visactor.io/vtable/guide/custom_define/custom_layout
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/32-VTable usage issue: How to implement scrollbar DOM container boundary display.md b/docs/assets/faq/zh/32-VTable usage issue: How to implement scrollbar DOM container boundary display.md
new file mode 100644
index 000000000..669c1ff3d
--- /dev/null
+++ b/docs/assets/faq/zh/32-VTable usage issue: How to implement scrollbar DOM container boundary display.md
@@ -0,0 +1,194 @@
+---
+title: 10. VTable使用问题：如何实现滚动条贴DOM容器边界展示
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+如何实现滚动条贴DOM容器边界展示
+
+
+## 问题描述
+
+在表格内容高度较低时，滚动条在表格内显示会效果不好，希望将滚动条显示在canvas底部。
+
+
+## 解决方案
+
+主题中可以配置滚动条的`barToSide`属性，配置滚动条的显示位置：
+* true: 滚动条显示在容器（canvas）边缘
+* false: 滚动条显示在表格区域边缘
+
+
+## 代码示例
+
+```
+const option = {
+ records,
+ columns,
+ theme: VTable.themes.DEFAULT.extends({
+ scrollStyle: {
+ barToSide: true
+ }
+ })
+};
+
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+```
+## 结果展示
+
+
+
+完整示例代码（可以粘贴到 [编辑器](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree) 上尝试一下）：
+```
+function generateRandomString(length) {
+ let result = '';
+ const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+ for (let i = 0; i < length; i++) {
+ result += characters.charAt(Math.floor(Math.random() * characters.length));
+ }
+ return result;
+}
+function generateRandomHobbies() {
+ const hobbies = [
+ 'Reading books',
+ 'Playing video games',
+ 'Watching movies',
+ 'Cooking',
+ 'Hiking',
+ 'Traveling',
+ 'Photography',
+ 'Playing musical instruments',
+ 'Gardening',
+ 'Painting',
+ 'Writing',
+ 'Swimming'
+ ];
+
+ const numHobbies = Math.floor(Math.random() * 3) + 1; // 生成 1-3 之间的随机整数
+ const selectedHobbies = [];
+
+ for (let i = 0; i < numHobbies; i++) {
+ const randomIndex = Math.floor(Math.random() * hobbies.length);
+ const hobby = hobbies[randomIndex];
+ selectedHobbies.push(hobby);
+ hobbies.splice(randomIndex, 1); // 确保每个爱好只选一次
+ }
+
+ return selectedHobbies.join(', ');
+}
+function generateRandomBirthday() {
+ const start = new Date('1970-01-01');
+ const end = new Date('2000-12-31');
+ const randomDate = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
+ const year = randomDate.getFullYear();
+ const month = randomDate.getMonth() + 1;
+ const day = randomDate.getDate();
+ return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
+}
+
+function generateRandomPhoneNumber() {
+ const areaCode = ['130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '150', '151', '152', '153', '155', '156', '157', '158', '159', '170', '176', '177', '178', '180', '181', '182', '183', '184', '185', '186', '187', '188', '189'];
+ const prefix = areaCode[Math.floor(Math.random() * areaCode.length)];
+ const suffix = String(Math.random()).substr(2, 8);
+ return prefix + suffix;
+}
+
+const generatePersons = (count) => {
+ return Array.from(new Array(count)).map((_, i) => {
+ const first=generateRandomString(10);
+ const last=generateRandomString(4);
+ return {
+ id: i+1,
+ email1: `${first}_${last}@xxx.com`,
+ name: first,
+ lastName: last,
+ hobbies: generateRandomHobbies(),
+ birthday: generateRandomBirthday(),
+ tel: generateRandomPhoneNumber(),
+ sex: i % 2 === 0 ? 'boy' : 'girl',
+ work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
+ city: 'beijing',
+ }});
+};
+
+const records = generatePersons(1);
+const columns = [
+ {
+ field: 'id',
+ title: 'ID',
+ width: 80,
+ sort: true,
+ },
+ {
+ field: 'email1',
+ title: 'email',
+ width: 250,
+ sort: false,
+ },
+ {
+ field: 'full name',
+ title: 'Full name',
+ columns: [
+ {
+ field: 'name',
+ title: 'First Name',
+ width: 120,
+ },
+ {
+ field: 'lastName',
+ title: 'Last Name',
+ width: 100,
+ },
+ ],
+ },
+ {
+ field: 'hobbies',
+ title: 'hobbies',
+ width: 200,
+ },
+ {
+ field: 'birthday',
+ title: 'birthday',
+ width: 120,
+ },
+ {
+ 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 = {
+ records,
+ columns,
+ theme: VTable.themes.DEFAULT.extends({
+ scrollStyle: {
+ barToSide: true
+ }
+ })
+};
+
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+```
+## 相关文档
+
+相关api：https://www.visactor.io/vtable/option/ListTable#theme.scrollStyle.barToSide
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/33-VTable usage issue: How to implement drag-and-drop adjustment of line-height.md b/docs/assets/faq/zh/33-VTable usage issue: How to implement drag-and-drop adjustment of line-height.md
new file mode 100644
index 000000000..e3b0eae6c
--- /dev/null
+++ b/docs/assets/faq/zh/33-VTable usage issue: How to implement drag-and-drop adjustment of line-height.md
@@ -0,0 +1,53 @@
+---
+title: 11. VTable使用问题：如何实现拖拽调整行高
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+如何实现拖拽调整行高
+
+
+## 问题描述
+
+拖拽单元格底部边框，调整该行的行高
+
+
+## 解决方案
+
+`option`中的`rowResizeMode`配置可以开启或关闭行高调整功能：
+* `all`: 整列包括表头和 body 处的单元格均可调整列宽/行高
+* `none`: 禁止调整列宽/行高
+* `header`: 只能在表头处单元调整列宽/行高
+* `body`: 只能在 body 单元格调整列宽/行高
+`rowResizeType`配置控制了调整作用范围：
+* `column`/`row`：默认值，仅调整当前列/行的宽度；
+* `indicator`：相同指标列的列宽/行高一并调整；
+* `all`：所有列的列宽/行高一并调整；
+* `indicatorGroup`：同一组的指标列一并调整，如东北维度值下有两个指标为：销售额和利润，当调整销售额的列宽时，利润列也会进行调整；
+
+
+## 代码示例
+
+```
+const option = {
+ rowResizeType: 'row',
+ rowResizeMode: 'all',
+ // ......
+};
+tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID),option);
+```
+## 结果展示
+
+
+
+完整示例：https://www.visactor.io/vtable/demo/interaction/resize-row-height
+
+
+## 相关文档
+
+行高列宽调整：https://www.visactor.io/vtable/guide/interaction/resize_column_width
+相关api：https://www.visactor.io/vtable/option/ListTable#rowResizeMode
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/34-VTable usage issue: How to implement text type buttons.md b/docs/assets/faq/zh/34-VTable usage issue: How to implement text type buttons.md
new file mode 100644
index 000000000..df85e9416
--- /dev/null
+++ b/docs/assets/faq/zh/34-VTable usage issue: How to implement text type buttons.md
@@ -0,0 +1,216 @@
+---
+title: 12. VTable使用问题：如何实现文本类型的按钮
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+如何实现文本类型的按钮
+
+
+## 问题描述
+
+希望可以在单元格中显示文字类型的按钮，点击后可以进行操作
+
+
+## 解决方案
+
+可以使用`customLayout`功能来自定义按钮图元，并绑定相应的事件
+
+
+## 代码示例
+
+```
+ const option: VTable.ListTableConstructorOptions = {
+ columns: [
+ // ......
+ {
+ field: 'worksCount',
+ title: 'operation',
+ width: 110,
+ customLayout: (args: VTable.TYPES.CustomRenderFunctionArg) => {
+ const { table, row, col, rect } = args;
+ const { height, width } = rect ?? table.getCellRect(col, row);
+
+ const container = new VTable.CustomLayout.Group({
+ height,
+ width,
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'nowrap'
+ });
+
+ const editText = new VTable.CustomLayout.Text({
+ text: '编辑',
+ fontSize: 13,
+ fontFamily: 'sans-serif',
+ fill: '#2440b3', // #315efb
+ boundsPadding: [10, 0, 0, 10],
+ underline: 0,
+ cursor: 'pointer'
+ });
+ editText.stateProxy = (stateName: string) => {
+ if (stateName === 'hover') {
+ return {
+ fill: '#315efb',
+ underline: 1
+ };
+ }
+ };
+ editText.addEventListener('mouseenter', e => {
+ editText.addState('hover', true, false);
+ table.scenegraph.updateNextFrame();
+ });
+ editText.addEventListener('mouseleave', e => {
+ editText.removeState('hover', false);
+ table.scenegraph.updateNextFrame();
+ });
+ editText.addEventListener('click', e => {
+ console.log('edit click');
+ });
+ container.add(editText);
+
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }
+ }
+ ],
+ // ......
+ };
+```
+## 结果展示
+
+
+
+
+
+完整示例代码（可以粘贴到 [编辑器](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree) 上尝试一下）：
+```
+ const option = {
+ container: document.getElementById(CONTAINER_ID),
+ columns: [
+ {
+ field: 'bloggerId',
+ title: 'index'
+ },
+ {
+ field: 'worksCount',
+ title: 'operation',
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ },
+ width: 110,
+ customLayout: (args) => {
+ const { table, row, col, rect } = args;
+ const { height, width } = rect ?? table.getCellRect(col, row);
+
+ const container = new VTable.CustomLayout.Group({
+ height,
+ width,
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'nowrap'
+ });
+
+ const editText = new VTable.CustomLayout.Text({
+ text: '编辑',
+ fontSize: 13,
+ fontFamily: 'sans-serif',
+ fill: '#2440b3', // #315efb
+ boundsPadding: [10, 0, 0, 10],
+ underline: 0,
+ cursor: 'pointer'
+ });
+ editText.stateProxy = (stateName) => {
+ if (stateName === 'hover') {
+ return {
+ fill: '#315efb',
+ underline: 1
+ };
+ }
+ };
+ editText.addEventListener('mouseenter', e => {
+ editText.addState('hover', true, false);
+ table.scenegraph.updateNextFrame();
+ });
+ editText.addEventListener('mouseleave', e => {
+ editText.removeState('hover', false);
+ table.scenegraph.updateNextFrame();
+ });
+ editText.addEventListener('click', e => {
+ console.log('edit click');
+ });
+ container.add(editText);
+
+ const deleteText = new VTable.CustomLayout.Text({
+ text: '删除',
+ fontSize: 13,
+ fontFamily: 'sans-serif',
+ fill: '#2440b3', // #315efb
+ boundsPadding: [10, 0, 0, 10],
+ underline: 0,
+ cursor: 'pointer'
+ });
+ deleteText.stateProxy = (stateName) => {
+ if (stateName === 'hover') {
+ return {
+ fill: '#315efb',
+ underline: 1
+ };
+ }
+ };
+ deleteText.addEventListener('mouseenter', e => {
+ deleteText.addState('hover', true, false);
+ table.scenegraph.updateNextFrame();
+ });
+ deleteText.addEventListener('mouseleave', e => {
+ deleteText.removeState('hover', false);
+ table.scenegraph.updateNextFrame();
+ });
+ deleteText.addEventListener('click', e => {
+ console.log('delete click');
+ });
+ container.add(deleteText);
+
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }
+ }
+ ],
+ records: [
+ {
+ bloggerId: 1,
+ },
+ {
+ bloggerId: 2,
+ },
+ {
+ bloggerId: 3,
+ },
+ {
+ bloggerId: 4,
+ },
+ {
+ bloggerId: 5,
+ },
+ {
+ bloggerId: 6,
+ }
+ ],
+ defaultRowHeight: 40
+ };
+
+ const instance = new VTable.ListTable(option);
+```
+## 相关文档
+
+相关api：https://www.visactor.io/vtable/guide/custom_define/custom_layout
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/35-VTable usage issue: How to set the border style around cells separately.md b/docs/assets/faq/zh/35-VTable usage issue: How to set the border style around cells separately.md
new file mode 100644
index 000000000..c324441bd
--- /dev/null
+++ b/docs/assets/faq/zh/35-VTable usage issue: How to set the border style around cells separately.md
@@ -0,0 +1,130 @@
+---
+title: 13. VTable使用问题：如何分别设置单元格四周边框样式
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+如何分别设置单元格四周边框样式
+
+
+## 问题描述
+
+如何分别设置单元格四周边框样式，实现一个只有上下单元格边界线，没有左右边界线
+
+
+## 解决方案
+
+table中的单元格样式，无论在column的style里或者theme里，单元格边框相关配置都支持配置为数组，分别代表上右下左四个方向的边框样式
+
+
+## 代码示例
+
+```
+const option = {
+ columns: [
+ {
+ // ...
+ style: {
+ cellBorderLineWidth: [1, 0, 1, 0]
+ // ...
+ }
+ }
+ ]
+ // ...
+}
+```
+## 结果展示
+
+
+
+
+
+完整示例代码（可以粘贴到 [编辑器](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree) 上尝试一下）：
+```
+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',
+ theme: {
+ headerStyle: {
+ borderLineWidth: [1, 0, 1, 0]
+ },
+ bodyStyle: {
+ borderLineWidth: [1, 0, 1, 0]
+ }
+ }
+ // theme: VTable.themes.SIMPLIFY
+ };
+ tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+ window['tableInstance'] = tableInstance;
+ });
+```
+## 相关文档
+
+相关api：https://www.visactor.io/vtable/option/ListTable#theme.bodyStyle.borderColor
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/36-VTable usage issue: How to make the table automatically calculate column width based only on the content width of the table header.md b/docs/assets/faq/zh/36-VTable usage issue: How to make the table automatically calculate column width based only on the content width of the table header.md
new file mode 100644
index 000000000..4641f4d18
--- /dev/null
+++ b/docs/assets/faq/zh/36-VTable usage issue: How to make the table automatically calculate column width based only on the content width of the table header.md
@@ -0,0 +1,78 @@
+---
+title: 14. VTable使用问题：如何让表格只根据表头的内容宽度自动计算列宽
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+如何让表格只根据表头的内容宽度自动计算列宽
+
+
+## 问题描述
+
+在自动宽度模式下，希望一列的宽度只依据表头单元格的内容宽度决定，不受内容单元格影响。
+
+
+## 解决方案
+
+VTable提供了`columnWidthComputeMode`配置，用于指定内容宽度计算时参与计算的限定区域：
+* 'only-header'：只计算表头内容。
+* 'only-body'：只计算 body 单元格内容。
+* 'normal'：正常计算，即计算表头和 body 单元格内容。
+
+
+## 代码示例
+
+```
+const options = {
+ //......
+ columnWidthComputeMode: 'only-header'
+};
+```
+
+
+## 结果展示
+
+
+
+完整示例代码（可以粘贴到 [编辑器](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree) 上尝试一下）：
+```
+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"
+ }
+];
+
+const option = {
+ records:data,
+ columns,
+ widthMode:'standard',
+ columnWidthComputeMode: 'only-header'
+};
+tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+ })
+```
+## 相关文档
+
+相关api：https://www.visactor.io/vtable/option/ListTable#columnWidthComputeMode
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/37- What should I do if the bottom and right borders of VTable are not displayed when it is scrolled.md b/docs/assets/faq/zh/37- What should I do if the bottom and right borders of VTable are not displayed when it is scrolled.md
new file mode 100644
index 000000000..08230c2f4
--- /dev/null
+++ b/docs/assets/faq/zh/37- What should I do if the bottom and right borders of VTable are not displayed when it is scrolled.md
@@ -0,0 +1,59 @@
+---
+title: 15. VTable有滚动情况下底部和右侧边框不显示怎么办？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable有滚动情况下底部和右侧边框不显示怎么办？
+## 问题描述
+
+如截图效果，VTable中表格内容显示不完整（有滚动条的情况下），如何能让表格中的右侧边框和底部边框都显示？
+
+
+## 解决方案
+
+可通过在theme主题中的**frameStyle**添加**borderLineWidth**和**borderColor**配置**，不过添加上述配置后，表格顶部和左侧的边框和单元格的边框会有两层边框 效果也不好。**
+
+
+进一步研究配置，发现了**cellInnerBorder**配置项，专门为了处理这种情况的配置，将其设置为false，则边缘的单元格的边框线将不再绘制。
+用到的配置项定义如下：
+```
+/** frameStyle 是配置表格整体的样式 */
+frameStyle ?:FrameStyle;
+/** 单元格是否绘制内边框,如果为true，边界单元格靠近边界的边框会被隐藏 */
+cellInnerBoder?:boolean; // true | false
+```
+
+
+## 代码示例
+
+```
+ const option = {
+ records,
+ columns,
+ autoWrapText: true,
+ limitMaxAutoWidth: 600,
+ heightMode: 'autoHeight',
+ theme:{
+ frameStyle:{ // 配置的表格整体的边框
+ borderLineWidth: 1, // 设置边框宽度
+ borderColor: "#CBCBCB" // 设置边框颜色
+ },
+ cellInnerBorder:true // 单元格是否绘制内边框，可结合情况设置true或false
+ }
+ };
+ const tableInstance = new VTable.ListTable(container, option);
+```
+## 结果展示
+
+在线效果参考：https://codesandbox.io/p/sandbox/vtable-frame-border-demo-forked-zn4n9j
+
+
+## 相关文档
+
+设置表格边框demo：https://codesandbox.io/p/sandbox/vtable-frame-border-demo-forked-zn4n9j
+相关api：https://www.visactor.io/vtable/option/ListTable#theme.cellInnerBorder
+https://www.visactor.io/vtable/option/ListTable#theme.frameStyle.borderLineWidth
+https://www.visactor.io/vtable/option/ListTable#theme.frameStyle.borderColor
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/zh/38- Can the VTable component be drag-and-drop to swap rows.md b/docs/assets/faq/zh/38- Can the VTable component be drag-and-drop to swap rows.md
new file mode 100644
index 000000000..0f53f6f7e
--- /dev/null
+++ b/docs/assets/faq/zh/38- Can the VTable component be drag-and-drop to swap rows.md
@@ -0,0 +1,67 @@
+---
+title: 16. VTable表格组件是否可以拖拽整行调换位置？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable表格组件是否可以拖拽整行调换位置？
+## 问题描述
+
+VTable基本表格ListTable怎么能进行拖拽行换位呢
+## 解决方案
+
+VTable的行换位透视表是支持拖拽表头换位置的，基本表格需要结合序号配置来实现。其中有个`dragOrder`是表示否可拖拽顺序的配置项。配置了这个为true后会显示拖拽按钮图标，需要鼠标操作这个图标来拖拽换位。同时这个图标可以替换成你业务需要的图标样子。
+```
+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)[]);
+ /** 是否可拖拽顺序 */
+ dragOrder?: boolean;
+}
+```
+
+
+## 代码示例
+
+```
+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);
+```
+## 结果展示
+
+在线效果参考：https://visactor.io/vtable/demo/interaction/move-row-position
+
+
+## 相关文档
+
+拖拽移动行demo：https://visactor.io/vtable/demo/interaction/move-row-position
+拖拽移动行教程：https://visactor.io/vtable/guide/basic_function/row_series_number
+相关api：https://visactor.io/vtable/option/ListTable#rowSeriesNumber
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/zh/39- How to dynamically set the min and max values of the progressBar type in the VTable component based on the data items of the current row.md b/docs/assets/faq/zh/39- How to dynamically set the min and max values of the progressBar type in the VTable component based on the data items of the current row.md
new file mode 100644
index 000000000..9265bfdbb
--- /dev/null
+++ b/docs/assets/faq/zh/39- How to dynamically set the min and max values of the progressBar type in the VTable component based on the data items of the current row.md
@@ -0,0 +1,70 @@
+---
+title: 17. VTable表格组件中，progressbar进度条类型中min和max如何结合当前行的数据来计算展示呢
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable表格组件中，progressbar进度条类型中min和max如何结合当前行的数据项来动态设置呢
+## 问题描述
+
+业务场景：比如我的表格有一列用了progressbar单元格类型，但我每一行的条形图的最大最小值都是不一样的，就是我得到的数据每一条的max值是不固定的，像这种情况我该如何实现该进度条最大最小值能动态设置呢？
+## 解决方案
+
+目前VTable的progressbar类型的专属配置项max和min支持函数式写法，这样就能根据函数参数获取到数据记录来得到需要结合的数据
+
+
+
+
+## 代码示例
+
+```
+const records = [
+ {
+ "name":"鸽子",
+ "introduction":"鸽子是一种常见的城市鸟类，具有灰色的羽毛和短而粗壮的喙",
+ "image":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/pigeon.jpeg",
+ "video":"https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/media/pigeon.mp4",
+ "YoY":60,
+ "QoQ":10,
+ "min":-20,
+ "max":100
+ }
+];
+
+const columns = [
+ {
+ field: 'YoY',
+ title: 'count Year-over-Year',
+ cellType: 'progressbar',
+ width:200,
+ barType:'negative',
+ min(args){
+ const rowRecord=args.table.getCellOriginRecord(args.col,args.row);
+ return rowRecord.min;
+ },
+ max(args){
+ const rowRecord=args.table.getCellOriginRecord(args.col,args.row);
+ return rowRecord.max;
+ }
+ },
+];
+const option = {
+ records,
+ columns
+};
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+```
+## 结果展示
+
+相关Demo参考：https://visactor.io/vtable/demo/cell-type/progressbar
+直接将示例代码中代码粘贴到官网编辑器中即可呈现。
+
+
+## 相关文档
+
+progressbar用法参考demo：https://visactor.io/vtable/demo/cell-type/progressbar
+progressbar用法教程：https://visactor.io/vtable/guide/cell_type/progressbar
+相关api：https://visactor.io/vtable/option/ListTable-columns-progressbar#min
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/zh/40- Can the VTable component achieve different hover colors for different cells.md b/docs/assets/faq/zh/40- Can the VTable component achieve different hover colors for different cells.md
new file mode 100644
index 000000000..beb980534
--- /dev/null
+++ b/docs/assets/faq/zh/40- Can the VTable component achieve different hover colors for different cells.md
@@ -0,0 +1,99 @@
+---
+title: 18. VTable表格组件是否可以实现不同单元格hover颜色不一样？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable表格组件是否可以实现不同单元格hover颜色不一样？
+## 问题描述
+
+请问，可以实现不同单元格hover颜色不一样么？
+使用场景：默认情况下，设置hover颜色为蓝色，根据不同条件，高亮了一部分单元格为紫色，但需求不希望hover到高亮单元格时也变成了hove蓝r色。
+
+
+## 解决方案
+
+可通过背景色函数来解决，`bgColor`配置为函数形式来设置特殊值的高亮背景颜色。通过`theme.bodyStyle.hover.cellBgColor`来设置背景色，同样这里也需要设置成函数，返回不同的背景色，如果有些单元格不想要背景色的话可以放回空字符串。
+
+
+## 代码示例
+
+```
+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": "Profit",
+ "title": "Profit",
+ "width": "auto",
+ style:{
+ bgColor(args){
+ if(args.value>200){
+ return 'rgba(153,0,255,0.2)'
+ }
+ // 以下代码参考DEFAULT主题配置实现 https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/DEFAULT.ts
+ const { col,row, table } = args;
+ const {row:index} = table.getBodyIndexByTableIndex(col,row);
+ if (!(index & 1)) {
+ return '#FAF9FB';
+ }
+ return '#FDFDFD';
+ }
+ }
+ },
+ {
+ "field": "Order ID",
+ "title": "Order ID",
+ "width": "auto"
+ },
+ {
+ "field": "Customer ID",
+ "title": "Customer ID",
+ "width": "auto"
+ },
+ {
+ "field": "Product Name",
+ "title": "Product Name",
+ "width": "auto"
+ }
+];
+
+const option = {
+ records:data,
+ columns,
+ widthMode:'standard',
+ hover:{
+ highlightMode:'cell'
+ },
+ theme:VTable.themes.DEFAULT.extends({
+ bodyStyle:{
+ hover:{
+ cellBgColor(args){
+ if(args.value>200){
+ return ''
+ }
+ return '#CCE0FF';
+ }
+ }
+ }
+ })
+};
+tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+})
+```
+## 结果展示
+
+直接将示例代码中代码粘贴到官网编辑器中即可呈现。
+
+
+## 相关文档
+
+主题用法参考demo：https://visactor.io/vtable/demo/theme/extend
+主题用法教程：https://visactor.io/vtable/guide/theme_and_style/theme
+相关api：https://visactor.io/vtable/option/ListTable#theme
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/zh/41- How can I increase the gap between adjacent sparklines in the VTable component.md b/docs/assets/faq/zh/41- How can I increase the gap between adjacent sparklines in the VTable component.md
new file mode 100644
index 000000000..d07e1c245
--- /dev/null
+++ b/docs/assets/faq/zh/41- How can I increase the gap between adjacent sparklines in the VTable component.md
@@ -0,0 +1,131 @@
+---
+title: 19. VTable表格组件如何让相邻迷你折线图的直接的间隔变大？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable表格组件如何让相邻迷你折线图的直接的间隔变大？
+## 问题描述
+
+产品中使用到了VTable的迷你图，但是数据生成迷你图的效果用户觉得相邻折线间的距离太近了，请问怎么调整这个间距？
+
+
+## 解决方案
+
+首先需要明确一个单元格的宽高是包括了两部分，`padding`内边距和内容。其中`padding`在VTable中默认是`[10, 16, 10, 16]`，VTable的行高默认是40px，上下内边距占了20px，内容高度剩20px。
+上下内边距占了20px，相邻两个迷你折线图的最短间距也就是20px。也就是说相邻两个迷你折线图的最短间距是由padding决定的。那在官网示例中将padding调整为20，调整后发现线条曲线成直线了，这是因为40的行高都被边距占掉了，折线图没有了伸展空间。
+
+
+那么此时需要相应的加大行高才行，设置defaultRowHeight为60的效果如下：
+
+
+
+
+## 代码示例
+
+```
+const records = [
+ {
+ 'lineData':[50,20,20,40,60,50,70],
+ 'lineData2':[{x:1,y:1500},{x:2,y:1480},{x:3,y:1520},{x:4,y:1550},{x:5,y:1600}],
+ },
+ {
+ 'lineData':[50,20,60,40,60,50,70],
+ 'lineData2':[{x:1,y:1500},{x:2,y:1480},{x:3,y:1520},{x:4,y:1550},{x:5,y:1600}],
+ },
+ {
+ 'lineData':[50,50,20,40,10,50,70],
+ 'lineData2':[{x:1,y:1500},{x:2,y:1480},{x:3,y:1520},{x:4,y:1550},{x:5,y:1600}],
+ },
+ {
+ 'lineData':[70,20,20,40,60,50,70],
+ 'lineData2':[{x:1,y:1500},{x:2,y:1480},{x:3,y:1520},{x:4,y:1550},{x:5,y:1600}],
+ }
+];
+
+const columns = [
+ {
+ field: 'lineData',
+ title: 'sparkline',
+ cellType: 'sparkline',
+ width:300,
+ style:{
+ padding:20
+ },
+ sparklineSpec: {
+ type: 'line',
+ pointShowRule: 'none',
+ smooth: true,
+ line: {
+ style: {
+ stroke: '#2E62F1',
+ strokeWidth: 2,
+ },
+ },
+ point: {
+ hover: {
+ stroke: 'blue',
+ strokeWidth: 1,
+ fill: 'red',
+ shape: 'circle',
+ size: 4,
+ },
+ style: {
+ stroke: 'red',
+ strokeWidth: 1,
+ fill: 'yellow',
+ shape: 'circle',
+ size: 2,
+ },
+ },
+ crosshair: {
+ style: {
+ stroke: 'gray',
+ strokeWidth: 1,
+ },
+ },
+ },
+ },
+ {
+ field: 'lineData2',
+ title: 'sparkline 2',
+ cellType: 'sparkline',
+ width:300,
+ style:{
+ padding:20
+ },
+ sparklineSpec: {
+ type: 'line',
+ xField: 'x',
+ yField: 'y',
+ pointShowRule: 'all',
+ smooth: true,
+ line: {
+ style: {
+ stroke: '#2E62F1',
+ strokeWidth: 2,
+ },
+ },
+ },
+ },
+];
+const option = {
+ records,
+ columns,
+ defaultRowHeight:60
+};
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+
+```
+## 结果展示
+
+直接将示例代码中代码粘贴到官网编辑器中即可呈现。
+
+
+## 相关文档
+
+迷你图用法教程：https://visactor.io/vtable/guide/cell_type/sparkline
+style用法教程：https://visactor.io/vtable/guide/theme_and_style/style
+相关api：https://visactor.io/vtable/option/ListTable-columns-sparkline#style.padding
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/zh/42-VTable usage issue: How to add column total information to the list.md b/docs/assets/faq/zh/42-VTable usage issue: How to add column total information to the list.md
new file mode 100644
index 000000000..45a693d5b
--- /dev/null
+++ b/docs/assets/faq/zh/42-VTable usage issue: How to add column total information to the list.md
@@ -0,0 +1,65 @@
+---
+title: 20. VTable使用问题：如何在列表中加入列总计信息
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+如何在列表中加入列总计信息
+
+
+## 问题描述
+
+在列表中，希望可以显示一列的总计信息，如求和、平均等。
+
+
+## 解决方案
+
+VTable提供了`aggregation`配置，用于配置表格中的数据聚合规则和展示位置，可以在option中配置`aggregation`指定聚合的全局规则，也可以在每个column中配置`aggregation`指定该列的聚合规则。`aggregation`中需要配置以下属性：
+* aggregationType:
+* 求和，设置`aggregationType`为`AggregationType.SUM`
+* 平均，设置`aggregationType`为`AggregationType.AVG`
+* 最大值，设置`aggregationType`为`AggregationType.MAX`
+* 最小值，设置`aggregationType`为`AggregationType.MIN`
+* 计数，设置`aggregationType`为`AggregationType.COUNT`
+* 自定义函数，设置`aggregationType`为`AggregationType.CUSTOM`，通过`aggregationFun`来设置自定义的聚合逻辑
+* aggregationFun: `aggregationType`为`AggregationType.CUSTOM`时自定义聚合逻辑
+* showOnTop: 控制聚合结果的展示位置，默认为`false`，即聚合结果展示在 body 的底部。如果设置为`true`，则聚合结果展示在 body 的顶部。
+* formatFun: 设置聚合值的格式化函数，可以自定义聚合值的展示格式。
+
+
+## 代码示例
+
+```
+const options = {
+ //......
+ columns: [
+ {
+ aggregation: [
+ {
+ aggregationType: VTable.TYPES.AggregationType.MAX,
+ // showOnTop: true,
+ formatFun(value) {
+ return '最高薪资:' + Math.round(value) + '元';
+ }
+ }
+ ]
+ },
+ // ......
+ ]
+};
+```
+
+
+## 结果展示
+
+
+
+示例代码：https://www.visactor.io/vtable/demo/list-table-data-analysis/list-table-aggregation-multiple
+## 相关文档
+
+基础表格数据分析教程：https://www.visactor.io/vtable/guide/data_analysis/list_table_dataAnalysis
+相关api：https://www.visactor.io/vtable/option/ListTable#aggregation
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/43-VTable usage issue: How to listen to table area selection and cancellation events.md b/docs/assets/faq/zh/43-VTable usage issue: How to listen to table area selection and cancellation events.md
new file mode 100644
index 000000000..ea2990d57
--- /dev/null
+++ b/docs/assets/faq/zh/43-VTable usage issue: How to listen to table area selection and cancellation events.md
@@ -0,0 +1,73 @@
+---
+title: 21. VTable使用问题：如何监听表格区域选中取消事件
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+如何监听表格区域选中取消事件
+
+
+## 问题描述
+
+希望可以通过事件，监听选中取消事件（点击表格其他区域或点击表格外）
+
+
+## 解决方案
+
+VTable提供了`**SELECTED_CLEAR**`事件，在取消选中操作后（并且当前图表区域中无任何选中区域）触发
+
+
+## 代码示例
+
+```
+const tableInstance = new VTable.ListTable(option);
+tableInstance.on(VTable.ListTable.EVENT_TYPE.SELECTED_CLEAR, () => {
+ console.log("selected clear!");
+});
+```
+
+
+完整示例代码（可以粘贴到 [编辑器](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree) 上尝试一下）：
+```
+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"
+ }
+];
+
+const option = {
+ records:data,
+ columns
+};
+tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+
+tableInstance.on(VTable.ListTable.EVENT_TYPE.SELECTED_CLEAR, () => {
+ console.log("selected clear!");
+});
+ })
+```
+## 相关文档
+
+相关api：https://www.visactor.io/vtable/api/events#SELECTED_CLEAR
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/44-VTable usage issue: How to set only one column to not be selected for operation.md b/docs/assets/faq/zh/44-VTable usage issue: How to set only one column to not be selected for operation.md
new file mode 100644
index 000000000..e20f6c78b
--- /dev/null
+++ b/docs/assets/faq/zh/44-VTable usage issue: How to set only one column to not be selected for operation.md
@@ -0,0 +1,83 @@
+---
+title: 22. VTable使用问题：如何何设置只有一列不能选中操作
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+如何何设置只有一列不能选中操作
+
+
+## 问题描述
+
+如何在表格中的某一列，点击单元格不会选中
+
+
+## 解决方案
+
+VTable在`column`中提供了`disableSelect`和`disableHeaderSelect`配置：
+* disableSelect: 该列内容部分禁用选中
+* disableHeaderSelect: 该列表头部分禁用选中
+
+
+## 代码示例
+
+```
+const options = {
+ columns: [
+ {
+ field: 'name',
+ title: 'name',
+ disableSelect: true,
+ disableHeaderSelect: true
+ },
+ // ......
+ ],
+ //......
+};
+```
+
+
+完整示例代码（可以粘贴到 [编辑器](https%3A%2F%2Fwww.visactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table-tree) 上尝试一下）：
+```
+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",
+ disableSelect: true,
+ disableHeaderSelect: true
+ },
+ {
+ "field": "Customer ID",
+ "title": "Customer ID",
+ "width": "auto"
+ },
+ {
+ "field": "Product Name",
+ "title": "Product Name",
+ "width": "auto"
+ }
+];
+
+const option = {
+ records:data,
+ columns,
+ widthMode:'standard',
+ columnWidthComputeMode: 'only-header'
+};
+tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+ })
+```
+## 相关文档
+
+相关api：https://www.visactor.io/vtable/option/ListTable-columns-text#disableSelect
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/45-VTable usage issue: How to manually control the tooltip display.md b/docs/assets/faq/zh/45-VTable usage issue: How to manually control the tooltip display.md
new file mode 100644
index 000000000..916a4f016
--- /dev/null
+++ b/docs/assets/faq/zh/45-VTable usage issue: How to manually control the tooltip display.md
@@ -0,0 +1,75 @@
+---
+title: 23. VTable使用问题：如何手动控制tooltip展示
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+如何手动控制tooltip展示
+
+
+## 问题描述
+
+如何手动控制tooltip的展示内容，展示样式和展示时机
+
+
+## 解决方案
+
+VTable提供了`showTooltip`方法，用于手动触发tooltip展示
+```
+showTooltip: (col: number, row: number, tooltipOptions?: TooltipOptions) => voild
+```
+* col&row: 限制tooltip的单元格位置
+* tooltipOptions: tooltip的详细配置：
+```
+type TooltipOptions = {
+ /** tooltip内容 */
+ content: string;
+ /** tooltip框的位置 优先级高于referencePosition */
+ position?: { x: number; y: number };
+ /** tooltip框的参考位置 如果设置了position则该配置不生效 */
+ referencePosition?: {
+ /** 参考位置设置为一个矩形边界 设置placement来指定处于边界位置的方位*/
+ rect: RectProps;
+ /** 指定处于边界位置的方位 */
+ placement?: Placement;
+ };
+ /** 需要自定义样式指定className dom的tooltip生效 */
+ className?: string;
+ /** 设置tooltip的样式 */
+ style?: {
+ bgColor?: string;
+ fontSize?: number;
+ fontFamily?: string;
+ color?: string;
+ padding?: number[];
+ arrowMark?: boolean;
+ };
+};
+```
+## 代码示例
+
+```
+tableInstance.showTooltip(col, row, {
+content: 'custom tooltip',
+ referencePosition: { rect, placement: VTable.TYPES.Placement.right }, //TODO
+ className: 'defineTooltip',
+ style: {
+ bgColor: 'black',
+ color: 'white',
+ font: 'normal bold normal 14px/1 STKaiti',
+ arrowMark: true,
+ },
+});
+```
+## 结果展示
+
+
+
+完整示例：https://www.visactor.io/vtable/demo/component/tooltip
+## 相关文档
+
+相关api：https://www.visactor.io/vtable/api/Methods#showTooltip
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/46-VTable usage issue: How to set multi-level table headers.md b/docs/assets/faq/zh/46-VTable usage issue: How to set multi-level table headers.md
new file mode 100644
index 000000000..b4b8d4fb5
--- /dev/null
+++ b/docs/assets/faq/zh/46-VTable usage issue: How to set multi-level table headers.md
@@ -0,0 +1,76 @@
+---
+title: 24. VTable使用问题：如何设置多级表头
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+如何设置多级表头
+
+
+## 问题描述
+
+如何配置表头，实现多级表头分组效果
+
+
+## 解决方案
+
+VTable中的`column`配置中，支持通过`columns`配置来指定该列的下级表头，可以使用这个规则多级嵌套
+
+
+## 代码示例
+
+```
+const columns = [
+ {
+ field: 'id',
+ title: 'ID',
+ width: 100
+ },
+ {
+ title: 'Name',
+ columns: [
+ {
+ field: 'name1',
+ title: 'name1',
+ width: 100
+ },
+ {
+ title: 'name-level-2',
+ width: 150,
+ columns: [
+ {
+ field: 'name2',
+ title: 'name2',
+ width: 100
+ },
+ {
+ title: 'name3',
+ field: 'name3',
+ width: 150
+ }
+ ]
+ }
+ ]
+ }
+];
+
+const option = {
+ records,
+ columns,
+ // ......
+};
+```
+
+
+## 结果展示
+
+
+
+完整示例：https://www.visactor.io/vtable/demo/basic-functionality/list-table-header-group
+## 相关文档
+
+相关api：https://www.visactor.io/vtable/option/ListTable-columns-text#columns
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/47- How to make text automatically omitted based on cell width when using custom rendering with VTable components.md b/docs/assets/faq/zh/47- How to make text automatically omitted based on cell width when using custom rendering with VTable components.md
new file mode 100644
index 000000000..4ee8a6454
--- /dev/null
+++ b/docs/assets/faq/zh/47- How to make text automatically omitted based on cell width when using custom rendering with VTable components.md
@@ -0,0 +1,160 @@
+---
+title: 25. 使用VTable表格组件的自定义渲染写法时，怎么让文本根据单元格宽度自动省略？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+使用VTable表格组件的自定义渲染写法时，怎么让文本根据单元格宽度自动省略？
+## 问题描述
+
+产品中使用到了VTable的自定义渲染，其中单元格包括了icon和text元素，期望在初始时列宽可以根据内容自动计算，如果手动拖拽列宽当缩小列宽时文字可以自动省略。而不是按钮悬浮在文字上，不知道怎么写才可以缩小列宽使文字变成`...`省略符
+
+
+## 解决方案
+
+我们使用VTable提供的customLayout写法，这种自定义写法可以自动布局，且有自动测量宽度使适应单元格宽度的效果。具体写法如下：
+```
+ customLayout: (args) => {
+ const { table,row,col,rect } = args;
+ const record = table.getRecordByCell(col,row);
+ const {height, width } = rect ?? table.getCellRect(col,row);
+ const container = new VTable.CustomLayout.Group({
+ height,
+ width,
+ display: 'flex',
+ flexWrap:'no-wrap',
+ alignItems: 'center',
+ justifyContent: 'flex-front'
+ });
+ const bloggerAvatar = new VTable.CustomLayout.Image({
+ id: 'icon0',
+ width: 20,
+ height: 20,
+ image:record.bloggerAvatar,
+ cornerRadius: 10,
+ });
+ container.add(bloggerAvatar);
+ const bloggerName = new VTable.CustomLayout.Text({
+ text:record.bloggerName,
+ fontSize: 13,
+ x:20,
+ fontFamily: 'sans-serif',
+ fill: 'black',
+ maxLineWidth:width===null?undefined:width-20+1
+ });
+ container.add(bloggerName);
+ return {
+ rootContainer: container,
+ renderDefault: false,
+ };
+ }
+```
+customLayout需要返回一个rootContainer，通常是一个Group类型的对象来作为承载其他内容的容器。这里这点设置了`flexWrap`内部元素（icon和text）不换行，水平和垂直对齐方式`alignItems` 和 `justifyContent`。Group中有个图片和文本`Image`和`Text`。如果需要文本空间被压缩是能自动省略出现...，则需要配置上`maxLineWidth`，这里有个特殊的点是，当`column`设置的`width`是`'auto'` 的情况下，`customLayout`函数接收到的参数单元格宽度`width`的值是`null`，所以这里需要判断是否为`null`，如果`null`则设置`maxLineWidth`为`undefined`来让单元格的宽度自动撑开，非`null`的话那就根据`width`这个值来设置`maxLineWidth`，这里减掉20是避让了图片的宽度，另外+1是缓冲值可以忽略。
+## 代码示例
+
+```
+
+ const option = {
+ columns:[
+ {
+ field: 'bloggerId',
+ title:'order number'
+ },
+ {
+ field: 'bloggerName',
+ title:'anchor nickname',
+ width:'auto',
+ style:{
+ fontFamily:'Arial',
+ fontWeight:500
+ },
+ customLayout: (args) => {
+ const { table,row,col,rect } = args;
+ const record = table.getRecordByCell(col,row);
+ const {height, width } = rect ?? table.getCellRect(col,row);
+ const container = new VTable.CustomLayout.Group({
+ height,
+ width,
+ display: 'flex',
+ flexWrap:'no-wrap',
+ alignItems: 'center',
+ justifyContent: 'flex-front'
+ });
+ const bloggerAvatar = new VTable.CustomLayout.Image({
+ id: 'icon0',
+ width: 20,
+ height: 20,
+ image:record.bloggerAvatar,
+ cornerRadius: 10,
+ });
+ container.add(bloggerAvatar);
+ const bloggerName = new VTable.CustomLayout.Text({
+ text:record.bloggerName,
+ fontSize: 13,
+ x:20,
+ fontFamily: 'sans-serif',
+ fill: 'black',
+ maxLineWidth:width===null?undefined:width-20+1
+ });
+ container.add(bloggerName);
+ return {
+ rootContainer: container,
+ renderDefault: false,
+ };
+ }
+ },
+ {
+ field: 'fansCount',
+ title:'fansCount',
+ fieldFormat(rec){
+ return rec.fansCount + 'w'
+ },
+ style:{
+ fontFamily:'Arial',
+ fontSize:12,
+ fontWeight:'bold'
+ }
+ },
+ ],
+ records:[
+ {
+ 'bloggerId': 1,
+ "bloggerName": "Virtual Anchor Xiaohua duoduo",
+ "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg",
+ "introduction": "Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.",
+ "fansCount": 400,
+ "worksCount": 10,
+ "viewCount": 5,
+ "city": "Dream City",
+ "tags": ["game", "anime", "food"]
+ },
+ {
+ 'bloggerId': 2,
+ "bloggerName": "Virtual anchor little wolf",
+ "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg",
+ "introduction": "Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.",
+ "fansCount": 800,
+ "worksCount": 20,
+ "viewCount": 15,
+ "city": "City of Music",
+ "tags": ["music", "travel", "photography"]
+ }
+ ],
+ defaultRowHeight:30
+ };
+
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+```
+## 结果展示
+
+直接将示例代码中代码粘贴到官网编辑器中即可呈现。
+
+
+## 相关文档
+
+customLayout用法教程：https://visactor.io/vtable/guide/custom_define/custom_layout
+customLayout用法demo：https://visactor.io/vtable/demo/custom-render/custom-cell-layout
+相关api：https://visactor.io/vtable/option/ListTable-columns-text#customLayout
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/zh/48- When using the pivot table of the VTable component, how to display the calculated indicator results in a separate column.md b/docs/assets/faq/zh/48- When using the pivot table of the VTable component, how to display the calculated indicator results in a separate column.md
new file mode 100644
index 000000000..90b7927d7
--- /dev/null
+++ b/docs/assets/faq/zh/48- When using the pivot table of the VTable component, how to display the calculated indicator results in a separate column.md
@@ -0,0 +1,170 @@
+---
+title: 26. 使用VTable表格组件的透视表时，怎么将指标结果再计算后显示到单独的一列当中？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+使用VTable表格组件的透视表时，怎么将指标结果再计算后显示到单独的一列当中？
+## 问题描述
+
+有什么配置可以生成派生指标吗，把聚合之后的指标结果再进行计算，然后展示到指标里面
+描述：比如我的行维度是大区-地区，列维度是月份，指标是目标、实际，达成(这个达成的计算为实际/目标)，达成就是我想派生的指标，因为的数据里面没有达成的字段。
+问题截图：
+
+
+## 解决方案
+
+**最新最好的解决方法：**目前已经有了更好的解决方案，因为VTable又推出了透视表计算字段的功能！！！
+**之前旧的解决方法：**
+使用VTable官网的透视分析表为例进行类似目标的修改，我们在原有的demo中增加一个指标为`Profit Ratio`，显示的值用`format`函数进行计算，计算逻辑依赖于`Sales`和`Profit`两个指标的值。也就是我们计算了一个利润比，其中`利润比 = 利润 / 销售额`。
+```
+ {
+ indicatorKey: 'Profit Ratio',
+ title: 'Profit Ratio',
+ width: 'auto',
+ showSort: false,
+ headerStyle: {
+ fontWeight: 'normal'
+ },
+ format: (value,col,row,table) => {
+ const sales=table.getCellOriginValue(col-2,row);
+ const profit=table.getCellOriginValue(col-1,row);
+ const ratio= profit/sales;
+ var percentage = ratio * 100;
+ return percentage.toFixed(2) + "%";
+ }
+ }
+```
+## 代码示例
+
+```
+let tableInstance;
+fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_data.json')
+ .then(res => res.json())
+ .then(data => {
+ const option = {
+ records: data,
+ rows: [
+ {
+ dimensionKey: 'City',
+ title: 'City',
+ headerStyle: {
+ textStick: true
+ },
+ width: 'auto'
+ }
+ ],
+ columns: [
+ {
+ dimensionKey: 'Category',
+ title: 'Category',
+ headerStyle: {
+ textStick: true
+ },
+ width: 'auto'
+ }
+ ],
+ indicators: [
+ {
+ indicatorKey: 'Quantity',
+ title: 'Quantity',
+ width: 'auto',
+ showSort: false,
+ headerStyle: {
+ fontWeight: 'normal'
+ },
+ style: {
+ padding: [16, 28, 16, 28],
+ color(args) {
+ if (args.dataValue >= 0) return 'black';
+ return 'red';
+ }
+ }
+ },
+ {
+ indicatorKey: 'Sales',
+ title: 'Sales',
+ width: 'auto',
+ showSort: false,
+ headerStyle: {
+ fontWeight: 'normal'
+ },
+ format: rec => {
+ return '$' + Number(rec).toFixed(2);
+ },
+ style: {
+ padding: [16, 28, 16, 28],
+ color(args) {
+ if (args.dataValue >= 0) return 'black';
+ return 'red';
+ }
+ }
+ },
+ {
+ indicatorKey: 'Profit',
+ title: 'Profit',
+ width: 'auto',
+ showSort: false,
+ headerStyle: {
+ fontWeight: 'normal'
+ },
+ format: rec => {
+ return '$' + Number(rec).toFixed(2);
+ },
+ style: {
+ padding: [16, 28, 16, 28],
+ color(args) {
+ if (args.dataValue >= 0) return 'black';
+ return 'red';
+ }
+ }
+ },
+ {
+ indicatorKey: 'Profit Ratio',
+ title: 'Profit Ratio',
+ width: 'auto',
+ showSort: false,
+ headerStyle: {
+ fontWeight: 'normal'
+ },
+ format: (value,col,row,table) => {
+ const sales=table.getCellOriginValue(col-2,row);
+ const profit=table.getCellOriginValue(col-1,row);
+ const ratio= profit/sales;
+ var percentage = ratio * 100;
+ return percentage.toFixed(2) + "%";
+ }
+ }
+ ],
+ corner: {
+ titleOnDimension: 'row',
+ headerStyle: {
+ textStick: true
+ }
+ },
+ dataConfig: {
+ sortRules: [
+ {
+ sortField: 'Category',
+ sortBy: ['Office Supplies', 'Technology', 'Furniture']
+ }
+ ]
+ },
+ widthMode: 'standard'
+ };
+ tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID), option);
+ window['tableInstance'] = tableInstance;
+ });
+```
+## 结果展示
+
+直接将示例代码中代码粘贴到官网编辑器中即可呈现。
+
+
+## 相关文档
+
+透视分析表用法教程：https://visactor.io/vtable/guide/table_type/Pivot_table/pivot_table_useage
+透视分析表用法demo：https://visactor.io/vtable/demo/table-type/pivot-analysis-table
+相关api：https://visactor.io/vtable/option/PivotTable#indicators
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/zh/49- How to implement dimension drill-down function when using VTable pivot table component.md b/docs/assets/faq/zh/49- How to implement dimension drill-down function when using VTable pivot table component.md
new file mode 100644
index 000000000..3f301784a
--- /dev/null
+++ b/docs/assets/faq/zh/49- How to implement dimension drill-down function when using VTable pivot table component.md
@@ -0,0 +1,93 @@
+---
+title: 27. 使用VTable表格组件的透视表时，怎么做维度下钻的功能
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+使用VTable表格组件的透视表时，怎么做维度下钻的功能
+## 问题描述
+
+vtable透视表是否支持在前端做钻取交互？
+## 解决方案
+
+
+
+配置上这个 有了图标 监听事件（[https://visactor.io/vtable/api/events#DRILLMENU_CLICK](https%3A%2F%2Fvisactor.io%2Fvtable%2Fapi%2Fevents%23DRILLMENU_CLICK)） 获取新的数据后调用接口`updateOption`更新完整的配置。
+## 代码示例
+
+具体可以参考官网的示例demo：https://visactor.io/vtable/demo/data-analysis/pivot-analysis-table-drill。
+关键的配置drillDown：
+```
+const option = {
+ records: data,
+ rows: [
+ {
+ dimensionKey: 'Category',
+ title: 'Category',
+ drillDown: true,
+ headerStyle: {
+ textStick: true
+ },
+ width: 'auto'
+ }
+ ],
+ columns: [
+ {
+ dimensionKey: 'Region',
+ title: 'Region',
+ headerStyle: {
+ textStick: true
+ },
+ width: 'auto'
+ }
+ ],
+ indicators: ...
+};
+```
+配置后显示下钻图标，监听图标的点击事件 `drillmenu_click`，事件处理逻辑中调用`updateOption`更新配置，配置的下钻图标变成下钻图标drillUp：
+```
+tableInstance.on('drillmenu_click', args => {
+ if (args.drillDown) {
+ if (args.dimensionKey === 'Category') {
+ tableInstance.updateOption({
+ records: newData,
+ rows: [
+ {
+ dimensionKey: 'Category',
+ title: 'Category',
+ drillUp: true,
+ headerStyle: {
+ textStick: true
+ },
+ width: 'auto'
+ },
+ {
+ dimensionKey: 'Sub-Category',
+ title: 'Sub-Catogery',
+ headerStyle: {
+ textStick: true
+ },
+ width: 'auto'
+ }
+ ],
+ columns: ...,
+ indicators: ...
+ });
+ }
+ }
+```
+
+
+## 结果展示
+
+官网示例效果如下：
+
+
+## 相关文档
+
+透视表上钻下钻用法教程：https://visactor.io/vtable/guide/data_analysis/pivot_table_dataAnalysis
+透视表上钻下钻用法demo：https://visactor.io/vtable/demo/data-analysis/pivot-analysis-table-drill?open_in_browser=true
+相关api：https://visactor.io/vtable/option/PivotTable-columns-text#drillDown
+https://visactor.io/vtable/api/events?open_in_browser=true#DRILLMENU_CLICK
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/zh/50- How to manually update the state when using the Checkbox in the VTable component.md b/docs/assets/faq/zh/50- How to manually update the state when using the Checkbox in the VTable component.md
new file mode 100644
index 000000000..1f8da9c91
--- /dev/null
+++ b/docs/assets/faq/zh/50- How to manually update the state when using the Checkbox in the VTable component.md
@@ -0,0 +1,43 @@
+---
+title: 28. 使用VTable表格组件用到了复选框Checkbox，怎么手动更新状态？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+使用VTable表格组件用到了复选框Checkbox，怎么手动更新状态？
+## 问题描述
+
+请问VTable的ListTable有没有手动设置复选框checkbox的方式，以及如何清空所有checkbox的选中状态？
+## 解决方案
+
+### 调用接口更新状态
+
+可以调用接口`setCellCheckboxState`。 该接口的可以设置单元格的 checkbox 状态，定义如下：
+```
+setCellCheckboxState(col: number, row: number, checked: boolean) => void
+```
+参数说明：
+* col: 列号
+* row: 行号
+* checked: 是否选中
+如` tableInstance.``setCellCheckboxState(0,3,true)` 即将位置为（0,3）的单元格的Checkbox状态设置为选中状态，官网demo修改后效果如下：https://visactor.io/vtable/demo/cell-type/checkbox
+
+
+### 批量更新状态
+
+第二个问题批量的话，目前还没有专门的接口可以重置所有的复选框状态。但是可以通过重置数据调用`setRecords`或者更新列配置信息调用`updateColumns`来达到更新所有复选框状态的目标。
+1. 通过更新列配置
+将列配置中添加checked为true或者false，即可设置整列状态。不过数据records中有表示状态的字段则以数据为准。
+
+
+1. 通过更新records数据源来批量设置复选框状态，这种用法需要在records中对应的复选框取值字段都明确指定。
+
+
+## 相关文档
+
+复选框类型用法教程：https://visactor.io/vtable/guide/cell_type/checkbox
+复选框demo：https://visactor.io/vtable/demo/cell-type/checkbox
+相关api：https://visactor.io/vtable/option/ListTable-columns-checkbox#cellType
+https://visactor.io/vtable/api/Methods#setCellCheckboxState
+github：https://github.com/VisActor/VTable
+
diff --git a/docs/assets/faq/zh/51- How to delete the content of the selected cell using hotkeys in VTable.md b/docs/assets/faq/zh/51- How to delete the content of the selected cell using hotkeys in VTable.md
new file mode 100644
index 000000000..5b18db5d1
--- /dev/null
+++ b/docs/assets/faq/zh/51- How to delete the content of the selected cell using hotkeys in VTable.md
@@ -0,0 +1,156 @@
+---
+title: 29. VTable怎么通过快捷键将选中单元格的内容删除掉？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable怎么通过快捷键将选中单元格的内容删除掉？
+## 问题描述
+
+通过VTable提供的编辑能力，实现了可编辑表格的业务场景。不过目前有个需求：VTable是否可以实现当在键盘上按下delete键或者backspace时，将选中单元格内容给删除掉。
+## 解决方案
+
+目前VTable本身还不支持这个能力，可以通过监听键盘事件调用VTable的接口来自行实现该能力。
+首先监听事件`keydown`，在事件中调用更新单元格值的接口`changeCellValue`。
+实现逻辑参考demo：https://visactor.io/vtable/demo/interaction/context-menu。
+```
+ // 监听键盘事件
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Delete'||e.key === 'Backspace') {
+ let selectCells = tableInstance.getSelectedCellInfos();
+ if (selectCells?.length > 0) {
+ // 如果选中的是范围，则删除范围内的所有单元格
+ deleteSelectRange(selectCells);
+ } else {
+ // 否则只删除单个单元格
+ tableInstance.changeCellValue(args.col, args.row, '');
+ }
+ }
+ });
+ //将选中单元格的值设置为空
+ 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, '');
+ }
+ }
+ }
+```
+## 代码示例
+
+```
+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',
+ menu: {
+ contextMenuItems: ['copy', 'paste', 'delete', '...']
+ }
+ };
+ tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+ window['tableInstance'] = tableInstance;
+
+ // 监听键盘事件
+ document.addEventListener('keydown', (e) => {
+ debugger
+ if (e.key === 'Delete'||e.key === 'Backspace') {
+ let selectCells = tableInstance.getSelectedCellInfos();
+ if (selectCells?.length > 0 ) {
+ // 如果选中的是范围，则删除范围内的所有单元格
+ deleteSelectRange(selectCells);
+ } else {
+ // 否则只删除单个单元格
+ tableInstance.changeCellValue(args.col, args.row, '');
+ }
+ }
+ });
+ });
+
+ //将选中单元格的值设置为空
+ 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, '');
+ }
+ }
+ }
+
+```
+
+
+## 结果展示
+
+可以将代码复制到官网的代码编辑器中直接测试效果。
+
+
+## 相关文档
+
+删除数据demo：https://visactor.io/vtable/demo/interaction/context-menu
+数据更新教程：https://visactor.io/vtable/guide/data/data_format
+相关api：https://visactor.io/vtable/api/Methods#changeCellValue
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/52- Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused.md b/docs/assets/faq/zh/52- Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused.md
new file mode 100644
index 000000000..0f9fd47ab
--- /dev/null
+++ b/docs/assets/faq/zh/52- Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused.md
@@ -0,0 +1,54 @@
+---
+title: 30. VTable表格组件的编辑单元格能力使用问题：编辑器怎么配置，是否可以复用？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable表格组件的编辑单元格能力使用问题：编辑器怎么配置，是否可以复用？
+## 问题描述
+
+业务场景中表格有很多列，如果每一列都需要配置一个编辑器的话，会比较繁琐，请问是否有简单的方式来定义呢？
+## 解决方案
+
+可以根据具体业务复用程度来决定采用哪种方式配置编辑器：
+1. 全局只配置一个编辑器，所有单元格都用得上：
+```
+import { DateInputEditor, InputEditor, ListEditor, TextAreaEditor } from '@visactor/vtable-editors';
+const option={
+ editor: new InputEditor()
+}
+```
+配置之后，可以点击所有的单元格进行编辑
+
+
+1. 如果某几个列可以复用同样的编辑器，可以在`columns`列配置中声明相同的`editor`名字、
+```
+import { DateInputEditor, InputEditor, ListEditor, TextAreaEditor } from '@visactor/vtable-editors';
+const input_editor = new InputEditor();
+VTable.register.editor('input-editor', input_editor);
+
+const option={
+ columns:[
+ {field:'id',title: 'ID'},
+ {field:'name',title: 'NAME',editor:'input-editor'},
+ {field:'address',title: 'ADDRESS',editor:'input-editor'},
+ ]
+}
+```
+配置后会发现该列单元格都可以进行编辑了。
+
+
+可以按上述两种方式，在官网demo中稍加修改调试进行验证。demo地址：https://visactor.io/vtable/demo/edit/edit-cell
+
+
+## 相关文档
+
+编辑表格demo：https://visactor.io/vtable/demo/edit/edit-cell
+编辑表格教程：https://visactor.io/vtable/guide/edit/edit_cell
+相关api：
+https://visactor.io/vtable/option/ListTable#editor
+https://visactor.io/vtable/option/ListTable-columns-text#editor
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/53- How to control the timing of exiting edit mode after implementing editable cells in VTable components.md b/docs/assets/faq/zh/53- How to control the timing of exiting edit mode after implementing editable cells in VTable components.md
new file mode 100644
index 000000000..652eefa07
--- /dev/null
+++ b/docs/assets/faq/zh/53- How to control the timing of exiting edit mode after implementing editable cells in VTable components.md
@@ -0,0 +1,218 @@
+---
+title: 31. VTable表格组件实现单元格可编辑后，怎么控制退出编辑的时机？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable表格组件实现单元格可编辑后，怎么控制退出编辑的时机？
+## 问题描述
+
+结合官网流程图所示，当再编辑状态下点击其他单元格或者按enter键后，VTable处理在接收到事件时，就一定会触发这个onEnd退出编辑状态吗？在我的项目中，有个场景是会在用户触发这两种交互时，不期望退出编辑状态，这个目前有办法吗？
+
+
+## 解决方案
+
+### 点击不退出编辑
+
+可以使用编写自定义编辑器来控制退出编辑状态的时机。因为VTable逻辑会调用编辑器的`isEditorElement`方法如果返回false则VTable会走退出编辑的逻辑，如果返回true则不退出编辑，所以我们可以利用这个方法来显示不退出的需求。具体教程地址：https://visactor.io/vtable/guide/edit/edit_cell
+
+
+### 键入enter不退出编辑
+
+这个可以监听编辑dom的keydown事件，直接组织冒泡，不让VTable监听到也就不会退出编辑了
+## 示例代码
+
+```
+let tableInstance;
+ class MyInputEditor {
+ createElement() {
+ const input = document.createElement('input');
+ input.setAttribute('type', 'text');
+ input.style.position = 'absolute';
+ input.style.padding = '4px';
+ input.style.width = '100%';
+ input.style.boxSizing = 'border-box';
+ this.element = input;
+ this.container.appendChild(input);
+ // 监听键盘事件
+ input.addEventListener('keydown', (e) => {
+ // 阻止冒泡
+ e.stopPropagation();
+ });
+ }
+ setValue(value) {
+ this.element.value = typeof value !== 'undefined' ? value : '';
+ }
+ getValue() {
+ return this.element.value;
+ }
+ onStart({ value, referencePosition, container, endEdit }){
+ this.container = container;
+ this.successCallback = endEdit;
+ if (!this.element) {
+ this.createElement();
+
+ if (value !== undefined && value !== null) {
+ this.setValue(value);
+ }
+ if (referencePosition?.rect) {
+ this.adjustPosition(referencePosition.rect);
+ }
+ }
+ this.element.focus();
+ }
+
+ adjustPosition(rect) {
+ this.element.style.top = rect.top + 'px';
+ this.element.style.left = rect.left + 'px';
+ this.element.style.width = rect.width + 'px';
+ this.element.style.height = rect.height + 'px';
+ }
+ onEnd() {
+ this.container.removeChild(this.element);
+ this.element = undefined;
+ }
+
+ isEditorElement(target) {
+ // 仅允许点击到表格外部才会结束编辑
+ if(target.tagName === 'CANVAS')
+ return true;
+ return target === this.element;
+ }
+}
+
+const my_editor = new MyInputEditor();
+VTable.register.editor('my_editor', my_editor);
+
+const option = {
+ container: document.getElementById(CONTAINER_ID),
+ columns: [
+ {
+ field: 'bloggerName',
+ title: 'bloggerName'
+ },
+ {
+ field: 'fansCount',
+ title: 'fansCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
+ },
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'worksCount',
+ title: 'worksCount',
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
+ },
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
+ },
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ ],
+ records: [
+ {
+ bloggerId: 1,
+ bloggerName: 'Virtual Anchor Xiaohua',
+ fansCount: 400,
+ worksCount: 10,
+ viewCount: 5,
+ city: 'Dream City',
+ tags: ['game', 'anime', 'food']
+ },
+ {
+ bloggerId: 2,
+ bloggerName: 'Virtual anchor little wolf',
+ fansCount: 800,
+ worksCount: 20,
+ viewCount: 15,
+ city: 'City of Music',
+ tags: ['music', 'travel', 'photography']
+ },
+ {
+ bloggerId: 3,
+ bloggerName: 'Virtual anchor bunny',
+ fansCount: 600,
+ worksCount: 15,
+ viewCount: 10,
+ city: 'City of Art',
+ tags: ['painting', 'handmade', 'beauty makeup']
+ },
+ {
+ bloggerId: 4,
+ bloggerName: 'Virtual anchor kitten',
+ fansCount: 1000,
+ worksCount: 30,
+ viewCount: 20,
+ city: 'Health City',
+ tags: ['dance', 'fitness', 'cooking']
+ },
+ {
+ bloggerId: 5,
+ bloggerName: 'Virtual anchor Bear',
+ fansCount: 1200,
+ worksCount: 25,
+ viewCount: 18,
+ city: 'City of Wisdom',
+ tags: ['Movie', 'Literature']
+ },
+ {
+ bloggerId: 6,
+ bloggerName: 'Virtual anchor bird',
+ fansCount: 900,
+ worksCount: 12,
+ viewCount: 8,
+ city: 'Happy City',
+ tags: ['music', 'performance', 'variety']
+ }
+ ],
+ enableLineBreak: true,
+
+ editCellTrigger: 'click',
+ editor:'my_editor'
+};
+tableInstance = new VTable.ListTable(option);
+tableInstance.on('change_cell_value', arg => {
+ console.log(arg);
+});
+```
+
+
+## 相关文档
+
+编辑表格demo：https://visactor.io/vtable/demo/edit/edit-cell
+编辑表格教程：https://visactor.io/vtable/guide/edit/edit_cell
+相关api：
+https://visactor.io/vtable/option/ListTable#editor
+https://visactor.io/vtable/option/ListTable-columns-text#editor
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/54- Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content.md b/docs/assets/faq/zh/54- Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content.md
new file mode 100644
index 000000000..b64e7a600
--- /dev/null
+++ b/docs/assets/faq/zh/54- Does the tooltip of the VTable component support selecting text and having a scrolling effect for overflowing content.md
@@ -0,0 +1,160 @@
+---
+title: 32.VTable表格组件的溢出文字弹框tooltip是否支持选中文本及内容超长滚动效果？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable表格组件的溢出文字弹框tooltip是否支持选中文本及内容超长滚动效果？
+## 问题描述
+
+利用了vtable表格组件的tooltip能力，也就是在单元格内容超长时，鼠标hover到该单元格即可显示出内容弹窗。
+但是，我发现这个弹框的内容无法被选中，因为鼠标离开单元格想要移动到tooltip上时，tooltip里面就消失了，根本没有办法移动上去。且当内容长度超长时，弹框会被撑得特别特别大，导致效果很丑，期望内容很长时可以让我滚动查看内容。VTable是否有能力可以实现我需要的效果？
+## 解决方案
+
+VTable提供了解决该问题的配置解法，第一个问题，正常情况下鼠标只要离开溢出文本的那个单元格，`tooltip`就会立马消失，所以导致的没有办法移动到tooltip上去，所以tooltip的相关配置中增加了`overflowTextTooltipDisappearDelay`来延缓tootip消失的时间。当配置了这个之后，鼠标就有时间去移动到tooltip上啦！这样也就解决了选中复制文本的需求。（i**con的tooltip的用法也是类似的哦！**）
+```
+ /** tooltip相关配置 */
+ tooltip?: {
+ /** html目前实现较完整 先默认html渲染方式 */
+ renderMode?: 'html'; // 目前暂不支持canvas方案
+ /** 是否显示缩略文字提示框。 代替原来hover:isShowTooltip配置 暂时需要将renderMode配置为html才能显示，canvas的还未开发*/
+ isShowOverflowTextTooltip?: boolean;
+** /** 缩略文字提示框 延迟消失时间 */**
+** overflowTextTooltipDisappearDelay?: number;**
+ /** 是否将 tooltip 框限制在画布区域内，默认开启。针对renderMode:"html"有效 */
+ confine?: boolean;
+ };
+```
+限制tooltip弹出框的尺寸，可以配置在tooltip的样式中，具体样式定义：
+```
+/**
+ * 气泡框，按钮的的解释信息
+ */
+export type TooltipStyle = {
+ fontFamily?: string;
+ fontSize?: number;
+ color?: string;
+ padding?: number[];
+ bgColor?: string;
+** maxWidth?: number;**
+** maxHeight?: number;**
+};
+```
+配置时放到theme中来指定：
+```
+const option={
+ tooltip: {
+ renderMode: 'html',
+ isShowOverflowTextTooltip: true,
+ overflowTextTooltipDisappearDelay: 1000
+ },
+ theme:{
+ tooltipStyle:{
+ **maxWidth：200，**
+ **maxHeight：100**
+ }
+ }
+}
+```
+
+
+## 代码示例
+
+可以粘贴到官网编辑器上进行测试：https://visactor.io/vtable/demo/component/tooltip
+```
+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(CONTAINER_ID), option);
+ window['tableInstance'] = tableInstance;
+
+ });
+```
+## 结果展示
+
+
+
+完整示例：https://www.visactor.io/vtable/demo/component/tooltip
+## 相关文档
+
+相关api：https://www.visactor.io/vtable/api/Methods#showTooltip
+教程：https://www.visactor.io/vtable/guide/components/tooltip
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/55- After custom rendering in the column configuration of the VTable component, the icon configuration fails- How to solve this.md b/docs/assets/faq/zh/55- After custom rendering in the column configuration of the VTable component, the icon configuration fails- How to solve this.md
new file mode 100644
index 000000000..b3095df96
--- /dev/null
+++ b/docs/assets/faq/zh/55- After custom rendering in the column configuration of the VTable component, the icon configuration fails- How to solve this.md
@@ -0,0 +1,128 @@
+---
+title: 33. VTable表格组件的column的列配置中自定义渲染customRender后导致icon配置失效，应该怎么解决？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable表格组件的column的列配置中自定义渲染customRender后导致icon配置失效，应该怎么解决？
+## 问题描述
+
+在业务场景中使用了自定义渲染customLayout或者customRender配置，但是又同时想用上VTable自身的图标按钮icon的功能，但是发现两者都配置上后，icon并未正常显示，请问有什么办法可以让两个配置都正常使用吗？
+如下只显示了customRender的内容。icon的配置图标没有显示出来。
+
+
+## 解决方案
+
+可以使用自定义渲染配置的renderDefault来解决这个问题。
+不过配置后会发现绘制出来不想要的的内容
+
+
+
+
+解决这个问题可以利用fieldFormat来解决，直接利用这个自定义函数返回空值，这个就不会把默认的文本内容进行绘制了。
+
+
+## 代码示例
+
+可以粘贴到官网编辑器上进行测试：https://visactor.io/vtable/demo/custom-render/custom-render
+```
+const option = {
+ columns:[
+ {
+ field: 'not_urgency',
+ title:'not urgency',
+ width:400,
+ headerStyle:{
+ lineHeight:50,
+ bgColor:'#4991e3',
+ color:'white',
+ textAlign:'center',
+ fontSize:26,
+ fontWeight:600,
+ },
+ style:{
+ fontFamily:'Arial',
+ fontSize:12,
+ fontWeight:'bold'
+ },
+ fieldFormat:()=>'',
+ icon:{
+ name: 'detail',
+ type: 'svg',
+ svg: ``,
+ marginRight: 8,
+ positionType: VTable.TYPES.IconPosition.absoluteRight,
+ width: 16,
+ height: 16,
+ cursor: 'pointer',
+ visibleTime: 'mouseenter_cell',
+ funcType: 'record_detail',
+ tooltip: {
+ title:'展开详情',
+ style: {
+ fontSize: 12,
+ padding: [8, 8, 8, 8],
+ bgColor: '#46484a',
+ arrowMark: true,
+ color: 'white',
+ maxHeight: 100,
+ maxWidth: 200
+ },
+ placement: VTable.TYPES.Placement.top
+ }
+ },
+ customRender(args){
+ const { width, height}= args.rect;
+ const {dataValue,table,row} =args;
+ const elements=[];
+ let top=30;
+ const left=15;
+ let maxWidth=0;
+ elements.push({
+ type: 'text',
+ fill: 'red',
+ fontSize: 20,
+ fontWeight: 500,
+ textBaseline: 'middle',
+ text: row===1? 'important but not urgency':'not important and not urgency',
+ x: left+50,
+ y: top-5,
+ });
+ return {
+ elements,
+ expectedHeight:top+20,
+ expectedWidth: 300,
+ renderDefault:true
+ }
+ }
+ },
+ ],
+ records:[
+ {
+ 'type': 'important',
+ "urgency": ['crisis','urgent problem','tasks that must be completed within a limited time'],
+ "not_urgency": ['preventive measures','development relationship','identify new development opportunities','establish long-term goals'],
+ },
+ {
+ 'type': 'Not\nimportant',
+ "urgency": ['Receive visitors','Certain calls, reports, letters, etc','Urgent matters','Public activities'],
+ "not_urgency": ['Trivial busy work','Some letters','Some phone calls','Time-killing activities','Some pleasant activities'],
+ },
+ ],
+ defaultRowHeight:80,
+ heightMode:'autoHeight',
+ widthMode:'standard',
+ autoWrapText:true,
+ };
+
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+```
+## 相关文档
+
+相关api：https://visactor.io/vtable/option/ListTable-columns-text#customRender.renderDefault
+教程：https://visactor.io/vtable/demo/custom-render/custom-render
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/56-VTable table component, using customLayout to customize the drawing elements, how to listen for mouse hover events on the elements, similar to the DOM's mouseenter event.md b/docs/assets/faq/zh/56-VTable table component, using customLayout to customize the drawing elements, how to listen for mouse hover events on the elements, similar to the DOM's mouseenter event.md
new file mode 100644
index 000000000..6c7dff0f3
--- /dev/null
+++ b/docs/assets/faq/zh/56-VTable table component, using customLayout to customize the drawing elements, how to listen for mouse hover events on the elements, similar to the DOM's mouseenter event.md
@@ -0,0 +1,231 @@
+---
+title: 34. VTable表格组件，使用customLayout自定义了绘制图元怎么监听鼠标hover到图元的事件，类似dom的mouseenter事件？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable表格组件，使用customLayout自定义了绘制图元怎么监听鼠标hover到图元的事件，类似dom的mouseenter事件？
+## 问题描述
+
+使用customLayout自定义单元格内容，包括Text，Image等，希望hover到Image的时候，有一些自定义逻辑，目前鼠标进入单元格事件，区分不了具体的target。
+
+
+对于JavaScript中的DOM元素来说，mouseenter事件只在鼠标指针进入（移动到）元素上时触发一次。想请教一下，有没有类似mouseenter_cell这种事件，来监听自定义单元格中指定内容呢？
+## 解决方案
+
+可以在自定义布局`customLayout`的图元上绑定 `mouseenter` 和 `mouseleave` 事件
+
+
+## 代码示例
+
+可以粘贴到官网编辑器上进行测试：https://visactor.io/vtable/demo/custom-render/custom-cell-layout-jsx
+```
+const VGroup = VTable.VGroup;
+const VText = VTable.VText;
+const VImage = VTable.VImage;
+const VTag = VTable.VTag;
+
+const option = {
+ container: document.getElementById('container'),
+ columns: [
+ {
+ field: 'bloggerId',
+ title: 'bloggerId'
+ },
+ {
+ field: 'bloggerName',
+ title: 'bloggerName',
+ width: 330,
+ customLayout: args => {
+ const { table, row, col, rect } = args;
+ const { height, width } = rect || table.getCellRect(col, row);
+ const record = table.getRecordByRowCol(col, row);
+ // const jsx = jsx;
+ const container = (
+
+
+
+
+ ',
+ boundsPadding: [0, 0, 0, 10],
+ cursor: 'pointer'
+ }}
+ stateProxy={stateName => {
+ if (stateName === 'hover') {
+ return {
+ background: {
+ fill: 'green',
+ cornerRadius: 5,
+ expandX: 1,
+ expandY: 1
+ }
+ };
+ }
+ }}
+ onPointerEnter={event => {
+ event.currentTarget.addState('hover', true, false);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ onPointerLeave={event => {
+ event.currentTarget.removeState('hover', false);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ >
+
+
+
+
+ );
+
+ // decode(container)
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }
+ },
+ {
+ field: 'fansCount',
+ title: 'fansCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
+ },
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'worksCount',
+ title: 'worksCount',
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
+ },
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
+ },
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: '',
+ title: 'operation',
+ width: 100,
+ icon: ['favorite', 'message']
+ }
+ ],
+ records: [
+ {
+ bloggerId: 6,
+ bloggerName: 'Virtual anchor bird',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
+ fansCount: 900,
+ worksCount: 12,
+ viewCount: 8,
+ city: 'Happy City',
+ tags: ['music', 'performance', 'variety']
+ }
+ ],
+ defaultRowHeight: 80
+};
+
+const instance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+// 只为了方便控制太调试用，不要拷贝
+window.tableInstance = instance;
+```
+## 相关文档
+
+demo: https://visactor.io/vtable/demo/custom-render/custom-cell-layout-jsx
+相关api：https://visactor.io/vtable/option/ListTable-columns-text#customLayout
+教程：https://visactor.io/vtable/guide/custom_define/custom_layout
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/57-How to set the text style of the VTable table component.md b/docs/assets/faq/zh/57-How to set the text style of the VTable table component.md
new file mode 100644
index 000000000..6be6312d2
--- /dev/null
+++ b/docs/assets/faq/zh/57-How to set the text style of the VTable table component.md
@@ -0,0 +1,105 @@
+---
+title: 35. VTable表格组件如何设置文字样式？
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable表格组件如何设置文字样式？
+## 问题描述
+
+使用VTable表格组件，支持哪些文字样式，如何配置？
+## 解决方案
+
+VTable支持的文字样式有：
+* `fontSize`: 文本的字体大小。
+* `fontFamily`: 文本使用的字体。可以指定多个字体，例如`Arial,sans-serif`，浏览器将按照指定顺序查找使用。
+* `fontWeight`: 设置字体粗细。
+* `fontVariant`: 设置字体变体。
+* `fontStyle`: 设置字体样式。
+VTable支持设置文字样式的地方有：
+* `column(row/indicator)`中，配置该列（行/指标）对应的样式
+* `style`: 内容单元格对应的样式
+* `headerStyle`: 表头单元格对应的样式
+* `theme`中，配置主题样式
+* `defaultStyle`: 默认样式
+* `bodyStyle`: 表格内容区域样式
+* `headerStyle`: 表头（列表）/列表头（透视表）样式
+* `rowHeaderStyle`: 行表头样式
+* `cornerHeaderStyle`: 角头样式
+* `bottomFrozenStyle`: 底部冻结单元格样式
+* `rightFrozenStyle`: 右侧冻结单元格样式
+
+
+## 代码示例
+
+可以粘贴到官网编辑器上进行测试：[https://visactor.io/vtable/demo/table-type/list-table](https%3A%2F%2Fvisactor.io%2Fvtable%2Fdemo%2Ftable-type%2Flist-table)
+```
+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",
+ style: {
+ fontSize: 14
+ },
+ headerStyle: {
+ fontSize: 16,
+ fontFamily: 'Verdana'
+ }
+ },
+ {
+ "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"
+ }
+];
+
+const option = {
+ records:data,
+ columns,
+ widthMode:'standard',
+ theme: VTable.themes.DEFAULT.extends({
+ bodyStyle: {
+ fontSize: 12
+ },
+ headerStyle: {
+ fontSize: 18
+ }
+ })
+};
+tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
+window['tableInstance'] = tableInstance;
+ })
+```
+## 相关文档
+
+相关api：https://visactor.io/vtable/option/ListTable-columns-text#style.fontSize
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/58-How to customize highlighted cells in the VTable component.md b/docs/assets/faq/zh/58-How to customize highlighted cells in the VTable component.md
new file mode 100644
index 000000000..31559c7e5
--- /dev/null
+++ b/docs/assets/faq/zh/58-How to customize highlighted cells in the VTable component.md
@@ -0,0 +1,100 @@
+---
+title: 36. VTable表格组件如何自定义高亮部分单元格
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable表格组件如何自定义高亮部分单元格？
+## 问题描述
+
+使用VTable表格组件，如何自定义高亮部分单元格，并指定高亮的样式？
+## 解决方案
+
+VTable支持自定义单元格样式，可以用来实现自定义高亮功能：
+### 注册样式
+
+首先需要注册一个自定义样式
+需要定义`id`和`style`两个属性：
+* id: 自定义样式的唯一id
+* style: 自定义单元格样式，与`column`中的`style`配置相同，最终呈现效果是单元格原有样式与自定义样式融合
+自定义样式的注册分为两种方式，`option`中配置和使用API配置：
+* option option中的customCellStyle属性接收多个自定义样式对象组合而成的数组：
+```
+// init option
+const option = {
+ // ......
+ customCellStyle: [
+ {
+ id: 'custom-1',
+ style: {
+ bgColor: 'red'
+ }
+ }
+ ]
+}
+```
+* API 可以通过VTable实例提供的`registerCustomCellStyle`方法注册自定义样式：
+```
+instance.registerCustomCellStyle(id, style)
+```
+### 分配样式
+
+使用已注册的自定义样式，需要将自定义样式分配到单元格中，分配需要定义`cellPosition`和`customStyleId`两个属性：
+* cellPosition: 单元格位置信息，支持配置单个单元格与单元格区域
+* 单个单元格：`{ row: number, col: number }`
+* 单元格区域：`{ range: { start: { row: number, col: number }, end: { row: number, col: number} } }`
+* customStyleId: 自定义样式id，与注册自定义样式时定义的id相同
+分配方式有两种，`option`中配置和使用API配置：
+* option option中的`customCellStyleArrangement`属性接收多个自定义分配样式对象组合而成的数组：
+```
+// init option
+const option = {
+ // ......
+ customCellStyleArrangement: [
+ {
+ cellPosition: {
+ col: 3,
+ row: 4
+ },
+ customStyleId: 'custom-1'
+ },
+ {
+ cellPosition: {
+ range: {
+ start: {
+ col: 5,
+ row: 5
+ },
+ end: {
+ col: 7,
+ row: 7
+ }
+ }
+ },
+ customStyleId: 'custom-2'
+ }
+ ]
+}
+```
+* API 可以通过VTable实例提供的`arrangeCustomCellStyle`方法分配自定义样式：
+```
+instance.arrangeCustomCellStyle(cellPosition, customStyleId)
+```
+### 更新与删除样式
+
+自定义样式在注册后，可以通过`registerCustomCellStyle`方法，对同一id的自定义样式进行更新，更新后，分配的自定义样式的单元格样式会被更新；如果`newStyle`为`undefined` | `null`，则表示删除该自定义样式，删除后，分配的自定义样式的单元格样式会还原默认样式
+```
+instance.registerCustomCellStyle(id, newStyle)
+```
+已分配的自定义样式的单元格区域，可以通过`arrangeCustomCellStyle`方法，对单元格区域进行更新样式分配，更新后，单元格的样式会被更新；如果`customStyleId`为`undefined` | `null`，则表示还原单元格的样式为默认样式
+## 代码示例
+
+demo：https://visactor.io/vtable/demo/custom-render/custom-style
+## 相关文档
+
+相关api：https://visactor.io/vtable/option/ListTable#customCellStyle
+教程：https://visactor.io/vtable/guide/custom_define/custom_style
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/59-How the VTable component progressively loads sub-nodes in a list.md b/docs/assets/faq/zh/59-How the VTable component progressively loads sub-nodes in a list.md
new file mode 100644
index 000000000..e99cf0c45
--- /dev/null
+++ b/docs/assets/faq/zh/59-How the VTable component progressively loads sub-nodes in a list.md
@@ -0,0 +1,65 @@
+---
+title: 37. VTable表格组件如何在列表中渐进加载子节点
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable表格组件如何在列表中渐进加载子节点？
+## 问题描述
+
+使用VTable表格组件，如何在列表中渐进加载子节点，点击父节点的展开按钮后，再动态加载子节点的信息
+## 解决方案
+
+VTable提供`setRecordChildren`API，用来更新某个节点的子节点状态，可以用来实现渐进加载功能
+1. 数据准备
+正常情况下，树形结构列表的数据中，`children`属性为一个数组，为该节点的子节点信息
+```
+{
+ name: 'a',
+ value: 10,
+ children: [
+ {
+ name: 'a-1',
+ value: 5,
+ children: [
+ // ......
+ ]
+ },
+ // ......
+ ]
+}
+```
+如何需要动态加载子节点信息，可以配置`children`属性为`true`，此时该节点在表格中会作为父节点显示，但是点击单元格内的展开按钮，会触发相关事件，但是表格不会有任何主动变化。
+1. 监听事件
+展开按钮点击后，会触发`VTable.ListTable.EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE`事件，需要监听这个事件，使用`setRecordChildren`API更新子节点信息
+```
+const { TREE_HIERARCHY_STATE_CHANGE } = VTable.ListTable.EVENT_TYPE;
+instance.on(TREE_HIERARCHY_STATE_CHANGE, args => {
+ if (args.hierarchyState === VTable.TYPES.HierarchyState.expand && !Array.isArray(args.originData.children)) {
+ setTimeout(() => {
+ const children = [
+ {
+ name: 'a-1',
+ value: 5,
+ },
+ {
+ name: 'a-2',
+ value: 5
+ }
+ ];
+ instance.setRecordChildren(children, args.col, args.row);
+ }, 200);
+ }
+});
+```
+## 代码示例
+
+demo：https://visactor.io/vtable/demo/table-type/list-table-tree-lazy-load
+## 相关文档
+
+相关api：https://visactor.io/vtable/option/ListTable-columns-text#tree
+教程：https://visactor.io/vtable/guide/table_type/List_table/tree_list
+github：https://github.com/VisActor/VTable
+
+
+
diff --git a/docs/assets/faq/zh/60-How the VTable component progressively loads sub-nodes in pivot tables.md b/docs/assets/faq/zh/60-How the VTable component progressively loads sub-nodes in pivot tables.md
new file mode 100644
index 000000000..ce3d3ca10
--- /dev/null
+++ b/docs/assets/faq/zh/60-How the VTable component progressively loads sub-nodes in pivot tables.md
@@ -0,0 +1,65 @@
+---
+title: 38. VTable表格组件如何在透视表中渐进加载子节点
+key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM
+---
+## 问题标题
+
+VTable表格组件如何在透视表中渐进加载子节点？
+## 问题描述
+
+使用VTable表格组件，如何在透视表中渐进加载子节点，点击父节点的展开按钮后，再动态加载子节点的信息
+## 解决方案
+
+VTable提供`setTreeNodeChildren`API，用来更新透视结构某个节点的子节点状态，可以用来实现渐进加载功能
+1. 维度树配置
+正常情况下，维度树（columnTree/rowTree）中，`children`属性为一个数组，为该节点的子节点信息
+```
+{
+ dimensionKey: 'name',
+ value: 'a',
+ children: [
+ {
+ dimensionKey: 'name-1',
+ value: 'a-1',
+ children: [
+ // ......
+ ]
+ },
+ // ......
+ ]
+}
+```
+如何需要动态加载子节点信息，可以配置`children`属性为`true`，此时该节点在表格中会作为父节点显示，但是点击单元格内的展开按钮，会触发相关事件，但是表格不会有任何主动变化。
+1. 监听事件
+展开按钮点击后，会触发`VTable.ListTable.EVENT_TYPE.TREE_HIERARCHY_STATE_CHANGE`事件，需要监听这个事件，使用`setTreeNodeChildren`API更新子节点信息和对应增加的数据
+```
+const { TREE_HIERARCHY_STATE_CHANGE } = VTable.ListTable.EVENT_TYPE;
+instance.on(TREE_HIERARCHY_STATE_CHANGE, args => {
+ if (args.hierarchyState === VTable.TYPES.HierarchyState.expand && !Array.isArray(args.originData.children)) {
+ setTimeout(() => {
+ const newData = [
+ // ......
+ ];
+ const children = [
+ {
+ dimensionKey: 'name-1',
+ value: 'a-1',
+ },
+ {
+ dimensionKey: 'name-1',
+ value: 'a-2'
+ }
+ ];
+ instance.setTreeNodeChildren(children, newData, args.col, args.row);
+ }, 200);
+ }
+});
+```
+## 代码示例
+
+demo：https://visactor.io/vtable/demo/table-type/pivot-table-tree-lazy-load
+## 相关文档
+
+相关api：https://visactor.io/vtable/option/PivotTable#rowHierarchyType('grid'%20%7C%20'tree')
+教程：https://visactor.io/vtable/guide/table_type/Pivot_table/pivot_table_tree
+github：https://github.com/VisActor/VTable
\ No newline at end of file