beautiful-grid 1.0.11 → 1.0.13

package/esm/utils/treeData.js

@@ -0,0 +1,174 @@
+import { getCellValueByRowKey } from './getCellValue';
+function flatFallback(data, diagnostics) {
+    const sourceIndexByVisibleIndex = data.map((_, index) => index);
+    return {
+        valid: false,
+        data,
+        sourceIndexByVisibleIndex,
+        visibleIndexBySourceIndex: new Map(sourceIndexByVisibleIndex.map(index => [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. */
+export function projectTreeData(params) {
+    const { data, rowKey, parentRowKey, expandedRowKeys, includedSourceIndexes, orderedSourceIndexes } = params;
+    if (data.length === 0) {
+        return {
+            valid: true,
+            data: [],
+            sourceIndexByVisibleIndex: [],
+            visibleIndexBySourceIndex: new Map(),
+            metaByRowKey: new Map(),
+            metaBySourceIndex: new Map(),
+            diagnostics: [],
+        };
+    }
+    const diagnostics = [];
+    const keys = new Array(data.length);
+    const indexByKey = new Map();
+    data.forEach((item, sourceIndex) => {
+        const key = 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);
+    const parentIndexes = new Array(data.length);
+    const childrenByParentIndex = new Map();
+    const roots = [];
+    data.forEach((item, sourceIndex) => {
+        const parentKey = getCellValueByRowKey(parentRowKey, item.values);
+        const parentIndex = parentKey === undefined || parentKey === null ? undefined : indexByKey.get(parentKey);
+        if (parentIndex === undefined) {
+            roots.push(sourceIndex);
+            return;
+        }
+        parentIndexes[sourceIndex] = parentIndex;
+        const children = childrenByParentIndex.get(parentIndex) ?? [];
+        children.push(sourceIndex);
+        childrenByParentIndex.set(parentIndex, children);
+    });
+    // Every node has at most one parent, so iterative parent walking detects all cycles in O(N).
+    const visitState = new Uint8Array(data.length);
+    for (let start = 0; start < data.length; start++) {
+        if (visitState[start] !== 0)
+            continue;
+        const path = [];
+        let 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(index => {
+            visitState[index] = 2;
+        });
+    }
+    if (diagnostics.length > 0)
+        return flatFallback(data, diagnostics);
+    const orderRank = new Map();
+    orderedSourceIndexes?.forEach((sourceIndex, rank) => orderRank.set(sourceIndex, rank));
+    const compareSourceOrder = (left, right) => (orderRank.get(left) ?? Number.MAX_SAFE_INTEGER) - (orderRank.get(right) ?? Number.MAX_SAFE_INTEGER) ||
+        left - right;
+    roots.sort(compareSourceOrder);
+    childrenByParentIndex.forEach(children => children.sort(compareSourceOrder));
+    const included = includedSourceIndexes ? new Set(includedSourceIndexes) : undefined;
+    const forcedExpanded = new Set();
+    if (included) {
+        for (const matchedIndex of includedSourceIndexes ?? []) {
+            let current = parentIndexes[matchedIndex];
+            while (current !== undefined) {
+                included.add(current);
+                forcedExpanded.add(current);
+                current = parentIndexes[current];
+            }
+        }
+    }
+    const expanded = new Set(expandedRowKeys);
+    const visibleData = [];
+    const sourceIndexByVisibleIndex = [];
+    const visibleIndexBySourceIndex = new Map();
+    const metaByRowKey = new Map();
+    const metaBySourceIndex = new Map();
+    const stack = roots
+        .slice()
+        .reverse()
+        .map((sourceIndex, reverseIndex) => ({
+        sourceIndex,
+        depth: 0,
+        visible: true,
+        siblingIndex: roots.length - reverseIndex - 1,
+        siblingCount: roots.length,
+    }));
+    while (stack.length > 0) {
+        const entry = stack.pop();
+        const { sourceIndex, depth } = entry;
+        const key = keys[sourceIndex];
+        const parentSourceIndex = parentIndexes[sourceIndex];
+        const children = childrenByParentIndex.get(sourceIndex) ?? [];
+        const isIncluded = !included || included.has(sourceIndex);
+        const isExpanded = expanded.has(key);
+        const effectiveExpanded = isExpanded || forcedExpanded.has(sourceIndex);
+        const meta = {
+            rowKey: key,
+            parentRowKey: parentSourceIndex === undefined ? undefined : keys[parentSourceIndex],
+            depth,
+            hasChildren: children.length > 0,
+            expanded: isExpanded,
+            sourceIndex,
+            parentSourceIndex,
+            siblingIndex: entry.siblingIndex,
+            siblingCount: entry.siblingCount,
+        };
+        metaByRowKey.set(key, meta);
+        metaBySourceIndex.set(sourceIndex, meta);
+        const 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 (let 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,
+        visibleIndexBySourceIndex,
+        metaByRowKey,
+        metaBySourceIndex,
+        diagnostics: [],
+    };
+}
+export function getTreeRowPath(metaBySourceIndex, sourceIndex) {
+    const path = [];
+    let current = metaBySourceIndex.get(sourceIndex);
+    while (current) {
+        path.push(current.rowKey);
+        current = current.parentSourceIndex === undefined ? undefined : metaBySourceIndex.get(current.parentSourceIndex);
+    }
+    return path.reverse();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beautiful-grid",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "A beautiful, powerful, open-source React Data Grid.",
   "homepage": "https://bgrid.axisj.com",
   "bugs": {

package/style.css

@@ -1,4 +1,4 @@
-[role='grid'],
+:is([role='grid'], [role='treegrid']),
 .bgrid-floating-portal-root,
 .bgrid-editor-portal-root,
 .bgrid-toolbox-popover {
@@ -141,10 +141,10 @@
    Ensures the grid is self-contained and unaffected by external global CSS.
    ========================================================================== */
 
-[role='grid'],
-[role='grid'] *,
-[role='grid'] *::before,
-[role='grid'] *::after,
+:is([role='grid'], [role='treegrid']),
+:is([role='grid'], [role='treegrid']) *,
+:is([role='grid'], [role='treegrid']) *::before,
+:is([role='grid'], [role='treegrid']) *::after,
 .bgrid-floating-portal-root,
 .bgrid-floating-portal-root *,
 .bgrid-floating-portal-root *::before,
@@ -156,7 +156,7 @@
   box-sizing: border-box;
 }
 
-[role='grid'],
+:is([role='grid'], [role='treegrid']),
 .bgrid-floating-portal-root,
 .bgrid-toolbox-popover {
   font-family: var(
@@ -488,12 +488,12 @@
   background-color: var(--bgrid-border-color-base);
 }
 
-[role='grid'][data-bgrid-frozen-columns='true'] .bgrid-frozen-column-boundary::after {
+:is([role='grid'], [role='treegrid'])[data-bgrid-frozen-columns='true'] .bgrid-frozen-column-boundary::after {
   width: var(--bgrid-frozen-boundary-width);
   background-color: var(--bgrid-frozen-boundary-color);
 }
 
-[role='grid'][data-bgrid-frozen-columns='true'] .bgrid-frozen-column-boundary {
+:is([role='grid'], [role='treegrid'])[data-bgrid-frozen-columns='true'] .bgrid-frozen-column-boundary {
   box-shadow: var(--bgrid-frozen-boundary-shadow);
 }
 
@@ -513,11 +513,11 @@
   box-shadow: inset 0 0 0 1px var(--bgrid-cell-value-changed-border-color);
 }
 
-[role='grid'] .bgrid-body-table > tbody > tr > td.bgrid-cell-search-match {
+:is([role='grid'], [role='treegrid']) .bgrid-body-table > tbody > tr > td.bgrid-cell-search-match {
   position: relative;
 }
 
-[role='grid'] .bgrid-body-table > tbody > tr > td.bgrid-cell-search-match::before {
+:is([role='grid'], [role='treegrid']) .bgrid-body-table > tbody > tr > td.bgrid-cell-search-match::before {
   position: absolute;
   inset: 1px;
   z-index: 0;
@@ -527,17 +527,26 @@
   box-shadow: inset 0 0 0 1px var(--bgrid-search-match-border-color);
 }
 
-[role='grid'] .bgrid-body-table > tbody > tr > td.bgrid-cell-search-current::before {
+:is([role='grid'], [role='treegrid']) .bgrid-body-table > tbody > tr > td.bgrid-cell-search-current::before {
   background: var(--bgrid-search-current-bg);
   box-shadow: inset 0 0 0 2px var(--bgrid-search-current-border-color);
 }
 
-[role='grid'] .bgrid-body-table > tbody > tr > td.bgrid-cell-search-match > .bgrid-cell-content {
+:is([role='grid'], [role='treegrid'])
+  .bgrid-body-table
+  > tbody
+  > tr
+  > td.bgrid-cell-search-match
+  > .bgrid-cell-content {
   position: relative;
   z-index: 3;
 }
 
-[role='grid'] .bgrid-body-table > tbody > tr > td.bgrid-cell-editing.bgrid-cell-search-match::before {
+:is([role='grid'], [role='treegrid'])
+  .bgrid-body-table
+  > tbody
+  > tr
+  > td.bgrid-cell-editing.bgrid-cell-search-match::before {
   background: transparent;
 }
 
@@ -647,7 +656,7 @@
   background-color: var(--bgrid-body-active-bg) !important;
 }
 
-[role='grid'][data-bgrid-row-reordering='true'] .bgrid-body-table > tbody > tr > td {
+:is([role='grid'], [role='treegrid'])[data-bgrid-row-reordering='true'] .bgrid-body-table > tbody > tr > td {
   position: relative;
   z-index: 1;
   transform: translateY(0);
@@ -655,12 +664,12 @@
   will-change: transform;
 }
 
-[role='grid'][data-bgrid-row-reordering='true']
+:is([role='grid'], [role='treegrid'])[data-bgrid-row-reordering='true']
   .bgrid-body-table
   > tbody
   > tr[data-bgrid-row-reorder-role='shift']
   > td,
-[role='grid'][data-bgrid-row-reordering='true']
+:is([role='grid'], [role='treegrid'])[data-bgrid-row-reordering='true']
   .bgrid-body-table
   > tbody
   > tr[data-bgrid-row-reorder-role='target']
@@ -668,7 +677,7 @@
   transform: translateY(var(--bgrid-row-reorder-offset-y, 0));
 }
 
-[role='grid'][data-bgrid-row-reordering='true']
+:is([role='grid'], [role='treegrid'])[data-bgrid-row-reordering='true']
   .bgrid-body-table
   > tbody
   > tr[data-bgrid-row-reorder-role='source']
@@ -679,7 +688,7 @@
   box-shadow: var(--bgrid-row-reorder-preview-shadow);
 }
 
-[role='grid'][data-bgrid-row-reorder-phase='dragging']
+:is([role='grid'], [role='treegrid'])[data-bgrid-row-reorder-phase='dragging']
   .bgrid-body-table
   > tbody
   > tr[data-bgrid-row-reorder-role='source']
@@ -687,7 +696,7 @@
   transition: none;
 }
 
-[role='grid'][data-bgrid-row-reordering='true']
+:is([role='grid'], [role='treegrid'])[data-bgrid-row-reordering='true']
   .bgrid-body-table
   > tbody
   > tr[data-bgrid-row-reorder-role='target'][data-bgrid-row-reorder-direction='down']
@@ -695,7 +704,7 @@
   box-shadow: inset 0 -2px var(--bgrid-row-reorder-guide-color);
 }
 
-[role='grid'][data-bgrid-row-reordering='true']
+:is([role='grid'], [role='treegrid'])[data-bgrid-row-reordering='true']
   .bgrid-body-table
   > tbody
   > tr[data-bgrid-row-reorder-role='target'][data-bgrid-row-reorder-direction='up']
@@ -705,11 +714,15 @@
 
 /* A moving rowspan cannot be split safely. Keep the table geometry fixed and
    animate the lightweight preview while retaining the insertion guide. */
-[role='grid'][data-bgrid-row-reorder-fallback='true'] .bgrid-body-table > tbody > tr[data-bgrid-row-reorder-role] > td {
+:is([role='grid'], [role='treegrid'])[data-bgrid-row-reorder-fallback='true']
+  .bgrid-body-table
+  > tbody
+  > tr[data-bgrid-row-reorder-role]
+  > td {
   transform: none;
 }
 
-[role='grid'][data-bgrid-row-reorder-fallback='true']
+:is([role='grid'], [role='treegrid'])[data-bgrid-row-reorder-fallback='true']
   .bgrid-body-table
   > tbody
   > tr[data-bgrid-row-reorder-role='source']
@@ -739,7 +752,7 @@
   text-overflow: ellipsis;
 }
 
-[role='grid'][data-bgrid-row-reorder-phase='dragging'] .bgrid-row-reorder-preview {
+:is([role='grid'], [role='treegrid'])[data-bgrid-row-reorder-phase='dragging'] .bgrid-row-reorder-preview {
   transition: none;
 }
 
@@ -1021,7 +1034,7 @@
   background: var(--bgrid-context-menu-border-color);
 }
 
-[role='grid'] .bgrid-search-popover {
+:is([role='grid'], [role='treegrid']) .bgrid-search-popover {
   position: absolute;
   top: 0;
   right: 0;
@@ -1039,7 +1052,7 @@
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
 }
 
-[role='grid'] .bgrid-search-leading-icon {
+:is([role='grid'], [role='treegrid']) .bgrid-search-leading-icon {
   display: inline-flex;
   flex: none;
   align-items: center;
@@ -1047,7 +1060,7 @@
   width: 20px;
 }
 
-[role='grid'] .bgrid-search-input {
+:is([role='grid'], [role='treegrid']) .bgrid-search-input {
   min-width: 0;
   height: 28px;
   flex: 1 1 160px;
@@ -1060,12 +1073,12 @@
   outline: none;
 }
 
-[role='grid'] .bgrid-search-input:focus {
+:is([role='grid'], [role='treegrid']) .bgrid-search-input:focus {
   border-color: var(--bgrid-search-focus-ring-color);
   box-shadow: 0 0 0 1px var(--bgrid-search-focus-ring-color);
 }
 
-[role='grid'] .bgrid-search-result-status {
+:is([role='grid'], [role='treegrid']) .bgrid-search-result-status {
   min-width: 72px;
   flex: none;
   color: var(--bgrid-search-muted-color);
@@ -1074,7 +1087,7 @@
   white-space: nowrap;
 }
 
-[role='grid'] .bgrid-search-button {
+:is([role='grid'], [role='treegrid']) .bgrid-search-button {
   display: inline-flex;
   width: 28px;
   height: 28px;
@@ -1092,13 +1105,13 @@
   border-radius: 4px;
 }
 
-[role='grid'] .bgrid-search-button:hover:not(:disabled),
-[role='grid'] .bgrid-search-button:focus-visible {
+:is([role='grid'], [role='treegrid']) .bgrid-search-button:hover:not(:disabled),
+:is([role='grid'], [role='treegrid']) .bgrid-search-button:focus-visible {
   background: var(--bgrid-search-button-hover-bg);
   outline: 1px solid var(--bgrid-search-focus-ring-color);
 }
 
-[role='grid'] .bgrid-search-button:disabled {
+:is([role='grid'], [role='treegrid']) .bgrid-search-button:disabled {
   cursor: default;
   opacity: 0.35;
 }
@@ -1755,8 +1768,10 @@
   cursor: pointer;
 }
 
-[role='grid'][data-bgrid-cell-selection-enabled='true'] [data-header-cell-type][data-bgrid-axis-selectable='true'],
-[role='grid'][data-bgrid-cell-selection-enabled='true'] .bgrid-line-number-cell[data-bgrid-axis-selectable='true'] {
+:is([role='grid'], [role='treegrid'])[data-bgrid-cell-selection-enabled='true']
+  [data-header-cell-type][data-bgrid-axis-selectable='true'],
+:is([role='grid'], [role='treegrid'])[data-bgrid-cell-selection-enabled='true']
+  .bgrid-line-number-cell[data-bgrid-axis-selectable='true'] {
   cursor: pointer;
   user-select: none;
 }
@@ -2363,6 +2378,73 @@
   text-overflow: ellipsis;
 }
 
+.bgrid-tree-cell {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding-inline-start: calc(var(--bgrid-tree-depth, 0) * var(--bgrid-tree-indent-size, 16px));
+}
+
+.bgrid-tree-toggle,
+.bgrid-tree-toggle-spacer {
+  display: inline-flex;
+  flex: 0 0 var(--bgrid-tree-toggle-size, 18px);
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--bgrid-tree-toggle-size, 18px);
+  height: var(--bgrid-tree-toggle-size, 18px);
+  margin: 0 2px 0 0;
+}
+
+.bgrid-tree-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  line-height: 1;
+}
+
+.bgrid-tree-icon > svg {
+  display: block;
+}
+
+.bgrid-tree-toggle {
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 2px;
+}
+
+.bgrid-tree-toggle:hover:not(:disabled) {
+  background: var(--bgrid-body-hover-bg);
+}
+
+.bgrid-tree-toggle:focus-visible {
+  outline: 2px solid var(--bgrid-active-cell-ring-color);
+  outline-offset: -1px;
+}
+
+.bgrid-tree-toggle:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.bgrid-tree-cell-content {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .bgrid-editor-icon {
   position: relative;
   z-index: 31;
@@ -2619,32 +2701,32 @@
 }
 
 @media (max-width: 480px) {
-  [role='grid'] .bgrid-search-result-status {
+  :is([role='grid'], [role='treegrid']) .bgrid-search-result-status {
     min-width: 58px;
   }
 }
 
 @media (max-width: 360px) {
-  [role='grid'] .bgrid-search-popover {
+  :is([role='grid'], [role='treegrid']) .bgrid-search-popover {
     gap: 2px;
     padding: 4px;
   }
 
-  [role='grid'] .bgrid-search-leading-icon {
+  :is([role='grid'], [role='treegrid']) .bgrid-search-leading-icon {
     display: none;
   }
 
-  [role='grid'] .bgrid-search-input {
+  :is([role='grid'], [role='treegrid']) .bgrid-search-input {
     flex-basis: 96px;
     padding-inline: 6px;
   }
 
-  [role='grid'] .bgrid-search-result-status {
+  :is([role='grid'], [role='treegrid']) .bgrid-search-result-status {
     min-width: 40px;
     font-size: 11px;
   }
 
-  [role='grid'] .bgrid-search-button {
+  :is([role='grid'], [role='treegrid']) .bgrid-search-button {
     width: 24px;
   }
 }
@@ -2655,7 +2737,7 @@
     animation: none;
   }
 
-  [role='grid'][data-bgrid-row-reordering='true'] .bgrid-body-table > tbody > tr > td,
+  :is([role='grid'], [role='treegrid'])[data-bgrid-row-reordering='true'] .bgrid-body-table > tbody > tr > td,
   .bgrid-row-reorder-preview,
   .bgrid-row-reorder-handle {
     transition-duration: 0ms;
@@ -2663,12 +2745,12 @@
 }
 
 @media (forced-colors: active) {
-  [role='grid'] .bgrid-body-table > tbody > tr > td.bgrid-cell-search-match::before {
+  :is([role='grid'], [role='treegrid']) .bgrid-body-table > tbody > tr > td.bgrid-cell-search-match::before {
     background: transparent;
     outline: 1px solid Highlight;
   }
 
-  [role='grid'] .bgrid-body-table > tbody > tr > td.bgrid-cell-search-current::before {
+  :is([role='grid'], [role='treegrid']) .bgrid-body-table > tbody > tr > td.bgrid-cell-search-current::before {
     outline-width: 2px;
   }
 }

package/types/BGrid.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { BGridProps } from './types';
-export declare function BGrid<T = Record<string, any>>({ ref, width, height, headerHeight, footerHeight, summaryHeight, itemHeight, itemPadding, getRowHeight, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex, frozenRowCount, data, page, scrollbar, status, pagination, bottomBarHeight, scrollTop, scrollLeft, className, style, rowChecked, sort, onClick, loading, spinning, disabled, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger, cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, columnVisibility, searchOptions, contextMenuOptions, }: BGridProps<T>): React.JSX.Element;
+export declare function BGrid<T = Record<string, any>>({ ref, width, height, headerHeight, footerHeight, summaryHeight, itemHeight, itemPadding, getRowHeight, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex, frozenRowCount, data, page, scrollbar, status, pagination, bottomBarHeight, scrollTop, scrollLeft, className, style, rowChecked, sort, onClick, loading, spinning, disabled, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger, cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, columnVisibility, searchOptions, contextMenuOptions, tree, }: BGridProps<T>): React.JSX.Element;

package/types/components/Table.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Key } from 'react';
-import { BGridCellNavigationOptions, AppModelColumn, BGridColumnGroup, BGridColumnGroupNode, BGridColumnVisibilityState, BGridDataControl, BGridDataItem, BGridDataQuery, BGridPage, BGridProps, BGridRowChecked, BGridSortInfo, BGridSortParam, BGridResolvedScrollbarOptions, BGridResolvedStatusOptions, BGridResolvedPaginationViewOptions } from '../types';
+import { BGridCellNavigationOptions, BGridColumn, AppModelColumn, BGridColumnGroup, BGridColumnGroupNode, BGridColumnVisibilityState, BGridDataControl, BGridDataItem, BGridDataQuery, BGridPage, BGridProps, BGridRowChecked, BGridSortInfo, BGridSortParam, BGridResolvedScrollbarOptions, BGridResolvedStatusOptions, BGridResolvedPaginationViewOptions } from '../types';
 import { type BGridRowHeightMetrics } from '../utils';
 interface Props<T> {
     ref?: BGridProps<T>['ref'];
@@ -19,6 +19,7 @@ interface Props<T> {
     frozenColumnIndex?: number;
     frozenRowCount?: number;
     columns: AppModelColumn<T>[];
+    sourceColumns?: BGridColumn<T>[];
     columnsGroup: BGridColumnGroup[];
     columnGroups: BGridColumnGroupNode[];
     onChangeColumns?: BGridProps<T>['onChangeColumns'];
@@ -61,6 +62,7 @@ interface Props<T> {
     reorder?: BGridProps<T>['reorder'];
     className?: BGridProps<T>['className'];
     style?: BGridProps<T>['style'];
+    treeEnabled?: boolean;
 }
 declare function Table<T>(props: Props<T>): React.JSX.Element;
 export default Table;

package/types/components/TableBodyCell.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { BGridCellEditSession, BGridColumn, BGridDataItem, MoveDirection } from '../types';
+import { AppModelColumn, BGridCellEditSession, BGridDataItem, MoveDirection } from '../types';
 interface Props<T> {
     index: number;
     hostIndex?: number;
     columnIndex: number;
-    column: BGridColumn<T>;
+    column: AppModelColumn<T>;
     item: BGridDataItem<any>;
     valueByRowKey: any;
     handleSave?: (value: any, columnDirection?: MoveDirection, rowDirection?: MoveDirection) => void;

package/types/components/TreeCell.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { BGridColumn, BGridDataItem } from '../types';
+interface Props<T> {
+    column: BGridColumn<T>;
+    item: BGridDataItem<T>;
+    children: React.ReactNode;
+}
+export declare function TreeCell<T>({ column, item, children }: Props<T>): React.JSX.Element;
+export {};

package/types/components/TreeContext.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { BGridTreeIcons, BGridTreeRowMeta } from '../types';
+export interface BGridTreeContextValue {
+    treeColumnId: string;
+    indentSize: number;
+    icons?: BGridTreeIcons;
+    expandAriaLabel: string;
+    collapseAriaLabel: string;
+    disabled: boolean;
+    metaByRowKey: ReadonlyMap<React.Key, BGridTreeRowMeta>;
+    metaBySourceIndex: ReadonlyMap<number, BGridTreeRowMeta>;
+    getRowKey: (values: unknown) => React.Key | undefined;
+    toggle: (meta: BGridTreeRowMeta) => void;
+}
+export declare const TreeContext: React.Context<BGridTreeContextValue | undefined>;
+export declare function useTreeContext(): BGridTreeContextValue | undefined;