@visactor/vtable 1.3.2 → 1.3.3-alpha.0

package/cjs/components/react/react-custom-layout.d.ts

@@ -0,0 +1,21 @@
+import { Group } from './../../vrender';
+import type { CustomRenderFunctionArg, ICustomLayoutFuc } from '../../ts-types';
+import type { BaseTableAPI } from '../../ts-types/base-table';
+export declare function emptyCustomLayout(args: CustomRenderFunctionArg): {
+    rootContainer: Group;
+    renderDefault: boolean;
+};
+export declare class ReactCustomLayout {
+    table: BaseTableAPI;
+    customLayoutFuncCache: Map<number, ICustomLayoutFuc>;
+    reactRemoveGraphicCache: Map<number, (col: number, row: number) => void>;
+    headerCustomLayoutFuncCache: Map<number, ICustomLayoutFuc>;
+    headerReactRemoveGraphicCache: Map<number, (col: number, row: number) => void>;
+    constructor(table: BaseTableAPI);
+    hasReactCreateGraphic(componentIndex: number, isHeaderCustomLayout?: boolean): boolean;
+    setReactCreateGraphic(componentIndex: number, createGraphic: ICustomLayoutFuc, isHeaderCustomLayout?: boolean): void;
+    setReactRemoveGraphic(componentIndex: number, removeGraphic: (col: number, row: number) => void, isHeaderCustomLayout?: boolean): void;
+    updateCustomCell(componentIndex: number, isHeaderCustomLayout?: boolean): void;
+    getCustomLayoutFunc(col: number, row: number): ICustomLayoutFuc | typeof emptyCustomLayout;
+    removeCustomCell(col: number, row: number): void;
+}

package/cjs/components/react/react-custom-layout.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.ReactCustomLayout = exports.emptyCustomLayout = void 0;
+
+const vrender_1 = require("./../../vrender");
+
+function emptyCustomLayout(args) {
+    return {
+        rootContainer: new vrender_1.Group({}),
+        renderDefault: !0
+    };
+}
+
+exports.emptyCustomLayout = emptyCustomLayout;
+
+class ReactCustomLayout {
+    constructor(table) {
+        this.table = table, this.customLayoutFuncCache = new Map, this.reactRemoveGraphicCache = new Map, 
+        this.headerCustomLayoutFuncCache = new Map, this.headerReactRemoveGraphicCache = new Map;
+    }
+    hasReactCreateGraphic(componentIndex, isHeaderCustomLayout) {
+        return isHeaderCustomLayout ? this.headerCustomLayoutFuncCache.has(componentIndex) : this.customLayoutFuncCache.has(componentIndex);
+    }
+    setReactCreateGraphic(componentIndex, createGraphic, isHeaderCustomLayout) {
+        isHeaderCustomLayout ? this.headerCustomLayoutFuncCache.set(componentIndex, createGraphic) : this.customLayoutFuncCache.set(componentIndex, createGraphic);
+    }
+    setReactRemoveGraphic(componentIndex, removeGraphic, isHeaderCustomLayout) {
+        isHeaderCustomLayout ? this.headerReactRemoveGraphicCache.set(componentIndex, removeGraphic) : this.reactRemoveGraphicCache.set(componentIndex, removeGraphic);
+    }
+    updateCustomCell(componentIndex, isHeaderCustomLayout) {
+        const table = this.table, col = componentIndex;
+        if (isHeaderCustomLayout) for (let row = 0; row < table.columnHeaderLevelCount; row++) table.scenegraph.updateCellContent(col, row); else for (let row = table.columnHeaderLevelCount; row < table.rowCount; row++) table.scenegraph.updateCellContent(col, row);
+        table.scenegraph.renderSceneGraph();
+    }
+    getCustomLayoutFunc(col, row) {
+        const {startInTotal: startInTotal} = this.table.getBodyColumnDefine(col, row);
+        return (this.table.isHeader(col, row) ? this.headerCustomLayoutFuncCache.get(startInTotal) : this.customLayoutFuncCache.get(startInTotal)) || emptyCustomLayout;
+    }
+    removeCustomCell(col, row) {
+        const {startInTotal: startInTotal} = this.table.getBodyColumnDefine(col, row), removeFun = this.table.isHeader(col, row) ? this.headerReactRemoveGraphicCache.get(startInTotal) : this.reactRemoveGraphicCache.get(startInTotal);
+        removeFun && removeFun(col, row);
+    }
+}
+
+exports.ReactCustomLayout = ReactCustomLayout;
+//# sourceMappingURL=react-custom-layout.js.map

package/cjs/components/react/react-custom-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/react/react-custom-layout.ts"],"names":[],"mappings":"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","file":"react-custom-layout.js","sourcesContent":["import { Group } from './../../vrender';\nimport type { CustomRenderFunctionArg, ICustomLayoutFuc } from '../../ts-types';\nimport type { BaseTableAPI } from '../../ts-types/base-table';\n\nexport function emptyCustomLayout(args: CustomRenderFunctionArg) {\n  const group = new Group({});\n  return {\n    rootContainer: group,\n    renderDefault: true\n  };\n}\n\nexport class ReactCustomLayout {\n  table: BaseTableAPI;\n  customLayoutFuncCache: Map<number, ICustomLayoutFuc>;\n  reactRemoveGraphicCache: Map<number, (col: number, row: number) => void>;\n  headerCustomLayoutFuncCache: Map<number, ICustomLayoutFuc>;\n  headerReactRemoveGraphicCache: Map<number, (col: number, row: number) => void>;\n  // reactContainerCache: Map<number, Map<string, any>>;\n  constructor(table: BaseTableAPI) {\n    this.table = table;\n    this.customLayoutFuncCache = new Map();\n    // this.reactContainerCache = new Map();\n    this.reactRemoveGraphicCache = new Map();\n    this.headerCustomLayoutFuncCache = new Map();\n    // this.headerCeactContainerCache = new Map();\n    this.headerReactRemoveGraphicCache = new Map();\n  }\n\n  hasReactCreateGraphic(componentIndex: number, isHeaderCustomLayout?: boolean) {\n    if (isHeaderCustomLayout) {\n      return this.headerCustomLayoutFuncCache.has(componentIndex);\n    }\n    return this.customLayoutFuncCache.has(componentIndex);\n  }\n\n  setReactCreateGraphic(\n    componentIndex: number,\n    createGraphic: ICustomLayoutFuc,\n    // containerCache: Map<string, any>,\n    isHeaderCustomLayout?: boolean\n  ) {\n    if (isHeaderCustomLayout) {\n      this.headerCustomLayoutFuncCache.set(componentIndex, createGraphic);\n    } else {\n      this.customLayoutFuncCache.set(componentIndex, createGraphic);\n    }\n    // this.reactContainerCache.set(componentIndex, containerCache);\n  }\n\n  setReactRemoveGraphic(\n    componentIndex: number,\n    removeGraphic: (col: number, row: number) => void,\n    isHeaderCustomLayout?: boolean\n  ) {\n    if (isHeaderCustomLayout) {\n      this.headerReactRemoveGraphicCache.set(componentIndex, removeGraphic);\n    } else {\n      this.reactRemoveGraphicCache.set(componentIndex, removeGraphic);\n    }\n  }\n\n  updateCustomCell(componentIndex: number, isHeaderCustomLayout?: boolean) {\n    const table = this.table;\n    const col = componentIndex;\n    // to do: deal with transpose table\n    if (isHeaderCustomLayout) {\n      for (let row = 0; row < table.columnHeaderLevelCount; row++) {\n        table.scenegraph.updateCellContent(col, row);\n      }\n    } else {\n      for (let row = table.columnHeaderLevelCount; row < table.rowCount; row++) {\n        table.scenegraph.updateCellContent(col, row);\n      }\n    }\n    // table.scenegraph.updateNextFrame();\n    table.scenegraph.renderSceneGraph(); // use sync render for faster update\n  }\n\n  getCustomLayoutFunc(col: number, row: number) {\n    const { startInTotal } = this.table.getBodyColumnDefine(col, row) as any;\n    const isHeader = this.table.isHeader(col, row);\n    return (\n      (isHeader ? this.headerCustomLayoutFuncCache.get(startInTotal) : this.customLayoutFuncCache.get(startInTotal)) ||\n      emptyCustomLayout\n    );\n  }\n\n  removeCustomCell(col: number, row: number) {\n    const { startInTotal } = this.table.getBodyColumnDefine(col, row) as any;\n    const isHeader = this.table.isHeader(col, row);\n    const removeFun = isHeader\n      ? this.headerReactRemoveGraphicCache.get(startInTotal)\n      : this.reactRemoveGraphicCache.get(startInTotal);\n    if (removeFun) {\n      removeFun(col, row);\n    }\n  }\n}\n"]}

package/cjs/core/BaseTable.d.ts

@@ -17,6 +17,7 @@ import { DataSet } from '@visactor/vdataset';
 import { NumberRangeMap } from '../layout/row-height-map';
 import { CustomCellStylePlugin } from '../plugins/custom-cell-style';
 import type { ITextGraphicAttribute } from './../vrender';
+import { ReactCustomLayout } from '../components/react/react-custom-layout';
 import type { ISortedMapItem } from '../data/DataSource';
 export declare abstract class BaseTable extends EventTarget implements BaseTableAPI {
     internalProps: IBaseTableProtected;
@@ -62,6 +63,7 @@ export declare abstract class BaseTable extends EventTarget implements BaseTable
     }[]>;
     customCellStylePlugin: CustomCellStylePlugin;
     columnWidthComputeMode?: 'normal' | 'only-header' | 'only-body';
+    reactCustomLayout?: ReactCustomLayout;
     _hasAutoImageColumn?: boolean;
     constructor(container: HTMLElement, options?: BaseTableConstructorOptions);
     throttleInvalidate: (this: any, ...args: any[]) => void;
@@ -416,4 +418,7 @@ export declare abstract class BaseTable extends EventTarget implements BaseTable
     get leftRowSeriesNumberCount(): number;
     setMinMaxLimitWidth(setWidth?: boolean): void;
     setSortedIndexMap(field: FieldDef, filedMap: ISortedMapItem): void;
+    checkReactCustomLayout(): void;
+    get bodyDomContainer(): HTMLElement;
+    get headerDomContainer(): HTMLElement;
 }

package/cjs/core/BaseTable.js

@@ -33,7 +33,7 @@ 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")), ts_types_1 = require("../ts-types"), 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_measure_1 = require("../scenegraph/utils/text-measure"), 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"), create_legend_1 = require("../components/legend/create-legend"), vdataset_1 = require("@visactor/vdataset"), chart_render_helper_1 = require("../scenegraph/graphic/contributions/chart-render-helper"), get_axis_config_1 = require("../layout/chart-helper/get-axis-config"), row_height_map_1 = require("../layout/row-height-map"), row_series_number_helper_1 = require("./row-series-number-helper"), custom_cell_style_1 = require("../plugins/custom-cell-style"), update_select_border_1 = require("../scenegraph/select/update-select-border"), layout_helper_1 = require("../layout/layout-helper"), {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")), ts_types_1 = require("../ts-types"), 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_measure_1 = require("../scenegraph/utils/text-measure"), 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"), create_legend_1 = require("../components/legend/create-legend"), vdataset_1 = require("@visactor/vdataset"), chart_render_helper_1 = require("../scenegraph/graphic/contributions/chart-render-helper"), get_axis_config_1 = require("../layout/chart-helper/get-axis-config"), row_height_map_1 = require("../layout/row-height-map"), row_series_number_helper_1 = require("./row-series-number-helper"), custom_cell_style_1 = require("../plugins/custom-cell-style"), update_select_border_1 = require("../scenegraph/select/update-select-border"), react_custom_layout_1 = require("../components/react/react-custom-layout"), layout_helper_1 = require("../layout/layout-helper"), {toBoxArray: toBoxArray} = helper_1.style, {isTouchEvent: isTouchEvent} = helper_1.event, rangeReg = /^\$(\d+)\$(\d+)$/;
 
 (0, style_1.importStyle)();
 
@@ -44,8 +44,8 @@ class BaseTable extends EventTarget_1.EventTarget {
         return TABLE_EVENT_TYPE_1.TABLE_EVENT_TYPE;
     }
     constructor(container, options = {}) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.3.2", this.id = `VTable${Date.now()}`, 
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (super(), this.showFrozenIcon = !0, this.version = "1.3.3-alpha.0", this.id = `VTable${Date.now()}`, 
         this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = (0, util_1.throttle2)(this.render.bind(this), 200), 
         !container && "node" !== options.mode) throw new Error("vtable's container is undefined");
         const {frozenColCount: frozenColCount = 0, defaultRowHeight: defaultRowHeight = 40, defaultHeaderRowHeight: defaultHeaderRowHeight, defaultColWidth: defaultColWidth = 80, defaultHeaderColWidth: defaultHeaderColWidth, widthMode: widthMode = "standard", heightMode: heightMode = "standard", autoFillWidth: autoFillWidth = !1, autoFillHeight: autoFillHeight = !1, widthAdaptiveMode: widthAdaptiveMode = "only-body", heightAdaptiveMode: heightAdaptiveMode = "only-body", keyboardOptions: keyboardOptions, eventOptions: eventOptions, rowSeriesNumber: rowSeriesNumber, columnResizeMode: columnResizeMode, rowResizeMode: rowResizeMode = "none", dragHeaderMode: dragHeaderMode, showFrozenIcon: showFrozenIcon, allowFrozenColCount: allowFrozenColCount, padding: padding, hover: hover, menu: menu, select: click, customRender: customRender, pixelRatio: pixelRatio = pixel_ratio_1.defaultPixelRatio, renderChartAsync: renderChartAsync, renderChartAsyncBatchCount: renderChartAsyncBatchCount, mode: mode, modeParams: modeParams, canvasWidth: canvasWidth, canvasHeight: canvasHeight, overscrollBehavior: overscrollBehavior, limitMinWidth: limitMinWidth, limitMinHeight: limitMinHeight, clearDOM: clearDOM = !0} = options;
@@ -68,7 +68,10 @@ class BaseTable extends EventTarget_1.EventTarget {
         "node" !== env_1.Env.mode && (internalProps.element = (0, tableHelper_1.createRootElement)(this.padding), 
         internalProps.focusControl = new FouseInput_1.FocusInput(this, internalProps.element), 
         internalProps.canvas = document.createElement("canvas"), internalProps.element.appendChild(internalProps.canvas), 
-        internalProps.context = internalProps.canvas.getContext("2d")), internalProps.handler = new EventHandler_1.EventHandler, 
+        internalProps.context = internalProps.canvas.getContext("2d"), (null === (_b = options.customConfig) || void 0 === _b ? void 0 : _b.createReactContainer) && (internalProps.bodyDomContainer = document.createElement("div"), 
+        internalProps.bodyDomContainer.classList.add("table-component-container"), internalProps.element.appendChild(internalProps.bodyDomContainer), 
+        internalProps.headerDomContainer = document.createElement("div"), internalProps.headerDomContainer.classList.add("table-component-container"), 
+        internalProps.element.appendChild(internalProps.headerDomContainer))), internalProps.handler = new EventHandler_1.EventHandler, 
         (0, vutils_1.isNumber)(this.options.resizeTime) && (internalProps.handler.resizeTime = this.options.resizeTime), 
         internalProps.pixelRatio = pixelRatio, internalProps.frozenColCount = frozenColCount, 
         internalProps.defaultRowHeight = defaultRowHeight, internalProps.defaultHeaderRowHeight = null != defaultHeaderRowHeight ? defaultHeaderRowHeight : defaultRowHeight, 
@@ -88,15 +91,15 @@ class BaseTable extends EventTarget_1.EventTarget {
                 var _a;
                 return "node" === env_1.Env.mode ? canvasWidth / (null != pixelRatio ? pixelRatio : 1) : 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 !== (_c = options.theme) && void 0 !== _c ? _c : themes_1.default.DEFAULT), 
         internalProps.theme.isPivot = this.isPivotTable(), container ? (clearDOM && (container.innerHTML = ""), 
         container.appendChild(internalProps.element), this._updateSize()) : this._updateSize(), 
-        this.options = options, internalProps.theme = themes_1.default.of(null !== (_c = options.theme) && void 0 !== _c ? _c : themes_1.default.DEFAULT), 
+        this.options = options, internalProps.theme = themes_1.default.of(null !== (_d = options.theme) && void 0 !== _d ? _d : themes_1.default.DEFAULT), 
         internalProps.theme.isPivot = this.isPivotTable(), internalProps.bodyHelper = new body_helper_1.BodyHelper(this), 
         internalProps.headerHelper = new header_helper_1.HeaderHelper(this), internalProps.rowSeriesNumberHelper = new row_series_number_helper_1.RowSeriesNumberHelper(this), 
         internalProps.autoWrapText = options.autoWrapText, internalProps.enableLineBreak = options.enableLineBreak, 
-        internalProps.allowFrozenColCount = null !== (_d = options.allowFrozenColCount) && void 0 !== _d ? _d : 0, 
-        internalProps.limitMaxAutoWidth = null !== (_e = options.limitMaxAutoWidth) && void 0 !== _e ? _e : 450, 
+        internalProps.allowFrozenColCount = null !== (_e = options.allowFrozenColCount) && void 0 !== _e ? _e : 0, 
+        internalProps.limitMaxAutoWidth = null !== (_f = options.limitMaxAutoWidth) && void 0 !== _f ? _f : 450, 
         internalProps.limitMinWidth = null != limitMinWidth ? "number" == typeof limitMinWidth ? limitMinWidth : limitMinWidth ? 10 : 0 : 10, 
         internalProps.limitMinHeight = null != limitMinHeight ? "number" == typeof limitMinHeight ? limitMinHeight : limitMinHeight ? 10 : 0 : 10, 
         this._vDataSet = new vdataset_1.DataSet, this.scenegraph = new scenegraph_1.Scenegraph(this), 
@@ -120,13 +123,13 @@ class BaseTable extends EventTarget_1.EventTarget {
         }, 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 === (_g = options.menu) || void 0 === _g ? void 0 : _g.dropDownMenuHighlight) && this.setDropDownMenuHighlight(null === (_h = options.menu) || void 0 === _h ? void 0 : _h.dropDownMenuHighlight), 
+        Array.isArray(null === (_j = options.menu) || void 0 === _j ? void 0 : _j.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, this.bodyBottomStyleCache = new Map, 
         internalProps.stick = {
             changedCells: new Map
-        }, internalProps.customMergeCell = options.customMergeCell, this.customCellStylePlugin = new custom_cell_style_1.CustomCellStylePlugin(this, null !== (_j = options.customCellStyle) && void 0 !== _j ? _j : [], null !== (_k = options.customCellStyleArrangement) && void 0 !== _k ? _k : []);
+        }, internalProps.customMergeCell = options.customMergeCell, this.customCellStylePlugin = new custom_cell_style_1.CustomCellStylePlugin(this, null !== (_k = options.customCellStyle) && void 0 !== _k ? _k : [], null !== (_l = options.customCellStyleArrangement) && void 0 !== _l ? _l : []);
     }
     getContainer() {
         return this.container;
@@ -158,8 +161,8 @@ class BaseTable extends EventTarget_1.EventTarget {
         this.internalProps.colCount = colCount;
     }
     get frozenColCount() {
-        var _a, _b, _c;
-        return null !== (_c = null !== (_b = null === (_a = this.internalProps.layoutMap) || void 0 === _a ? void 0 : _a.frozenColCount) && void 0 !== _b ? _b : this.internalProps.frozenColCount) && void 0 !== _c ? _c : 0;
+        var _a, _b, _c, _d, _e;
+        return null !== (_e = null !== (_c = null === (_b = null === (_a = this.internalProps) || void 0 === _a ? void 0 : _a.layoutMap) || void 0 === _b ? void 0 : _b.frozenColCount) && void 0 !== _c ? _c : null === (_d = this.internalProps) || void 0 === _d ? void 0 : _d.frozenColCount) && void 0 !== _e ? _e : 0;
     }
     set frozenColCount(frozenColCount) {
         frozenColCount >= this.colCount && (frozenColCount = 0), this.internalProps.frozenColCount = frozenColCount, 
@@ -178,22 +181,22 @@ class BaseTable extends EventTarget_1.EventTarget {
         this.options.frozenColCount && (this.tableNoFrameWidth - this.getColsWidth(0, this.options.frozenColCount - 1) <= 120 ? this._setFrozenColCount(0) : this.frozenColCount !== this.options.frozenColCount && this._setFrozenColCount(this.options.frozenColCount));
     }
     get frozenRowCount() {
-        var _a, _b, _c;
-        return null !== (_c = null !== (_b = null === (_a = this.internalProps.layoutMap) || void 0 === _a ? void 0 : _a.frozenRowCount) && void 0 !== _b ? _b : this.internalProps.frozenRowCount) && void 0 !== _c ? _c : 0;
+        var _a, _b, _c, _d, _e;
+        return null !== (_e = null !== (_c = null === (_b = null === (_a = this.internalProps) || void 0 === _a ? void 0 : _a.layoutMap) || void 0 === _b ? void 0 : _b.frozenRowCount) && void 0 !== _c ? _c : null === (_d = this.internalProps) || void 0 === _d ? void 0 : _d.frozenRowCount) && void 0 !== _e ? _e : 0;
     }
     set frozenRowCount(frozenRowCount) {
         this.internalProps.frozenRowCount = frozenRowCount;
     }
     get rightFrozenColCount() {
-        var _a, _b, _c;
-        return null !== (_c = null !== (_b = null === (_a = this.internalProps.layoutMap) || void 0 === _a ? void 0 : _a.rightFrozenColCount) && void 0 !== _b ? _b : this.internalProps.rightFrozenColCount) && void 0 !== _c ? _c : 0;
+        var _a, _b, _c, _d, _e;
+        return null !== (_e = null !== (_c = null === (_b = null === (_a = this.internalProps) || void 0 === _a ? void 0 : _a.layoutMap) || void 0 === _b ? void 0 : _b.rightFrozenColCount) && void 0 !== _c ? _c : null === (_d = this.internalProps) || void 0 === _d ? void 0 : _d.rightFrozenColCount) && void 0 !== _e ? _e : 0;
     }
     set rightFrozenColCount(rightFrozenColCount) {
         this.scenegraph.dealWidthRightFrozen(rightFrozenColCount);
     }
     get bottomFrozenRowCount() {
-        var _a, _b, _c;
-        return null !== (_c = null !== (_b = null === (_a = this.internalProps.layoutMap) || void 0 === _a ? void 0 : _a.bottomFrozenRowCount) && void 0 !== _b ? _b : this.internalProps.bottomFrozenRowCount) && void 0 !== _c ? _c : 0;
+        var _a, _b, _c, _d, _e;
+        return null !== (_e = null !== (_c = null === (_b = null === (_a = this.internalProps) || void 0 === _a ? void 0 : _a.layoutMap) || void 0 === _b ? void 0 : _b.bottomFrozenRowCount) && void 0 !== _c ? _c : null === (_d = this.internalProps) || void 0 === _d ? void 0 : _d.bottomFrozenRowCount) && void 0 !== _e ? _e : 0;
     }
     set bottomFrozenRowCount(bottomFrozenRowCount) {
         this.scenegraph.dealWidthBottomFrozen(bottomFrozenRowCount);
@@ -356,7 +359,9 @@ class BaseTable extends EventTarget_1.EventTarget {
             heightP = null !== (_d = null === (_c = canvas.parentElement) || void 0 === _c ? void 0 : _c.offsetHeight) && void 0 !== _d ? _d : 0, 
             (null === (_e = null == this ? void 0 : this.scenegraph) || void 0 === _e ? void 0 : _e.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`);
+            canvas.style.height = `${heightP}px`), this.internalProps.bodyDomContainer && (this.internalProps.bodyDomContainer.style.width = `${widthP}px`, 
+            this.internalProps.bodyDomContainer.style.height = `${heightP}px`), this.internalProps.headerDomContainer && (this.internalProps.headerDomContainer.style.width = `${widthP}px`, 
+            this.internalProps.headerDomContainer.style.height = `${heightP}px`);
         } else "node" === env_1.Env.mode && (widthP = this.canvasWidth - 1, heightP = this.canvasHeight - 1);
         const width = Math.floor(widthP - style.getScrollBarSize(this.getTheme().scrollStyle)), height = Math.floor(heightP - style.getScrollBarSize(this.getTheme().scrollStyle));
         if (null === (_f = this.internalProps.theme) || void 0 === _f ? void 0 : _f.frameStyle) {
@@ -1847,6 +1852,15 @@ class BaseTable extends EventTarget_1.EventTarget {
         var _a;
         null === (_a = this.dataSource) || void 0 === _a || _a.setSortedIndexMap(field, filedMap);
     }
+    checkReactCustomLayout() {
+        this.reactCustomLayout || (this.reactCustomLayout = new react_custom_layout_1.ReactCustomLayout(this));
+    }
+    get bodyDomContainer() {
+        return this.internalProps.bodyDomContainer;
+    }
+    get headerDomContainer() {
+        return this.internalProps.headerDomContainer;
+    }
 }
 
 exports.BaseTable = BaseTable;