beautiful-grid 1.0.11 → 1.0.13

package/cjs/BGrid.js

@@ -77,6 +77,7 @@ var React = __importStar(require("react"));
 var Table_1 = __importDefault(require("./components/Table"));
 var utils_1 = require("./utils");
 var store_1 = require("./store");
+var TreeContext_1 = require("./components/TreeContext");
 function computeModelColumns(columns, frozenColumnIndex, duplicateToolboxColumnIds) {
     var left = 0;
     var previousWidth = 0;
@@ -91,8 +92,13 @@ function computeModelColumns(columns, frozenColumnIndex, duplicateToolboxColumnI
     });
 }
 function BGrid(_a) {
-    var _b, _c, _d;
-    var ref = _a.ref, 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, getRowHeight = _a.getRowHeight, 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, disabled = _a.disabled, 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, columnVisibility = _a.columnVisibility, searchOptions = _a.searchOptions, contextMenuOptions = _a.contextMenuOptions;
+    var _b, _c, _d, _e;
+    var ref = _a.ref, width = _a.width, height = _a.height, _f = _a.headerHeight, headerHeight = _f === void 0 ? 30 : _f, footerHeight = _a.footerHeight, _g = _a.summaryHeight, summaryHeight = _g === void 0 ? 30 : _g, _h = _a.itemHeight, itemHeight = _h === void 0 ? 15 : _h, _j = _a.itemPadding, itemPadding = _j === void 0 ? 7 : _j, getRowHeight = _a.getRowHeight, columns = _a.columns, columnsGroup = _a.columnsGroup, columnGroups = _a.columnGroups, onChangeColumns = _a.onChangeColumns, _k = _a.frozenColumnIndex, frozenColumnIndex = _k === void 0 ? 0 : _k, _l = _a.frozenRowCount, frozenRowCount = _l === void 0 ? 0 : _l, _m = _a.data, data = _m === void 0 ? [] : _m, page = _a.page, scrollbar = _a.scrollbar, status = _a.status, pagination = _a.pagination, bottomBarHeight = _a.bottomBarHeight, _o = _a.scrollTop, scrollTop = _o === void 0 ? 0 : _o, _p = _a.scrollLeft, scrollLeft = _p === void 0 ? 0 : _p, className = _a.className, style = _a.style, rowChecked = _a.rowChecked, sort = _a.sort, onClick = _a.onClick, _q = _a.loading, loading = _q === void 0 ? false : _q, spinning = _a.spinning, disabled = _a.disabled, rowKey = _a.rowKey, selectedRowKey = _a.selectedRowKey, editable = _a.editable, onChangeData = _a.onChangeData, showLineNumber = _a.showLineNumber, msg = _a.msg, getRowClassName = _a.getRowClassName, _r = _a.editTrigger, editTrigger = _r === void 0 ? 'dblclick' : _r, 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, columnVisibility = _a.columnVisibility, searchOptions = _a.searchOptions, contextMenuOptions = _a.contextMenuOptions, tree = _a.tree;
+    var _s = __read(React.useState(function () {
+        var _a;
+        return __spreadArray([], __read(((_a = tree === null || tree === void 0 ? void 0 : tree.defaultExpandedRowKeys) !== null && _a !== void 0 ? _a : [])), false);
+    }), 2), uncontrolledExpandedRowKeys = _s[0], setUncontrolledExpandedRowKeys = _s[1];
+    var expandedRowKeys = (_b = tree === null || tree === void 0 ? void 0 : tree.expandedRowKeys) !== null && _b !== void 0 ? _b : uncontrolledExpandedRowKeys;
     var warnedSearchControlledRef = React.useRef({
         open: false,
         query: false,
@@ -106,10 +112,10 @@ function BGrid(_a) {
         });
     }, [data, pivot]);
     var pivotEnabled = !!pivotData;
-    var resolvedColumns = ((_b = pivotData === null || pivotData === void 0 ? void 0 : pivotData.columns) !== null && _b !== void 0 ? _b : columns);
+    var resolvedColumns = ((_c = pivotData === null || pivotData === void 0 ? void 0 : pivotData.columns) !== null && _c !== void 0 ? _c : columns);
     var visibilityOptions = typeof columnVisibility === 'object' ? columnVisibility : undefined;
     var visibilityEnabled = columnVisibility === true || (visibilityOptions !== undefined && visibilityOptions.enabled !== false);
-    var _r = __read(React.useState(function () { var _a; return Array.from(new Set((_a = visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.defaultHiddenColumnIds) !== null && _a !== void 0 ? _a : [])); }), 2), uncontrolledHiddenColumnIds = _r[0], setUncontrolledHiddenColumnIds = _r[1];
+    var _t = __read(React.useState(function () { var _a; return Array.from(new Set((_a = visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.defaultHiddenColumnIds) !== null && _a !== void 0 ? _a : [])); }), 2), uncontrolledHiddenColumnIds = _t[0], setUncontrolledHiddenColumnIds = _t[1];
     var hiddenColumnIds = React.useMemo(function () {
         var _a;
         if (!visibilityEnabled)
@@ -145,7 +151,7 @@ function BGrid(_a) {
         resolvedColumnsGroup,
         summary,
     ]);
-    var resolvedData = (_c = pivotData === null || pivotData === void 0 ? void 0 : pivotData.data) !== null && _c !== void 0 ? _c : data;
+    var resolvedData = (_d = pivotData === null || pivotData === void 0 ? void 0 : pivotData.data) !== null && _d !== void 0 ? _d : data;
     var resolvedPage = pivotEnabled ? undefined : page;
     var resolvedFrozenColumnIndex = visibilityProjection.frozenColumnIndex;
     var resolvedRowChecked = pivotEnabled ? undefined : rowChecked;
@@ -153,13 +159,15 @@ function BGrid(_a) {
     var resolvedDisabled = !!disabled;
     var resolvedOnClick = pivotEnabled || resolvedDisabled ? undefined : onClick;
     var baseOnChangeColumns = pivotEnabled ? undefined : onChangeColumns;
-    var resolvedOnChangeData = pivotEnabled ? undefined : onChangeData;
+    var baseOnChangeData = pivotEnabled ? undefined : onChangeData;
     var resolvedRowKey = pivotEnabled ? undefined : rowKey;
     var resolvedSelectedRowKey = pivotEnabled ? undefined : selectedRowKey;
     var resolvedEditable = pivotEnabled || resolvedDisabled ? false : editable;
     var resolvedShowLineNumber = pivotEnabled ? false : showLineNumber;
     var resolvedGetRowClassName = pivotEnabled ? undefined : getRowClassName;
-    var resolvedCellMergeOptions = visibilityProjection.cellMergeOptions;
+    var requestedTreeEnabled = !!tree && tree.enabled !== false;
+    var treeEnabled = requestedTreeEnabled && !pivotEnabled && resolvedRowKey !== undefined;
+    var resolvedCellMergeOptions = treeEnabled ? undefined : visibilityProjection.cellMergeOptions;
     var resolvedCellSelectionOptions = resolvedDisabled
         ? __assign(__assign({}, cellSelectionOptions), { enabled: false }) : cellSelectionOptions;
     var resolvedSummary = visibilityProjection.summary;
@@ -171,11 +179,11 @@ function BGrid(_a) {
     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 || resolvedDisabled
+        return pivotEnabled || resolvedDisabled || treeEnabled
             ? undefined
             : (hasActiveClientQuery || frozenRowCount > 0) && reorder
                 ? __assign(__assign({}, reorder), { enabled: false }) : reorder;
-    }, [frozenRowCount, hasActiveClientQuery, pivotEnabled, reorder, resolvedDisabled]);
+    }, [frozenRowCount, hasActiveClientQuery, pivotEnabled, reorder, resolvedDisabled, treeEnabled]);
     // Development warnings
     React.useEffect(function () {
         var _a, _b;
@@ -205,6 +213,18 @@ function BGrid(_a) {
                 warnedSearchControlledRef.current.pivotContextMenu = true;
                 console.warn('[BGrid] contextMenuOptions is disabled while pivot mode is active.');
             }
+            if (requestedTreeEnabled && rowKey === undefined) {
+                console.warn('[BGrid] tree requires rowKey. Falling back to flat rows.');
+            }
+            if (pivotEnabled && requestedTreeEnabled) {
+                console.warn('[BGrid] tree is disabled while pivot mode is active.');
+            }
+            if (treeEnabled && cellMergeOptions) {
+                console.warn('[BGrid] cellMergeOptions is disabled while tree mode is active.');
+            }
+            if (treeEnabled && (reorder === null || reorder === void 0 ? void 0 : reorder.enabled)) {
+                console.warn('[BGrid] Row reordering is disabled while tree mode is active.');
+            }
             if (hasHiddenColumns && columnSortable) {
                 console.warn('[BGrid] Column reordering is disabled while columns are hidden.');
             }
@@ -241,6 +261,10 @@ function BGrid(_a) {
         hasHiddenColumns,
         visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.hiddenColumnIds,
         visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.onChange,
+        cellMergeOptions,
+        requestedTreeEnabled,
+        rowKey,
+        treeEnabled,
     ]);
     var duplicateToolboxColumnIds = React.useMemo(function () {
         var duplicates = (0, utils_1.findDuplicateColumnIds)(resolvedColumns, true);
@@ -296,9 +320,33 @@ function BGrid(_a) {
         resolvedColumns,
         visibilityEnabled,
     ]);
+    var resolvedTreeColumnId = React.useMemo(function () {
+        if (!treeEnabled || visibilityProjection.columns.length === 0)
+            return undefined;
+        var requestedId = tree === null || tree === void 0 ? void 0 : tree.treeColumnId;
+        return requestedId &&
+            visibilityProjection.columns.some(function (column) { return (0, utils_1.getColumnId)(column) === requestedId; })
+            ? requestedId
+            : (0, utils_1.getColumnId)(visibilityProjection.columns[0]);
+    }, [tree === null || tree === void 0 ? void 0 : tree.treeColumnId, treeEnabled, visibilityProjection.columns]);
     var computedColumns = React.useMemo(function () {
-        return computeModelColumns(visibilityProjection.columns, resolvedFrozenColumnIndex, duplicateToolboxColumnIds);
-    }, [duplicateToolboxColumnIds, resolvedFrozenColumnIndex, visibilityProjection.columns]);
+        var columns = computeModelColumns(visibilityProjection.columns, resolvedFrozenColumnIndex, duplicateToolboxColumnIds);
+        if (!resolvedTreeColumnId)
+            return columns;
+        return columns.map(function (column) { return (column.columnId === resolvedTreeColumnId ? __assign(__assign({}, column), { treeCell: true }) : column); });
+    }, [duplicateToolboxColumnIds, resolvedFrozenColumnIndex, resolvedTreeColumnId, visibilityProjection.columns]);
+    var warnedTreeColumnIdRef = React.useRef(undefined);
+    React.useEffect(function () {
+        if (process.env.NODE_ENV === 'production' ||
+            !treeEnabled ||
+            !(tree === null || tree === void 0 ? void 0 : tree.treeColumnId) ||
+            tree.treeColumnId === resolvedTreeColumnId ||
+            warnedTreeColumnIdRef.current === tree.treeColumnId) {
+            return;
+        }
+        warnedTreeColumnIdRef.current = tree.treeColumnId;
+        console.warn("[BGrid] tree.treeColumnId \"".concat(tree.treeColumnId, "\" is not visible. Falling back to the first visible column."));
+    }, [resolvedTreeColumnId, tree === null || tree === void 0 ? void 0 : tree.treeColumnId, treeEnabled]);
     var queryColumns = React.useMemo(function () { return computeModelColumns(resolvedColumns, pivotEnabled ? 0 : frozenColumnIndex, duplicateToolboxColumnIds); }, [duplicateToolboxColumnIds, frozenColumnIndex, pivotEnabled, resolvedColumns]);
     var projectedOnChangeColumns = React.useCallback(function (visibleColumnIndex, info) {
         var _a;
@@ -376,8 +424,9 @@ function BGrid(_a) {
             filterParams: [],
         };
     }, [resolvedDataControl, resolvedSort]);
-    // Process data in client mode
-    var processedResult = React.useMemo(function () {
+    // Apply the existing client query first. Tree mode uses its result as sibling order
+    // and as the direct-match set, then restores the hierarchy during projection.
+    var queryProcessedResult = React.useMemo(function () {
         if ((resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode) === 'client') {
             return (0, utils_1.processDataQuery)({
                 data: resolvedData,
@@ -394,7 +443,109 @@ function BGrid(_a) {
             visibleIndexBySourceIndex: undefined,
         };
     }, [queryColumns, resolvedData, resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode, resolvedDataQuery, resolvedRowKey]);
+    var treeProjection = React.useMemo(function () {
+        if (!treeEnabled || !tree || resolvedRowKey === undefined)
+            return undefined;
+        var clientQuery = (resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode) === 'client';
+        return (0, utils_1.projectTreeData)({
+            data: resolvedData,
+            rowKey: resolvedRowKey,
+            parentRowKey: tree.parentRowKey,
+            expandedRowKeys: expandedRowKeys,
+            includedSourceIndexes: clientQuery && resolvedDataQuery.filterParams.length > 0
+                ? queryProcessedResult.sourceIndexByVisibleIndex
+                : undefined,
+            orderedSourceIndexes: clientQuery && resolvedDataQuery.sortParams.length > 0
+                ? queryProcessedResult.sourceIndexByVisibleIndex
+                : undefined,
+        });
+    }, [
+        expandedRowKeys,
+        queryProcessedResult.sourceIndexByVisibleIndex,
+        resolvedData,
+        resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode,
+        resolvedDataQuery.filterParams.length,
+        resolvedDataQuery.sortParams.length,
+        resolvedRowKey,
+        tree,
+        treeEnabled,
+    ]);
+    React.useEffect(function () {
+        if (process.env.NODE_ENV === 'production' || !treeProjection || treeProjection.valid)
+            return;
+        console.warn("[BGrid] Invalid tree data (".concat(treeProjection.diagnostics.join(', '), "). Falling back to flat rows."));
+    }, [treeProjection]);
+    var resolvedTreeProjection = (treeProjection === null || treeProjection === void 0 ? void 0 : treeProjection.valid) ? treeProjection : undefined;
+    var processedResult = resolvedTreeProjection
+        ? {
+            rows: [],
+            data: resolvedTreeProjection.data,
+            sourceIndexByVisibleIndex: resolvedTreeProjection.sourceIndexByVisibleIndex,
+            visibleIndexBySourceIndex: resolvedTreeProjection.visibleIndexBySourceIndex,
+        }
+        : queryProcessedResult;
     var displayData = processedResult.data;
+    var resolvedOnChangeData = React.useMemo(function () {
+        if (!baseOnChangeData)
+            return undefined;
+        if (!resolvedTreeProjection)
+            return baseOnChangeData;
+        return function (index, columnIndex, item, column, meta) {
+            var treeMeta = resolvedTreeProjection.metaBySourceIndex.get(index);
+            if (!meta || !treeMeta) {
+                baseOnChangeData(index, columnIndex, item, column, meta);
+                return;
+            }
+            baseOnChangeData(index, columnIndex, item, column, __assign(__assign({}, meta), { tree: {
+                    rowKey: treeMeta.rowKey,
+                    parentRowKey: treeMeta.parentRowKey,
+                    sourceIndex: treeMeta.sourceIndex,
+                    depth: treeMeta.depth,
+                    path: (0, utils_1.getTreeRowPath)(resolvedTreeProjection.metaBySourceIndex, index),
+                } }));
+        };
+    }, [baseOnChangeData, resolvedTreeProjection]);
+    var toggleTreeRow = React.useCallback(function (meta) {
+        var _a;
+        if (resolvedDisabled || !tree || !meta.hasChildren)
+            return;
+        var nextExpanded = meta.expanded
+            ? expandedRowKeys.filter(function (key) { return !Object.is(key, meta.rowKey); })
+            : expandedRowKeys.some(function (key) { return Object.is(key, meta.rowKey); })
+                ? __spreadArray([], __read(expandedRowKeys), false) : __spreadArray(__spreadArray([], __read(expandedRowKeys), false), [meta.rowKey], false);
+        if (tree.expandedRowKeys === undefined)
+            setUncontrolledExpandedRowKeys(nextExpanded);
+        var item = resolvedData[meta.sourceIndex];
+        if (item) {
+            (_a = tree.onExpandedRowKeysChange) === null || _a === void 0 ? void 0 : _a.call(tree, nextExpanded, {
+                rowKey: meta.rowKey,
+                expanded: !meta.expanded,
+                item: item,
+                sourceIndex: meta.sourceIndex,
+            });
+        }
+    }, [expandedRowKeys, resolvedData, resolvedDisabled, tree]);
+    var treeContextValue = React.useMemo(function () {
+        var _a, _b, _c;
+        if (!resolvedTreeProjection || !resolvedTreeColumnId || resolvedRowKey === undefined || !tree)
+            return undefined;
+        var indentSize = Number.isFinite(tree.indentSize) && ((_a = tree.indentSize) !== null && _a !== void 0 ? _a : -1) >= 0 ? tree.indentSize : 16;
+        return {
+            treeColumnId: resolvedTreeColumnId,
+            indentSize: indentSize,
+            icons: tree.icons,
+            expandAriaLabel: (_b = tree.expandAriaLabel) !== null && _b !== void 0 ? _b : 'Expand row',
+            collapseAriaLabel: (_c = tree.collapseAriaLabel) !== null && _c !== void 0 ? _c : 'Collapse row',
+            disabled: resolvedDisabled,
+            metaByRowKey: resolvedTreeProjection.metaByRowKey,
+            metaBySourceIndex: resolvedTreeProjection.metaBySourceIndex,
+            getRowKey: function (values) {
+                var key = (0, utils_1.getCellValueByRowKey)(resolvedRowKey, values);
+                return key === undefined || key === null ? undefined : key;
+            },
+            toggle: toggleTreeRow,
+        };
+    }, [resolvedDisabled, resolvedRowKey, resolvedTreeColumnId, resolvedTreeProjection, toggleTreeRow, tree]);
     var rowHeightMetrics = React.useMemo(function () { return (0, utils_1.createRowHeightMetrics)(displayData, itemHeight + itemPadding * 2, getRowHeight); }, [displayData, getRowHeight, itemHeight, itemPadding]);
     var resolvedFrozenRowCount = pivotEnabled
         ? 0
@@ -443,7 +594,7 @@ function BGrid(_a) {
     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 resolvedBottomBarHeight = (_e = bottomBarHeight !== null && bottomBarHeight !== void 0 ? bottomBarHeight : footerHeight) !== null && _e !== void 0 ? _e : 30;
     var initialShowBottomBar = React.useMemo(function () {
         return (0, utils_1.shouldRenderBottomBar)({
             hasPage: !!resolvedPage,
@@ -607,29 +758,32 @@ function BGrid(_a) {
         initialShowBottomBar,
     ]);
     return (React.createElement(store_1.AppStoreProvider, { initialState: initialStoreState },
-        React.createElement(Table_1.default, { ref: ref, columns: computedColumns,
-            columnsGroup: visibilityProjection.columnsGroup,
-            columnGroups: visibilityProjection.columnGroups,
-            onChangeColumns: resolvedOnChangeColumns, width: width, height: height, className: className, style: style, loading: loading, disabled: resolvedDisabled, spinning: spinning, scrollLeft: scrollLeft, scrollTop: scrollTop, headerHeight: headerHeight, footerHeight: footerHeight, bottomBarHeight: resolvedBottomBarHeight,
-            scrollbar: resolvedScrollbar,
-            status: resolvedStatus,
-            pagination: resolvedPagination, summaryHeight: summaryHeight, itemHeight: itemHeight, itemPadding: itemPadding, rowHeightMetrics: rowHeightMetrics, frozenColumnIndex: resolvedFrozenColumnIndex,
-            frozenRowCount: resolvedFrozenRowCount,
-            rowChecked: resolvedRowChecked, checkedIndexesMap: checkedIndexesMap, sort: resolvedSort, sortParams: sortParams, dataQuery: resolvedDataQuery,
-            dataControl: resolvedDataControl, icons: icons, columnVisibilityState: columnVisibilityState, 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 })));
+        React.createElement(TreeContext_1.TreeContext.Provider, { value: treeContextValue },
+            React.createElement(Table_1.default, { ref: ref, sourceColumns: resolvedColumns,
+                columns: computedColumns,
+                columnsGroup: visibilityProjection.columnsGroup,
+                columnGroups: visibilityProjection.columnGroups,
+                onChangeColumns: resolvedOnChangeColumns, width: width, height: height, className: className, style: style, loading: loading, disabled: resolvedDisabled, spinning: spinning, scrollLeft: scrollLeft, scrollTop: scrollTop, headerHeight: headerHeight, footerHeight: footerHeight, bottomBarHeight: resolvedBottomBarHeight,
+                scrollbar: resolvedScrollbar,
+                status: resolvedStatus,
+                pagination: resolvedPagination, summaryHeight: summaryHeight, itemHeight: itemHeight, itemPadding: itemPadding, rowHeightMetrics: rowHeightMetrics, frozenColumnIndex: resolvedFrozenColumnIndex,
+                frozenRowCount: resolvedFrozenRowCount,
+                rowChecked: resolvedRowChecked, checkedIndexesMap: checkedIndexesMap, sort: resolvedSort, sortParams: sortParams, dataQuery: resolvedDataQuery,
+                dataControl: resolvedDataControl, icons: icons, columnVisibilityState: columnVisibilityState, 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,
+                treeEnabled: !!treeContextValue }))));
 }

package/cjs/components/Table.js

@@ -166,6 +166,7 @@ function Table(props) {
     var _a;
     var _this = this;
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+    var store = (0, store_1.useAppStoreApi)();
     var cellSelectionOptions = props.cellSelectionOptions, onChangeData = props.onChangeData, sourceIndexByVisibleIndex = props.sourceIndexByVisibleIndex;
     var cellSelectionEnabled = (_b = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.enabled) !== null && _b !== void 0 ? _b : true;
     var rowKeyRegistryState = (0, react_1.useRef)({
@@ -657,12 +658,46 @@ function Table(props) {
     var scrollPropsRef = (0, react_1.useRef)({ top: props.scrollTop, left: props.scrollLeft });
     var syncedDataPropRef = (0, react_1.useRef)(props.data);
     var _23 = __read(React.useState(null), 2), rowScrollRequest = _23[0], setRowScrollRequest = _23[1];
+    var sourceColumnsRef = (0, react_1.useRef)(props.sourceColumns);
+    sourceColumnsRef.current = props.sourceColumns;
+    var getCurrentExportData = (0, react_1.useCallback)(function (options) {
+        var state = store.getState();
+        return (0, utils_1.createGridExportData)({
+            options: options,
+            columns: state.columns,
+            sourceColumns: sourceColumnsRef.current,
+            data: state.data,
+            sourceData: state.sourceData,
+            sourceIndexByVisibleIndex: state.sourceIndexByVisibleIndex,
+            visibleIndexBySourceIndex: state.visibleIndexBySourceIndex,
+            checkedIndexesMap: state.checkedIndexesMap,
+            rowKey: state.rowKey,
+        });
+    }, [store]);
     React.useImperativeHandle(props.ref, function () { return ({
         scrollToRow: function (rowIndex, options) {
             var _a;
             setRowScrollRequest({ rowIndex: rowIndex, align: (_a = options === null || options === void 0 ? void 0 : options.align) !== null && _a !== void 0 ? _a : 'nearest' });
         },
-    }); }, []);
+        getExportData: function (options) {
+            return getCurrentExportData(options);
+        },
+        exportCsv: function (options) {
+            var _a;
+            var exportData = getCurrentExportData(options);
+            var csv = (0, utils_1.serializeGridExportDataToCsv)(exportData, options);
+            (0, utils_1.downloadCsv)(csv, (_a = options === null || options === void 0 ? void 0 : options.fileName) !== null && _a !== void 0 ? _a : 'export.csv');
+        },
+        exportExcel: function (options) {
+            var exportData = getCurrentExportData(options);
+            void Promise.resolve().then(function () { return __importStar(require('../utils/exportExcel')); }).then(function (_a) {
+                var _b;
+                var serializeGridExportDataToExcel = _a.serializeGridExportDataToExcel, downloadExcel = _a.downloadExcel;
+                var excelBytes = serializeGridExportDataToExcel(exportData, options);
+                downloadExcel(excelBytes, (_b = options === null || options === void 0 ? void 0 : options.fileName) !== null && _b !== void 0 ? _b : 'export.xlsx');
+            });
+        },
+    }); }, [getCurrentExportData]);
     var scrollRafRef = (0, react_1.useRef)(null);
     var scrollIdleTimerRef = (0, react_1.useRef)(null);
     var selectionAutoScrollRafRef = (0, react_1.useRef)(null);
@@ -2353,7 +2388,7 @@ function Table(props) {
         };
     }, []);
     return (React.createElement(EditorPortalRoot_1.EditorPortalContext.Provider, { value: editorPortalContext },
-        React.createElement(Container, { ref: containerRef, role: 'grid', style: __assign(__assign({}, style), (_a = { width: width, height: height, borderWidth: "".concat(containerBorderWidth, "px") }, _a['--bgrid-virtual-row-height'] = "".concat(trHeight, "px"), _a)), className: className, tabIndex: 0, "aria-disabled": disabled ? 'true' : undefined, onFocus: function (event) {
+        React.createElement(Container, { ref: containerRef, role: props.treeEnabled ? 'treegrid' : 'grid', style: __assign(__assign({}, style), (_a = { width: width, height: height, borderWidth: "".concat(containerBorderWidth, "px") }, _a['--bgrid-virtual-row-height'] = "".concat(trHeight, "px"), _a)), className: className, tabIndex: 0, "aria-disabled": disabled ? 'true' : undefined, onFocus: function (event) {
                 if (event.target !== event.currentTarget)
                     return;
                 var gateway = event.currentTarget.querySelector('[data-bgrid-text-editor-gateway="true"]');

package/cjs/components/TableBodyCell.js

@@ -38,6 +38,7 @@ var React = __importStar(require("react"));
 var PluginCellEditor_1 = require("./PluginCellEditor");
 var CellEditorIcon_1 = require("./CellEditorIcon");
 var CheckboxCellEditor_1 = require("./CheckboxCellEditor");
+var TreeCell_1 = require("./TreeCell");
 function Cell(_a) {
     var _b, _c, _d;
     var index = _a.index, _e = _a.hostIndex, hostIndex = _e === void 0 ? index : _e, columnIndex = _a.columnIndex, column = _a.column, item = _a.item, valueByRowKey = _a.valueByRowKey, handleSave = _a.handleSave, handleCancel = _a.handleCancel, handleMove = _a.handleMove, editable = _a.editable, cellEditable = _a.cellEditable, _f = _a.interactionEditing, interactionEditing = _f === void 0 ? false : _f, editSession = _a.editSession;
@@ -74,7 +75,7 @@ function Cell(_a) {
         content = renderSafeCellValue(valueByRowKey);
     }
     return (React.createElement("div", { className: isPluginEditorActive ? 'bgrid-cell-content bgrid-cell-content-plugin-editor' : 'bgrid-cell-content' },
-        React.createElement("div", { className: 'bgrid-cell-value' }, content),
+        React.createElement("div", { className: 'bgrid-cell-value' }, column.treeCell ? (React.createElement(TreeCell_1.TreeCell, { column: column, item: item }, content)) : (content)),
         column.editorIcon && ((_d = column.editor) === null || _d === void 0 ? void 0 : _d.type) !== 'checkbox' && cellEditable && (React.createElement(CellEditorIcon_1.CellEditorIcon, { hostCell: { rowIndex: hostIndex, columnIndex: columnIndex }, index: index, columnIndex: columnIndex, column: column, item: item, value: valueByRowKey, editing: interactionEditing }))));
 }
 function renderSafeCellValue(value, preserveRenderableArrays) {

package/cjs/components/TableBodyRow.js

@@ -90,6 +90,7 @@ var utils_1 = require("../utils");
 var TableBodyCell_1 = require("./TableBodyCell");
 var RowSelector_1 = __importDefault(require("./RowSelector"));
 var GripVertical_1 = require("./GripVertical");
+var TreeContext_1 = require("./TreeContext");
 function TableBodyCellItemInner(_a) {
     var _this = this;
     var _b, _c, _d, _e;
@@ -167,9 +168,12 @@ function TableBodyRowInner(_a) {
     var _this = this;
     var _d;
     var item = _a.item, data = _a.data, ri = _a.ri, sourceIndex = _a.sourceIndex, columns = _a.columns, startCIdx = _a.startCIdx, endCIdx = _a.endCIdx, frozenColumnIndex = _a.frozenColumnIndex, isLeftRegion = _a.isLeftRegion, showLineNumber = _a.showLineNumber, hasRowChecked = _a.hasRowChecked, isRadio = _a.isRadio, checked = _a.checked, rowCheckedDisabled = _a.rowCheckedDisabled, rowStatus = _a.rowStatus, active = _a.active, className = _a.className, resolvedRowHeight = _a.resolvedRowHeight, itemHeight = _a.itemHeight, itemPadding = _a.itemPadding, editable = _a.editable, disabled = _a.disabled, editTrigger = _a.editTrigger, hasOnClick = _a.hasOnClick, cellMergeOptions = _a.cellMergeOptions, mergeColumns = _a.mergeColumns, odd = _a.odd, variant = _a.variant, rowReorderEnabled = _a.rowReorderEnabled, rowReorderRole = _a.rowReorderRole, rowReorderPhase = _a.rowReorderPhase, rowReorderDirection = _a.rowReorderDirection, rowReorderOffset = _a.rowReorderOffset, reorder = _a.reorder, reorderingInfo = _a.reorderingInfo, searchMatchTokens = _a.searchMatchTokens, currentSearchToken = _a.currentSearchToken, isRowEditing = _a.isRowEditing, cellInteractionSession = _a.cellInteractionSession, handleClick = _a.handleClick, setEditItem = _a.setEditItem, setItemValue = _a.setItemValue, handleMoveEditFocus = _a.handleMoveEditFocus, handleChangeChecked = _a.handleChangeChecked, handleChangeCheckedRadio = _a.handleChangeCheckedRadio, getRowSpan = _a.getRowSpan, onRowReorderPointerDown = _a.onRowReorderPointerDown, onRowReorderKeyDown = _a.onRowReorderKeyDown;
+    var tree = (0, TreeContext_1.useTreeContext)();
+    var treeRowKey = tree === null || tree === void 0 ? void 0 : tree.getRowKey(item.values);
+    var treeMeta = treeRowKey === undefined ? undefined : tree === null || tree === void 0 ? void 0 : tree.metaByRowKey.get(treeRowKey);
     var clickable = !editable && hasOnClick;
     var rowClassName = ['bgrid-body-row', active ? 'bgrid-row-active' : '', className].filter(Boolean).join(' ');
-    return (React.createElement("tr", { className: rowClassName, "data-ri": ri, "data-odd": !mergeColumns && odd ? 'true' : undefined, "data-clickable": clickable ? 'true' : undefined, "data-bgrid-row-reorder-role": rowReorderRole, "data-bgrid-row-reorder-phase": rowReorderRole ? rowReorderPhase : undefined, "data-bgrid-row-reorder-direction": rowReorderRole ? rowReorderDirection : undefined, style: __assign((_b = {}, _b['--bgrid-item-line-height'] = "".concat(itemHeight, "px"), _b['--bgrid-item-cell-height'] = "".concat(resolvedRowHeight, "px"), _b), (rowReorderRole && rowReorderRole !== 'source'
+    return (React.createElement("tr", { className: rowClassName, "data-ri": ri, "data-bgrid-tree-row": treeMeta ? 'true' : undefined, "aria-level": treeMeta ? treeMeta.depth + 1 : undefined, "aria-posinset": treeMeta ? treeMeta.siblingIndex + 1 : undefined, "aria-setsize": treeMeta === null || treeMeta === void 0 ? void 0 : treeMeta.siblingCount, "aria-expanded": (treeMeta === null || treeMeta === void 0 ? void 0 : treeMeta.hasChildren) ? treeMeta.expanded : undefined, "data-odd": !mergeColumns && odd ? 'true' : undefined, "data-clickable": clickable ? 'true' : undefined, "data-bgrid-row-reorder-role": rowReorderRole, "data-bgrid-row-reorder-phase": rowReorderRole ? rowReorderPhase : undefined, "data-bgrid-row-reorder-direction": rowReorderRole ? rowReorderDirection : undefined, style: __assign((_b = {}, _b['--bgrid-item-line-height'] = "".concat(itemHeight, "px"), _b['--bgrid-item-cell-height'] = "".concat(resolvedRowHeight, "px"), _b), (rowReorderRole && rowReorderRole !== 'source'
             ? (_c = {}, _c['--bgrid-row-reorder-offset-y'] = "".concat(rowReorderOffset !== null && rowReorderOffset !== void 0 ? rowReorderOffset : 0, "px"), _c)
             : undefined)) },
         isLeftRegion &&

package/cjs/components/TreeCell.js

@@ -0,0 +1,88 @@
+"use strict";
+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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeCell = TreeCell;
+var React = __importStar(require("react"));
+var store_1 = require("../store");
+var utils_1 = require("../utils");
+var TreeContext_1 = require("./TreeContext");
+function TreeCell(_a) {
+    var _b, _c, _d, _e, _f;
+    var column = _a.column, item = _a.item, children = _a.children;
+    var tree = (0, TreeContext_1.useTreeContext)();
+    var store = (0, store_1.useAppStoreApi)();
+    if (!tree || (0, utils_1.getColumnId)(column) !== tree.treeColumnId)
+        return React.createElement(React.Fragment, null, children);
+    var key = tree.getRowKey(item.values);
+    var meta = key === undefined ? undefined : tree.metaByRowKey.get(key);
+    if (!meta)
+        return React.createElement(React.Fragment, null, children);
+    return (React.createElement("span", { className: 'bgrid-tree-cell', style: {
+            '--bgrid-tree-depth': meta.depth,
+            '--bgrid-tree-indent-size': "".concat(tree.indentSize, "px"),
+        } },
+        meta.hasChildren ? (React.createElement("button", { type: 'button', className: 'bgrid-tree-toggle', "aria-expanded": meta.expanded, "aria-label": meta.expanded ? tree.collapseAriaLabel : tree.expandAriaLabel, disabled: tree.disabled, onClick: function (event) {
+                var _a, _b, _c, _d;
+                event.stopPropagation();
+                if (meta.expanded) {
+                    var state = store.getState();
+                    var activeCell = state.activeCell;
+                    var activeSourceIndex = activeCell === undefined
+                        ? undefined
+                        : (_b = (_a = state.sourceIndexByVisibleIndex) === null || _a === void 0 ? void 0 : _a[activeCell.rowIndex]) !== null && _b !== void 0 ? _b : activeCell.rowIndex;
+                    var activeMeta = activeSourceIndex === undefined ? undefined : tree.metaBySourceIndex.get(activeSourceIndex);
+                    var activeIsDescendant = false;
+                    while ((activeMeta === null || activeMeta === void 0 ? void 0 : activeMeta.parentSourceIndex) !== undefined) {
+                        if (activeMeta.parentSourceIndex === meta.sourceIndex) {
+                            activeIsDescendant = true;
+                            break;
+                        }
+                        activeMeta = tree.metaBySourceIndex.get(activeMeta.parentSourceIndex);
+                    }
+                    state.clearCellSelection();
+                    if (activeCell && activeIsDescendant) {
+                        state.endCellEdit();
+                        state.setActiveCell({
+                            rowIndex: (_d = (_c = state.visibleIndexBySourceIndex) === null || _c === void 0 ? void 0 : _c.get(meta.sourceIndex)) !== null && _d !== void 0 ? _d : 0,
+                            columnIndex: activeCell.columnIndex,
+                        });
+                    }
+                }
+                tree.toggle(meta);
+            } },
+            React.createElement("span", { className: 'bgrid-tree-icon', "aria-hidden": 'true' }, meta.expanded ? (_c = (_b = tree.icons) === null || _b === void 0 ? void 0 : _b.expanded) !== null && _c !== void 0 ? _c : '⌄' : (_e = (_d = tree.icons) === null || _d === void 0 ? void 0 : _d.collapsed) !== null && _e !== void 0 ? _e : '›'))) : (React.createElement("span", { className: 'bgrid-tree-toggle-spacer', "aria-hidden": 'true' },
+            React.createElement("span", { className: 'bgrid-tree-icon' }, (_f = tree.icons) === null || _f === void 0 ? void 0 : _f.leaf))),
+        React.createElement("span", { className: 'bgrid-tree-cell-content' }, children)));
+}

package/cjs/components/TreeContext.js

@@ -0,0 +1,42 @@
+"use strict";
+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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeContext = void 0;
+exports.useTreeContext = useTreeContext;
+var React = __importStar(require("react"));
+exports.TreeContext = React.createContext(undefined);
+function useTreeContext() {
+    return React.useContext(exports.TreeContext);
+}