docs: add faq,from 23 to 60

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?</br>
+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?</br>
+
+
+## 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.</br>
+
+
+## Solution 
+
+You can configure editCellTrigger to click in the table initialization option. The configuration item is defined as follows:</br>
+```
+/** Edit triggering time: double click event | single click event | api to manually start editing. Default is double click 'doubleclick' */
+editCellTrigger?: 'doubleclick' | 'click' | 'api';</br>
+```
+
+
+## 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);</br>
+```
+
+
+## Results
+
+Online effect reference: https://visactor.io/vtable/demo/edit/edit-cell</br>
+<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/VaIKbqfnBo2cUDx8AVVcstO6nxb.gif' alt='' width='2136' height='970'>
+
+
+
+## Related Documents
+
+Edit table demo: https://visactor.io/vtable/demo/edit/edit-cell</br>
+Edit table tutorial: https://visactor.io/vtable/guide/edit/edit_cell</br>
+Related API: https://visactor.io/vtable/option/ListTable#editCellTrigger</br>
+github: https://github.com/VisActor/VTable</br>

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</br>
+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.</br>
+
+
+# Problem Description
+
+Through configuration, add a column before the first column of the table to display the row number of each row.</br>
+
+
+# Solution 
+
+`rowSeriesNumber` can be configured in the `option` of table initialization. This configuration item is defined as follows:</br>
+```
+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.
+}</br>
+```
+
+
+## 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);</br>
+```
+## Results display 
+
+Online effect reference: https://www.visactor.io/vtable/demo/basic-functionality/row-series-number</br>
+<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/CYGRblW5toHUdNx1m3jcWEYnnVe.gif' alt='' width='709' height='403'>
+
+
+
+## Related documents
+
+Line number demo: https://www.visactor.io/vtable/demo/basic-functionality/row-series-number</br>
+Related API: https://www.visactor.io/vtable/option/ListTable#rowSeriesNumber</br>
+github: https://github.com/VisActor/VTable</br>
+
+
+

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?</br>
+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?</br>
+## Description
+
+Why is the aggregate node data not displayed after the pivot table is set to display in tree structure?</br>
+<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/DhKzbArAKohl8lx6QwicFeRWnvb.gif' alt='' width='701' height='639'>
+
+## 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.</br>
+## Code Example
+
+```
+  dataConfig: {
+    totals: {
+        row: {
+          showSubTotals: true,
+          subTotalsDimensions: ['Category'],
+          subTotalLabel: 'subtotal'
+        }
+      }
+  },</br>
+```
+## Results
+
+Online effect reference:https://visactor.io/vtable/demo/table-type/pivot-analysis-table-tree</br>
+<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/TfUKbUwmVoaKt4xhLw3c4aONnxx.gif' alt='' width='1338' height='416'>
+
+## Related Documents
+
+Tree Table Demo：https://visactor.io/vtable/demo/table-type/pivot-analysis-table-tree</br>
+Tutorial on pivot table data analysis：https://visactor.io/vtable/guide/data_analysis/pivot_table_dataAnalysis</br>
+Related api：https://visactor.io/vtable/option/PivotTable#dataConfig.totals</br>
+github：https://github.com/VisActor/VTable</br>
+

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?</br>
+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?</br>
+## 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.</br>
+## Solution
+
+Listen to the event `dropdown_menu_click` to determine the clicked menu item.</br>
+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.</br>
+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.</br>
+Related interface addresses:</br>
+[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)</br>
+## 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;
+    }
+  });</br>
+```
+## Results
+
+Online effect reference: https://visactor.io/vtable/demo/interaction/context-menu</br>
+<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/SOk8bkNyLo4CLCx0PcvcvQEfnSh.gif' alt='' width='680' height='406'>
+
+## Related Documents
+
+Right-click menu Copy Paste Delete demo：https://visactor.io/vtable/demo/interaction/context-menu</br>
+Dropdown menu tutorial：https://visactor.io/vtable/guide/components/dropdown</br>
+Related api：https://visactor.io/vtable/option/ListTable#menu.contextMenuItems</br>
+github：https://github.com/VisActor/VTable</br>
+
+
+

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</br>
+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.</br>
+
+
+## Problem Description
+
+Through configuration, set the expanded and collapsed state of the tree structure table and customize the display style of the tree structure.</br>
+
+
+## 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.</br>
+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.</br>
+```
+// 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;</br>
+```
+## 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);
+}</br>
+```
+## Results display 
+
+<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/XBKlb2ZSXo9AfZxd762ccFDenoc.gif' alt='' width='1662' height='1044'>
+
+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):</br>
+```
+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);
+}
+    })</br>
+```
+## Related documents
+
+Tree mode demo：https://www.visactor.io/vtable/demo/table-type/list-table-tree</br>
+Related api：https://www.visactor.io/vtable/option/ListTable#hierarchyExpandLevel</br>
+github：https://github.com/VisActor/VTable</br>
+
+
+