beautiful-grid 1.0.0-rc.1

package/TRADEMARK.md

@@ -0,0 +1,17 @@
+# BeautifulGrid trademark policy
+
+The Apache License 2.0 applies to the BeautifulGrid source code. It does not grant permission to use AXISJ trademarks, the BeautifulGrid name, logos, or other brand assets in a way that suggests endorsement or an official relationship.
+
+You may:
+
+- truthfully state that your software uses or is based on BeautifulGrid;
+- use the name to link to the official project or describe compatibility;
+- identify an unmodified distribution as BeautifulGrid.
+
+You may not:
+
+- present a modified distribution or competing product as the official BeautifulGrid product;
+- use BeautifulGrid branding in a product name, domain, package name, or logo without written permission;
+- imply sponsorship, certification, or endorsement by AXISJ.
+
+Forks should use a clearly different product name and visual identity. Questions about permitted trademark use may be sent to tom@axisj.com.

package/cjs/BGrid.js

@@ -0,0 +1,503 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BGrid = BGrid;
+var React = __importStar(require("react"));
+var Table_1 = __importDefault(require("./components/Table"));
+var utils_1 = require("./utils");
+var store_1 = require("./store");
+function BGrid(_a) {
+    var _b, _c, _d;
+    var width = _a.width, height = _a.height, _e = _a.headerHeight, headerHeight = _e === void 0 ? 30 : _e, footerHeight = _a.footerHeight, _f = _a.summaryHeight, summaryHeight = _f === void 0 ? 30 : _f, _g = _a.itemHeight, itemHeight = _g === void 0 ? 15 : _g, _h = _a.itemPadding, itemPadding = _h === void 0 ? 7 : _h, columns = _a.columns, columnsGroup = _a.columnsGroup, columnGroups = _a.columnGroups, onChangeColumns = _a.onChangeColumns, _j = _a.frozenColumnIndex, frozenColumnIndex = _j === void 0 ? 0 : _j, _k = _a.frozenRowCount, frozenRowCount = _k === void 0 ? 0 : _k, _l = _a.data, data = _l === void 0 ? [] : _l, page = _a.page, scrollbar = _a.scrollbar, status = _a.status, pagination = _a.pagination, bottomBarHeight = _a.bottomBarHeight, _m = _a.scrollTop, scrollTop = _m === void 0 ? 0 : _m, _o = _a.scrollLeft, scrollLeft = _o === void 0 ? 0 : _o, className = _a.className, style = _a.style, rowChecked = _a.rowChecked, sort = _a.sort, onClick = _a.onClick, _p = _a.loading, loading = _p === void 0 ? false : _p, spinning = _a.spinning, rowKey = _a.rowKey, selectedRowKey = _a.selectedRowKey, editable = _a.editable, onChangeData = _a.onChangeData, showLineNumber = _a.showLineNumber, msg = _a.msg, getRowClassName = _a.getRowClassName, _q = _a.editTrigger, editTrigger = _q === void 0 ? 'dblclick' : _q, cellMergeOptions = _a.cellMergeOptions, cellSelectionOptions = _a.cellSelectionOptions, cellNavigationOptions = _a.cellNavigationOptions, variant = _a.variant, summary = _a.summary, columnSortable = _a.columnSortable, reorder = _a.reorder, pivot = _a.pivot, dataControl = _a.dataControl, icons = _a.icons, searchOptions = _a.searchOptions, contextMenuOptions = _a.contextMenuOptions;
+    var warnedSearchControlledRef = React.useRef({ open: false, query: false, pivotContextMenu: false });
+    var pivotData = React.useMemo(function () {
+        return (0, utils_1.createPivotData)({
+            data: data,
+            pivot: pivot,
+        });
+    }, [data, pivot]);
+    var pivotEnabled = !!pivotData;
+    var resolvedColumns = (_b = pivotData === null || pivotData === void 0 ? void 0 : pivotData.columns) !== null && _b !== void 0 ? _b : columns;
+    var resolvedColumnGroups = React.useMemo(function () { return (pivotEnabled ? [] : columnGroups !== null && columnGroups !== void 0 ? columnGroups : []); }, [columnGroups, pivotEnabled]);
+    var resolvedColumnsGroup = React.useMemo(function () { var _a; return (_a = pivotData === null || pivotData === void 0 ? void 0 : pivotData.columnsGroup) !== null && _a !== void 0 ? _a : (resolvedColumnGroups.length ? [] : columnsGroup !== null && columnsGroup !== void 0 ? columnsGroup : []); }, [columnsGroup, pivotData === null || pivotData === void 0 ? void 0 : pivotData.columnsGroup, resolvedColumnGroups.length]);
+    var resolvedData = (_c = pivotData === null || pivotData === void 0 ? void 0 : pivotData.data) !== null && _c !== void 0 ? _c : data;
+    var resolvedPage = pivotEnabled ? undefined : page;
+    var resolvedFrozenColumnIndex = pivotEnabled ? 0 : frozenColumnIndex;
+    var resolvedRowChecked = pivotEnabled ? undefined : rowChecked;
+    var resolvedSort = pivotEnabled ? undefined : sort;
+    var resolvedOnClick = pivotEnabled ? undefined : onClick;
+    var resolvedOnChangeColumns = pivotEnabled ? undefined : onChangeColumns;
+    var resolvedOnChangeData = pivotEnabled ? undefined : onChangeData;
+    var resolvedRowKey = pivotEnabled ? undefined : rowKey;
+    var resolvedSelectedRowKey = pivotEnabled ? undefined : selectedRowKey;
+    var resolvedEditable = pivotEnabled ? false : editable;
+    var resolvedShowLineNumber = pivotEnabled ? false : showLineNumber;
+    var resolvedGetRowClassName = pivotEnabled ? undefined : getRowClassName;
+    var resolvedCellMergeOptions = pivotEnabled ? undefined : cellMergeOptions;
+    var resolvedCellSelectionOptions = cellSelectionOptions;
+    var resolvedSummary = pivotEnabled ? undefined : summary;
+    var resolvedColumnSortable = pivotEnabled ? false : columnSortable;
+    var resolvedDataControl = pivotEnabled ? undefined : dataControl;
+    var resolvedSearchOptions = pivotEnabled ? undefined : searchOptions;
+    var resolvedContextMenuOptions = pivotEnabled ? undefined : contextMenuOptions;
+    var hasActiveClientQuery = (resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode) === 'client' &&
+        (resolvedDataControl.query.sortParams.length > 0 || resolvedDataControl.query.filterParams.length > 0);
+    var resolvedReorder = React.useMemo(function () {
+        return pivotEnabled
+            ? undefined
+            : (hasActiveClientQuery || frozenRowCount > 0) && reorder
+                ? __assign(__assign({}, reorder), { enabled: false }) : reorder;
+    }, [frozenRowCount, hasActiveClientQuery, pivotEnabled, reorder]);
+    // Development warnings
+    React.useEffect(function () {
+        var _a, _b;
+        if (process.env.NODE_ENV !== 'production') {
+            if (resolvedDataControl && resolvedSort) {
+                console.warn('[BGrid] Both dataControl and sort props were provided. dataControl will take precedence.');
+            }
+            if ((resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode) === 'client' && resolvedPage) {
+                console.warn('[BGrid] dataControl in "client" mode is used alongside external "page". Filtering is applied only to the current page.');
+            }
+            if (hasActiveClientQuery && (reorder === null || reorder === void 0 ? void 0 : reorder.enabled)) {
+                console.warn('[BGrid] Row reordering is disabled while a client-side sort or filter is active.');
+            }
+            if (!pivotEnabled && frozenRowCount > 0 && (reorder === null || reorder === void 0 ? void 0 : reorder.enabled)) {
+                console.warn('[BGrid] Row reordering is disabled while frozen rows are active.');
+            }
+            if (((_a = columnGroups === null || columnGroups === void 0 ? void 0 : columnGroups.length) !== null && _a !== void 0 ? _a : 0) > 0 && ((_b = columnsGroup === null || columnsGroup === void 0 ? void 0 : columnsGroup.length) !== null && _b !== void 0 ? _b : 0) > 0) {
+                console.warn('[BGrid] Both columnGroups and columnsGroup were provided. columnGroups takes precedence.');
+            }
+            if (pivotEnabled && frozenRowCount > 0) {
+                console.warn('[BGrid] frozenRowCount is disabled while pivot mode is active.');
+            }
+            if (pivotEnabled && searchOptions && searchOptions.enabled !== false) {
+                console.warn('[BGrid] searchOptions is disabled while pivot mode is active.');
+            }
+            if (pivotEnabled && contextMenuOptions && !warnedSearchControlledRef.current.pivotContextMenu) {
+                warnedSearchControlledRef.current.pivotContextMenu = true;
+                console.warn('[BGrid] contextMenuOptions is disabled while pivot mode is active.');
+            }
+            if ((searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.open) !== undefined &&
+                !searchOptions.onOpenChange &&
+                !warnedSearchControlledRef.current.open) {
+                warnedSearchControlledRef.current.open = true;
+                console.warn('[BGrid] Controlled searchOptions.open requires onOpenChange to respond to user actions.');
+            }
+            if ((searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.query) !== undefined &&
+                !searchOptions.onQueryChange &&
+                !warnedSearchControlledRef.current.query) {
+                warnedSearchControlledRef.current.query = true;
+                console.warn('[BGrid] Controlled searchOptions.query requires onQueryChange to respond to user input.');
+            }
+        }
+    }, [
+        columnGroups === null || columnGroups === void 0 ? void 0 : columnGroups.length,
+        columnsGroup === null || columnsGroup === void 0 ? void 0 : columnsGroup.length,
+        frozenRowCount,
+        hasActiveClientQuery,
+        pivotEnabled,
+        reorder === null || reorder === void 0 ? void 0 : reorder.enabled,
+        resolvedDataControl,
+        resolvedPage,
+        resolvedSort,
+        contextMenuOptions,
+        searchOptions,
+    ]);
+    var duplicateToolboxColumnIds = React.useMemo(function () { return (0, utils_1.findDuplicateColumnIds)(resolvedColumns, true); }, [resolvedColumns]);
+    var warnedDuplicateIdsRef = React.useRef(new Set());
+    React.useEffect(function () {
+        if (process.env.NODE_ENV === 'production')
+            return;
+        var newDuplicateIds = Array.from(duplicateToolboxColumnIds).filter(function (id) { return !warnedDuplicateIdsRef.current.has(id); });
+        if (newDuplicateIds.length === 0)
+            return;
+        newDuplicateIds.forEach(function (id) { return warnedDuplicateIdsRef.current.add(id); });
+        console.warn("[BGrid] Duplicate column IDs detected: ".concat(newDuplicateIds.join(', '), ". Toolbox is disabled for those columns; specify an explicit unique 'id'."));
+    }, [duplicateToolboxColumnIds]);
+    var computedColumns = React.useMemo(function () {
+        var left = 0;
+        var prevWidth = 0;
+        return __spreadArray(__spreadArray([], __read(resolvedColumns.slice(0, resolvedFrozenColumnIndex).map(function (column) {
+            var _a;
+            var columnId = (0, utils_1.getColumnId)(column);
+            return __assign(__assign({}, column), { columnId: columnId, keyToken: (0, utils_1.getColumnKeyToken)(column.key), toolbox: duplicateToolboxColumnIds.has(columnId) ? false : column.toolbox, left: -1, width: (_a = column.width) !== null && _a !== void 0 ? _a : 100 });
+        })), false), __read(resolvedColumns.slice(resolvedFrozenColumnIndex).map(function (column) {
+            var _a, _b;
+            left += prevWidth;
+            prevWidth = (_a = column.width) !== null && _a !== void 0 ? _a : 100;
+            var columnId = (0, utils_1.getColumnId)(column);
+            return __assign(__assign({}, column), { columnId: columnId, keyToken: (0, utils_1.getColumnKeyToken)(column.key), toolbox: duplicateToolboxColumnIds.has(columnId) ? false : column.toolbox, left: left, width: (_b = column.width) !== null && _b !== void 0 ? _b : 100 });
+        })), false);
+    }, [duplicateToolboxColumnIds, resolvedColumns, resolvedFrozenColumnIndex]);
+    var headerMatrixDiagnostics = React.useMemo(function () {
+        return (0, utils_1.buildHeaderMatrix)({
+            columns: computedColumns,
+            columnsGroup: resolvedColumnsGroup,
+            columnGroups: resolvedColumnGroups,
+        });
+    }, [computedColumns, resolvedColumnGroups, resolvedColumnsGroup]);
+    React.useEffect(function () {
+        if (process.env.NODE_ENV === 'production')
+            return;
+        if (headerMatrixDiagnostics.errors.length) {
+            console.warn("[BGrid] Invalid column group configuration (".concat(headerMatrixDiagnostics.errors.join(', '), "). The header falls back to a flat layout."));
+        }
+        var minimumHeaderHeight = headerMatrixDiagnostics.rowCount * 22;
+        if (resolvedColumnGroups.length > 0 && headerHeight < minimumHeaderHeight) {
+            console.warn("[BGrid] headerHeight ".concat(headerHeight, "px is smaller than the recommended ").concat(minimumHeaderHeight, "px for ").concat(headerMatrixDiagnostics.rowCount, " header rows."));
+        }
+    }, [headerHeight, headerMatrixDiagnostics, resolvedColumnGroups.length]);
+    var unknownQueryColumnIds = React.useMemo(function () {
+        if (!resolvedDataControl)
+            return [];
+        var knownIds = new Set(computedColumns.map(function (column) { return column.columnId; }));
+        return Array.from(new Set(__spreadArray(__spreadArray([], __read(resolvedDataControl.query.sortParams.map(function (param) { var _a; return (_a = param.columnId) !== null && _a !== void 0 ? _a : param.key; })), false), __read(resolvedDataControl.query.filterParams.map(function (param) { return param.columnId; })), false).filter(function (id) { return !!id && !knownIds.has(id); })));
+    }, [computedColumns, resolvedDataControl]);
+    var warnedUnknownQueryIdsRef = React.useRef(new Set());
+    React.useEffect(function () {
+        if (process.env.NODE_ENV === 'production')
+            return;
+        var newUnknownIds = unknownQueryColumnIds.filter(function (id) { return !warnedUnknownQueryIdsRef.current.has(id); });
+        if (newUnknownIds.length === 0)
+            return;
+        newUnknownIds.forEach(function (id) { return warnedUnknownQueryIdsRef.current.add(id); });
+        console.warn("[BGrid] Query references unknown column IDs: ".concat(newUnknownIds.join(', '), ". Those sort/filter entries are ignored."));
+    }, [unknownQueryColumnIds]);
+    var resolvedDataQuery = React.useMemo(function () {
+        if (resolvedDataControl) {
+            return resolvedDataControl.query;
+        }
+        if (resolvedSort) {
+            return {
+                sortParams: resolvedSort.sortParams.map(function (s, idx) {
+                    var _a;
+                    return (__assign(__assign({}, s), { index: idx, columnId: (_a = s.columnId) !== null && _a !== void 0 ? _a : (s.key ? (Array.isArray(s.key) ? "key:array:".concat(JSON.stringify(s.key)) : "key:string:".concat(s.key)) : undefined) }));
+                }),
+                filterParams: [],
+            };
+        }
+        return {
+            sortParams: [],
+            filterParams: [],
+        };
+    }, [resolvedDataControl, resolvedSort]);
+    // Process data in client mode
+    var processedResult = React.useMemo(function () {
+        if ((resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode) === 'client') {
+            return (0, utils_1.processDataQuery)({
+                data: resolvedData,
+                columns: computedColumns,
+                query: resolvedDataQuery,
+                rowKey: resolvedRowKey,
+                includeRows: false,
+            });
+        }
+        var sourceIndexByVisibleIndex = resolvedData.map(function (_, i) { return i; });
+        var visibleIndexBySourceIndex = new Map(resolvedData.map(function (_, i) { return [i, i]; }));
+        return {
+            rows: [],
+            data: resolvedData,
+            sourceIndexByVisibleIndex: sourceIndexByVisibleIndex,
+            visibleIndexBySourceIndex: visibleIndexBySourceIndex,
+        };
+    }, [computedColumns, resolvedData, resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode, resolvedDataQuery, resolvedRowKey]);
+    var displayData = processedResult.data;
+    var resolvedFrozenRowCount = pivotEnabled
+        ? 0
+        : Math.min(Math.max(Math.floor(frozenRowCount), 0), displayData.length);
+    var checkedIndexesMap = React.useMemo(function () {
+        if ((resolvedRowChecked === null || resolvedRowChecked === void 0 ? void 0 : resolvedRowChecked.checkedRowKeys) && resolvedRowKey) {
+            var map_1 = new Map();
+            resolvedRowChecked.checkedRowKeys.forEach(function (key) {
+                var fIndex = resolvedData === null || resolvedData === void 0 ? void 0 : resolvedData.findIndex(function (item, index, obj) {
+                    return (0, utils_1.getCellValueByRowKey)(resolvedRowKey, item.values) === key;
+                });
+                if (fIndex > -1) {
+                    map_1.set(fIndex, true);
+                }
+            });
+            return map_1;
+        }
+        if (resolvedRowChecked === null || resolvedRowChecked === void 0 ? void 0 : resolvedRowChecked.checkedIndexes) {
+            return new Map(resolvedRowChecked === null || resolvedRowChecked === void 0 ? void 0 : resolvedRowChecked.checkedIndexes.map(function (id) { return [id, true]; }));
+        }
+        return new Map();
+    }, [resolvedData, resolvedRowChecked === null || resolvedRowChecked === void 0 ? void 0 : resolvedRowChecked.checkedIndexes, resolvedRowChecked === null || resolvedRowChecked === void 0 ? void 0 : resolvedRowChecked.checkedRowKeys, resolvedRowKey]);
+    var sortParams = React.useMemo(function () {
+        if (resolvedDataControl) {
+            return resolvedDataControl.query.sortParams.reduce(function (acc, cur, currentIndex) {
+                var _a;
+                var key = (_a = cur.columnId) !== null && _a !== void 0 ? _a : cur.key;
+                if (key)
+                    acc[key] = __assign(__assign({}, cur), { index: currentIndex });
+                return acc;
+            }, {});
+        }
+        if (resolvedSort) {
+            return resolvedSort.sortParams.reduce(function (acc, cur, currentIndex) {
+                if (cur.key)
+                    acc[cur.key] = __assign(__assign({}, cur), { index: currentIndex });
+                return acc;
+            }, {});
+        }
+        return {};
+    }, [resolvedDataControl, resolvedSort]);
+    var resolvedStatus = React.useMemo(function () { return (0, utils_1.resolveStatusOptions)(status); }, [status]);
+    var resolvedPagination = React.useMemo(function () { return (0, utils_1.resolvePaginationViewOptions)(pagination); }, [pagination]);
+    var resolvedScrollbar = React.useMemo(function () { return (0, utils_1.resolveScrollbarOptions)(scrollbar); }, [scrollbar]);
+    var resolvedBottomBarHeight = (_d = bottomBarHeight !== null && bottomBarHeight !== void 0 ? bottomBarHeight : footerHeight) !== null && _d !== void 0 ? _d : 30;
+    var initialShowBottomBar = React.useMemo(function () {
+        return (0, utils_1.shouldRenderBottomBar)({
+            hasPage: !!resolvedPage,
+            scrollbar: resolvedScrollbar,
+            status: resolvedStatus,
+            pagination: resolvedPagination,
+        });
+    }, [resolvedPage, resolvedScrollbar, resolvedStatus, resolvedPagination]);
+    React.useEffect(function () {
+        if (process.env.NODE_ENV !== 'production' && bottomBarHeight !== undefined && footerHeight !== undefined) {
+            console.warn('[BGrid] Both bottomBarHeight and footerHeight were provided. bottomBarHeight takes precedence.');
+        }
+    }, [bottomBarHeight, footerHeight]);
+    var initialStoreState = React.useMemo(function () {
+        var _a, _b;
+        var initialWidth = width !== undefined ? Math.max(width, 100) : 0;
+        var initialHeight = height !== undefined ? Math.max(height, 100) : 0;
+        var containerBorderWidth = 1;
+        var contentBodyHeight = initialHeight > 0
+            ? Math.max(initialHeight -
+                headerHeight -
+                (initialShowBottomBar ? resolvedBottomBarHeight : 0) -
+                (resolvedSummary ? summaryHeight : 0) -
+                containerBorderWidth * 2, 0)
+            : 0;
+        var displayItemCount = contentBodyHeight > 0 ? Math.ceil(contentBodyHeight / (itemHeight + itemPadding * 2)) : 0;
+        var visibleCheckedCount = processedResult.sourceIndexByVisibleIndex.reduce(function (count, sourceIndex) { return count + (checkedIndexesMap.has(sourceIndex) ? 1 : 0); }, 0);
+        var checkedAll = displayData.length === 0
+            ? false
+            : visibleCheckedCount === displayData.length
+                ? true
+                : visibleCheckedCount > 0
+                    ? 'indeterminate'
+                    : false;
+        return {
+            width: initialWidth,
+            height: initialHeight,
+            headerHeight: headerHeight,
+            footerHeight: footerHeight,
+            bottomBarHeight: resolvedBottomBarHeight,
+            scrollbar: resolvedScrollbar,
+            status: resolvedStatus,
+            pagination: resolvedPagination,
+            summaryHeight: summaryHeight,
+            itemHeight: itemHeight,
+            itemPadding: itemPadding,
+            frozenColumnIndex: resolvedFrozenColumnIndex,
+            frozenRowCount: resolvedFrozenRowCount,
+            frozenRowsHeight: resolvedFrozenRowCount * (itemHeight + itemPadding * 2),
+            frozenColumnsWidth: (0, utils_1.getFrozenColumnsWidth)({
+                showLineNumber: resolvedShowLineNumber,
+                rowChecked: resolvedRowChecked,
+                itemHeight: itemHeight,
+                frozenColumnIndex: resolvedFrozenColumnIndex,
+                columns: computedColumns,
+                dataLength: displayData.length,
+                reorderable: (_a = resolvedReorder === null || resolvedReorder === void 0 ? void 0 : resolvedReorder.enabled) !== null && _a !== void 0 ? _a : false,
+            }),
+            columns: computedColumns,
+            columnsGroup: resolvedColumnsGroup,
+            columnGroups: resolvedColumnGroups,
+            data: displayData,
+            sourceData: resolvedData,
+            sourceIndexByVisibleIndex: processedResult.sourceIndexByVisibleIndex,
+            visibleIndexBySourceIndex: processedResult.visibleIndexBySourceIndex,
+            contentBodyHeight: contentBodyHeight,
+            displayItemCount: displayItemCount,
+            checkedIndexesMap: checkedIndexesMap,
+            checkedAll: checkedAll,
+            rowChecked: resolvedRowChecked,
+            sort: resolvedSort,
+            sortParams: sortParams,
+            dataQuery: resolvedDataQuery,
+            dataControl: resolvedDataControl,
+            icons: icons,
+            searchOptions: resolvedSearchOptions,
+            contextMenuOptions: resolvedContextMenuOptions,
+            page: resolvedPage,
+            displayPaginationLength: resolvedPage ? (_b = resolvedPage.displayPaginationLength) !== null && _b !== void 0 ? _b : 5 : 0,
+            loading: loading,
+            spinning: spinning,
+            scrollTop: scrollTop,
+            scrollLeft: scrollLeft,
+            rowKey: resolvedRowKey,
+            selectedRowKey: resolvedSelectedRowKey,
+            editable: resolvedEditable,
+            editTrigger: editTrigger,
+            showLineNumber: resolvedShowLineNumber,
+            msg: msg,
+            getRowClassName: resolvedGetRowClassName,
+            cellMergeOptions: resolvedCellMergeOptions,
+            cellNavigationOptions: cellNavigationOptions,
+            variant: variant,
+            summary: resolvedSummary,
+            columnSortable: resolvedColumnSortable,
+            reorder: resolvedReorder,
+            className: className,
+            style: style,
+            onClick: resolvedOnClick,
+            onChangeColumns: resolvedOnChangeColumns,
+            onChangeData: resolvedOnChangeData,
+        };
+    }, [
+        cellNavigationOptions,
+        width,
+        height,
+        headerHeight,
+        footerHeight,
+        resolvedBottomBarHeight,
+        resolvedScrollbar,
+        resolvedStatus,
+        resolvedPagination,
+        summaryHeight,
+        itemHeight,
+        itemPadding,
+        resolvedPage,
+        resolvedSummary,
+        checkedIndexesMap,
+        displayData,
+        resolvedData,
+        processedResult.sourceIndexByVisibleIndex,
+        processedResult.visibleIndexBySourceIndex,
+        resolvedFrozenColumnIndex,
+        resolvedFrozenRowCount,
+        resolvedShowLineNumber,
+        resolvedRowChecked,
+        computedColumns,
+        resolvedReorder,
+        resolvedColumnsGroup,
+        resolvedColumnGroups,
+        resolvedSort,
+        sortParams,
+        resolvedDataQuery,
+        resolvedDataControl,
+        icons,
+        resolvedSearchOptions,
+        resolvedContextMenuOptions,
+        loading,
+        spinning,
+        scrollTop,
+        scrollLeft,
+        resolvedRowKey,
+        resolvedSelectedRowKey,
+        resolvedEditable,
+        editTrigger,
+        msg,
+        resolvedGetRowClassName,
+        resolvedCellMergeOptions,
+        variant,
+        resolvedColumnSortable,
+        className,
+        style,
+        resolvedOnClick,
+        resolvedOnChangeColumns,
+        resolvedOnChangeData,
+        initialShowBottomBar,
+    ]);
+    return (React.createElement(store_1.AppStoreProvider, { initialState: initialStoreState },
+        React.createElement(Table_1.default, { columns: computedColumns,
+            columnsGroup: resolvedColumnsGroup,
+            columnGroups: resolvedColumnGroups,
+            onChangeColumns: resolvedOnChangeColumns, width: width, height: height, className: className, style: style, loading: loading, spinning: spinning, scrollLeft: scrollLeft, scrollTop: scrollTop, headerHeight: headerHeight, footerHeight: footerHeight, bottomBarHeight: resolvedBottomBarHeight,
+            scrollbar: resolvedScrollbar,
+            status: resolvedStatus,
+            pagination: resolvedPagination, summaryHeight: summaryHeight, itemHeight: itemHeight, itemPadding: itemPadding, frozenColumnIndex: resolvedFrozenColumnIndex,
+            frozenRowCount: resolvedFrozenRowCount,
+            rowChecked: resolvedRowChecked, checkedIndexesMap: checkedIndexesMap, sort: resolvedSort, sortParams: sortParams, dataQuery: resolvedDataQuery,
+            dataControl: resolvedDataControl, icons: icons, searchOptions: resolvedSearchOptions,
+            contextMenuOptions: resolvedContextMenuOptions,
+            page: resolvedPage,
+            data: displayData,
+            sourceData: resolvedData,
+            sourceIndexByVisibleIndex: processedResult.sourceIndexByVisibleIndex,
+            visibleIndexBySourceIndex: processedResult.visibleIndexBySourceIndex,
+            onClick: resolvedOnClick,
+            rowKey: resolvedRowKey,
+            selectedRowKey: resolvedSelectedRowKey,
+            editable: resolvedEditable, editTrigger: editTrigger, onChangeData: resolvedOnChangeData,
+            showLineNumber: resolvedShowLineNumber, msg: msg, getRowClassName: resolvedGetRowClassName,
+            cellMergeOptions: resolvedCellMergeOptions,
+            cellSelectionOptions: resolvedCellSelectionOptions, cellNavigationOptions: cellNavigationOptions, variant: variant, summary: resolvedSummary,
+            columnSortable: resolvedColumnSortable,
+            reorder: resolvedReorder })));
+}