beautiful-grid 1.0.11 → 1.0.13

package/cjs/utils/index.js

@@ -32,6 +32,7 @@ __exportStar(require("./number"), exports);
 __exportStar(require("./buildHeaderMatrix"), exports);
 __exportStar(require("./getVisibleScrollableRowRange"), exports);
 __exportStar(require("./virtualScrollWindow"), exports);
+__exportStar(require("./treeData"), exports);
 __exportStar(require("./rowHeightMetrics"), exports);
 __exportStar(require("./cellEditState"), exports);
 __exportStar(require("./getCellSelectionAxisState"), exports);
@@ -42,3 +43,6 @@ __exportStar(require("./rowReorder"), exports);
 __exportStar(require("./checkboxEditor"), exports);
 __exportStar(require("./columnVisibility"), exports);
 __exportStar(require("./checkedIndexes"), exports);
+__exportStar(require("./exportData"), exports);
+__exportStar(require("./exportCsv"), exports);
+__exportStar(require("./exportExcel"), exports);

package/cjs/utils/treeData.js

@@ -0,0 +1,205 @@
+"use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.projectTreeData = projectTreeData;
+exports.getTreeRowPath = getTreeRowPath;
+var getCellValue_1 = require("./getCellValue");
+function flatFallback(data, diagnostics) {
+    var sourceIndexByVisibleIndex = data.map(function (_, index) { return index; });
+    return {
+        valid: false,
+        data: data,
+        sourceIndexByVisibleIndex: sourceIndexByVisibleIndex,
+        visibleIndexBySourceIndex: new Map(sourceIndexByVisibleIndex.map(function (index) { return [index, index]; })),
+        metaByRowKey: new Map(),
+        metaBySourceIndex: new Map(),
+        diagnostics: Array.from(new Set(diagnostics)),
+    };
+}
+/** Projects flat parent-key data into visible pre-order rows without mutating the input. */
+function projectTreeData(params) {
+    var e_1, _a;
+    var _b;
+    var data = params.data, rowKey = params.rowKey, parentRowKey = params.parentRowKey, expandedRowKeys = params.expandedRowKeys, includedSourceIndexes = params.includedSourceIndexes, orderedSourceIndexes = params.orderedSourceIndexes;
+    if (data.length === 0) {
+        return {
+            valid: true,
+            data: [],
+            sourceIndexByVisibleIndex: [],
+            visibleIndexBySourceIndex: new Map(),
+            metaByRowKey: new Map(),
+            metaBySourceIndex: new Map(),
+            diagnostics: [],
+        };
+    }
+    var diagnostics = [];
+    var keys = new Array(data.length);
+    var indexByKey = new Map();
+    data.forEach(function (item, sourceIndex) {
+        var key = (0, getCellValue_1.getCellValueByRowKey)(rowKey, item.values);
+        if (key === undefined || key === null) {
+            diagnostics.push('missingRowKey');
+            return;
+        }
+        keys[sourceIndex] = key;
+        if (indexByKey.has(key))
+            diagnostics.push('duplicateRowKey');
+        else
+            indexByKey.set(key, sourceIndex);
+    });
+    if (diagnostics.length > 0)
+        return flatFallback(data, diagnostics);
+    var parentIndexes = new Array(data.length);
+    var childrenByParentIndex = new Map();
+    var roots = [];
+    data.forEach(function (item, sourceIndex) {
+        var _a;
+        var parentKey = (0, getCellValue_1.getCellValueByRowKey)(parentRowKey, item.values);
+        var parentIndex = parentKey === undefined || parentKey === null ? undefined : indexByKey.get(parentKey);
+        if (parentIndex === undefined) {
+            roots.push(sourceIndex);
+            return;
+        }
+        parentIndexes[sourceIndex] = parentIndex;
+        var children = (_a = childrenByParentIndex.get(parentIndex)) !== null && _a !== void 0 ? _a : [];
+        children.push(sourceIndex);
+        childrenByParentIndex.set(parentIndex, children);
+    });
+    // Every node has at most one parent, so iterative parent walking detects all cycles in O(N).
+    var visitState = new Uint8Array(data.length);
+    for (var start = 0; start < data.length; start++) {
+        if (visitState[start] !== 0)
+            continue;
+        var path = [];
+        var current = start;
+        while (current !== undefined && visitState[current] === 0) {
+            visitState[current] = 1;
+            path.push(current);
+            current = parentIndexes[current];
+        }
+        if (current !== undefined && visitState[current] === 1)
+            diagnostics.push('cycle');
+        path.forEach(function (index) {
+            visitState[index] = 2;
+        });
+    }
+    if (diagnostics.length > 0)
+        return flatFallback(data, diagnostics);
+    var orderRank = new Map();
+    orderedSourceIndexes === null || orderedSourceIndexes === void 0 ? void 0 : orderedSourceIndexes.forEach(function (sourceIndex, rank) { return orderRank.set(sourceIndex, rank); });
+    var compareSourceOrder = function (left, right) {
+        var _a, _b;
+        return ((_a = orderRank.get(left)) !== null && _a !== void 0 ? _a : Number.MAX_SAFE_INTEGER) - ((_b = orderRank.get(right)) !== null && _b !== void 0 ? _b : Number.MAX_SAFE_INTEGER) ||
+            left - right;
+    };
+    roots.sort(compareSourceOrder);
+    childrenByParentIndex.forEach(function (children) { return children.sort(compareSourceOrder); });
+    var included = includedSourceIndexes ? new Set(includedSourceIndexes) : undefined;
+    var forcedExpanded = new Set();
+    if (included) {
+        try {
+            for (var _c = __values(includedSourceIndexes !== null && includedSourceIndexes !== void 0 ? includedSourceIndexes : []), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var matchedIndex = _d.value;
+                var current = parentIndexes[matchedIndex];
+                while (current !== undefined) {
+                    included.add(current);
+                    forcedExpanded.add(current);
+                    current = parentIndexes[current];
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }
+    var expanded = new Set(expandedRowKeys);
+    var visibleData = [];
+    var sourceIndexByVisibleIndex = [];
+    var visibleIndexBySourceIndex = new Map();
+    var metaByRowKey = new Map();
+    var metaBySourceIndex = new Map();
+    var stack = roots
+        .slice()
+        .reverse()
+        .map(function (sourceIndex, reverseIndex) { return ({
+        sourceIndex: sourceIndex,
+        depth: 0,
+        visible: true,
+        siblingIndex: roots.length - reverseIndex - 1,
+        siblingCount: roots.length,
+    }); });
+    while (stack.length > 0) {
+        var entry = stack.pop();
+        var sourceIndex = entry.sourceIndex, depth = entry.depth;
+        var key = keys[sourceIndex];
+        var parentSourceIndex = parentIndexes[sourceIndex];
+        var children = (_b = childrenByParentIndex.get(sourceIndex)) !== null && _b !== void 0 ? _b : [];
+        var isIncluded = !included || included.has(sourceIndex);
+        var isExpanded = expanded.has(key);
+        var effectiveExpanded = isExpanded || forcedExpanded.has(sourceIndex);
+        var meta = {
+            rowKey: key,
+            parentRowKey: parentSourceIndex === undefined ? undefined : keys[parentSourceIndex],
+            depth: depth,
+            hasChildren: children.length > 0,
+            expanded: isExpanded,
+            sourceIndex: sourceIndex,
+            parentSourceIndex: parentSourceIndex,
+            siblingIndex: entry.siblingIndex,
+            siblingCount: entry.siblingCount,
+        };
+        metaByRowKey.set(key, meta);
+        metaBySourceIndex.set(sourceIndex, meta);
+        var visible = entry.visible && isIncluded;
+        if (visible) {
+            visibleIndexBySourceIndex.set(sourceIndex, visibleData.length);
+            visibleData.push(data[sourceIndex]);
+            sourceIndexByVisibleIndex.push(sourceIndex);
+        }
+        // Collapsed subtrees do not need row metadata until they become visible. Skipping
+        // them keeps folding work proportional to the visible hierarchy, not all input rows.
+        if (!visible || !effectiveExpanded)
+            continue;
+        for (var childIndex = children.length - 1; childIndex >= 0; childIndex--) {
+            stack.push({
+                sourceIndex: children[childIndex],
+                depth: depth + 1,
+                visible: true,
+                siblingIndex: childIndex,
+                siblingCount: children.length,
+            });
+        }
+    }
+    return {
+        valid: true,
+        data: visibleData,
+        sourceIndexByVisibleIndex: sourceIndexByVisibleIndex,
+        visibleIndexBySourceIndex: visibleIndexBySourceIndex,
+        metaByRowKey: metaByRowKey,
+        metaBySourceIndex: metaBySourceIndex,
+        diagnostics: [],
+    };
+}
+function getTreeRowPath(metaBySourceIndex, sourceIndex) {
+    var path = [];
+    var current = metaBySourceIndex.get(sourceIndex);
+    while (current) {
+        path.push(current.rowKey);
+        current = current.parentSourceIndex === undefined ? undefined : metaBySourceIndex.get(current.parentSourceIndex);
+    }
+    return path.reverse();
+}

package/esm/BGrid.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import Table from './components/Table';
-import { createPivotData, createRowHeightMetrics, buildHeaderMatrix, countVisibleCheckedIndexes, findDuplicateColumnIds, getCellValueByRowKey, getColumnId, getColumnKeyToken, getFrozenColumnsWidth, processDataQuery, projectColumnVisibility, resolveStatusOptions, resolvePaginationViewOptions, resolveScrollbarOptions, shouldRenderBottomBar, } from './utils';
+import { createPivotData, createRowHeightMetrics, buildHeaderMatrix, countVisibleCheckedIndexes, findDuplicateColumnIds, getCellValueByRowKey, getColumnId, getColumnKeyToken, getFrozenColumnsWidth, getTreeRowPath, processDataQuery, projectTreeData, projectColumnVisibility, resolveStatusOptions, resolvePaginationViewOptions, resolveScrollbarOptions, shouldRenderBottomBar, } from './utils';
 import { AppStoreProvider } from './store';
+import { TreeContext } from './components/TreeContext';
 function computeModelColumns(columns, frozenColumnIndex, duplicateToolboxColumnIds) {
     let left = 0;
     let previousWidth = 0;
@@ -21,7 +22,11 @@ function computeModelColumns(columns, frozenColumnIndex, duplicateToolboxColumnI
         };
     });
 }
-export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, summaryHeight = 30, itemHeight = 15, itemPadding = 7, getRowHeight, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex = 0, frozenRowCount = 0, data = [], page, scrollbar, status, pagination, bottomBarHeight, scrollTop = 0, scrollLeft = 0, className, style, rowChecked, sort, onClick, loading = false, spinning, disabled, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger = 'dblclick', cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, columnVisibility, searchOptions, contextMenuOptions, }) {
+export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, summaryHeight = 30, itemHeight = 15, itemPadding = 7, getRowHeight, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex = 0, frozenRowCount = 0, data = [], page, scrollbar, status, pagination, bottomBarHeight, scrollTop = 0, scrollLeft = 0, className, style, rowChecked, sort, onClick, loading = false, spinning, disabled, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger = 'dblclick', cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, columnVisibility, searchOptions, contextMenuOptions, tree, }) {
+    const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = React.useState(() => [
+        ...(tree?.defaultExpandedRowKeys ?? []),
+    ]);
+    const expandedRowKeys = tree?.expandedRowKeys ?? uncontrolledExpandedRowKeys;
     const warnedSearchControlledRef = React.useRef({
         open: false,
         query: false,
@@ -79,13 +84,15 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
     const resolvedDisabled = !!disabled;
     const resolvedOnClick = pivotEnabled || resolvedDisabled ? undefined : onClick;
     const baseOnChangeColumns = pivotEnabled ? undefined : onChangeColumns;
-    const resolvedOnChangeData = pivotEnabled ? undefined : onChangeData;
+    const baseOnChangeData = pivotEnabled ? undefined : onChangeData;
     const resolvedRowKey = pivotEnabled ? undefined : rowKey;
     const resolvedSelectedRowKey = pivotEnabled ? undefined : selectedRowKey;
     const resolvedEditable = pivotEnabled || resolvedDisabled ? false : editable;
     const resolvedShowLineNumber = pivotEnabled ? false : showLineNumber;
     const resolvedGetRowClassName = pivotEnabled ? undefined : getRowClassName;
-    const resolvedCellMergeOptions = visibilityProjection.cellMergeOptions;
+    const requestedTreeEnabled = !!tree && tree.enabled !== false;
+    const treeEnabled = requestedTreeEnabled && !pivotEnabled && resolvedRowKey !== undefined;
+    const resolvedCellMergeOptions = treeEnabled ? undefined : visibilityProjection.cellMergeOptions;
     const resolvedCellSelectionOptions = resolvedDisabled
         ? { ...cellSelectionOptions, enabled: false }
         : cellSelectionOptions;
@@ -97,11 +104,11 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
     const resolvedContextMenuOptions = pivotEnabled || resolvedDisabled ? undefined : contextMenuOptions;
     const hasActiveClientQuery = resolvedDataControl?.mode === 'client' &&
         (resolvedDataControl.query.sortParams.length > 0 || resolvedDataControl.query.filterParams.length > 0);
-    const resolvedReorder = React.useMemo(() => pivotEnabled || resolvedDisabled
+    const resolvedReorder = React.useMemo(() => pivotEnabled || resolvedDisabled || treeEnabled
         ? undefined
         : (hasActiveClientQuery || frozenRowCount > 0) && reorder
             ? { ...reorder, enabled: false }
-            : reorder, [frozenRowCount, hasActiveClientQuery, pivotEnabled, reorder, resolvedDisabled]);
+            : reorder, [frozenRowCount, hasActiveClientQuery, pivotEnabled, reorder, resolvedDisabled, treeEnabled]);
     // Development warnings
     React.useEffect(() => {
         if (process.env.NODE_ENV !== 'production') {
@@ -130,6 +137,18 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
                 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?.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.');
             }
@@ -166,6 +185,10 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
         hasHiddenColumns,
         visibilityOptions?.hiddenColumnIds,
         visibilityOptions?.onChange,
+        cellMergeOptions,
+        requestedTreeEnabled,
+        rowKey,
+        treeEnabled,
     ]);
     const duplicateToolboxColumnIds = React.useMemo(() => {
         const duplicates = findDuplicateColumnIds(resolvedColumns, true);
@@ -218,9 +241,33 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
         resolvedColumns,
         visibilityEnabled,
     ]);
+    const resolvedTreeColumnId = React.useMemo(() => {
+        if (!treeEnabled || visibilityProjection.columns.length === 0)
+            return undefined;
+        const requestedId = tree?.treeColumnId;
+        return requestedId &&
+            visibilityProjection.columns.some(column => getColumnId(column) === requestedId)
+            ? requestedId
+            : getColumnId(visibilityProjection.columns[0]);
+    }, [tree?.treeColumnId, treeEnabled, visibilityProjection.columns]);
     const computedColumns = React.useMemo(() => {
-        return computeModelColumns(visibilityProjection.columns, resolvedFrozenColumnIndex, duplicateToolboxColumnIds);
-    }, [duplicateToolboxColumnIds, resolvedFrozenColumnIndex, visibilityProjection.columns]);
+        const columns = computeModelColumns(visibilityProjection.columns, resolvedFrozenColumnIndex, duplicateToolboxColumnIds);
+        if (!resolvedTreeColumnId)
+            return columns;
+        return columns.map(column => (column.columnId === resolvedTreeColumnId ? { ...column, treeCell: true } : column));
+    }, [duplicateToolboxColumnIds, resolvedFrozenColumnIndex, resolvedTreeColumnId, visibilityProjection.columns]);
+    const warnedTreeColumnIdRef = React.useRef(undefined);
+    React.useEffect(() => {
+        if (process.env.NODE_ENV === 'production' ||
+            !treeEnabled ||
+            !tree?.treeColumnId ||
+            tree.treeColumnId === resolvedTreeColumnId ||
+            warnedTreeColumnIdRef.current === tree.treeColumnId) {
+            return;
+        }
+        warnedTreeColumnIdRef.current = tree.treeColumnId;
+        console.warn(`[BGrid] tree.treeColumnId "${tree.treeColumnId}" is not visible. Falling back to the first visible column.`);
+    }, [resolvedTreeColumnId, tree?.treeColumnId, treeEnabled]);
     const queryColumns = React.useMemo(() => computeModelColumns(resolvedColumns, pivotEnabled ? 0 : frozenColumnIndex, duplicateToolboxColumnIds), [duplicateToolboxColumnIds, frozenColumnIndex, pivotEnabled, resolvedColumns]);
     const projectedOnChangeColumns = React.useCallback((visibleColumnIndex, info) => {
         if (!baseOnChangeColumns)
@@ -305,8 +352,9 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
             filterParams: [],
         };
     }, [resolvedDataControl, resolvedSort]);
-    // Process data in client mode
-    const processedResult = React.useMemo(() => {
+    // 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.
+    const queryProcessedResult = React.useMemo(() => {
         if (resolvedDataControl?.mode === 'client') {
             return processDataQuery({
                 data: resolvedData,
@@ -323,7 +371,111 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
             visibleIndexBySourceIndex: undefined,
         };
     }, [queryColumns, resolvedData, resolvedDataControl?.mode, resolvedDataQuery, resolvedRowKey]);
+    const treeProjection = React.useMemo(() => {
+        if (!treeEnabled || !tree || resolvedRowKey === undefined)
+            return undefined;
+        const clientQuery = resolvedDataControl?.mode === 'client';
+        return projectTreeData({
+            data: resolvedData,
+            rowKey: resolvedRowKey,
+            parentRowKey: tree.parentRowKey,
+            expandedRowKeys,
+            includedSourceIndexes: clientQuery && resolvedDataQuery.filterParams.length > 0
+                ? queryProcessedResult.sourceIndexByVisibleIndex
+                : undefined,
+            orderedSourceIndexes: clientQuery && resolvedDataQuery.sortParams.length > 0
+                ? queryProcessedResult.sourceIndexByVisibleIndex
+                : undefined,
+        });
+    }, [
+        expandedRowKeys,
+        queryProcessedResult.sourceIndexByVisibleIndex,
+        resolvedData,
+        resolvedDataControl?.mode,
+        resolvedDataQuery.filterParams.length,
+        resolvedDataQuery.sortParams.length,
+        resolvedRowKey,
+        tree,
+        treeEnabled,
+    ]);
+    React.useEffect(() => {
+        if (process.env.NODE_ENV === 'production' || !treeProjection || treeProjection.valid)
+            return;
+        console.warn(`[BGrid] Invalid tree data (${treeProjection.diagnostics.join(', ')}). Falling back to flat rows.`);
+    }, [treeProjection]);
+    const resolvedTreeProjection = treeProjection?.valid ? treeProjection : undefined;
+    const processedResult = resolvedTreeProjection
+        ? {
+            rows: [],
+            data: resolvedTreeProjection.data,
+            sourceIndexByVisibleIndex: resolvedTreeProjection.sourceIndexByVisibleIndex,
+            visibleIndexBySourceIndex: resolvedTreeProjection.visibleIndexBySourceIndex,
+        }
+        : queryProcessedResult;
     const displayData = processedResult.data;
+    const resolvedOnChangeData = React.useMemo(() => {
+        if (!baseOnChangeData)
+            return undefined;
+        if (!resolvedTreeProjection)
+            return baseOnChangeData;
+        return (index, columnIndex, item, column, meta) => {
+            const treeMeta = resolvedTreeProjection.metaBySourceIndex.get(index);
+            if (!meta || !treeMeta) {
+                baseOnChangeData(index, columnIndex, item, column, meta);
+                return;
+            }
+            baseOnChangeData(index, columnIndex, item, column, {
+                ...meta,
+                tree: {
+                    rowKey: treeMeta.rowKey,
+                    parentRowKey: treeMeta.parentRowKey,
+                    sourceIndex: treeMeta.sourceIndex,
+                    depth: treeMeta.depth,
+                    path: getTreeRowPath(resolvedTreeProjection.metaBySourceIndex, index),
+                },
+            });
+        };
+    }, [baseOnChangeData, resolvedTreeProjection]);
+    const toggleTreeRow = React.useCallback((meta) => {
+        if (resolvedDisabled || !tree || !meta.hasChildren)
+            return;
+        const nextExpanded = meta.expanded
+            ? expandedRowKeys.filter(key => !Object.is(key, meta.rowKey))
+            : expandedRowKeys.some(key => Object.is(key, meta.rowKey))
+                ? [...expandedRowKeys]
+                : [...expandedRowKeys, meta.rowKey];
+        if (tree.expandedRowKeys === undefined)
+            setUncontrolledExpandedRowKeys(nextExpanded);
+        const item = resolvedData[meta.sourceIndex];
+        if (item) {
+            tree.onExpandedRowKeysChange?.(nextExpanded, {
+                rowKey: meta.rowKey,
+                expanded: !meta.expanded,
+                item,
+                sourceIndex: meta.sourceIndex,
+            });
+        }
+    }, [expandedRowKeys, resolvedData, resolvedDisabled, tree]);
+    const treeContextValue = React.useMemo(() => {
+        if (!resolvedTreeProjection || !resolvedTreeColumnId || resolvedRowKey === undefined || !tree)
+            return undefined;
+        const indentSize = Number.isFinite(tree.indentSize) && (tree.indentSize ?? -1) >= 0 ? tree.indentSize : 16;
+        return {
+            treeColumnId: resolvedTreeColumnId,
+            indentSize,
+            icons: tree.icons,
+            expandAriaLabel: tree.expandAriaLabel ?? 'Expand row',
+            collapseAriaLabel: tree.collapseAriaLabel ?? 'Collapse row',
+            disabled: resolvedDisabled,
+            metaByRowKey: resolvedTreeProjection.metaByRowKey,
+            metaBySourceIndex: resolvedTreeProjection.metaBySourceIndex,
+            getRowKey: values => {
+                const key = getCellValueByRowKey(resolvedRowKey, values);
+                return key === undefined || key === null ? undefined : key;
+            },
+            toggle: toggleTreeRow,
+        };
+    }, [resolvedDisabled, resolvedRowKey, resolvedTreeColumnId, resolvedTreeProjection, toggleTreeRow, tree]);
     const rowHeightMetrics = React.useMemo(() => createRowHeightMetrics(displayData, itemHeight + itemPadding * 2, getRowHeight), [displayData, getRowHeight, itemHeight, itemPadding]);
     const resolvedFrozenRowCount = pivotEnabled
         ? 0
@@ -532,60 +684,63 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
         initialShowBottomBar,
     ]);
     return (React.createElement(AppStoreProvider, { initialState: initialStoreState },
-        React.createElement(Table, { ref: ref, columns: computedColumns,
-            columnsGroup: visibilityProjection.columnsGroup,
-            columnGroups: visibilityProjection.columnGroups,
-            onChangeColumns: resolvedOnChangeColumns,
-            width,
-            height,
-            className,
-            style,
-            loading,
-            disabled: resolvedDisabled,
-            spinning,
-            scrollLeft,
-            scrollTop,
-            headerHeight,
-            footerHeight,
-            bottomBarHeight: resolvedBottomBarHeight,
-            scrollbar: resolvedScrollbar,
-            status: resolvedStatus,
-            pagination: resolvedPagination,
-            summaryHeight,
-            itemHeight,
-            itemPadding,
-            rowHeightMetrics,
-            frozenColumnIndex: resolvedFrozenColumnIndex,
-            frozenRowCount: resolvedFrozenRowCount,
-            rowChecked: resolvedRowChecked,
-            checkedIndexesMap,
-            sort: resolvedSort,
-            sortParams,
-            dataQuery: resolvedDataQuery,
-            dataControl: resolvedDataControl,
-            icons,
-            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,
-            onChangeData: resolvedOnChangeData,
-            showLineNumber: resolvedShowLineNumber,
-            msg,
-            getRowClassName: resolvedGetRowClassName,
-            cellMergeOptions: resolvedCellMergeOptions,
-            cellSelectionOptions: resolvedCellSelectionOptions,
-            cellNavigationOptions,
-            variant,
-            summary: resolvedSummary,
-            columnSortable: resolvedColumnSortable,
-            reorder: resolvedReorder })));
+        React.createElement(TreeContext.Provider, { value: treeContextValue },
+            React.createElement(Table, { ref: ref, sourceColumns: resolvedColumns,
+                columns: computedColumns,
+                columnsGroup: visibilityProjection.columnsGroup,
+                columnGroups: visibilityProjection.columnGroups,
+                onChangeColumns: resolvedOnChangeColumns,
+                width,
+                height,
+                className,
+                style,
+                loading,
+                disabled: resolvedDisabled,
+                spinning,
+                scrollLeft,
+                scrollTop,
+                headerHeight,
+                footerHeight,
+                bottomBarHeight: resolvedBottomBarHeight,
+                scrollbar: resolvedScrollbar,
+                status: resolvedStatus,
+                pagination: resolvedPagination,
+                summaryHeight,
+                itemHeight,
+                itemPadding,
+                rowHeightMetrics,
+                frozenColumnIndex: resolvedFrozenColumnIndex,
+                frozenRowCount: resolvedFrozenRowCount,
+                rowChecked: resolvedRowChecked,
+                checkedIndexesMap,
+                sort: resolvedSort,
+                sortParams,
+                dataQuery: resolvedDataQuery,
+                dataControl: resolvedDataControl,
+                icons,
+                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,
+                onChangeData: resolvedOnChangeData,
+                showLineNumber: resolvedShowLineNumber,
+                msg,
+                getRowClassName: resolvedGetRowClassName,
+                cellMergeOptions: resolvedCellMergeOptions,
+                cellSelectionOptions: resolvedCellSelectionOptions,
+                cellNavigationOptions,
+                variant,
+                summary: resolvedSummary,
+                columnSortable: resolvedColumnSortable,
+                reorder: resolvedReorder,
+                treeEnabled: !!treeContextValue }))));
 }

package/esm/components/Table.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useCallback, useEffect, useRef } from 'react';
 import { useShallow } from 'zustand/react/shallow';
-import { useAppStore } from '../store';
+import { useAppStore, useAppStoreApi } from '../store';
 import { BGridDataItemStatus, } from '../types';
-import { getCellValueByRowKey, getFrozenColumnsWidth, getRowIndexAtOffset, getVisibleScrollableRowRange, getVirtualScrollWindowMetrics, getVirtualScrollWindowPosition, isCheckboxValueChecked, markCellEdited, markCellValueChanged, rebaseVirtualScrollWindow, resolveLogicalCell, shouldRenderBottomBar, } from '../utils';
+import { getCellValueByRowKey, getFrozenColumnsWidth, getRowIndexAtOffset, getVisibleScrollableRowRange, getVirtualScrollWindowMetrics, getVirtualScrollWindowPosition, isCheckboxValueChecked, markCellEdited, markCellValueChanged, rebaseVirtualScrollWindow, resolveLogicalCell, shouldRenderBottomBar, createGridExportData, serializeGridExportDataToCsv, downloadCsv, } from '../utils';
 import { clamp, ensureCellVisible } from '../utils/coordinate';
 import Loading from './Loading';
 import TableBody, { createRowKeyRegistry } from './TableBody';
@@ -29,6 +29,7 @@ const LazyGridOptionalSurfaces = React.lazy(() => import('./GridOptionalSurfaces
     default: module.GridOptionalSurfaces,
 })));
 function Table(props) {
+    const store = useAppStoreApi();
     const { cellSelectionOptions, onChangeData, sourceIndexByVisibleIndex } = props;
     const cellSelectionEnabled = cellSelectionOptions?.enabled ?? true;
     const rowKeyRegistryState = useRef({
@@ -507,11 +508,42 @@ function Table(props) {
     const scrollPropsRef = useRef({ top: props.scrollTop, left: props.scrollLeft });
     const syncedDataPropRef = useRef(props.data);
     const [rowScrollRequest, setRowScrollRequest] = React.useState(null);
+    const sourceColumnsRef = useRef(props.sourceColumns);
+    sourceColumnsRef.current = props.sourceColumns;
+    const getCurrentExportData = useCallback((options) => {
+        const state = store.getState();
+        return createGridExportData({
+            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, () => ({
         scrollToRow(rowIndex, options) {
             setRowScrollRequest({ rowIndex, align: options?.align ?? 'nearest' });
         },
-    }), []);
+        getExportData(options) {
+            return getCurrentExportData(options);
+        },
+        exportCsv(options) {
+            const exportData = getCurrentExportData(options);
+            const csv = serializeGridExportDataToCsv(exportData, options);
+            downloadCsv(csv, options?.fileName ?? 'export.csv');
+        },
+        exportExcel(options) {
+            const exportData = getCurrentExportData(options);
+            void import('../utils/exportExcel').then(({ serializeGridExportDataToExcel, downloadExcel }) => {
+                const excelBytes = serializeGridExportDataToExcel(exportData, options);
+                downloadExcel(excelBytes, options?.fileName ?? 'export.xlsx');
+            });
+        },
+    }), [getCurrentExportData]);
     const scrollRafRef = useRef(null);
     const scrollIdleTimerRef = useRef(null);
     const selectionAutoScrollRafRef = useRef(null);
@@ -2151,7 +2183,7 @@ function Table(props) {
         };
     }, []);
     return (React.createElement(EditorPortalContext.Provider, { value: editorPortalContext },
-        React.createElement(Container, { ref: containerRef, role: 'grid', style: {
+        React.createElement(Container, { ref: containerRef, role: props.treeEnabled ? 'treegrid' : 'grid', style: {
                 ...style,
                 width,
                 height,