@visactor/vtable 0.9.2 → 0.9.3-alpha.1

package/cjs/core/BaseTable.js

@@ -33,21 +33,24 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.BaseTable = void 0;
 
-const columnStyleContents = __importStar(require("../body-helper/style")), headerStyleContents = __importStar(require("../header-helper/style")), style_1 = require("./style"), style = __importStar(require("../tools/style")), helper_1 = require("../tools/helper"), TABLE_EVENT_TYPE_1 = require("./TABLE_EVENT_TYPE"), EventHandler_1 = require("../event/EventHandler"), EventTarget_1 = require("../event/EventTarget"), NumberMap_1 = require("../tools/NumberMap"), Rect_1 = require("../tools/Rect"), util_1 = require("../tools/util"), themes_1 = __importDefault(require("../themes")), env_1 = require("../tools/env"), scenegraph_1 = require("../scenegraph/scenegraph"), state_1 = require("../state/state"), event_1 = require("../event/event"), body_helper_1 = require("../body-helper/body-helper"), header_helper_1 = require("../header-helper/header-helper"), TooltipHandler_1 = require("../tooltip/TooltipHandler"), vutils_1 = require("@visactor/vutils"), text_1 = require("../scenegraph/graphic/text"), measure_text_1 = require("../scenegraph/utils/measure-text"), get_prop_1 = require("../scenegraph/utils/get-prop"), icons_1 = require("../plugins/icons"), tableHelper_1 = require("./tableHelper"), MenuHandler_1 = require("../menu/dom/MenuHandler"), FouseInput_1 = require("./FouseInput"), pixel_ratio_1 = require("../tools/pixel-ratio"), {toBoxArray: toBoxArray} = helper_1.style, {isTouchEvent: isTouchEvent} = helper_1.event, rangeReg = /^\$(\d+)\$(\d+)$/;
+const columnStyleContents = __importStar(require("../body-helper/style")), headerStyleContents = __importStar(require("../header-helper/style")), style_1 = require("./style"), style = __importStar(require("../tools/style")), helper_1 = require("../tools/helper"), TABLE_EVENT_TYPE_1 = require("./TABLE_EVENT_TYPE"), EventHandler_1 = require("../event/EventHandler"), EventTarget_1 = require("../event/EventTarget"), NumberMap_1 = require("../tools/NumberMap"), Rect_1 = require("../tools/Rect"), util_1 = require("../tools/util"), themes_1 = __importDefault(require("../themes")), env_1 = require("../tools/env"), scenegraph_1 = require("../scenegraph/scenegraph"), state_1 = require("../state/state"), event_1 = require("../event/event"), body_helper_1 = require("../body-helper/body-helper"), header_helper_1 = require("../header-helper/header-helper"), TooltipHandler_1 = require("../components/tooltip/TooltipHandler"), vutils_1 = require("@visactor/vutils"), text_1 = require("../scenegraph/graphic/text"), measure_text_1 = require("../scenegraph/utils/measure-text"), get_prop_1 = require("../scenegraph/utils/get-prop"), icons_1 = require("../plugins/icons"), tableHelper_1 = require("./tableHelper"), MenuHandler_1 = require("../components/menu/dom/MenuHandler"), FouseInput_1 = require("./FouseInput"), pixel_ratio_1 = require("../tools/pixel-ratio"), legend_1 = require("../components/legend/legend"), vdataset_1 = require("@visactor/vdataset"), title_1 = require("../components/title/title"), {toBoxArray: toBoxArray} = helper_1.style, {isTouchEvent: isTouchEvent} = helper_1.event, rangeReg = /^\$(\d+)\$(\d+)$/;
 
 (0, style_1.importStyle)();
 
+const EMPTY_STYLE = {};
+
 class BaseTable extends EventTarget_1.EventTarget {
     static get EVENT_TYPE() {
         return TABLE_EVENT_TYPE_1.TABLE_EVENT_TYPE;
     }
     constructor(options = {}) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        super(), this.showFrozenIcon = !0, this.showSort = !0, this.version = "0.9.2", this.id = `VTable${Date.now()}`, 
+        var _a, _b, _c, _d, _e, _f, _g;
+        super(), this.showFrozenIcon = !0, this.showSort = !0, this.bottomFrozenRowCount = 0, 
+        this.rightFrozenColCount = 0, this.version = "0.9.3-alpha.1", this.id = `VTable${Date.now()}`, 
         this.throttleInvalidate = (0, util_1.throttle2)(this.invalidate.bind(this), 200);
-        const {frozenColCount: frozenColCount = 0, defaultRowHeight: defaultRowHeight = 40, defaultHeaderRowHeight: defaultHeaderRowHeight, defaultColWidth: defaultColWidth = 80, defaultHeaderColWidth: defaultHeaderColWidth, widthMode: widthMode = "standard", keyboardOptions: keyboardOptions, parentElement: parentElement, columnResizeMode: columnResizeMode, dragHeaderMode: dragHeaderMode, showFrozenIcon: showFrozenIcon, allowFrozenColCount: allowFrozenColCount, padding: padding, hover: hover, menu: menu, select: click, customRender: customRender, pixelRatio: pixelRatio = pixel_ratio_1.defaultPixelRatio} = options;
-        this.options = options, this._widthMode = widthMode, this.customRender = customRender, 
-        this.padding = {
+        const {frozenColCount: frozenColCount = 0, defaultRowHeight: defaultRowHeight = 40, defaultHeaderRowHeight: defaultHeaderRowHeight, defaultColWidth: defaultColWidth = 80, defaultHeaderColWidth: defaultHeaderColWidth, widthMode: widthMode = "standard", heightMode: heightMode = "standard", autoFillWidth: autoFillWidth = !1, keyboardOptions: keyboardOptions, parentElement: parentElement, columnResizeMode: columnResizeMode, dragHeaderMode: dragHeaderMode, showFrozenIcon: showFrozenIcon, allowFrozenColCount: allowFrozenColCount, padding: padding, hover: hover, menu: menu, select: click, customRender: customRender, pixelRatio: pixelRatio = pixel_ratio_1.defaultPixelRatio} = options;
+        this.options = options, this._widthMode = widthMode, this._heightMode = heightMode, 
+        this._autoFillWidth = autoFillWidth, this.customRender = customRender, this.padding = {
             top: 0,
             right: 0,
             left: 0,
@@ -59,7 +62,6 @@ class BaseTable extends EventTarget_1.EventTarget {
         this.tableNoFrameHeight = 0;
         const internalProps = this.internalProps = {};
         void 0 !== showFrozenIcon && (this.showFrozenIcon = showFrozenIcon), "number" == typeof allowFrozenColCount && allowFrozenColCount <= 0 && (this.showFrozenIcon = !1), 
-        internalProps.autoRowHeight = null !== (_a = options.autoRowHeight) && void 0 !== _a && _a, 
         internalProps.handler = new EventHandler_1.EventHandler, internalProps.element = (0, 
         tableHelper_1.createRootElement)(this.padding), internalProps.focusControl = new FouseInput_1.FocusInput(this, internalProps.element), 
         internalProps.pixelRatio = pixelRatio, internalProps.canvas = document.createElement("canvas"), 
@@ -77,23 +79,31 @@ class BaseTable extends EventTarget_1.EventTarget {
                 var _a;
                 return this._.canvas.width / (null !== (_a = this._.context.pixelRatio) && void 0 !== _a ? _a : window.devicePixelRatio);
             }
-        }, internalProps.cellTextOverflows = {}, internalProps.focusedTable = !1, internalProps.theme = themes_1.default.of(null !== (_b = options.theme) && void 0 !== _b ? _b : themes_1.default.DEFAULT), 
+        }, internalProps.cellTextOverflows = {}, internalProps.focusedTable = !1, internalProps.theme = themes_1.default.of(null !== (_a = options.theme) && void 0 !== _a ? _a : themes_1.default.DEFAULT), 
         parentElement ? (parentElement.innerHTML = "", parentElement.appendChild(internalProps.element), 
-        this._updateSize()) : this._updateSize(), this._cellToBeInvalidatedNextFrame = new Set, 
-        this._willNextFrameInvalidate = !1, this.options = options, internalProps.theme = themes_1.default.of(null !== (_c = options.theme) && void 0 !== _c ? _c : themes_1.default.DEFAULT), 
+        this._updateSize()) : this._updateSize(), this.options = options, internalProps.theme = themes_1.default.of(null !== (_b = options.theme) && void 0 !== _b ? _b : themes_1.default.DEFAULT), 
         internalProps.bodyHelper = new body_helper_1.BodyHelper(this), internalProps.headerHelper = new header_helper_1.HeaderHelper(this), 
-        internalProps.autoWrapText = options.autoWrapText, internalProps.allowFrozenColCount = null !== (_d = options.allowFrozenColCount) && void 0 !== _d ? _d : internalProps.colCount, 
-        internalProps.limitMaxAutoWidth = null !== (_e = options.limitMaxAutoWidth) && void 0 !== _e ? _e : 450, 
-        this.scenegraph = new scenegraph_1.Scenegraph(this), this.stateManeger = new state_1.StateManeger(this), 
-        this.eventManeger = new event_1.EventManeger(this), internalProps.tooltip = Object.assign({
+        internalProps.autoWrapText = options.autoWrapText, internalProps.allowFrozenColCount = null !== (_c = options.allowFrozenColCount) && void 0 !== _c ? _c : internalProps.colCount, 
+        internalProps.limitMaxAutoWidth = null !== (_d = options.limitMaxAutoWidth) && void 0 !== _d ? _d : 450, 
+        this.dataSet = new vdataset_1.DataSet, this.scenegraph = new scenegraph_1.Scenegraph(this), 
+        this.stateManeger = new state_1.StateManeger(this), this.eventManeger = new event_1.EventManeger(this), 
+        options.legends && (internalProps.legends = new legend_1.TableLegend(options.legends, this), 
+        this.scenegraph.tableGroup.setAttributes({
+            x: this.tableX,
+            y: this.tableY
+        })), options.title && (internalProps.title = new title_1.Title(options.title, this), 
+        this.scenegraph.tableGroup.setAttributes({
+            x: this.tableX,
+            y: this.tableY
+        })), internalProps.tooltip = Object.assign({
             renderMode: "html",
             isShowOverflowTextTooltip: !1,
             confine: !0
         }, options.tooltip), "html" === internalProps.tooltip.renderMode && (internalProps.tooltipHandler = new TooltipHandler_1.TooltipHandler(this, internalProps.tooltip.confine)), 
         internalProps.menu = Object.assign({
             renderMode: "html"
-        }, options.menu), Array.isArray(null === (_f = options.menu) || void 0 === _f ? void 0 : _f.dropDownMenuHighlight) && this.setDropDownMenuHighlight(null === (_g = options.menu) || void 0 === _g ? void 0 : _g.dropDownMenuHighlight), 
-        Array.isArray(null === (_h = options.menu) || void 0 === _h ? void 0 : _h.defaultHeaderMenuItems) && (this.globalDropDownMenu = options.menu.defaultHeaderMenuItems), 
+        }, options.menu), Array.isArray(null === (_e = options.menu) || void 0 === _e ? void 0 : _e.dropDownMenuHighlight) && this.setDropDownMenuHighlight(null === (_f = options.menu) || void 0 === _f ? void 0 : _f.dropDownMenuHighlight), 
+        Array.isArray(null === (_g = options.menu) || void 0 === _g ? void 0 : _g.defaultHeaderMenuItems) && (this.globalDropDownMenu = options.menu.defaultHeaderMenuItems), 
         "html" === internalProps.menu.renderMode && (internalProps.menuHandler = new MenuHandler_1.MenuHandler(this)), 
         this.headerStyleCache = new Map, this.bodyStyleCache = new Map;
     }
@@ -222,6 +232,18 @@ class BaseTable extends EventTarget_1.EventTarget {
     set widthMode(widthMode) {
         widthMode !== this._widthMode && (this._widthMode = widthMode);
     }
+    get heightMode() {
+        return this._heightMode;
+    }
+    set heightMode(heightMode) {
+        heightMode !== this._heightMode && (this._heightMode = heightMode);
+    }
+    get autoFillWidth() {
+        return this._autoFillWidth;
+    }
+    set autoFillWidth(autoFillWidth) {
+        autoFillWidth !== this._autoFillWidth && (this._autoFillWidth = autoFillWidth);
+    }
     _colWidthDefineToPxWidth(width) {
         return (0, tableHelper_1.isAutoDefine)(width) ? (0, tableHelper_1._toPxWidth)(this, this._calculateAutoColWidthExpr()) : (0, 
         tableHelper_1._toPxWidth)(this, width);
@@ -287,7 +309,7 @@ class BaseTable extends EventTarget_1.EventTarget {
             const {canvas: canvas} = this.internalProps;
             widthP = null !== (_f = null === (_e = canvas.parentElement) || void 0 === _e ? void 0 : _e.offsetWidth) && void 0 !== _f ? _f : 0, 
             heightP = null !== (_h = null === (_g = canvas.parentElement) || void 0 === _g ? void 0 : _g.offsetHeight) && void 0 !== _h ? _h : 0, 
-            (null === (_j = null == this ? void 0 : this.scenegraph) || void 0 === _j ? void 0 : _j.stage) ? this.scenegraph.stage.window.resize(widthP, heightP) : (canvas.style.width = "", 
+            (null === (_j = null == this ? void 0 : this.scenegraph) || void 0 === _j ? void 0 : _j.stage) ? this.scenegraph.stage.resize(widthP, heightP) : (canvas.style.width = "", 
             canvas.style.height = "", canvas.width = widthP, canvas.height = heightP, canvas.style.width = `${widthP}px`, 
             canvas.style.height = `${heightP}px`);
         } else "node" === env_1.Env.mode && (widthP = this.canvasWidth - 1, heightP = this.canvasHeight - 1);
@@ -307,7 +329,7 @@ class BaseTable extends EventTarget_1.EventTarget {
         widths.forEach(((value, index) => this.setColWidth(index, value)));
     }
     getColsWidth(startCol, endCol) {
-        var _a;
+        var _a, _b;
         endCol = Math.min(endCol, this.colCount - 1);
         const cachedColWidth = this._colRangeWidthsMap.get(`$${startCol}$${endCol}`);
         if (null != cachedColWidth) return cachedColWidth;
@@ -315,13 +337,13 @@ class BaseTable extends EventTarget_1.EventTarget {
         if (null != cachedLowerColWidth) {
             const width = this.colWidthsMap.get(endCol);
             let adjustW;
-            adjustW = width ? "adaptive" === this.widthMode || this.transpose ? Number(width) : this._adjustColWidth(endCol, this._colWidthDefineToPxWidth(width)) : 0;
+            adjustW = width ? "adaptive" === this.widthMode || this.transpose ? Number(width) : this._adjustColWidth(endCol, this._colWidthDefineToPxWidth(width)) : this.isRowHeader(endCol, 0) || this.isCornerHeader(endCol, 0) ? Array.isArray(this.defaultHeaderColWidth) ? null !== (_a = this.defaultHeaderColWidth[endCol]) && void 0 !== _a ? _a : this.internalProps.defaultColWidth : this.defaultHeaderColWidth : this.internalProps.defaultColWidth;
             const addWidth = cachedLowerColWidth + adjustW;
             return startCol >= 0 && endCol >= 0 && !Number.isNaN(addWidth) && this._colRangeWidthsMap.set(`$${startCol}$${endCol}`, Math.round(addWidth)), 
             Math.round(addWidth);
         }
         let w = 0;
-        for (let col = startCol; col <= endCol; col++) w += this.isRowHeader(col, 0) || this.isCornerHeader(col, 0) ? Array.isArray(this.defaultHeaderColWidth) ? null !== (_a = this.defaultHeaderColWidth[col]) && void 0 !== _a ? _a : this.internalProps.defaultColWidth : this.defaultHeaderColWidth : this.internalProps.defaultColWidth;
+        for (let col = startCol; col <= endCol; col++) w += this.isRowHeader(col, 0) || this.isCornerHeader(col, 0) ? Array.isArray(this.defaultHeaderColWidth) ? null !== (_b = this.defaultHeaderColWidth[col]) && void 0 !== _b ? _b : this.internalProps.defaultColWidth : this.defaultHeaderColWidth : this.internalProps.defaultColWidth;
         this.colWidthsMap.each(startCol, endCol, ((width, col) => {
             var _a;
             w += ("adaptive" === this.widthMode || this.transpose ? Number(width) : this._adjustColWidth(col, this._colWidthDefineToPxWidth(width))) - (this.isRowHeader(col, 0) || this.isCornerHeader(col, 0) ? Array.isArray(this.defaultHeaderColWidth) ? null !== (_a = this.defaultHeaderColWidth[col]) && void 0 !== _a ? _a : this.internalProps.defaultColWidth : this.defaultHeaderColWidth : this.internalProps.defaultColWidth);
@@ -335,8 +357,8 @@ class BaseTable extends EventTarget_1.EventTarget {
         Math.round(w);
     }
     getRowHeight(row) {
-        var _a;
-        return this.rowHeightsMap.get(row) || (this.isColumnHeader(0, row) || this.isCornerHeader(0, row) ? Array.isArray(this.defaultHeaderRowHeight) ? null !== (_a = this.defaultHeaderRowHeight[row]) && void 0 !== _a ? _a : this.internalProps.defaultRowHeight : this.defaultHeaderRowHeight : this.internalProps.defaultRowHeight);
+        var _a, _b;
+        return this.rowHeightsMap.get(row) ? this.rowHeightsMap.get(row) : this.isColumnHeader(0, row) || this.isCornerHeader(0, row) ? Array.isArray(this.defaultHeaderRowHeight) ? null !== (_a = this.defaultHeaderRowHeight[row]) && void 0 !== _a ? _a : this.internalProps.defaultRowHeight : this.defaultHeaderRowHeight : this.isBottomFrozenRow(this.rowHeaderLevelCount, row) ? Array.isArray(this.defaultHeaderRowHeight) ? null !== (_b = this.defaultHeaderRowHeight[this.columnHeaderLevelCount - this.bottomFrozenRowCount]) && void 0 !== _b ? _b : this.internalProps.defaultRowHeight : this.defaultHeaderRowHeight : this.internalProps.defaultRowHeight;
     }
     setRowHeight(row, height, clearCache) {
         this.rowHeightsMap.put(row, Math.round(height)), clearCache && this._clearRowRangeHeightsMap(row);
@@ -357,7 +379,7 @@ class BaseTable extends EventTarget_1.EventTarget {
             height;
         }
         let h = 0;
-        if (!this.internalProps.autoRowHeight && this.internalProps.layoutMap && endRow >= this.columnHeaderLevelCount) {
+        if ("standard" === this.heightMode && this.internalProps.layoutMap && endRow >= this.columnHeaderLevelCount && !this.bottomFrozenRowCount) {
             for (let i = startRow; i < this.columnHeaderLevelCount; i++) h += this.getRowHeight(i);
             h += this.defaultRowHeight * (endRow - Math.max(this.columnHeaderLevelCount, startRow) + 1);
         } else for (let i = startRow; i <= endRow; i++) h += this.getRowHeight(i);
@@ -365,9 +387,9 @@ class BaseTable extends EventTarget_1.EventTarget {
         Math.round(h);
     }
     getColWidthDefine(col) {
-        var _a;
+        var _a, _b;
         const width = this.colWidthsMap.get(col);
-        return "number" == typeof width && width <= 0 ? 0 : width || (this.isRowHeader(col, 0) || this.isCornerHeader(col, 0) ? Array.isArray(this.defaultHeaderColWidth) ? null !== (_a = this.defaultHeaderColWidth[col]) && void 0 !== _a ? _a : this.defaultColWidth : this.defaultHeaderColWidth : this.defaultColWidth);
+        return "number" == typeof width && width <= 0 ? 0 : width || (this.isRowHeader(col, 0) || this.isCornerHeader(col, 0) ? Array.isArray(this.defaultHeaderColWidth) ? null !== (_a = this.defaultHeaderColWidth[col]) && void 0 !== _a ? _a : this.defaultColWidth : this.defaultHeaderColWidth : this.isRightFrozenColumn(col, this.columnHeaderLevelCount) ? Array.isArray(this.defaultHeaderColWidth) ? null !== (_b = this.defaultHeaderColWidth[this.rowHeaderLevelCount - this.rightFrozenColCount]) && void 0 !== _b ? _b : this.defaultColWidth : this.defaultHeaderColWidth : this.defaultColWidth);
     }
     getColWidth(col) {
         const width = this.getColWidthDefine(col);
@@ -503,7 +525,7 @@ class BaseTable extends EventTarget_1.EventTarget {
         return this.getCellsRectWidth(cellRange.start.col, cellRange.start.row, cellRange.end.col, cellRange.end.row);
     }
     isFrozenCell(col, row) {
-        const {frozenRowCount: frozenRowCount, frozenColCount: frozenColCount} = this.internalProps, isFrozenRow = frozenRowCount > 0 && row < frozenRowCount, isFrozenCol = frozenColCount > 0 && col < frozenColCount;
+        const {frozenRowCount: frozenRowCount, frozenColCount: frozenColCount} = this.internalProps, isFrozenRow = frozenRowCount > 0 && row < frozenRowCount || this.isBottomFrozenRow(col, row), isFrozenCol = frozenColCount > 0 && col < frozenColCount || this.isRightFrozenColumn(col, row);
         return isFrozenRow || isFrozenCol ? {
             row: isFrozenRow,
             col: isFrozenCol
@@ -642,20 +664,21 @@ class BaseTable extends EventTarget_1.EventTarget {
         const {parentElement: parentElement} = internalProps.element;
         parentElement && parentElement.removeChild(internalProps.element);
     }
-    fireListeners(type, ...event) {
-        return super.fireListeners(type, ...event);
+    fireListeners(type, event) {
+        return super.fireListeners(type, event);
     }
     updateOption(options) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         this.options = options;
-        const {frozenColCount: frozenColCount = 0, defaultRowHeight: defaultRowHeight = 40, defaultHeaderRowHeight: defaultHeaderRowHeight, defaultColWidth: defaultColWidth = 80, defaultHeaderColWidth: defaultHeaderColWidth = 80, keyboardOptions: keyboardOptions, columnResizeMode: columnResizeMode, dragHeaderMode: dragHeaderMode, showFrozenIcon: showFrozenIcon, allowFrozenColCount: allowFrozenColCount, padding: padding, hover: hover, menu: menu, select: click, pixelRatio: pixelRatio, widthMode: widthMode} = options;
+        const {frozenColCount: frozenColCount = 0, defaultRowHeight: defaultRowHeight = 40, defaultHeaderRowHeight: defaultHeaderRowHeight, defaultColWidth: defaultColWidth = 80, defaultHeaderColWidth: defaultHeaderColWidth = 80, keyboardOptions: keyboardOptions, columnResizeMode: columnResizeMode, dragHeaderMode: dragHeaderMode, showFrozenIcon: showFrozenIcon, allowFrozenColCount: allowFrozenColCount, padding: padding, hover: hover, menu: menu, select: click, pixelRatio: pixelRatio, widthMode: widthMode, heightMode: heightMode, autoFillWidth: autoFillWidth, customRender: customRender} = options;
         pixelRatio && pixelRatio !== this.internalProps.pixelRatio && (this.internalProps.pixelRatio = pixelRatio), 
         padding && ("number" == typeof padding ? (this.padding.top = padding, this.padding.left = padding, 
         this.padding.bottom = padding, this.padding.right = padding) : (padding.top && (this.padding.top = padding.top), 
         padding.bottom && (this.padding.bottom = padding.bottom), padding.left && (this.padding.left = padding.left), 
         padding.right && (this.padding.right = padding.right))), this.showFrozenIcon = "boolean" != typeof showFrozenIcon || showFrozenIcon, 
         "number" == typeof allowFrozenColCount && allowFrozenColCount <= 0 && (this.showFrozenIcon = !1), 
-        this.widthMode = null != widthMode ? widthMode : "standard";
+        this.widthMode = null != widthMode ? widthMode : "standard", this.heightMode = null != heightMode ? heightMode : "standard", 
+        this.autoFillWidth = null != autoFillWidth && autoFillWidth, this.customRender = customRender;
         const internalProps = this.internalProps;
         "node" !== env_1.Env.mode && (0, tableHelper_1.updateRootElementPadding)(internalProps.element, this.padding), 
         internalProps.frozenColCount = frozenColCount, internalProps.defaultRowHeight = defaultRowHeight, 
@@ -663,18 +686,30 @@ class BaseTable extends EventTarget_1.EventTarget {
         internalProps.defaultColWidth = defaultColWidth, internalProps.defaultHeaderColWidth = null != defaultHeaderColWidth ? defaultHeaderColWidth : defaultColWidth, 
         internalProps.keyboardOptions = keyboardOptions, internalProps.columnResizeMode = columnResizeMode, 
         internalProps.dragHeaderMode = dragHeaderMode, internalProps.cellTextOverflows = {}, 
+        internalProps._rowHeightsMap = new NumberMap_1.NumberMap, internalProps._rowRangeHeightsMap = new Map, 
+        internalProps._colRangeWidthsMap = new Map, this.colWidthsMap = new NumberMap_1.NumberMap, 
+        this.colContentWidthsMap = new NumberMap_1.NumberMap, this.colWidthsLimit = {}, 
         internalProps.theme = themes_1.default.of(null !== (_a = options.theme) && void 0 !== _a ? _a : themes_1.default.DEFAULT), 
-        internalProps.autoRowHeight = null !== (_b = options.autoRowHeight) && void 0 !== _b && _b, 
-        internalProps.autoWrapText = options.autoWrapText, internalProps.allowFrozenColCount = null !== (_c = options.allowFrozenColCount) && void 0 !== _c ? _c : internalProps.colCount, 
-        internalProps.limitMaxAutoWidth = null !== (_d = options.limitMaxAutoWidth) && void 0 !== _d ? _d : 450, 
-        internalProps.tooltip = Object.assign({
+        internalProps.autoWrapText = options.autoWrapText, internalProps.allowFrozenColCount = null !== (_b = options.allowFrozenColCount) && void 0 !== _b ? _b : internalProps.colCount, 
+        internalProps.limitMaxAutoWidth = null !== (_c = options.limitMaxAutoWidth) && void 0 !== _c ? _c : 450, 
+        this.dataSet = new vdataset_1.DataSet, this.scenegraph.clearCells(), this.stateManeger.initState(), 
+        options.legends && (internalProps.legends = new legend_1.TableLegend(options.legends, this), 
+        this.scenegraph.tableGroup.setAttributes({
+            x: this.tableX,
+            y: this.tableY
+        })), options.title && (internalProps.title = new title_1.Title(options.title, this), 
+        this.scenegraph.tableGroup.setAttributes({
+            x: this.tableX,
+            y: this.tableY
+        })), internalProps.tooltip = Object.assign({
             renderMode: "html",
             isShowOverflowTextTooltip: !1,
             confine: !0
         }, options.tooltip), "html" !== internalProps.tooltip.renderMode || internalProps.tooltipHandler || (internalProps.tooltipHandler = new TooltipHandler_1.TooltipHandler(this, internalProps.tooltip.confine)), 
         internalProps.menu = Object.assign({
             renderMode: "html"
-        }, options.menu), "html" !== internalProps.menu.renderMode || internalProps.menuHandler || (internalProps.menuHandler = new MenuHandler_1.MenuHandler(this));
+        }, options.menu), "html" !== internalProps.menu.renderMode || internalProps.menuHandler || (internalProps.menuHandler = new MenuHandler_1.MenuHandler(this)), 
+        this.headerStyleCache = new Map, this.bodyStyleCache = new Map;
     }
     getFrozenRowsHeight() {
         return this.getRowsHeight(0, this.frozenRowCount - 1);
@@ -682,6 +717,18 @@ class BaseTable extends EventTarget_1.EventTarget {
     getFrozenColsWidth() {
         return this.getColsWidth(0, this.frozenColCount - 1);
     }
+    getBottomFrozenRowsHeight() {
+        if (this.bottomFrozenRowCount > 0) {
+            return this.getRowsHeight(this.rowCount - this.bottomFrozenRowCount, this.rowCount - 1);
+        }
+        return 0;
+    }
+    getRightFrozenColsWidth() {
+        if (this.rightFrozenColCount > 0) {
+            return this.getColsWidth(this.colCount - this.rightFrozenColCount, this.colCount - 1);
+        }
+        return 0;
+    }
     getDrawRange() {
         const width = Math.min(this.tableNoFrameWidth, this.getAllColsWidth()), height = Math.min(this.tableNoFrameHeight, this.getAllRowsHeight());
         return new Rect_1.Rect(this.tableX, this.tableY, width, height);
@@ -960,7 +1007,7 @@ class BaseTable extends EventTarget_1.EventTarget {
                 let order, field, fieldKey;
                 if (Array.isArray(this.sortState) ? 0 !== this.sortState.length && ({order: order, field: field, fieldKey: fieldKey} = null === (_a = this.sortState) || void 0 === _a ? void 0 : _a[0]) : ({order: order, field: field, fieldKey: fieldKey} = this.sortState), 
                 order && field && "normal" !== order) {
-                    const sortFunc = this.getSortFuncFromHeaderOption(void 0, field, fieldKey);
+                    const sortFunc = this._getSortFuncFromHeaderOption(void 0, field, fieldKey);
                     let hd;
                     hd = fieldKey ? this.internalProps.layoutMap.headerObjects.find((col => col && col.fieldKey === fieldKey)) : this.internalProps.layoutMap.headerObjects.find((col => col && col.field === field)), 
                     (null === (_b = null == hd ? void 0 : hd.define) || void 0 === _b ? void 0 : _b.sort) && this.dataSource.sort(hd.field, order, null != sortFunc ? sortFunc : util_1.defaultOrderFn);
@@ -995,6 +1042,14 @@ class BaseTable extends EventTarget_1.EventTarget {
         var _a;
         return null === (_a = this.internalProps.layoutMap) || void 0 === _a ? void 0 : _a.isCornerHeader(col, row);
     }
+    isRightFrozenColumn(col, row) {
+        var _a;
+        return null === (_a = this.internalProps.layoutMap) || void 0 === _a ? void 0 : _a.isRightFrozenColumn(col, row);
+    }
+    isBottomFrozenRow(col, row) {
+        var _a;
+        return null === (_a = this.internalProps.layoutMap) || void 0 === _a ? void 0 : _a.isBottomFrozenRow(col, row);
+    }
     getCellInfo(col, row) {
         const colDef = this.isHeader(col, row) ? this.getHeaderDefine(col, row) : this.getBodyColumnDefine(col, row);
         return {
@@ -1026,16 +1081,35 @@ class BaseTable extends EventTarget_1.EventTarget {
         if (layoutMap.isHeader(col, row)) {
             let cacheStyle = this.headerStyleCache.get(`${col}-${row}`);
             if (cacheStyle) return cacheStyle;
-            const hd = layoutMap.getHeader(col, row), styleClass = this.internalProps.headerHelper.getStyleClass(hd.headerType), {style: style} = hd;
-            return cacheStyle = headerStyleContents.of(style, layoutMap.isColumnHeader(col, row) ? this.theme.headerStyle : layoutMap.isRowHeader(col, row) ? this.theme.rowHeaderStyle : this.theme.cornerHeaderStyle, {
+            const hd = layoutMap.getHeader(col, row);
+            if (!hd || hd.isEmpty) return EMPTY_STYLE;
+            const styleClass = this.internalProps.headerHelper.getStyleClass(hd.headerType);
+            if (layoutMap.isBottomFrozenRow(col, row) && this.theme.bottomFrozenStyle) cacheStyle = headerStyleContents.of({}, this.theme.bottomFrozenStyle, {
+                col: col,
+                row: row,
+                table: this,
+                value: this.getCellValue(col, row),
+                dataValue: this.getCellOriginValue(col, row),
+                cellHeaderPaths: this.getCellHeaderPaths(col, row)
+            }, styleClass, this.options.autoWrapText); else if (layoutMap.isRightFrozenColumn(col, row) && this.theme.rightFrozenStyle) cacheStyle = headerStyleContents.of({}, this.theme.rightFrozenStyle, {
                 col: col,
                 row: row,
                 table: this,
                 value: this.getCellValue(col, row),
                 dataValue: this.getCellOriginValue(col, row),
                 cellHeaderPaths: this.getCellHeaderPaths(col, row)
-            }, styleClass, this.options.autoWrapText), this.headerStyleCache.set(`${col}-${row}`, cacheStyle), 
-            cacheStyle;
+            }, styleClass, this.options.autoWrapText); else {
+                const {style: style} = hd;
+                cacheStyle = headerStyleContents.of(style, layoutMap.isColumnHeader(col, row) || layoutMap.isBottomFrozenRow(col, row) ? this.theme.headerStyle : layoutMap.isRowHeader(col, row) || layoutMap.isRightFrozenColumn(col, row) ? this.theme.rowHeaderStyle : this.theme.cornerHeaderStyle, {
+                    col: col,
+                    row: row,
+                    table: this,
+                    value: this.getCellValue(col, row),
+                    dataValue: this.getCellOriginValue(col, row),
+                    cellHeaderPaths: this.getCellHeaderPaths(col, row)
+                }, styleClass, this.options.autoWrapText);
+            }
+            return this.headerStyleCache.set(`${col}-${row}`, cacheStyle), cacheStyle;
         }
         let cacheKey;
         cacheKey = this.isListTable() && !this.transpose || this.isPivotTable() && this.internalProps.layoutMap.indicatorsAsCol ? col : row;