@cdx-ui/data-grid 0.3.11 → 0.3.13

package/src/DataGrid.tsx

@@ -1,7 +1,16 @@
-import { useMemo, type CSSProperties, type ReactNode } from 'react';
-import { 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,
   IconButton,
   Input,
   Skeleton,
@@ -9,13 +18,43 @@ import {
   TablePagination,
   Text,
 } from '@cdx-ui/components';
-import { 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 { normalizeGridAlignment } from './adapter/columns';
+import {
+  normalizePinnedColumns,
+  resolveColumnAlign,
+  resolveColumnHeaderAlign,
+} from './adapter/columns';
+import {
+  DEFAULT_PINNED_COLUMN_WIDTH,
+  DETAIL_PANEL_TOGGLE_WIDTH,
+  SELECT_COLUMN_WIDTH,
+  buildPinnedOffsets,
+  isColumnPinningActive,
+  pinnedCellStyle,
+  pinnedEdgeGuidesImage,
+  pinnedFieldSet,
+  warnPinnedFlexColumns,
+  type ColumnPinEdge,
+  type PinnedOffsetMaps,
+} from './adapter/pinning';
+import { getTypedCellText } from './adapter/columnTypes';
+import { DataGridFilterPanel, useDataGridFilterPanel } from './DataGridFilterPanel';
 import {
   dataGridBodyVariants,
+  dataGridCellTextVariants,
   dataGridCellVariants,
+  dataGridDetailPanelCellVariants,
+  dataGridDetailToggleCellVariants,
   dataGridEmptyOverlayVariants,
   dataGridFilterInputVariants,
   dataGridFooterVariants,
@@ -27,6 +66,8 @@ import {
   dataGridOverlayVariants,
   dataGridPaginationRangeVariants,
   dataGridPaginationVariants,
+  dataGridPinnedEdgeVariants,
+  dataGridPinnedSurfaceVariants,
   dataGridRootVariants,
   dataGridSelectCellVariants,
   dataGridSelectHeadVariants,
@@ -35,22 +76,38 @@ 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 SELECT_COLUMN_WIDTH = 56;
 const WEB_TABLE_CONTAINER_STYLE: ViewStyle = { overflow: 'visible' };
+// Same token as the pinned cells' `border-stroke-secondary` divider.
+const PINNED_EDGE_COLOR = 'var(--color-stroke-secondary)';
+
+interface PinRenderMeta {
+  edge: ColumnPinEdge | false;
+  isEdgeDivider: boolean;
+}
 
 function cellStyle<R extends GridValidRowModel>(
   col: GridColDef<R> | undefined,
@@ -78,16 +135,32 @@ function cellStyle<R extends GridValidRowModel>(
   return Object.keys(style).length > 0 ? style : undefined;
 }
 
+function effectiveFlex<R extends GridValidRowModel>(
+  column: GridColDef<R>,
+  pinned: ReadonlySet<string>,
+): number {
+  if (pinned.has(column.field)) {
+    return 0;
+  }
+  return Math.max(column.flex ?? 0, 0);
+}
+
 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 + Math.max(column.flex ?? 0, 0), 0);
+  const totalFlex = columns.reduce((total, column) => total + effectiveFlex(column, pinned), 0);
   const widths = new Map<string, CSSProperties['width']>();
 
   if (totalFlex === 0) {
     for (const column of columns) {
-      if (column.width !== undefined) {
+      if (pinned.has(column.field)) {
+        widths.set(
+          column.field,
+          Math.max(column.width ?? DEFAULT_PINNED_COLUMN_WIDTH, column.minWidth ?? 0),
+        );
+      } else if (column.width !== undefined) {
         widths.set(column.field, column.width);
       }
     }
@@ -95,17 +168,21 @@ function webColumnWidths<R extends GridValidRowModel>(
   }
 
   const fixedWidth =
-    (checkboxSelection ? SELECT_COLUMN_WIDTH : 0) +
+    leadingWidth +
     columns.reduce((total, column) => {
-      if ((column.flex ?? 0) > 0) {
+      if (effectiveFlex(column, pinned) > 0) {
         return total;
       }
-      return total + Math.max(column.width ?? DEFAULT_WEB_COLUMN_WIDTH, column.minWidth ?? 0);
+      const fallback = pinned.has(column.field)
+        ? DEFAULT_PINNED_COLUMN_WIDTH
+        : DEFAULT_WEB_COLUMN_WIDTH;
+      return total + Math.max(column.width ?? fallback, column.minWidth ?? 0);
     }, 0);
 
   for (const column of columns) {
-    if ((column.flex ?? 0) > 0) {
-      const share = (column.flex ?? 0) / totalFlex;
+    const flex = effectiveFlex(column, pinned);
+    if (flex > 0) {
+      const share = flex / totalFlex;
       const percentage = share * 100;
       const fixedShare = fixedWidth * share;
       const width = `calc(${percentage.toString()}% - ${fixedShare.toString()}px)`;
@@ -114,16 +191,65 @@ function webColumnWidths<R extends GridValidRowModel>(
         column.minWidth === undefined ? width : `max(${column.minWidth.toString()}px, ${width})`,
       );
     } else {
-      widths.set(
-        column.field,
-        Math.max(column.width ?? DEFAULT_WEB_COLUMN_WIDTH, column.minWidth ?? 0),
-      );
+      const fallback = pinned.has(column.field)
+        ? DEFAULT_PINNED_COLUMN_WIDTH
+        : DEFAULT_WEB_COLUMN_WIDTH;
+      widths.set(column.field, Math.max(column.width ?? fallback, column.minWidth ?? 0));
     }
   }
 
   return widths;
 }
 
+function pinMetaFor(columnId: string, pinning: { start: string[]; end: string[] }): PinRenderMeta {
+  const startIndex = pinning.start.indexOf(columnId);
+  if (startIndex >= 0) {
+    return {
+      edge: 'start',
+      isEdgeDivider: startIndex === pinning.start.length - 1,
+    };
+  }
+  const endIndex = pinning.end.indexOf(columnId);
+  if (endIndex >= 0) {
+    return {
+      edge: 'end',
+      isEdgeDivider: endIndex === 0,
+    };
+  }
+  return { edge: false, isEdgeDivider: false };
+}
+
+function mergePinnedStyle(
+  base: ViewStyle | undefined,
+  pin: PinRenderMeta,
+  offsets: PinnedOffsetMaps | null,
+  columnId: string,
+  isHeader: boolean,
+): ViewStyle | undefined {
+  if (!pin.edge || offsets == null) {
+    return base;
+  }
+  const offset =
+    pin.edge === 'start' ? (offsets.start.get(columnId) ?? 0) : (offsets.end.get(columnId) ?? 0);
+  return { ...base, ...pinnedCellStyle(pin.edge, offset, isHeader) };
+}
+
+function pinnedClassName(pin: PinRenderMeta, isHeader: boolean): string | undefined {
+  if (!pin.edge) {
+    return undefined;
+  }
+  return cn(
+    dataGridPinnedSurfaceVariants({ header: isHeader }),
+    dataGridPinnedEdgeVariants({ edge: pin.isEdgeDivider ? pin.edge : 'none' }),
+  );
+}
+
+function BooleanCell({ value }: { value: boolean }) {
+  return (
+    <Icon as={value ? Check : Close} accessibilityLabel={value ? 'Yes' : 'No'} className="size-5" />
+  );
+}
+
 function defaultCellContent(value: unknown): ReactNode {
   if (value == null) {
     return '';
@@ -145,15 +271,24 @@ function defaultCellContent(value: unknown): ReactNode {
 
 function DefaultLoadingRows<R extends GridValidRowModel>({
   columns,
-  checkboxSelection,
+  leadingColumnIds,
   rowCount,
   columnWidths,
+  orderedColumnIds,
+  pinning,
+  offsets,
 }: {
   columns: readonly GridColDef<R>[];
-  checkboxSelection: boolean;
+  leadingColumnIds: readonly string[];
   rowCount: number;
   columnWidths: ReadonlyMap<string, CSSProperties['width']>;
+  orderedColumnIds?: readonly string[];
+  pinning: { start: string[]; end: string[] };
+  offsets: PinnedOffsetMaps | null;
 }) {
+  const colByField = new Map(columns.map((column) => [column.field, column]));
+  const ids = orderedColumnIds ?? [...leadingColumnIds, ...columns.map((column) => column.field)];
+
   return (
     <>
       {Array.from({ length: rowCount }, (_, rowIndex) => (
@@ -162,21 +297,50 @@ function DefaultLoadingRows<R extends GridValidRowModel>({
           className="pointer-events-none web:hover:bg-surface-primary"
           testID={rowIndex === 0 ? 'data-grid-default-loading-rows' : undefined}
         >
-          {checkboxSelection ? (
-            <Table.Cell align="center" className={dataGridSelectCellVariants()}>
-              <Skeleton className="size-5" />
-            </Table.Cell>
-          ) : null}
-          {columns.map((column) => (
-            <Table.Cell
-              key={column.field}
-              align={normalizeGridAlignment(column.align)}
-              className={dataGridCellVariants()}
-              style={cellStyle(column, columnWidths.get(column.field))}
-            >
-              <Skeleton className="h-4 w-3/5" />
-            </Table.Cell>
-          ))}
+          {ids.map((columnId) => {
+            const pin = pinMetaFor(columnId, pinning);
+            if (columnId === SELECT_COLUMN_ID) {
+              return (
+                <Table.Cell
+                  key={columnId}
+                  align="center"
+                  className={cn(dataGridSelectCellVariants(), pinnedClassName(pin, false))}
+                  style={mergePinnedStyle(undefined, pin, offsets, columnId, false)}
+                >
+                  <Skeleton className="size-5" />
+                </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;
+            }
+            return (
+              <Table.Cell
+                key={column.field}
+                align={resolveColumnAlign(column)}
+                className={cn(dataGridCellVariants(), pinnedClassName(pin, false))}
+                style={mergePinnedStyle(
+                  cellStyle(column, columnWidths.get(column.field)),
+                  pin,
+                  offsets,
+                  column.field,
+                  false,
+                )}
+              >
+                <Skeleton className="h-4 w-3/5" />
+              </Table.Cell>
+            );
+          })}
         </Table.Row>
       ))}
     </>
@@ -219,6 +383,8 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
     rowCount,
     showToolbar = false,
     headerFilters = false,
+    pinnedColumns,
+    columnVisibilityModel,
     pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
     noRowsOverlay,
     loadingOverlay,
@@ -228,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 ?? [],
@@ -245,6 +469,11 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
     defaultProp: props.defaultFilterModel ?? [],
     onChange: props.onFilterModelChange,
   });
+  const [filterLogicOperator, setFilterLogicOperator] = useControllableState({
+    prop: props.filterLogicOperator,
+    defaultProp: props.defaultFilterLogicOperator ?? 'and',
+    onChange: props.onFilterLogicOperatorChange,
+  });
   const [quickFilter, setQuickFilter] = useControllableState({
     prop: props.quickFilter,
     defaultProp: props.defaultQuickFilter ?? '',
@@ -259,17 +488,34 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
   const resolvedSortModel = sortModel ?? [];
   const resolvedPagination = paginationModel ?? DEFAULT_PAGINATION_MODEL;
   const resolvedFilterModel = filterModel ?? [];
+  const resolvedFilterLogicOperator = filterLogicOperator ?? 'and';
   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, selectColumn, detailPanel),
+    [pinnedColumns, knownFields, selectColumn, detailPanel],
+  );
+  const pinningActive = isColumnPinningActive(columnPinning);
+  const pinnedFields = useMemo(() => pinnedFieldSet(columnPinning), [columnPinning]);
+
   const {
     table,
     setQuickFilter: setQuickFilterWithPageReset,
     setColumnFilter,
+    setFilterModel: setFilterModelWithPageReset,
+    tree,
   } = useDataGridTable({
     rows,
-    columns,
+    columns: gridColumns,
     getRowId,
+    detailPanel,
+    treeData: treeActive,
+    getTreeDataPath,
+    defaultGroupingExpansionDepth,
+    isGroupExpandedByDefault,
+    rowSelectionPropagation,
     checkboxSelection,
     disableColumnSorting,
     paginationMode,
@@ -282,48 +528,166 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
     onPaginationModelChange: (model) => setPaginationModel(model),
     filterModel: resolvedFilterModel,
     onFilterModelChange: (model) => setFilterModel(model),
+    filterLogicOperator: resolvedFilterLogicOperator,
     quickFilter: resolvedQuickFilter,
     onQuickFilterChange: (value) => setQuickFilter(value),
     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(visibleColumns, pinnedFields);
+
   const columnWidths = useMemo(
-    () => webColumnWidths(columns, checkboxSelection),
-    [checkboxSelection, columns],
+    () => webColumnWidths(visibleColumns, leadingWidth, pinnedFields),
+    [leadingWidth, visibleColumns, pinnedFields],
+  );
+  const hasFlexColumns = useMemo(
+    () => visibleColumns.some((column) => effectiveFlex(column, pinnedFields) > 0),
+    [visibleColumns, pinnedFields],
   );
-  const hasFlexColumns = useMemo(() => columns.some((column) => (column.flex ?? 0) > 0), [columns]);
+  const pinnedOffsets = useMemo(
+    () => (pinningActive ? buildPinnedOffsets(columnPinning, colByField) : null),
+    [pinningActive, columnPinning, colByField],
+  );
+  const orderedLeafColumnIds = useMemo(() => {
+    if (!pinningActive) {
+      return undefined;
+    }
+    return [
+      ...table.getStartVisibleLeafColumns().map((column) => column.id),
+      ...table.getCenterVisibleLeafColumns().map((column) => column.id),
+      ...table.getEndVisibleLeafColumns().map((column) => column.id),
+    ];
+  }, [pinningActive, table]);
+  const isEmpty = !loading && rows.length === 0;
+  const mainScrollStyle = useMemo((): ViewStyle | undefined => {
+    if (!pinningActive || pinnedOffsets == null) {
+      return undefined;
+    }
+    const guides =
+      Platform.OS === 'web' && !isEmpty
+        ? pinnedEdgeGuidesImage(pinnedOffsets, PINNED_EDGE_COLOR, I18nManager.isRTL)
+        : undefined;
+    // Logical scroll-padding keeps focused cells out from under pinned edges (web).
+    return {
+      scrollPaddingInlineStart: pinnedOffsets.startTotal,
+      scrollPaddingInlineEnd: pinnedOffsets.endTotal,
+      ...(guides ? { backgroundImage: guides, backgroundRepeat: 'no-repeat' } : {}),
+    } as ViewStyle;
+  }, [pinningActive, pinnedOffsets, isEmpty]);
 
   const visibleRows = table.getRowModel().rows;
   const pageCount = Math.max(table.getPageCount(), 1);
   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 isEmpty = !loading && rows.length === 0;
   const totalCount = paginationMode === 'server' ? (rowCount ?? rows.length) : filterableCount;
 
-  const filterValueFor = (field: string) =>
-    resolvedFilterModel.find((item) => item.field === field)?.value ?? '';
+  const filterValueFor = (field: string) => {
+    const value = resolvedFilterModel.find((item) => item.field === field)?.value;
+    return typeof value === 'string' ? value : '';
+  };
 
   const showToolbarBar = showToolbar || toolbarActions != null;
+  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<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
-      className={cn(dataGridRootVariants({ autoHeight }), className)}
+      ref={rootRef}
+      className={cn(
+        dataGridRootVariants({ autoHeight }),
+        className,
+        filterPanelOpen && !filterPanelAnchored && 'overflow-visible',
+      )}
       style={style}
       {...mergeDataAttributes({}, dataAttributes({ slot: 'data-grid' }))}
     >
@@ -333,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"
@@ -340,17 +705,47 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
               />
             </Input>
           ) : null}
+          {showFilterPanelButton ? (
+            <IconButton
+              ref={filterPanelButtonRef}
+              as={FilterList}
+              variant="ghost"
+              color="neutral"
+              size="small"
+              accessibilityLabel="Filters"
+              accessibilityState={{ expanded: filterPanelOpen }}
+              onPress={() => filterPanel.toggle(filterPanelButtonRef)}
+            />
+          ) : null}
           {toolbarActions ? (
             <View className={dataGridToolbarActionsVariants()}>{toolbarActions}</View>
           ) : null}
         </View>
       ) : null}
+      {filterPanelOpen && filterPanel.opener ? (
+        <DataGridFilterPanel
+          columns={filterPanelColumns}
+          filterModel={resolvedFilterModel}
+          onFilterModelChange={setFilterModelWithPageReset}
+          logicOperator={resolvedFilterLogicOperator}
+          onLogicOperatorChange={(operator) => {
+            setFilterLogicOperator(operator);
+            if (resolvedPagination.page !== 0) {
+              setPaginationModel({ ...resolvedPagination, page: 0 });
+            }
+          }}
+          onClose={filterPanel.close}
+          opener={filterPanel.opener}
+        />
+      ) : null}
 
       <View
+        ref={mainRef}
         className={dataGridMainVariants({
           autoHeight,
           overlay: isEmpty || (loading && loadingOverlay != null),
         })}
+        style={mainScrollStyle}
       >
         <Table
           className={cn(
@@ -370,28 +765,52 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
           {label ? <Table.Caption>{label}</Table.Caption> : null}
           {Platform.OS === 'web' && hasFlexColumns ? (
             <colgroup>
-              {checkboxSelection ? <col style={{ width: SELECT_COLUMN_WIDTH }} /> : null}
-              {columns.map((column) => (
-                <col
-                  key={column.field}
-                  style={{
-                    width: columnWidths.get(column.field),
-                    minWidth: column.minWidth,
-                  }}
-                />
-              ))}
+              {(
+                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}
+                    style={{
+                      width: columnWidths.get(columnId),
+                      minWidth: colByField.get(columnId)?.minWidth,
+                    }}
+                  />
+                ),
+              )}
             </colgroup>
           ) : null}
           <Table.Header className={dataGridHeaderVariants()}>
-            {table.getHeaderGroups().map((headerGroup) => (
+            {(pinningActive
+              ? [
+                  {
+                    id: 'pinned',
+                    headers: [
+                      ...table.getStartLeafHeaders(),
+                      ...table.getCenterLeafHeaders(),
+                      ...table.getEndLeafHeaders(),
+                    ],
+                  },
+                ]
+              : table.getHeaderGroups()
+            ).map((headerGroup) => (
               <Table.Row key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
+                  const pin = pinMetaFor(header.column.id, columnPinning);
                   if (header.id === SELECT_COLUMN_ID) {
                     return (
                       <Table.Head
                         key={header.id}
                         align="center"
-                        className={dataGridSelectHeadVariants()}
+                        className={cn(dataGridSelectHeadVariants(), pinnedClassName(pin, true))}
+                        style={mergePinnedStyle(undefined, pin, pinnedOffsets, header.id, true)}
                       >
                         <Checkbox
                           value="select-all"
@@ -404,11 +823,25 @@ 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 = normalizeGridAlignment(col?.headerAlign ?? col?.align);
+                  const headerAlign = resolveColumnHeaderAlign(col);
                   const headerName = col?.headerName ?? header.column.id;
                   const SortIcon = sorted === 'asc' ? KeyboardArrowUp : KeyboardArrowDown;
                   const sortButton = canSort ? (
@@ -428,13 +861,28 @@ 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
                       key={header.id}
                       align={headerAlign}
-                      className={dataGridHeadVariants()}
-                      style={cellStyle(col, columnWidths.get(header.column.id))}
+                      className={cn(dataGridHeadVariants(), pinnedClassName(pin, true))}
+                      style={mergePinnedStyle(
+                        cellStyle(col, columnWidths.get(header.column.id)),
+                        pin,
+                        pinnedOffsets,
+                        header.column.id,
+                        true,
+                      )}
                       {...(Platform.OS === 'web'
                         ? {
                             title: col?.renderHeader ? undefined : headerName,
@@ -451,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>
                   );
                 })}
@@ -470,34 +939,58 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
             ))}
             {headerFilters ? (
               <Table.Row>
-                {table.getAllLeafColumns().map((column) => {
-                  if (column.id === SELECT_COLUMN_ID) {
+                {(pinningActive
+                  ? [
+                      ...table.getStartVisibleLeafColumns(),
+                      ...table.getCenterVisibleLeafColumns(),
+                      ...table.getEndVisibleLeafColumns(),
+                    ]
+                  : table.getVisibleLeafColumns()
+                ).map((column) => {
+                  const pin = pinMetaFor(column.id, columnPinning);
+                  if (column.id === SELECT_COLUMN_ID || column.id === DETAIL_PANEL_TOGGLE_ID) {
                     return (
                       <Table.Cell
                         key={column.id}
                         align="center"
-                        className={dataGridSelectHeadVariants()}
+                        className={cn(
+                          dataGridSelectHeadVariants(),
+                          column.id === DETAIL_PANEL_TOGGLE_ID && 'w-12 px-2',
+                          pinnedClassName(pin, true),
+                        )}
+                        style={mergePinnedStyle(undefined, pin, pinnedOffsets, column.id, true)}
                       />
                     );
                   }
                   const col = colByField.get(column.id);
-                  const headerAlign = col?.headerAlign ?? col?.align;
                   if (col?.filterable === false) {
                     return (
                       <Table.Head
                         key={column.id}
-                        align={normalizeGridAlignment(headerAlign)}
-                        className={dataGridHeadVariants()}
-                        style={cellStyle(col, columnWidths.get(column.id))}
+                        align={resolveColumnHeaderAlign(col)}
+                        className={cn(dataGridHeadVariants(), pinnedClassName(pin, true))}
+                        style={mergePinnedStyle(
+                          cellStyle(col, columnWidths.get(column.id)),
+                          pin,
+                          pinnedOffsets,
+                          column.id,
+                          true,
+                        )}
                       />
                     );
                   }
                   return (
                     <Table.Head
                       key={column.id}
-                      align={normalizeGridAlignment(headerAlign)}
-                      className={dataGridHeadVariants()}
-                      style={cellStyle(col, columnWidths.get(column.id))}
+                      align={resolveColumnHeaderAlign(col)}
+                      className={cn(dataGridHeadVariants(), pinnedClassName(pin, true))}
+                      style={mergePinnedStyle(
+                        cellStyle(col, columnWidths.get(column.id)),
+                        pin,
+                        pinnedOffsets,
+                        column.id,
+                        true,
+                      )}
                     >
                       <Input size="small" className={dataGridFilterInputVariants()}>
                         <Input.Field
@@ -516,23 +1009,86 @@ 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}
+                pinning={columnPinning}
+                offsets={pinnedOffsets}
               />
             ) : isEmpty ? null : (
-              visibleRows.map((row) => {
+              visibleRows.flatMap((row) => {
                 const rowId = resolveRowId(row.original, getRowId);
-                return (
-                  <Table.Row key={row.id}>
-                    {row.getAllCells().map((cell) => {
+                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 = (
+                  <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
                             key={cell.id}
                             align="center"
-                            className={dataGridSelectCellVariants()}
+                            className={cn(
+                              dataGridSelectCellVariants(),
+                              pinnedClassName(pin, false),
+                            )}
+                            style={mergePinnedStyle(
+                              undefined,
+                              pin,
+                              pinnedOffsets,
+                              cell.column.id,
+                              false,
+                            )}
                           >
                             <Checkbox
                               value={String(rowId)}
@@ -554,26 +1110,120 @@ function DataGridInner<R extends GridValidRowModel>(props: DataGridProps<R>) {
                           row: row.original,
                           field: col.field,
                           id: rowId,
+                          col,
                         });
                       } else if (col?.valueFormatter) {
                         content = col.valueFormatter(value, row.original, col);
+                      } else if (col?.type === 'boolean' && typeof value === 'boolean') {
+                        content = <BooleanCell value={value} />;
                       } else {
-                        content = defaultCellContent(value);
+                        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 = (
+                          <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={normalizeGridAlignment(col?.align)}
-                          className={dataGridCellVariants()}
-                          style={cellStyle(col, columnWidths.get(cell.column.id))}
+                          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,
+                          )}
                         >
-                          {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>