@cdx-ui/data-grid 0.3.12 → 0.3.13

package/lib/module/DataGrid.js

@@ -1,20 +1,23 @@
 "use strict";
 
-import { useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { I18nManager, Platform, View } from 'react-native';
 import { Checkbox, Icon, IconButton, Input, Skeleton, Table, TablePagination, Text } from '@cdx-ui/components';
-import { Check, Close, FilterList, KeyboardArrowDown, KeyboardArrowUp, Search } from '@cdx-ui/icons';
+import { Check, Close, FilterList, KeyboardArrowDown, KeyboardArrowRight, KeyboardArrowUp, Search } from '@cdx-ui/icons';
 import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
 import { cn, useControllableState } from '@cdx-ui/utils';
 import { normalizePinnedColumns, resolveColumnAlign, resolveColumnHeaderAlign } from './adapter/columns';
-import { DEFAULT_PINNED_COLUMN_WIDTH, SELECT_COLUMN_WIDTH, buildPinnedOffsets, isColumnPinningActive, pinnedCellStyle, pinnedEdgeGuidesImage, pinnedFieldSet, warnPinnedFlexColumns } from './adapter/pinning';
+import { DEFAULT_PINNED_COLUMN_WIDTH, DETAIL_PANEL_TOGGLE_WIDTH, SELECT_COLUMN_WIDTH, buildPinnedOffsets, isColumnPinningActive, pinnedCellStyle, pinnedEdgeGuidesImage, pinnedFieldSet, warnPinnedFlexColumns } from './adapter/pinning';
 import { getTypedCellText } from './adapter/columnTypes';
-import { DataGridFilterPanel } from './DataGridFilterPanel';
-import { dataGridBodyVariants, dataGridCellVariants, dataGridEmptyOverlayVariants, dataGridFilterInputVariants, dataGridFooterVariants, dataGridHeadVariants, dataGridHeaderCellInnerVariants, dataGridHeaderLabelVariants, dataGridHeaderVariants, dataGridMainVariants, dataGridOverlayVariants, dataGridPaginationRangeVariants, dataGridPaginationVariants, dataGridPinnedEdgeVariants, dataGridPinnedSurfaceVariants, dataGridRootVariants, dataGridSelectCellVariants, dataGridSelectHeadVariants, dataGridSortButtonVariants, dataGridTableVariants, dataGridToolbarActionsVariants, dataGridToolbarSearchVariants, dataGridToolbarVariants } from './styles';
-import { DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PAGINATION_MODEL, EMPTY_SELECTION, SELECT_COLUMN_ID } from './types';
+import { DataGridFilterPanel, useDataGridFilterPanel } from './DataGridFilterPanel';
+import { dataGridBodyVariants, dataGridCellTextVariants, dataGridCellVariants, dataGridDetailPanelCellVariants, dataGridDetailToggleCellVariants, dataGridEmptyOverlayVariants, dataGridFilterInputVariants, dataGridFooterVariants, dataGridHeadVariants, dataGridHeaderCellInnerVariants, dataGridHeaderLabelVariants, dataGridHeaderVariants, dataGridMainVariants, dataGridOverlayVariants, dataGridPaginationRangeVariants, dataGridPaginationVariants, dataGridPinnedEdgeVariants, dataGridPinnedSurfaceVariants, dataGridRootVariants, dataGridSelectCellVariants, dataGridSelectHeadVariants, dataGridSortButtonVariants, dataGridTableVariants, dataGridToolbarActionsVariants, dataGridToolbarSearchVariants, dataGridToolbarVariants, dataGridTreeCellInnerVariants, dataGridTreeContentVariants, dataGridTreeToggleSlotVariants } from './styles';
+import { DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PAGINATION_MODEL, DETAIL_PANEL_TOGGLE_ID, EMPTY_ROW_ID_SET, EMPTY_SELECTION, SELECT_COLUMN_ID } from './types';
 import { resolveRowId, useDataGridTable } from './useDataGridTable';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "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'
@@ -49,7 +52,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) {
@@ -62,7 +65,7 @@ function webColumnWidths(columns, checkboxSelection, pinned = new Set()) {
     }
     return widths;
   }
-  const fixedWidth = (checkboxSelection ? SELECT_COLUMN_WIDTH : 0) + columns.reduce((total, column) => {
+  const fixedWidth = leadingWidth + columns.reduce((total, column) => {
     if (effectiveFlex(column, pinned) > 0) {
       return total;
     }
@@ -152,7 +155,7 @@ function defaultCellContent(value) {
 }
 function DefaultLoadingRows({
   columns,
-  checkboxSelection,
+  leadingColumnIds,
   rowCount,
   columnWidths,
   orderedColumnIds,
@@ -160,7 +163,7 @@ function DefaultLoadingRows({
   offsets
 }) {
   const colByField = new Map(columns.map(column => [column.field, column]));
-  const ids = orderedColumnIds ?? (checkboxSelection ? [SELECT_COLUMN_ID, ...columns.map(column => column.field)] : columns.map(column => column.field));
+  const ids = orderedColumnIds ?? [...leadingColumnIds, ...columns.map(column => column.field)];
   return /*#__PURE__*/_jsx(_Fragment, {
     children: Array.from({
       length: rowCount
@@ -179,6 +182,12 @@ function DefaultLoadingRows({
             })
           }, columnId);
         }
+        if (columnId === DETAIL_PANEL_TOGGLE_ID) {
+          return /*#__PURE__*/_jsx(Table.Cell, {
+            className: cn(dataGridDetailToggleCellVariants(), pinnedClassName(pin, false)),
+            style: mergePinnedStyle(undefined, pin, offsets, columnId, false)
+          }, columnId);
+        }
         const column = colByField.get(columnId);
         if (!column) {
           return null;
@@ -225,6 +234,7 @@ function DataGridInner(props) {
     showToolbar = false,
     headerFilters = false,
     pinnedColumns,
+    columnVisibilityModel,
     pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
     noRowsOverlay,
     loadingOverlay,
@@ -233,8 +243,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 = useCallback(column => columnVisibilityModel?.[column.field] !== false, [columnVisibilityModel]);
+  const treeField = treeActive ? columns.find(isColumnVisible)?.field : undefined;
+  const gridColumns = 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 = useMemo(() => gridColumns.filter(isColumnVisible), [gridColumns, isColumnVisible]);
+  const selectColumn = checkboxSelection && !treeActive;
+  const treeCheckbox = checkboxSelection && treeActive;
+  const detailPanel = getDetailPanelContent !== undefined;
+  const leadingColumnIds = useMemo(() => [...(selectColumn ? [SELECT_COLUMN_ID] : []), ...(detailPanel ? [DETAIL_PANEL_TOGGLE_ID] : [])], [detailPanel, selectColumn]);
+  const leadingWidth = (selectColumn ? SELECT_COLUMN_WIDTH : 0) + (detailPanel ? DETAIL_PANEL_TOGGLE_WIDTH : 0);
+  const [detailPanelExpandedRowIds, setDetailPanelExpandedRowIds] = useControllableState({
+    prop: props.detailPanelExpandedRowIds,
+    defaultProp: props.defaultDetailPanelExpandedRowIds ?? EMPTY_ROW_ID_SET,
+    onChange: ids => props.onDetailPanelExpandedRowIdsChange?.(new Set(ids))
+  });
+  const resolvedDetailIds = detailPanelExpandedRowIds ?? 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] = useControllableState({
     prop: props.sortModel,
     defaultProp: props.defaultSortModel ?? [],
@@ -272,18 +323,25 @@ function DataGridInner(props) {
   const resolvedQuickFilter = quickFilter ?? '';
   const resolvedSelection = rowSelectionModel ?? EMPTY_SELECTION;
   const knownFields = useMemo(() => new Set(columns.map(column => column.field)), [columns]);
-  const columnPinning = useMemo(() => normalizePinnedColumns(pinnedColumns, knownFields, checkboxSelection), [pinnedColumns, knownFields, checkboxSelection]);
+  const columnPinning = useMemo(() => normalizePinnedColumns(pinnedColumns, knownFields, selectColumn, detailPanel), [pinnedColumns, knownFields, selectColumn, detailPanel]);
   const pinningActive = isColumnPinningActive(columnPinning);
   const pinnedFields = useMemo(() => pinnedFieldSet(columnPinning), [columnPinning]);
   const {
     table,
     setQuickFilter: setQuickFilterWithPageReset,
     setColumnFilter,
-    setFilterModel: setFilterModelWithPageReset
+    setFilterModel: setFilterModelWithPageReset,
+    tree
   } = useDataGridTable({
     rows,
-    columns,
+    columns: gridColumns,
     getRowId,
+    detailPanel,
+    treeData: treeActive,
+    getTreeDataPath,
+    defaultGroupingExpansionDepth,
+    isGroupExpandedByDefault,
+    rowSelectionPropagation,
     checkboxSelection,
     disableColumnSorting,
     paginationMode,
@@ -301,18 +359,19 @@ function DataGridInner(props) {
     onQuickFilterChange: value => setQuickFilter(value),
     rowSelectionModel: resolvedSelection,
     onRowSelectionModelChange: model => setRowSelectionModel(model),
-    columnPinning
+    columnPinning,
+    columnVisibility: columnVisibilityModel
   });
   const colByField = useMemo(() => {
     const map = new Map();
-    for (const col of columns) {
+    for (const col of gridColumns) {
       map.set(col.field, col);
     }
     return map;
-  }, [columns]);
-  warnPinnedFlexColumns(columns, pinnedFields);
-  const columnWidths = useMemo(() => webColumnWidths(columns, checkboxSelection, pinnedFields), [checkboxSelection, columns, pinnedFields]);
-  const hasFlexColumns = useMemo(() => columns.some(column => effectiveFlex(column, pinnedFields) > 0), [columns, pinnedFields]);
+  }, [gridColumns]);
+  warnPinnedFlexColumns(visibleColumns, pinnedFields);
+  const columnWidths = useMemo(() => webColumnWidths(visibleColumns, leadingWidth, pinnedFields), [leadingWidth, visibleColumns, pinnedFields]);
+  const hasFlexColumns = useMemo(() => visibleColumns.some(column => effectiveFlex(column, pinnedFields) > 0), [visibleColumns, pinnedFields]);
   const pinnedOffsets = useMemo(() => pinningActive ? buildPinnedOffsets(columnPinning, colByField) : null, [pinningActive, columnPinning, colByField]);
   const orderedLeafColumnIds = useMemo(() => {
     if (!pinningActive) {
@@ -340,7 +399,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 ? {
@@ -349,7 +408,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 => {
@@ -357,14 +417,65 @@ function DataGridInner(props) {
     return typeof value === 'string' ? value : '';
   };
   const showToolbarBar = showToolbar || toolbarActions != null;
-  const filterPanelColumns = useMemo(() => columns.filter(column => column.filterable !== false), [columns]);
-  const [filterPanelOpen, setFilterPanelOpen] = useState(false);
+  const filterPanelColumns = useMemo(() => gridColumns.filter(column => column.filterable !== false), [gridColumns]);
+  // Header filter cells and the column menu open the panel through `filterPanel.openForField`.
+  const filterPanel = useDataGridFilterPanel({
+    columns: filterPanelColumns,
+    filterModel: resolvedFilterModel,
+    onFilterModelChange: setFilterModel
+  });
+  const filterPanelOpen = filterPanel.opener !== null && filterPanelColumns.length > 0;
+  const filterPanelAnchored = filterPanel.opener?.field !== undefined;
   const filterPanelButtonRef = useRef(null);
   const showFilterPanelButton = showToolbar && filterPanelColumns.length > 0;
+  const mainRef = useRef(null);
+  const [viewportWidth, setViewportWidth] = useState(undefined);
+  useEffect(() => {
+    const main = mainRef.current;
+    if (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 = useMemo(() => viewportWidth === undefined ? undefined : {
+    position: 'sticky',
+    insetInlineStart: DETAIL_PANEL_INSET,
+    width: viewportWidth - DETAIL_PANEL_INSET * 2
+  }, [viewportWidth]);
+  const rootRef = useRef(null);
+  const searchRef = useRef(null);
+  const bodyFocusRef = useRef(null);
+  useEffect(() => {
+    if (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.
+  useEffect(() => {
+    const focused = bodyFocusRef.current;
+    if (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__*/_jsxs(View, {
+    ref: rootRef,
     className: cn(dataGridRootVariants({
       autoHeight
-    }), className, filterPanelOpen && 'overflow-visible'),
+    }), className, filterPanelOpen && !filterPanelAnchored && 'overflow-visible'),
     style: style,
     ...mergeDataAttributes({}, dataAttributes({
       slot: 'data-grid'
@@ -377,6 +488,7 @@ function DataGridInner(props) {
         children: [/*#__PURE__*/_jsx(Input.Icon, {
           as: Search
         }), /*#__PURE__*/_jsx(Input.Field, {
+          ref: searchRef,
           value: resolvedQuickFilter,
           onChangeText: setQuickFilterWithPageReset,
           placeholder: "Search",
@@ -392,12 +504,12 @@ function DataGridInner(props) {
         accessibilityState: {
           expanded: filterPanelOpen
         },
-        onPress: () => setFilterPanelOpen(open => !open)
+        onPress: () => filterPanel.toggle(filterPanelButtonRef)
       }) : null, toolbarActions ? /*#__PURE__*/_jsx(View, {
         className: dataGridToolbarActionsVariants(),
         children: toolbarActions
       }) : null]
-    }) : null, showFilterPanelButton && filterPanelOpen ? /*#__PURE__*/_jsx(DataGridFilterPanel, {
+    }) : null, filterPanelOpen && filterPanel.opener ? /*#__PURE__*/_jsx(DataGridFilterPanel, {
       columns: filterPanelColumns,
       filterModel: resolvedFilterModel,
       onFilterModelChange: setFilterModelWithPageReset,
@@ -411,9 +523,10 @@ function DataGridInner(props) {
           });
         }
       },
-      onClose: () => setFilterPanelOpen(false),
-      triggerRef: filterPanelButtonRef
+      onClose: filterPanel.close,
+      opener: filterPanel.opener
     }) : null, /*#__PURE__*/_jsxs(View, {
+      ref: mainRef,
       className: dataGridMainVariants({
         autoHeight,
         overlay: isEmpty || loading && loadingOverlay != null
@@ -431,10 +544,14 @@ function DataGridInner(props) {
         children: [label ? /*#__PURE__*/_jsx(Table.Caption, {
           children: label
         }) : null, Platform.OS === 'web' && hasFlexColumns ? /*#__PURE__*/_jsx("colgroup", {
-          children: (orderedLeafColumnIds ?? (checkboxSelection ? [SELECT_COLUMN_ID, ...columns.map(column => column.field)] : columns.map(column => column.field))).map(columnId => columnId === SELECT_COLUMN_ID ? /*#__PURE__*/_jsx("col", {
+          children: (orderedLeafColumnIds ?? [...leadingColumnIds, ...visibleColumns.map(column => column.field)]).map(columnId => columnId === SELECT_COLUMN_ID ? /*#__PURE__*/_jsx("col", {
             style: {
               width: SELECT_COLUMN_WIDTH
             }
+          }, columnId) : columnId === DETAIL_PANEL_TOGGLE_ID ? /*#__PURE__*/_jsx("col", {
+            style: {
+              width: DETAIL_PANEL_TOGGLE_WIDTH
+            }
           }, columnId) : /*#__PURE__*/_jsx("col", {
             style: {
               width: columnWidths.get(columnId),
@@ -464,7 +581,14 @@ function DataGridInner(props) {
                   })
                 }, header.id);
               }
+              if (header.id === DETAIL_PANEL_TOGGLE_ID) {
+                return /*#__PURE__*/_jsx(Table.Cell, {
+                  className: cn(dataGridHeadVariants(), 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 = resolveColumnHeaderAlign(col);
@@ -485,6 +609,13 @@ function DataGridInner(props) {
                   sorted: sorted !== false
                 })
               }) : null;
+              const headerLabel = /*#__PURE__*/_jsxs(_Fragment, {
+                children: [headerAlign === 'end' ? sortButton : null, /*#__PURE__*/_jsx(Text, {
+                  numberOfLines: 1,
+                  className: dataGridHeaderLabelVariants(),
+                  children: col?.renderHeader ? col.renderHeader() : headerName
+                }), headerAlign === 'end' ? null : sortButton]
+              });
               return /*#__PURE__*/_jsx(Table.Head, {
                 align: headerAlign,
                 className: cn(dataGridHeadVariants(), pinnedClassName(pin, true)),
@@ -495,26 +626,39 @@ function DataGridInner(props) {
                     'aria-sort': sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : 'none'
                   } : {})
                 } : {}),
-                children: /*#__PURE__*/_jsxs(View, {
+                children: isTreeColumn ? /*#__PURE__*/_jsxs(View, {
+                  className: dataGridTreeCellInnerVariants(),
+                  children: [/*#__PURE__*/_jsx(View, {
+                    className: dataGridTreeToggleSlotVariants()
+                  }), treeCheckbox ? /*#__PURE__*/_jsx(Checkbox, {
+                    value: "select-all",
+                    isChecked: headerSelectState.checked,
+                    isIndeterminate: headerSelectState.indeterminate,
+                    onChange: () => tree?.toggleAllRowsSelected(),
+                    accessibilityLabel: "Select all",
+                    "aria-label": "Select all"
+                  }) : null, /*#__PURE__*/_jsx(View, {
+                    className: cn(dataGridHeaderCellInnerVariants({
+                      align: headerAlign
+                    }), 'flex-1'),
+                    children: headerLabel
+                  })]
+                }) : /*#__PURE__*/_jsx(View, {
                   className: dataGridHeaderCellInnerVariants({
                     align: headerAlign,
                     fitToColumn: Platform.OS === 'web' && columnWidths.has(header.column.id)
                   }),
-                  children: [headerAlign === 'end' ? sortButton : null, /*#__PURE__*/_jsx(Text, {
-                    numberOfLines: 1,
-                    className: dataGridHeaderLabelVariants(),
-                    children: col?.renderHeader ? col.renderHeader() : headerName
-                  }), headerAlign === 'end' ? null : sortButton]
+                  children: headerLabel
                 })
               }, header.id);
             })
           }, headerGroup.id)), headerFilters ? /*#__PURE__*/_jsx(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 === SELECT_COLUMN_ID) {
+              if (column.id === SELECT_COLUMN_ID || column.id === DETAIL_PANEL_TOGGLE_ID) {
                 return /*#__PURE__*/_jsx(Table.Cell, {
                   align: "center",
-                  className: cn(dataGridSelectHeadVariants(), pinnedClassName(pin, true)),
+                  className: cn(dataGridSelectHeadVariants(), column.id === DETAIL_PANEL_TOGGLE_ID && 'w-12 px-2', pinnedClassName(pin, true)),
                   style: mergePinnedStyle(undefined, pin, pinnedOffsets, column.id, true)
                 }, column.id);
               }
@@ -546,19 +690,47 @@ function DataGridInner(props) {
         }), /*#__PURE__*/_jsx(Table.Body, {
           className: dataGridBodyVariants(),
           children: loading && loadingOverlay == null ? /*#__PURE__*/_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 = resolveRowId(row.original, getRowId);
-            const cells = pinningActive ? [...row.getStartVisibleCells(), ...row.getCenterVisibleCells(), ...row.getEndVisibleCells()] : row.getAllCells();
-            return /*#__PURE__*/_jsx(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__*/_jsx(Table.Row, {
+              className: detailOpen ? 'web:[&>*]:border-b-0' : undefined,
               children: cells.map(cell => {
                 const pin = pinMetaFor(cell.column.id, columnPinning);
+                if (cell.column.id === DETAIL_PANEL_TOGGLE_ID) {
+                  return /*#__PURE__*/_jsx(Table.Cell, {
+                    align: "center",
+                    className: cn(dataGridDetailToggleCellVariants(), pinnedClassName(pin, false)),
+                    style: mergePinnedStyle(undefined, pin, pinnedOffsets, cell.column.id, false),
+                    children: hasDetailPanel ? /*#__PURE__*/_jsx(IconButton, {
+                      as: detailOpen ? KeyboardArrowDown : 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 === SELECT_COLUMN_ID) {
                   return /*#__PURE__*/_jsx(Table.Cell, {
                     align: "center",
@@ -594,14 +766,81 @@ function DataGridInner(props) {
                   const typedText = 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__*/_jsxs(View, {
+                    className: dataGridTreeCellInnerVariants(),
+                    style: {
+                      paddingStart: row.depth * TREE_INDENT
+                    },
+                    children: [/*#__PURE__*/_jsx(View, {
+                      className: dataGridTreeToggleSlotVariants(),
+                      children: canExpand ? /*#__PURE__*/_jsx(IconButton, {
+                        as: expanded ? KeyboardArrowDown : 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__*/_jsx(Checkbox, {
+                      value: String(rowId),
+                      isChecked: status === 'all',
+                      isIndeterminate: status === 'some',
+                      onChange: () => tree.toggleRowSelected(row),
+                      accessibilityLabel: `Select ${treeLabel}`,
+                      "aria-label": `Select ${treeLabel}`
+                    }) : null, /*#__PURE__*/_jsx(View, {
+                      className: dataGridTreeContentVariants(),
+                      children: typeof content === 'string' || typeof content === 'number' ? /*#__PURE__*/_jsx(Text, {
+                        numberOfLines: 1,
+                        children: content
+                      }) : content
+                    })]
+                  });
+                }
+                const align = resolveColumnAlign(col);
+                const cellText = !col?.renderCell && (typeof content === 'string' || typeof content === 'number') ? String(content) : undefined;
                 return /*#__PURE__*/_jsx(Table.Cell, {
-                  align: resolveColumnAlign(col),
+                  align: align,
+                  ...(Platform.OS === 'web' && cellText ? {
+                    title: cellText
+                  } : {}),
                   className: cn(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__*/_jsx(Text, {
+                    numberOfLines: 1,
+                    className: dataGridCellTextVariants({
+                      align,
+                      fitToColumn: Platform.OS === 'web' && columnWidths.has(cell.column.id)
+                    }),
+                    children: cellText
+                  }) : content
                 }, cell.id);
               })
             }, row.id);
+            if (!detailOpen) {
+              return [dataRow];
+            }
+            return [dataRow, /*#__PURE__*/_jsx(Table.Row, {
+              className: "web:hover:bg-transparent",
+              testID: `data-grid-detail-panel-${String(rowId)}`,
+              children: /*#__PURE__*/_jsx(Table.Cell, {
+                colSpan: leafColumnCount,
+                className: dataGridDetailPanelCellVariants(),
+                children: /*#__PURE__*/_jsx(View, {
+                  style: detailPanelContentStyle,
+                  children: detailContent
+                })
+              })
+            }, `${row.id}:detail`)];
           })
         })]
       }), isEmpty ? /*#__PURE__*/_jsx(View, {