Merge pull request #2526 from VisActor/develop

merge develop code

docs/assets/changelog/en/release.md

@@ -1,3 +1,35 @@
+# v1.7.8
+
+2024-09-24
+
+
+**🆕 New feature**
+
+- **@visactor/vtable**: handle with customTree in dataset file to refactor processRecord function [#2279](https://github.com/VisActor/VTable/issues/2279)
+- **@visactor/vtable**: add async support in vtable-export [#2460](https://github.com/VisActor/VTable/issues/2460)
+
+**🐛 Bug fix**
+
+- **@visactor/vtable**: custom total value not work [#2455](https://github.com/VisActor/VTable/issues/2455)
+- **@visactor/vtable**: adjust sort icon up and down [#2465](https://github.com/VisActor/VTable/issues/2465)
+- **@visactor/vtable**: when current edit not exit, could not trigger new edit cell [#2469](https://github.com/VisActor/VTable/issues/2469)
+- **@visactor/vtable**: when no records edit cell value occor error [#2474](https://github.com/VisActor/VTable/issues/2474)
+- **@visactor/vtable**: set aggregation on option not work [#2459](https://github.com/VisActor/VTable/issues/2459)
+- **@visactor/vtable**: fix cell border clip in 'bottom-right' borde mode [#2442](https://github.com/VisActor/VTable/issues/2442)
+- **@visactor/vtable**: add children === true hierarchyState in initChildrenNodeHierarchy()
+- **@visactor/vtable**: fix custom component frozen update [#2432](https://github.com/VisActor/VTable/issues/2432)
+- **@visactor/vtable**: when resize trigger click_cell event
+- **@visactor/vtable**: fix proxy.colStart update in resetFrozen() [#2464](https://github.com/VisActor/VTable/issues/2464)
+- **@visactor/vtable**: add '——' in specialCharSet [#2470](https://github.com/VisActor/VTable/issues/2470)
+
+**🔨 Refactor**
+
+- **@visactor/vtable**: update aggregator when update records [#2459](https://github.com/VisActor/VTable/issues/2459)
+
+
+
+[more detail about v1.7.8](https://github.com/VisActor/VTable/releases/tag/v1.7.8)
+
 # v1.7.7
 
 2024-09-13

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>
+
+
+