@cdx-ui/data-grid 0.3.12 → 0.3.13

package/coverage.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="108" height="20" role="img" aria-label="coverage: 87.1%"><title>coverage: 87.1%</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="108" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/><rect x="61" width="47" height="20" fill="#4b0"/><rect width="108" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="315" y="150" fill-opacity=".8" filter="url(#blur)" textLength="510">coverage</text><text x="315" y="150" fill-opacity=".3" textLength="510">coverage</text></g><text x="315" y="140" textLength="510">coverage</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="835" y="150" fill-opacity=".8" filter="url(#blur)" textLength="370">87.1%</text><text x="835" y="150" fill-opacity=".3" textLength="370">87.1%</text></g><text x="835" y="140" textLength="370">87.1%</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="108" height="20" role="img" aria-label="coverage: 88.3%"><title>coverage: 88.3%</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="108" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/><rect x="61" width="47" height="20" fill="#4b0"/><rect width="108" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="315" y="150" fill-opacity=".8" filter="url(#blur)" textLength="510">coverage</text><text x="315" y="150" fill-opacity=".3" textLength="510">coverage</text></g><text x="315" y="140" textLength="510">coverage</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="835" y="150" fill-opacity=".8" filter="url(#blur)" textLength="370">88.3%</text><text x="835" y="150" fill-opacity=".3" textLength="370">88.3%</text></g><text x="835" y="140" textLength="370">88.3%</text></g></g></svg>

package/lib/commonjs/DataGrid.js

@@ -19,6 +19,9 @@ var _types = require("./types");
 var _useDataGridTable = require("./useDataGridTable");
 var _jsxRuntime = require("react/jsx-runtime");
 const MAX_SKELETON_ROW_COUNT = 10;
+/** Matches the detail panel cell's `px-4`. */
+const DETAIL_PANEL_INSET = 16;
+const TREE_INDENT = 24;
 const DEFAULT_WEB_COLUMN_WIDTH = 100;
 const WEB_TABLE_CONTAINER_STYLE = {
   overflow: 'visible'
@@ -53,7 +56,7 @@ function effectiveFlex(column, pinned) {
   }
   return Math.max(column.flex ?? 0, 0);
 }
-function webColumnWidths(columns, checkboxSelection, pinned = new Set()) {
+function webColumnWidths(columns, leadingWidth, pinned = new Set()) {
   const totalFlex = columns.reduce((total, column) => total + effectiveFlex(column, pinned), 0);
   const widths = new Map();
   if (totalFlex === 0) {
@@ -66,7 +69,7 @@ function webColumnWidths(columns, checkboxSelection, pinned = new Set()) {
     }
     return widths;
   }
-  const fixedWidth = (checkboxSelection ? _pinning.SELECT_COLUMN_WIDTH : 0) + columns.reduce((total, column) => {
+  const fixedWidth = leadingWidth + columns.reduce((total, column) => {
     if (effectiveFlex(column, pinned) > 0) {
       return total;
     }
@@ -156,7 +159,7 @@ function defaultCellContent(value) {
 }
 function DefaultLoadingRows({
   columns,
-  checkboxSelection,
+  leadingColumnIds,
   rowCount,
   columnWidths,
   orderedColumnIds,
@@ -164,7 +167,7 @@ function DefaultLoadingRows({
   offsets
 }) {
   const colByField = new Map(columns.map(column => [column.field, column]));
-  const ids = orderedColumnIds ?? (checkboxSelection ? [_types.SELECT_COLUMN_ID, ...columns.map(column => column.field)] : columns.map(column => column.field));
+  const ids = orderedColumnIds ?? [...leadingColumnIds, ...columns.map(column => column.field)];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: Array.from({
       length: rowCount
@@ -183,6 +186,12 @@ function DefaultLoadingRows({
             })
           }, columnId);
         }
+        if (columnId === _types.DETAIL_PANEL_TOGGLE_ID) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
+            className: (0, _utils.cn)((0, _styles.dataGridDetailToggleCellVariants)(), pinnedClassName(pin, false)),
+            style: mergePinnedStyle(undefined, pin, offsets, columnId, false)
+          }, columnId);
+        }
         const column = colByField.get(columnId);
         if (!column) {
           return null;
@@ -229,6 +238,7 @@ function DataGridInner(props) {
     showToolbar = false,
     headerFilters = false,
     pinnedColumns,
+    columnVisibilityModel,
     pageSizeOptions = _types.DEFAULT_PAGE_SIZE_OPTIONS,
     noRowsOverlay,
     loadingOverlay,
@@ -237,8 +247,49 @@ function DataGridInner(props) {
     style,
     label,
     'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy
+    'aria-labelledby': ariaLabelledBy,
+    treeData = false,
+    getTreeDataPath,
+    groupingColDef,
+    defaultGroupingExpansionDepth,
+    isGroupExpandedByDefault,
+    rowSelectionPropagation,
+    getDetailPanelContent
   } = props;
+  const treeActive = treeData && getTreeDataPath !== undefined;
+  const isColumnVisible = (0, _react.useCallback)(column => columnVisibilityModel?.[column.field] !== false, [columnVisibilityModel]);
+  const treeField = treeActive ? columns.find(isColumnVisible)?.field : undefined;
+  const gridColumns = (0, _react.useMemo)(() => {
+    if (treeField === undefined || groupingColDef === undefined) {
+      return columns;
+    }
+    return columns.map(column => column.field === treeField ? {
+      ...column,
+      ...groupingColDef,
+      field: column.field
+    } : column);
+  }, [columns, groupingColDef, treeField]);
+  const visibleColumns = (0, _react.useMemo)(() => gridColumns.filter(isColumnVisible), [gridColumns, isColumnVisible]);
+  const selectColumn = checkboxSelection && !treeActive;
+  const treeCheckbox = checkboxSelection && treeActive;
+  const detailPanel = getDetailPanelContent !== undefined;
+  const leadingColumnIds = (0, _react.useMemo)(() => [...(selectColumn ? [_types.SELECT_COLUMN_ID] : []), ...(detailPanel ? [_types.DETAIL_PANEL_TOGGLE_ID] : [])], [detailPanel, selectColumn]);
+  const leadingWidth = (selectColumn ? _pinning.SELECT_COLUMN_WIDTH : 0) + (detailPanel ? _pinning.DETAIL_PANEL_TOGGLE_WIDTH : 0);
+  const [detailPanelExpandedRowIds, setDetailPanelExpandedRowIds] = (0, _utils.useControllableState)({
+    prop: props.detailPanelExpandedRowIds,
+    defaultProp: props.defaultDetailPanelExpandedRowIds ?? _types.EMPTY_ROW_ID_SET,
+    onChange: ids => props.onDetailPanelExpandedRowIdsChange?.(new Set(ids))
+  });
+  const resolvedDetailIds = detailPanelExpandedRowIds ?? _types.EMPTY_ROW_ID_SET;
+  const toggleDetailPanel = id => {
+    const next = new Set(resolvedDetailIds);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    setDetailPanelExpandedRowIds(next);
+  };
   const [sortModel, setSortModel] = (0, _utils.useControllableState)({
     prop: props.sortModel,
     defaultProp: props.defaultSortModel ?? [],
@@ -276,18 +327,25 @@ function DataGridInner(props) {
   const resolvedQuickFilter = quickFilter ?? '';
   const resolvedSelection = rowSelectionModel ?? _types.EMPTY_SELECTION;
   const knownFields = (0, _react.useMemo)(() => new Set(columns.map(column => column.field)), [columns]);
-  const columnPinning = (0, _react.useMemo)(() => (0, _columns.normalizePinnedColumns)(pinnedColumns, knownFields, checkboxSelection), [pinnedColumns, knownFields, checkboxSelection]);
+  const columnPinning = (0, _react.useMemo)(() => (0, _columns.normalizePinnedColumns)(pinnedColumns, knownFields, selectColumn, detailPanel), [pinnedColumns, knownFields, selectColumn, detailPanel]);
   const pinningActive = (0, _pinning.isColumnPinningActive)(columnPinning);
   const pinnedFields = (0, _react.useMemo)(() => (0, _pinning.pinnedFieldSet)(columnPinning), [columnPinning]);
   const {
     table,
     setQuickFilter: setQuickFilterWithPageReset,
     setColumnFilter,
-    setFilterModel: setFilterModelWithPageReset
+    setFilterModel: setFilterModelWithPageReset,
+    tree
   } = (0, _useDataGridTable.useDataGridTable)({
     rows,
-    columns,
+    columns: gridColumns,
     getRowId,
+    detailPanel,
+    treeData: treeActive,
+    getTreeDataPath,
+    defaultGroupingExpansionDepth,
+    isGroupExpandedByDefault,
+    rowSelectionPropagation,
     checkboxSelection,
     disableColumnSorting,
     paginationMode,
@@ -305,18 +363,19 @@ function DataGridInner(props) {
     onQuickFilterChange: value => setQuickFilter(value),
     rowSelectionModel: resolvedSelection,
     onRowSelectionModelChange: model => setRowSelectionModel(model),
-    columnPinning
+    columnPinning,
+    columnVisibility: columnVisibilityModel
   });
   const colByField = (0, _react.useMemo)(() => {
     const map = new Map();
-    for (const col of columns) {
+    for (const col of gridColumns) {
       map.set(col.field, col);
     }
     return map;
-  }, [columns]);
-  (0, _pinning.warnPinnedFlexColumns)(columns, pinnedFields);
-  const columnWidths = (0, _react.useMemo)(() => webColumnWidths(columns, checkboxSelection, pinnedFields), [checkboxSelection, columns, pinnedFields]);
-  const hasFlexColumns = (0, _react.useMemo)(() => columns.some(column => effectiveFlex(column, pinnedFields) > 0), [columns, pinnedFields]);
+  }, [gridColumns]);
+  (0, _pinning.warnPinnedFlexColumns)(visibleColumns, pinnedFields);
+  const columnWidths = (0, _react.useMemo)(() => webColumnWidths(visibleColumns, leadingWidth, pinnedFields), [leadingWidth, visibleColumns, pinnedFields]);
+  const hasFlexColumns = (0, _react.useMemo)(() => visibleColumns.some(column => effectiveFlex(column, pinnedFields) > 0), [visibleColumns, pinnedFields]);
   const pinnedOffsets = (0, _react.useMemo)(() => pinningActive ? (0, _pinning.buildPinnedOffsets)(columnPinning, colByField) : null, [pinningActive, columnPinning, colByField]);
   const orderedLeafColumnIds = (0, _react.useMemo)(() => {
     if (!pinningActive) {
@@ -344,7 +403,7 @@ function DataGridInner(props) {
   const pageCount = Math.max(table.getPageCount(), 1);
   const selectedCount = table.getFilteredSelectedRowModel().rows.length;
   const filterableCount = table.getFilteredRowModel().rows.length;
-  const headerSelectState = selectedCount === 0 ? {
+  const headerSelectState = tree?.headerSelection ?? (selectedCount === 0 ? {
     checked: false,
     indeterminate: false
   } : selectedCount === filterableCount ? {
@@ -353,7 +412,8 @@ function DataGridInner(props) {
   } : {
     checked: false,
     indeterminate: true
-  };
+  });
+  const leafColumnCount = table.getVisibleLeafColumns().length;
   const accessibleName = ariaLabel ?? label;
   const totalCount = paginationMode === 'server' ? rowCount ?? rows.length : filterableCount;
   const filterValueFor = field => {
@@ -361,14 +421,65 @@ function DataGridInner(props) {
     return typeof value === 'string' ? value : '';
   };
   const showToolbarBar = showToolbar || toolbarActions != null;
-  const filterPanelColumns = (0, _react.useMemo)(() => columns.filter(column => column.filterable !== false), [columns]);
-  const [filterPanelOpen, setFilterPanelOpen] = (0, _react.useState)(false);
+  const filterPanelColumns = (0, _react.useMemo)(() => gridColumns.filter(column => column.filterable !== false), [gridColumns]);
+  // Header filter cells and the column menu open the panel through `filterPanel.openForField`.
+  const filterPanel = (0, _DataGridFilterPanel.useDataGridFilterPanel)({
+    columns: filterPanelColumns,
+    filterModel: resolvedFilterModel,
+    onFilterModelChange: setFilterModel
+  });
+  const filterPanelOpen = filterPanel.opener !== null && filterPanelColumns.length > 0;
+  const filterPanelAnchored = filterPanel.opener?.field !== undefined;
   const filterPanelButtonRef = (0, _react.useRef)(null);
   const showFilterPanelButton = showToolbar && filterPanelColumns.length > 0;
+  const mainRef = (0, _react.useRef)(null);
+  const [viewportWidth, setViewportWidth] = (0, _react.useState)(undefined);
+  (0, _react.useEffect)(() => {
+    const main = mainRef.current;
+    if (_reactNative.Platform.OS !== 'web' || !detailPanel || main === null || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(() => setViewportWidth(main.clientWidth));
+    observer.observe(main);
+    return () => observer.disconnect();
+  }, [detailPanel]);
+  const detailPanelContentStyle = (0, _react.useMemo)(() => viewportWidth === undefined ? undefined : {
+    position: 'sticky',
+    insetInlineStart: DETAIL_PANEL_INSET,
+    width: viewportWidth - DETAIL_PANEL_INSET * 2
+  }, [viewportWidth]);
+  const rootRef = (0, _react.useRef)(null);
+  const searchRef = (0, _react.useRef)(null);
+  const bodyFocusRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (_reactNative.Platform.OS !== 'web') {
+      return undefined;
+    }
+    const root = rootRef.current;
+    const onFocusIn = event => {
+      const target = event.target instanceof Element ? event.target : null;
+      bodyFocusRef.current = target !== null && root?.contains(target.closest('tbody')) === true ? target : null;
+    };
+    document.addEventListener('focusin', onFocusIn);
+    return () => document.removeEventListener('focusin', onFocusIn);
+  }, []);
+  // Only when the focused row control was removed: focus that left the grid stays where it went.
+  (0, _react.useEffect)(() => {
+    const focused = bodyFocusRef.current;
+    if (_reactNative.Platform.OS !== 'web' || focused === null || focused.isConnected) {
+      return;
+    }
+    bodyFocusRef.current = null;
+    const active = document.activeElement;
+    if (active === null || active === document.body) {
+      searchRef.current?.focus();
+    }
+  }, [visibleRows]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: rootRef,
     className: (0, _utils.cn)((0, _styles.dataGridRootVariants)({
       autoHeight
-    }), className, filterPanelOpen && 'overflow-visible'),
+    }), className, filterPanelOpen && !filterPanelAnchored && 'overflow-visible'),
     style: style,
     ...(0, _primitives.mergeDataAttributes)({}, (0, _primitives.dataAttributes)({
       slot: 'data-grid'
@@ -381,6 +492,7 @@ function DataGridInner(props) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Input.Icon, {
           as: _icons.Search
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Input.Field, {
+          ref: searchRef,
           value: resolvedQuickFilter,
           onChangeText: setQuickFilterWithPageReset,
           placeholder: "Search",
@@ -396,12 +508,12 @@ function DataGridInner(props) {
         accessibilityState: {
           expanded: filterPanelOpen
         },
-        onPress: () => setFilterPanelOpen(open => !open)
+        onPress: () => filterPanel.toggle(filterPanelButtonRef)
       }) : null, toolbarActions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         className: (0, _styles.dataGridToolbarActionsVariants)(),
         children: toolbarActions
       }) : null]
-    }) : null, showFilterPanelButton && filterPanelOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridFilterPanel.DataGridFilterPanel, {
+    }) : null, filterPanelOpen && filterPanel.opener ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridFilterPanel.DataGridFilterPanel, {
       columns: filterPanelColumns,
       filterModel: resolvedFilterModel,
       onFilterModelChange: setFilterModelWithPageReset,
@@ -415,9 +527,10 @@ function DataGridInner(props) {
           });
         }
       },
-      onClose: () => setFilterPanelOpen(false),
-      triggerRef: filterPanelButtonRef
+      onClose: filterPanel.close,
+      opener: filterPanel.opener
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      ref: mainRef,
       className: (0, _styles.dataGridMainVariants)({
         autoHeight,
         overlay: isEmpty || loading && loadingOverlay != null
@@ -435,10 +548,14 @@ function DataGridInner(props) {
         children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Caption, {
           children: label
         }) : null, _reactNative.Platform.OS === 'web' && hasFlexColumns ? /*#__PURE__*/(0, _jsxRuntime.jsx)("colgroup", {
-          children: (orderedLeafColumnIds ?? (checkboxSelection ? [_types.SELECT_COLUMN_ID, ...columns.map(column => column.field)] : columns.map(column => column.field))).map(columnId => columnId === _types.SELECT_COLUMN_ID ? /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
+          children: (orderedLeafColumnIds ?? [...leadingColumnIds, ...visibleColumns.map(column => column.field)]).map(columnId => columnId === _types.SELECT_COLUMN_ID ? /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
             style: {
               width: _pinning.SELECT_COLUMN_WIDTH
             }
+          }, columnId) : columnId === _types.DETAIL_PANEL_TOGGLE_ID ? /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
+            style: {
+              width: _pinning.DETAIL_PANEL_TOGGLE_WIDTH
+            }
           }, columnId) : /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
             style: {
               width: columnWidths.get(columnId),
@@ -468,7 +585,14 @@ function DataGridInner(props) {
                   })
                 }, header.id);
               }
+              if (header.id === _types.DETAIL_PANEL_TOGGLE_ID) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
+                  className: (0, _utils.cn)((0, _styles.dataGridHeadVariants)(), (0, _styles.dataGridDetailToggleCellVariants)(), pinnedClassName(pin, true)),
+                  style: mergePinnedStyle(undefined, pin, pinnedOffsets, header.id, true)
+                }, header.id);
+              }
               const col = colByField.get(header.column.id);
+              const isTreeColumn = header.column.id === treeField;
               const sorted = header.column.getIsSorted();
               const canSort = !disableColumnSorting && header.column.getCanSort();
               const headerAlign = (0, _columns.resolveColumnHeaderAlign)(col);
@@ -489,6 +613,13 @@ function DataGridInner(props) {
                   sorted: sorted !== false
                 })
               }) : null;
+              const headerLabel = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [headerAlign === 'end' ? sortButton : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
+                  numberOfLines: 1,
+                  className: (0, _styles.dataGridHeaderLabelVariants)(),
+                  children: col?.renderHeader ? col.renderHeader() : headerName
+                }), headerAlign === 'end' ? null : sortButton]
+              });
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Head, {
                 align: headerAlign,
                 className: (0, _utils.cn)((0, _styles.dataGridHeadVariants)(), pinnedClassName(pin, true)),
@@ -499,26 +630,39 @@ function DataGridInner(props) {
                     'aria-sort': sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : 'none'
                   } : {})
                 } : {}),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                children: isTreeColumn ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  className: (0, _styles.dataGridTreeCellInnerVariants)(),
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    className: (0, _styles.dataGridTreeToggleSlotVariants)()
+                  }), treeCheckbox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Checkbox, {
+                    value: "select-all",
+                    isChecked: headerSelectState.checked,
+                    isIndeterminate: headerSelectState.indeterminate,
+                    onChange: () => tree?.toggleAllRowsSelected(),
+                    accessibilityLabel: "Select all",
+                    "aria-label": "Select all"
+                  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    className: (0, _utils.cn)((0, _styles.dataGridHeaderCellInnerVariants)({
+                      align: headerAlign
+                    }), 'flex-1'),
+                    children: headerLabel
+                  })]
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                   className: (0, _styles.dataGridHeaderCellInnerVariants)({
                     align: headerAlign,
                     fitToColumn: _reactNative.Platform.OS === 'web' && columnWidths.has(header.column.id)
                   }),
-                  children: [headerAlign === 'end' ? sortButton : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
-                    numberOfLines: 1,
-                    className: (0, _styles.dataGridHeaderLabelVariants)(),
-                    children: col?.renderHeader ? col.renderHeader() : headerName
-                  }), headerAlign === 'end' ? null : sortButton]
+                  children: headerLabel
                 })
               }, header.id);
             })
           }, headerGroup.id)), headerFilters ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
-            children: (pinningActive ? [...table.getStartVisibleLeafColumns(), ...table.getCenterVisibleLeafColumns(), ...table.getEndVisibleLeafColumns()] : table.getAllLeafColumns()).map(column => {
+            children: (pinningActive ? [...table.getStartVisibleLeafColumns(), ...table.getCenterVisibleLeafColumns(), ...table.getEndVisibleLeafColumns()] : table.getVisibleLeafColumns()).map(column => {
               const pin = pinMetaFor(column.id, columnPinning);
-              if (column.id === _types.SELECT_COLUMN_ID) {
+              if (column.id === _types.SELECT_COLUMN_ID || column.id === _types.DETAIL_PANEL_TOGGLE_ID) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
                   align: "center",
-                  className: (0, _utils.cn)((0, _styles.dataGridSelectHeadVariants)(), pinnedClassName(pin, true)),
+                  className: (0, _utils.cn)((0, _styles.dataGridSelectHeadVariants)(), column.id === _types.DETAIL_PANEL_TOGGLE_ID && 'w-12 px-2', pinnedClassName(pin, true)),
                   style: mergePinnedStyle(undefined, pin, pinnedOffsets, column.id, true)
                 }, column.id);
               }
@@ -550,19 +694,47 @@ function DataGridInner(props) {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Body, {
           className: (0, _styles.dataGridBodyVariants)(),
           children: loading && loadingOverlay == null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultLoadingRows, {
-            columns: columns,
-            checkboxSelection: checkboxSelection,
+            columns: visibleColumns,
+            leadingColumnIds: leadingColumnIds,
             rowCount: Math.min(resolvedPagination.pageSize, MAX_SKELETON_ROW_COUNT),
             columnWidths: columnWidths,
             orderedColumnIds: orderedLeafColumnIds,
             pinning: columnPinning,
             offsets: pinnedOffsets
-          }) : isEmpty ? null : visibleRows.map(row => {
+          }) : isEmpty ? null : visibleRows.flatMap(row => {
             const rowId = (0, _useDataGridTable.resolveRowId)(row.original, getRowId);
-            const cells = pinningActive ? [...row.getStartVisibleCells(), ...row.getCenterVisibleCells(), ...row.getEndVisibleCells()] : row.getAllCells();
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
+            const cells = pinningActive ? [...row.getStartVisibleCells(), ...row.getCenterVisibleCells(), ...row.getEndVisibleCells()] : row.getVisibleCells();
+            const detailContent = getDetailPanelContent?.({
+              id: rowId,
+              row: row.original
+            });
+            const hasDetailPanel = detailContent != null;
+            const detailOpen = hasDetailPanel && resolvedDetailIds.has(rowId);
+            const treeLabel = treeActive ? [...getTreeDataPath(row.original)].reverse().join(', ') : '';
+            const dataRow = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
+              className: detailOpen ? 'web:[&>*]:border-b-0' : undefined,
               children: cells.map(cell => {
                 const pin = pinMetaFor(cell.column.id, columnPinning);
+                if (cell.column.id === _types.DETAIL_PANEL_TOGGLE_ID) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
+                    align: "center",
+                    className: (0, _utils.cn)((0, _styles.dataGridDetailToggleCellVariants)(), pinnedClassName(pin, false)),
+                    style: mergePinnedStyle(undefined, pin, pinnedOffsets, cell.column.id, false),
+                    children: hasDetailPanel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+                      as: detailOpen ? _icons.KeyboardArrowDown : _icons.KeyboardArrowRight,
+                      variant: "ghost",
+                      color: "neutral",
+                      size: "small",
+                      iconClassName: detailOpen ? undefined : 'rtl:-scale-x-100',
+                      accessibilityLabel: `${detailOpen ? 'Collapse' : 'Expand'} row ${String(rowId)}`,
+                      accessibilityState: {
+                        expanded: detailOpen
+                      },
+                      "aria-expanded": detailOpen,
+                      onPress: () => toggleDetailPanel(rowId)
+                    }) : null
+                  }, cell.id);
+                }
                 if (cell.column.id === _types.SELECT_COLUMN_ID) {
                   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
                     align: "center",
@@ -598,14 +770,81 @@ function DataGridInner(props) {
                   const typedText = (0, _columnTypes.getTypedCellText)(col, value, row.original);
                   content = typedText !== undefined ? typedText : defaultCellContent(value);
                 }
+                if (tree && cell.column.id === treeField) {
+                  const canExpand = row.subRows.length > 0;
+                  const expanded = canExpand && tree.isRowExpanded(row.id);
+                  const status = tree.selectionStatus(row.id);
+                  content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                    className: (0, _styles.dataGridTreeCellInnerVariants)(),
+                    style: {
+                      paddingStart: row.depth * TREE_INDENT
+                    },
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                      className: (0, _styles.dataGridTreeToggleSlotVariants)(),
+                      children: canExpand ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+                        as: expanded ? _icons.KeyboardArrowDown : _icons.KeyboardArrowRight,
+                        variant: "ghost",
+                        color: "neutral",
+                        size: "small",
+                        iconClassName: expanded ? undefined : 'rtl:-scale-x-100',
+                        accessibilityLabel: `${expanded ? 'Collapse' : 'Expand'} ${treeLabel}`,
+                        accessibilityState: {
+                          expanded
+                        },
+                        "aria-expanded": expanded,
+                        onPress: () => tree.toggleRowExpanded(row.id)
+                      }) : null
+                    }), treeCheckbox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Checkbox, {
+                      value: String(rowId),
+                      isChecked: status === 'all',
+                      isIndeterminate: status === 'some',
+                      onChange: () => tree.toggleRowSelected(row),
+                      accessibilityLabel: `Select ${treeLabel}`,
+                      "aria-label": `Select ${treeLabel}`
+                    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                      className: (0, _styles.dataGridTreeContentVariants)(),
+                      children: typeof content === 'string' || typeof content === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
+                        numberOfLines: 1,
+                        children: content
+                      }) : content
+                    })]
+                  });
+                }
+                const align = (0, _columns.resolveColumnAlign)(col);
+                const cellText = !col?.renderCell && (typeof content === 'string' || typeof content === 'number') ? String(content) : undefined;
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
-                  align: (0, _columns.resolveColumnAlign)(col),
+                  align: align,
+                  ...(_reactNative.Platform.OS === 'web' && cellText ? {
+                    title: cellText
+                  } : {}),
                   className: (0, _utils.cn)((0, _styles.dataGridCellVariants)(), pinnedClassName(pin, false)),
                   style: mergePinnedStyle(cellStyle(col, columnWidths.get(cell.column.id)), pin, pinnedOffsets, cell.column.id, false),
-                  children: content
+                  children: cellText !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
+                    numberOfLines: 1,
+                    className: (0, _styles.dataGridCellTextVariants)({
+                      align,
+                      fitToColumn: _reactNative.Platform.OS === 'web' && columnWidths.has(cell.column.id)
+                    }),
+                    children: cellText
+                  }) : content
                 }, cell.id);
               })
             }, row.id);
+            if (!detailOpen) {
+              return [dataRow];
+            }
+            return [dataRow, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
+              className: "web:hover:bg-transparent",
+              testID: `data-grid-detail-panel-${String(rowId)}`,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
+                colSpan: leafColumnCount,
+                className: (0, _styles.dataGridDetailPanelCellVariants)(),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: detailPanelContentStyle,
+                  children: detailContent
+                })
+              })
+            }, `${row.id}:detail`)];
           })
         })]
       }), isEmpty ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {