@cdx-ui/data-grid 0.3.12 → 0.3.13

package/src/DataGrid.tsx

@@ -1,5 +1,13 @@
-import { useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-import { I18nManager, Platform, View, type ViewStyle } from 'react-native';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { I18nManager, Platform, View, type TextInput, type ViewStyle } from 'react-native';
 import {
   Checkbox,
   Icon,
@@ -15,6 +23,7 @@ import {
   Close,
   FilterList,
   KeyboardArrowDown,
+  KeyboardArrowRight,
   KeyboardArrowUp,
   Search,
 } from '@cdx-ui/icons';
@@ -27,6 +36,7 @@ import {
 } from './adapter/columns';
 import {
   DEFAULT_PINNED_COLUMN_WIDTH,
+  DETAIL_PANEL_TOGGLE_WIDTH,
   SELECT_COLUMN_WIDTH,
   buildPinnedOffsets,
   isColumnPinningActive,
@@ -38,10 +48,13 @@ import {
   type PinnedOffsetMaps,
 } from './adapter/pinning';
 import { getTypedCellText } from './adapter/columnTypes';
-import { DataGridFilterPanel } from './DataGridFilterPanel';
+import { DataGridFilterPanel, useDataGridFilterPanel } from './DataGridFilterPanel';
 import {
   dataGridBodyVariants,
+  dataGridCellTextVariants,
   dataGridCellVariants,
+  dataGridDetailPanelCellVariants,
+  dataGridDetailToggleCellVariants,
   dataGridEmptyOverlayVariants,
   dataGridFilterInputVariants,
   dataGridFooterVariants,
@@ -63,19 +76,29 @@ import {
   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,
   type DataGridProps,
   type GridColDef,
+  type GridRowId,
   type GridValidRowModel,
 } from './types';
 import { resolveRowId, useDataGridTable } from './useDataGridTable';
 
 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: ViewStyle = { overflow: 'visible' };
 // Same token as the pinned cells' `border-stroke-secondary` divider.
@@ -124,7 +147,7 @@ function effectiveFlex<R extends GridValidRowModel>(
 
 function webColumnWidths<R extends GridValidRowModel>(
   columns: readonly GridColDef<R>[],
-  checkboxSelection: boolean,
+  leadingWidth: number,
   pinned: ReadonlySet<string> = new Set(),
 ): Map<string, CSSProperties['width']> {
   const totalFlex = columns.reduce((total, column) => total + effectiveFlex(column, pinned), 0);
@@ -145,7 +168,7 @@ function webColumnWidths<R extends GridValidRowModel>(
   }
 
   const fixedWidth =
-    (checkboxSelection ? SELECT_COLUMN_WIDTH : 0) +
+    leadingWidth +
     columns.reduce((total, column) => {
       if (effectiveFlex(column, pinned) > 0) {
         return total;
@@ -248,7 +271,7 @@ function defaultCellContent(value: unknown): ReactNode {
 
 function DefaultLoadingRows<R extends GridValidRowModel>({
   columns,
-  checkboxSelection,
+  leadingColumnIds,
   rowCount,
   columnWidths,
   orderedColumnIds,
@@ -256,7 +279,7 @@ function DefaultLoadingRows<R extends GridValidRowModel>({
   offsets,
 }: {
   columns: readonly GridColDef<R>[];
-  checkboxSelection: boolean;
+  leadingColumnIds: readonly string[];
   rowCount: number;
   columnWidths: ReadonlyMap<string, CSSProperties['width']>;
   orderedColumnIds?: readonly string[];
@@ -264,11 +287,7 @@ function DefaultLoadingRows<R extends GridValidRowModel>({
   offsets: PinnedOffsetMaps | null;
 }) {
   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 (
     <>
@@ -292,6 +311,15 @@ function DefaultLoadingRows<R extends GridValidRowModel>({
                 </Table.Cell>
               );
             }
+            if (columnId === DETAIL_PANEL_TOGGLE_ID) {
+              return (
+                <Table.Cell
+                  key={columnId}
+                  className={cn(dataGridDetailToggleCellVariants(), pinnedClassName(pin, false))}
+                  style={mergePinnedStyle(undefined, pin, offsets, columnId, false)}
+                />
+              );
+            }
             const column = colByField.get(columnId);
             if (!column) {
               return null;
@@ -356,6 +384,7 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
     showToolbar = false,
     headerFilters = false,
     pinnedColumns,
+    columnVisibilityModel,
     pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
     noRowsOverlay,
     loadingOverlay,
@@ -365,8 +394,66 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
     label,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
+    treeData = false,
+    getTreeDataPath,
+    groupingColDef,
+    defaultGroupingExpansionDepth,
+    isGroupExpandedByDefault,
+    rowSelectionPropagation,
+    getDetailPanelContent,
   } = props;
 
+  const treeActive = treeData && getTreeDataPath !== undefined;
+  const isColumnVisible = useCallback(
+    (column: GridColDef<R>) => columnVisibilityModel?.[column.field] !== false,
+    [columnVisibilityModel],
+  );
+  const treeField = treeActive ? columns.find(isColumnVisible)?.field : undefined;
+  const gridColumns = useMemo((): readonly GridColDef<R>[] => {
+    if (treeField === undefined || groupingColDef === undefined) {
+      return columns;
+    }
+    return columns.map((column) =>
+      column.field === treeField
+        ? ({ ...column, ...groupingColDef, field: column.field } as GridColDef<R>)
+        : 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<
+    ReadonlySet<GridRowId>
+  >({
+    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: GridRowId) => {
+    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 ?? [],
@@ -407,8 +494,8 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
 
   const knownFields = useMemo(() => new Set(columns.map((column) => column.field)), [columns]);
   const columnPinning = useMemo(
-    () => normalizePinnedColumns(pinnedColumns, knownFields, checkboxSelection),
-    [pinnedColumns, knownFields, checkboxSelection],
+    () => normalizePinnedColumns(pinnedColumns, knownFields, selectColumn, detailPanel),
+    [pinnedColumns, knownFields, selectColumn, detailPanel],
   );
   const pinningActive = isColumnPinningActive(columnPinning);
   const pinnedFields = useMemo(() => pinnedFieldSet(columnPinning), [columnPinning]);
@@ -418,10 +505,17 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
     setQuickFilter: setQuickFilterWithPageReset,
     setColumnFilter,
     setFilterModel: setFilterModelWithPageReset,
+    tree,
   } = useDataGridTable({
     rows,
-    columns,
+    columns: gridColumns,
     getRowId,
+    detailPanel,
+    treeData: treeActive,
+    getTreeDataPath,
+    defaultGroupingExpansionDepth,
+    isGroupExpandedByDefault,
+    rowSelectionPropagation,
     checkboxSelection,
     disableColumnSorting,
     paginationMode,
@@ -440,25 +534,26 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
     rowSelectionModel: resolvedSelection,
     onRowSelectionModelChange: (model) => setRowSelectionModel(model),
     columnPinning,
+    columnVisibility: columnVisibilityModel,
   });
 
   const colByField = useMemo(() => {
     const map = new Map<string, GridColDef<R>>();
-    for (const col of columns) {
+    for (const col of gridColumns) {
       map.set(col.field, col);
     }
     return map;
-  }, [columns]);
+  }, [gridColumns]);
 
-  warnPinnedFlexColumns(columns, pinnedFields);
+  warnPinnedFlexColumns(visibleColumns, pinnedFields);
 
   const columnWidths = useMemo(
-    () => webColumnWidths(columns, checkboxSelection, pinnedFields),
-    [checkboxSelection, columns, pinnedFields],
+    () => webColumnWidths(visibleColumns, leadingWidth, pinnedFields),
+    [leadingWidth, visibleColumns, pinnedFields],
   );
   const hasFlexColumns = useMemo(
-    () => columns.some((column) => effectiveFlex(column, pinnedFields) > 0),
-    [columns, pinnedFields],
+    () => visibleColumns.some((column) => effectiveFlex(column, pinnedFields) > 0),
+    [visibleColumns, pinnedFields],
   );
   const pinnedOffsets = useMemo(
     () => (pinningActive ? buildPinnedOffsets(columnPinning, colByField) : null),
@@ -496,11 +591,13 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
   const selectedCount = table.getFilteredSelectedRowModel().rows.length;
   const filterableCount = table.getFilteredRowModel().rows.length;
   const headerSelectState =
-    selectedCount === 0
+    tree?.headerSelection ??
+    (selectedCount === 0
       ? { checked: false, indeterminate: false }
       : selectedCount === filterableCount
         ? { checked: true, indeterminate: false }
-        : { checked: false, indeterminate: true };
+        : { checked: false, indeterminate: true });
+  const leafColumnCount = table.getVisibleLeafColumns().length;
 
   const accessibleName = ariaLabel ?? label;
   const totalCount = paginationMode === 'server' ? (rowCount ?? rows.length) : filterableCount;
@@ -512,19 +609,84 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
 
   const showToolbarBar = showToolbar || toolbarActions != null;
   const filterPanelColumns = useMemo(
-    () => columns.filter((column) => column.filterable !== false),
-    [columns],
+    () => gridColumns.filter((column) => column.filterable !== false),
+    [gridColumns],
   );
-  const [filterPanelOpen, setFilterPanelOpen] = useState(false);
+  // 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<View>(null);
   const showFilterPanelButton = showToolbar && filterPanelColumns.length > 0;
 
+  const mainRef = useRef<View>(null);
+  const [viewportWidth, setViewportWidth] = useState<number | undefined>(undefined);
+  useEffect(() => {
+    const main = mainRef.current as unknown as HTMLElement | null;
+    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(
+    (): ViewStyle | undefined =>
+      viewportWidth === undefined
+        ? undefined
+        : ({
+            position: 'sticky',
+            insetInlineStart: DETAIL_PANEL_INSET,
+            width: viewportWidth - DETAIL_PANEL_INSET * 2,
+          } as unknown as ViewStyle),
+    [viewportWidth],
+  );
+
+  const rootRef = useRef<View>(null);
+  const searchRef = useRef<TextInput>(null);
+  const bodyFocusRef = useRef<Element | null>(null);
+  useEffect(() => {
+    if (Platform.OS !== 'web') {
+      return undefined;
+    }
+    const root = rootRef.current as unknown as HTMLElement | null;
+    const onFocusIn = (event: FocusEvent) => {
+      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 (
     <View
+      ref={rootRef}
       className={cn(
         dataGridRootVariants({ autoHeight }),
         className,
-        filterPanelOpen && 'overflow-visible',
+        filterPanelOpen && !filterPanelAnchored && 'overflow-visible',
       )}
       style={style}
       {...mergeDataAttributes({}, dataAttributes({ slot: 'data-grid' }))}
@@ -535,6 +697,7 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
             <Input size="small" className={dataGridToolbarSearchVariants()}>
               <Input.Icon as={Search} />
               <Input.Field
+                ref={searchRef}
                 value={resolvedQuickFilter}
                 onChangeText={setQuickFilterWithPageReset}
                 placeholder="Search"
@@ -551,7 +714,7 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
               size="small"
               accessibilityLabel="Filters"
               accessibilityState={{ expanded: filterPanelOpen }}
-              onPress={() => setFilterPanelOpen((open) => !open)}
+              onPress={() => filterPanel.toggle(filterPanelButtonRef)}
             />
           ) : null}
           {toolbarActions ? (
@@ -559,7 +722,7 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
           ) : null}
         </View>
       ) : null}
-      {showFilterPanelButton && filterPanelOpen ? (
+      {filterPanelOpen && filterPanel.opener ? (
         <DataGridFilterPanel
           columns={filterPanelColumns}
           filterModel={resolvedFilterModel}
@@ -571,12 +734,13 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
               setPaginationModel({ ...resolvedPagination, page: 0 });
             }
           }}
-          onClose={() => setFilterPanelOpen(false)}
-          triggerRef={filterPanelButtonRef}
+          onClose={filterPanel.close}
+          opener={filterPanel.opener}
         />
       ) : null}
 
       <View
+        ref={mainRef}
         className={dataGridMainVariants({
           autoHeight,
           overlay: isEmpty || (loading && loadingOverlay != null),
@@ -602,13 +766,15 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
           {Platform.OS === 'web' && hasFlexColumns ? (
             <colgroup>
               {(
-                orderedLeafColumnIds ??
-                (checkboxSelection
-                  ? [SELECT_COLUMN_ID, ...columns.map((column) => column.field)]
-                  : columns.map((column) => column.field))
+                orderedLeafColumnIds ?? [
+                  ...leadingColumnIds,
+                  ...visibleColumns.map((column) => column.field),
+                ]
               ).map((columnId) =>
                 columnId === SELECT_COLUMN_ID ? (
                   <col key={columnId} style={{ width: SELECT_COLUMN_WIDTH }} />
+                ) : columnId === DETAIL_PANEL_TOGGLE_ID ? (
+                  <col key={columnId} style={{ width: DETAIL_PANEL_TOGGLE_WIDTH }} />
                 ) : (
                   <col
                     key={columnId}
@@ -657,8 +823,22 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
                       </Table.Head>
                     );
                   }
+                  if (header.id === DETAIL_PANEL_TOGGLE_ID) {
+                    return (
+                      <Table.Cell
+                        key={header.id}
+                        className={cn(
+                          dataGridHeadVariants(),
+                          dataGridDetailToggleCellVariants(),
+                          pinnedClassName(pin, true),
+                        )}
+                        style={mergePinnedStyle(undefined, pin, pinnedOffsets, header.id, true)}
+                      />
+                    );
+                  }
 
                   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);
@@ -681,6 +861,15 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
                       })}
                     />
                   ) : null;
+                  const headerLabel = (
+                    <>
+                      {headerAlign === 'end' ? sortButton : null}
+                      <Text numberOfLines={1} className={dataGridHeaderLabelVariants()}>
+                        {col?.renderHeader ? col.renderHeader() : headerName}
+                      </Text>
+                      {headerAlign === 'end' ? null : sortButton}
+                    </>
+                  );
 
                   return (
                     <Table.Head
@@ -710,18 +899,39 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
                           }
                         : {})}
                     >
-                      <View
-                        className={dataGridHeaderCellInnerVariants({
-                          align: headerAlign,
-                          fitToColumn: Platform.OS === 'web' && columnWidths.has(header.column.id),
-                        })}
-                      >
-                        {headerAlign === 'end' ? sortButton : null}
-                        <Text numberOfLines={1} className={dataGridHeaderLabelVariants()}>
-                          {col?.renderHeader ? col.renderHeader() : headerName}
-                        </Text>
-                        {headerAlign === 'end' ? null : sortButton}
-                      </View>
+                      {isTreeColumn ? (
+                        <View className={dataGridTreeCellInnerVariants()}>
+                          <View className={dataGridTreeToggleSlotVariants()} />
+                          {treeCheckbox ? (
+                            <Checkbox
+                              value="select-all"
+                              isChecked={headerSelectState.checked}
+                              isIndeterminate={headerSelectState.indeterminate}
+                              onChange={() => tree?.toggleAllRowsSelected()}
+                              accessibilityLabel="Select all"
+                              aria-label="Select all"
+                            />
+                          ) : null}
+                          <View
+                            className={cn(
+                              dataGridHeaderCellInnerVariants({ align: headerAlign }),
+                              'flex-1',
+                            )}
+                          >
+                            {headerLabel}
+                          </View>
+                        </View>
+                      ) : (
+                        <View
+                          className={dataGridHeaderCellInnerVariants({
+                            align: headerAlign,
+                            fitToColumn:
+                              Platform.OS === 'web' && columnWidths.has(header.column.id),
+                          })}
+                        >
+                          {headerLabel}
+                        </View>
+                      )}
                     </Table.Head>
                   );
                 })}
@@ -735,15 +945,19 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
                       ...table.getCenterVisibleLeafColumns(),
                       ...table.getEndVisibleLeafColumns(),
                     ]
-                  : table.getAllLeafColumns()
+                  : 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 (
                       <Table.Cell
                         key={column.id}
                         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)}
                       />
                     );
@@ -795,8 +1009,8 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
           <Table.Body className={dataGridBodyVariants()}>
             {loading && loadingOverlay == null ? (
               <DefaultLoadingRows
-                columns={columns}
-                checkboxSelection={checkboxSelection}
+                columns={visibleColumns}
+                leadingColumnIds={leadingColumnIds}
                 rowCount={Math.min(resolvedPagination.pageSize, MAX_SKELETON_ROW_COUNT)}
                 columnWidths={columnWidths}
                 orderedColumnIds={orderedLeafColumnIds}
@@ -804,7 +1018,7 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
                 offsets={pinnedOffsets}
               />
             ) : isEmpty ? null : (
-              visibleRows.map((row) => {
+              visibleRows.flatMap((row) => {
                 const rowId = resolveRowId(row.original, getRowId);
                 const cells = pinningActive
                   ? [
@@ -812,11 +1026,53 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
                       ...row.getCenterVisibleCells(),
                       ...row.getEndVisibleCells(),
                     ]
-                  : row.getAllCells();
-                return (
-                  <Table.Row key={row.id}>
+                  : 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 = (
+                  <Table.Row
+                    key={row.id}
+                    className={detailOpen ? 'web:[&>*]:border-b-0' : undefined}
+                  >
                     {cells.map((cell) => {
                       const pin = pinMetaFor(cell.column.id, columnPinning);
+                      if (cell.column.id === DETAIL_PANEL_TOGGLE_ID) {
+                        return (
+                          <Table.Cell
+                            key={cell.id}
+                            align="center"
+                            className={cn(
+                              dataGridDetailToggleCellVariants(),
+                              pinnedClassName(pin, false),
+                            )}
+                            style={mergePinnedStyle(
+                              undefined,
+                              pin,
+                              pinnedOffsets,
+                              cell.column.id,
+                              false,
+                            )}
+                          >
+                            {hasDetailPanel ? (
+                              <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}
+                          </Table.Cell>
+                        );
+                      }
                       if (cell.column.id === SELECT_COLUMN_ID) {
                         return (
                           <Table.Cell
@@ -865,10 +1121,63 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
                         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 = (
+                          <View
+                            className={dataGridTreeCellInnerVariants()}
+                            style={{ paddingStart: row.depth * TREE_INDENT }}
+                          >
+                            <View className={dataGridTreeToggleSlotVariants()}>
+                              {canExpand ? (
+                                <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}
+                            </View>
+                            {treeCheckbox ? (
+                              <Checkbox
+                                value={String(rowId)}
+                                isChecked={status === 'all'}
+                                isIndeterminate={status === 'some'}
+                                onChange={() => tree.toggleRowSelected(row)}
+                                accessibilityLabel={`Select ${treeLabel}`}
+                                aria-label={`Select ${treeLabel}`}
+                              />
+                            ) : null}
+                            <View className={dataGridTreeContentVariants()}>
+                              {typeof content === 'string' || typeof content === 'number' ? (
+                                <Text numberOfLines={1}>{content}</Text>
+                              ) : (
+                                content
+                              )}
+                            </View>
+                          </View>
+                        );
+                      }
+
+                      const align = resolveColumnAlign(col);
+                      const cellText =
+                        !col?.renderCell &&
+                        (typeof content === 'string' || typeof content === 'number')
+                          ? String(content)
+                          : undefined;
+
                       return (
                         <Table.Cell
                           key={cell.id}
-                          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)),
@@ -878,12 +1187,43 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
                             false,
                           )}
                         >
-                          {content}
+                          {cellText !== undefined ? (
+                            <Text
+                              numberOfLines={1}
+                              className={dataGridCellTextVariants({
+                                align,
+                                fitToColumn:
+                                  Platform.OS === 'web' && columnWidths.has(cell.column.id),
+                              })}
+                            >
+                              {cellText}
+                            </Text>
+                          ) : (
+                            content
+                          )}
                         </Table.Cell>
                       );
                     })}
                   </Table.Row>
                 );
+                if (!detailOpen) {
+                  return [dataRow];
+                }
+                return [
+                  dataRow,
+                  <Table.Row
+                    key={`${row.id}:detail`}
+                    className="web:hover:bg-transparent"
+                    testID={`data-grid-detail-panel-${String(rowId)}`}
+                  >
+                    <Table.Cell
+                      colSpan={leafColumnCount}
+                      className={dataGridDetailPanelCellVariants()}
+                    >
+                      <View style={detailPanelContentStyle}>{detailContent}</View>
+                    </Table.Cell>
+                  </Table.Row>,
+                ];
               })
             )}
           </Table.Body>