@visactor/vtable 1.23.0 → 1.23.1-alpha.1

package/README.md

@@ -118,10 +118,30 @@ const option = {
   widthMode:'standard'
 };
 const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+```
+
+## Component Layout Priority
 
+The `componentLayoutOrder` option allows you to control the layout priority of `title` and `legend`. This affects the order in which they occupy space in the drawing area. By default, the order is `['legend', 'title']`.
 
+To place the title above the legend, you can configure it as follows:
 
+```javascript
+const option = {
+  // ...other options
+  title: {
+    text: 'Sales Analysis',
+    orient: 'top',
+    align: 'center'
+  },
+  legends: {
+    orient: 'top',
+    // ...other legend options
+  },
+  componentLayoutOrder: ['title', 'legend']
+};
 
+const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
 ```
 
 ##

package/cjs/ListTable.js

@@ -336,14 +336,14 @@ class ListTable extends core_1.BaseTable {
         }) : (this.refreshRowColCount(), this._resetFrozenColCount(), this.scenegraph.createSceneGraph(), 
         this.render()), options.title) {
             const Title = factory_1.Factory.getComponent("title");
-            internalProps.title = new Title(options.title, this), this.scenegraph.resize();
+            internalProps.title = new Title(options.title, this);
         }
         if (this.options.emptyTip) if (this.internalProps.emptyTip) null === (_h = this.internalProps.emptyTip) || void 0 === _h || _h.resetVisible(); else {
             const EmptyTip = factory_1.Factory.getComponent("emptyTip");
             this.internalProps.emptyTip = new EmptyTip(this.options.emptyTip, this), null === (_j = this.internalProps.emptyTip) || void 0 === _j || _j.resetVisible();
         }
         return this.pluginManager.updatePlugins(options.plugins), setTimeout((() => {
-            this.fireListeners(TABLE_EVENT_TYPE_1.TABLE_EVENT_TYPE.UPDATED, null);
+            this.resize(), this.fireListeners(TABLE_EVENT_TYPE_1.TABLE_EVENT_TYPE.UPDATED, null);
         }), 0), new Promise((resolve => {
             setTimeout(resolve, 0);
         }));
@@ -622,7 +622,7 @@ class ListTable extends core_1.BaseTable {
         this.setCellCheckboxState(col, row, checked);
     }
     setRecords(records, option) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         let sort;
         (0, chart_render_helper_1.clearChartRenderQueue)(), null === (_a = this.internalProps.dataSource) || void 0 === _a || _a.release(), 
         this.internalProps.releaseList = null === (_b = this.internalProps.releaseList) || void 0 === _b ? void 0 : _b.filter((item => !item.dataSourceObj)), 
@@ -649,12 +649,16 @@ class ListTable extends core_1.BaseTable {
             }
             this.refreshRowColCount();
         } else (0, tableHelper_1._setRecords)(this, records);
-        if (this.stateManager.initCheckedState(records), this.clearCellStyleCache(), this.scenegraph.createSceneGraph(), 
-        this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row), this._updateSize(), 
-        this.internalProps.title && !this.internalProps.title.isReleased && this.internalProps.title.resize(), 
-        this.scenegraph.resize(), this.options.emptyTip) if (this.internalProps.emptyTip) null === (_c = this.internalProps.emptyTip) || void 0 === _c || _c.resetVisible(); else {
+        this.stateManager.initCheckedState(records), this.clearCellStyleCache(), this.scenegraph.createSceneGraph(), 
+        this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row), this._updateSize();
+        if ((null !== (_c = this.options.componentLayoutOrder) && void 0 !== _c ? _c : [ "legend", "title" ]).forEach((component => {
+            var _a, _b;
+            "legend" === component ? null === (_a = this.internalProps.legends) || void 0 === _a || _a.forEach((legend => {
+                null == legend || legend.resize();
+            })) : "title" === component && (null === (_b = this.internalProps.title) || void 0 === _b || _b.resize());
+        })), this.scenegraph.resize(), this.options.emptyTip) if (this.internalProps.emptyTip) null === (_d = this.internalProps.emptyTip) || void 0 === _d || _d.resetVisible(); else {
             const EmptyTip = factory_1.Factory.getComponent("emptyTip");
-            this.internalProps.emptyTip = new EmptyTip(this.options.emptyTip, this), null === (_d = this.internalProps.emptyTip) || void 0 === _d || _d.resetVisible();
+            this.internalProps.emptyTip = new EmptyTip(this.options.emptyTip, this), null === (_e = this.internalProps.emptyTip) || void 0 === _e || _e.resetVisible();
         }
         this.render(), (0, vutils_1.isValid)(oldHoverState.col) && (0, vutils_1.isValid)(oldHoverState.row) && oldHoverState.col >= 0 && oldHoverState.row >= 0 && setTimeout((() => {
             var _a;