@cdx-ui/data-grid 0.3.11 → 0.3.13

package/lib/module/DataGrid.js

@@ -1,22 +1,29 @@
 "use strict";
 
-import { useMemo } from 'react';
-import { Platform, View } from 'react-native';
-import { Checkbox, IconButton, Input, Skeleton, Table, TablePagination, Text } from '@cdx-ui/components';
-import { KeyboardArrowDown, KeyboardArrowUp, Search } from '@cdx-ui/icons';
+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, 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 { dataGridBodyVariants, dataGridCellVariants, dataGridEmptyOverlayVariants, dataGridFilterInputVariants, dataGridFooterVariants, dataGridHeadVariants, dataGridHeaderCellInnerVariants, dataGridHeaderLabelVariants, dataGridHeaderVariants, dataGridMainVariants, dataGridOverlayVariants, dataGridPaginationRangeVariants, dataGridPaginationVariants, 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 { normalizePinnedColumns, resolveColumnAlign, resolveColumnHeaderAlign } from './adapter/columns';
+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, 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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 SELECT_COLUMN_WIDTH = 56;
 const WEB_TABLE_CONTAINER_STYLE = {
   overflow: 'visible'
 };
+// Same token as the pinned cells' `border-stroke-secondary` divider.
+const PINNED_EDGE_COLOR = 'var(--color-stroke-secondary)';
 function cellStyle(col, webWidth) {
   if (!col) {
     return undefined;
@@ -39,36 +46,96 @@ function cellStyle(col, webWidth) {
   }
   return Object.keys(style).length > 0 ? style : undefined;
 }
-function webColumnWidths(columns, checkboxSelection) {
-  const totalFlex = columns.reduce((total, column) => total + Math.max(column.flex ?? 0, 0), 0);
+function effectiveFlex(column, pinned) {
+  if (pinned.has(column.field)) {
+    return 0;
+  }
+  return Math.max(column.flex ?? 0, 0);
+}
+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) {
     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);
       }
     }
     return widths;
   }
-  const fixedWidth = (checkboxSelection ? SELECT_COLUMN_WIDTH : 0) + columns.reduce((total, column) => {
-    if ((column.flex ?? 0) > 0) {
+  const fixedWidth = leadingWidth + columns.reduce((total, column) => {
+    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)`;
       widths.set(column.field, 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, pinning) {
+  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, pin, offsets, columnId, isHeader) {
+  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, isHeader) {
+  if (!pin.edge) {
+    return undefined;
+  }
+  return cn(dataGridPinnedSurfaceVariants({
+    header: isHeader
+  }), dataGridPinnedEdgeVariants({
+    edge: pin.isEdgeDivider ? pin.edge : 'none'
+  }));
+}
+function BooleanCell({
+  value
+}) {
+  return /*#__PURE__*/_jsx(Icon, {
+    as: value ? Check : Close,
+    accessibilityLabel: value ? 'Yes' : 'No',
+    className: "size-5"
+  });
+}
 function defaultCellContent(value) {
   if (value == null) {
     return '';
@@ -88,30 +155,52 @@ function defaultCellContent(value) {
 }
 function DefaultLoadingRows({
   columns,
-  checkboxSelection,
+  leadingColumnIds,
   rowCount,
-  columnWidths
+  columnWidths,
+  orderedColumnIds,
+  pinning,
+  offsets
 }) {
+  const colByField = new Map(columns.map(column => [column.field, column]));
+  const ids = orderedColumnIds ?? [...leadingColumnIds, ...columns.map(column => column.field)];
   return /*#__PURE__*/_jsx(_Fragment, {
     children: Array.from({
       length: rowCount
-    }, (_, rowIndex) => /*#__PURE__*/_jsxs(Table.Row, {
+    }, (_, rowIndex) => /*#__PURE__*/_jsx(Table.Row, {
       className: "pointer-events-none web:hover:bg-surface-primary",
       testID: rowIndex === 0 ? 'data-grid-default-loading-rows' : undefined,
-      children: [checkboxSelection ? /*#__PURE__*/_jsx(Table.Cell, {
-        align: "center",
-        className: dataGridSelectCellVariants(),
-        children: /*#__PURE__*/_jsx(Skeleton, {
-          className: "size-5"
-        })
-      }) : null, columns.map(column => /*#__PURE__*/_jsx(Table.Cell, {
-        align: normalizeGridAlignment(column.align),
-        className: dataGridCellVariants(),
-        style: cellStyle(column, columnWidths.get(column.field)),
-        children: /*#__PURE__*/_jsx(Skeleton, {
-          className: "h-4 w-3/5"
-        })
-      }, column.field))]
+      children: ids.map(columnId => {
+        const pin = pinMetaFor(columnId, pinning);
+        if (columnId === SELECT_COLUMN_ID) {
+          return /*#__PURE__*/_jsx(Table.Cell, {
+            align: "center",
+            className: cn(dataGridSelectCellVariants(), pinnedClassName(pin, false)),
+            style: mergePinnedStyle(undefined, pin, offsets, columnId, false),
+            children: /*#__PURE__*/_jsx(Skeleton, {
+              className: "size-5"
+            })
+          }, 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;
+        }
+        return /*#__PURE__*/_jsx(Table.Cell, {
+          align: resolveColumnAlign(column),
+          className: cn(dataGridCellVariants(), pinnedClassName(pin, false)),
+          style: mergePinnedStyle(cellStyle(column, columnWidths.get(column.field)), pin, offsets, column.field, false),
+          children: /*#__PURE__*/_jsx(Skeleton, {
+            className: "h-4 w-3/5"
+          })
+        }, column.field);
+      })
     }, rowIndex))
   });
 }
@@ -144,6 +233,8 @@ function DataGridInner(props) {
     rowCount,
     showToolbar = false,
     headerFilters = false,
+    pinnedColumns,
+    columnVisibilityModel,
     pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
     noRowsOverlay,
     loadingOverlay,
@@ -152,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 ?? [],
@@ -169,6 +301,11 @@ function DataGridInner(props) {
     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 ?? '',
@@ -182,16 +319,29 @@ function DataGridInner(props) {
   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
+    setColumnFilter,
+    setFilterModel: setFilterModelWithPageReset,
+    tree
   } = useDataGridTable({
     rows,
-    columns,
+    columns: gridColumns,
     getRowId,
+    detailPanel,
+    treeData: treeActive,
+    getTreeDataPath,
+    defaultGroupingExpansionDepth,
+    isGroupExpandedByDefault,
+    rowSelectionPropagation,
     checkboxSelection,
     disableColumnSorting,
     paginationMode,
@@ -204,25 +354,52 @@ function DataGridInner(props) {
     onPaginationModelChange: model => setPaginationModel(model),
     filterModel: resolvedFilterModel,
     onFilterModelChange: model => setFilterModel(model),
+    filterLogicOperator: resolvedFilterLogicOperator,
     quickFilter: resolvedQuickFilter,
     onQuickFilterChange: value => setQuickFilter(value),
     rowSelectionModel: resolvedSelection,
-    onRowSelectionModelChange: model => setRowSelectionModel(model)
+    onRowSelectionModelChange: model => setRowSelectionModel(model),
+    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]);
-  const columnWidths = useMemo(() => webColumnWidths(columns, checkboxSelection), [checkboxSelection, columns]);
-  const hasFlexColumns = useMemo(() => columns.some(column => (column.flex ?? 0) > 0), [columns]);
+  }, [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) {
+      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(() => {
+    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'
+      } : {})
+    };
+  }, [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 ? {
+  const headerSelectState = tree?.headerSelection ?? (selectedCount === 0 ? {
     checked: false,
     indeterminate: false
   } : selectedCount === filterableCount ? {
@@ -231,16 +408,74 @@ function DataGridInner(props) {
   } : {
     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 => resolvedFilterModel.find(item => item.field === field)?.value ?? '';
+  const filterValueFor = field => {
+    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(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),
+    }), className, filterPanelOpen && !filterPanelAnchored && 'overflow-visible'),
     style: style,
     ...mergeDataAttributes({}, dataAttributes({
       slot: 'data-grid'
@@ -253,20 +488,50 @@ function DataGridInner(props) {
         children: [/*#__PURE__*/_jsx(Input.Icon, {
           as: Search
         }), /*#__PURE__*/_jsx(Input.Field, {
+          ref: searchRef,
           value: resolvedQuickFilter,
           onChangeText: setQuickFilterWithPageReset,
           placeholder: "Search",
           accessibilityLabel: "Search"
         })]
+      }) : null, showFilterPanelButton ? /*#__PURE__*/_jsx(IconButton, {
+        ref: filterPanelButtonRef,
+        as: FilterList,
+        variant: "ghost",
+        color: "neutral",
+        size: "small",
+        accessibilityLabel: "Filters",
+        accessibilityState: {
+          expanded: filterPanelOpen
+        },
+        onPress: () => filterPanel.toggle(filterPanelButtonRef)
       }) : null, toolbarActions ? /*#__PURE__*/_jsx(View, {
         className: dataGridToolbarActionsVariants(),
         children: toolbarActions
       }) : null]
+    }) : null, filterPanelOpen && filterPanel.opener ? /*#__PURE__*/_jsx(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, /*#__PURE__*/_jsxs(View, {
+      ref: mainRef,
       className: dataGridMainVariants({
         autoHeight,
         overlay: isEmpty || loading && loadingOverlay != null
       }),
+      style: mainScrollStyle,
       children: [/*#__PURE__*/_jsxs(Table, {
         className: cn(dataGridTableVariants(), Platform.OS === 'web' && hasFlexColumns ? 'table-fixed' : undefined),
         containerStyle: Platform.OS === 'web' ? WEB_TABLE_CONTAINER_STYLE : undefined,
@@ -278,25 +543,34 @@ function DataGridInner(props) {
         } : {}),
         children: [label ? /*#__PURE__*/_jsx(Table.Caption, {
           children: label
-        }) : null, Platform.OS === 'web' && hasFlexColumns ? /*#__PURE__*/_jsxs("colgroup", {
-          children: [checkboxSelection ? /*#__PURE__*/_jsx("col", {
+        }) : null, Platform.OS === 'web' && hasFlexColumns ? /*#__PURE__*/_jsx("colgroup", {
+          children: (orderedLeafColumnIds ?? [...leadingColumnIds, ...visibleColumns.map(column => column.field)]).map(columnId => columnId === SELECT_COLUMN_ID ? /*#__PURE__*/_jsx("col", {
             style: {
               width: SELECT_COLUMN_WIDTH
             }
-          }) : null, columns.map(column => /*#__PURE__*/_jsx("col", {
+          }, columnId) : columnId === DETAIL_PANEL_TOGGLE_ID ? /*#__PURE__*/_jsx("col", {
+            style: {
+              width: DETAIL_PANEL_TOGGLE_WIDTH
+            }
+          }, columnId) : /*#__PURE__*/_jsx("col", {
             style: {
-              width: columnWidths.get(column.field),
-              minWidth: column.minWidth
+              width: columnWidths.get(columnId),
+              minWidth: colByField.get(columnId)?.minWidth
             }
-          }, column.field))]
+          }, columnId))
         }) : null, /*#__PURE__*/_jsxs(Table.Header, {
           className: dataGridHeaderVariants(),
-          children: [table.getHeaderGroups().map(headerGroup => /*#__PURE__*/_jsx(Table.Row, {
+          children: [(pinningActive ? [{
+            id: 'pinned',
+            headers: [...table.getStartLeafHeaders(), ...table.getCenterLeafHeaders(), ...table.getEndLeafHeaders()]
+          }] : table.getHeaderGroups()).map(headerGroup => /*#__PURE__*/_jsx(Table.Row, {
             children: headerGroup.headers.map(header => {
+              const pin = pinMetaFor(header.column.id, columnPinning);
               if (header.id === SELECT_COLUMN_ID) {
                 return /*#__PURE__*/_jsx(Table.Head, {
                   align: "center",
-                  className: dataGridSelectHeadVariants(),
+                  className: cn(dataGridSelectHeadVariants(), pinnedClassName(pin, true)),
+                  style: mergePinnedStyle(undefined, pin, pinnedOffsets, header.id, true),
                   children: /*#__PURE__*/_jsx(Checkbox, {
                     value: "select-all",
                     isChecked: headerSelectState.checked,
@@ -307,10 +581,17 @@ 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 = 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 ? /*#__PURE__*/_jsx(IconButton, {
@@ -328,50 +609,71 @@ 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: 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,
                   ...(canSort ? {
                     '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: table.getAllLeafColumns().map(column => {
-              if (column.id === SELECT_COLUMN_ID) {
+            children: (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 /*#__PURE__*/_jsx(Table.Cell, {
                   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)
                 }, column.id);
               }
               const col = colByField.get(column.id);
-              const headerAlign = col?.headerAlign ?? col?.align;
               if (col?.filterable === false) {
                 return /*#__PURE__*/_jsx(Table.Head, {
-                  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)
                 }, column.id);
               }
               return /*#__PURE__*/_jsx(Table.Head, {
-                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),
                 children: /*#__PURE__*/_jsx(Input, {
                   size: "small",
                   className: dataGridFilterInputVariants(),
@@ -388,18 +690,52 @@ 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
-          }) : isEmpty ? null : visibleRows.map(row => {
+            columnWidths: columnWidths,
+            orderedColumnIds: orderedLeafColumnIds,
+            pinning: columnPinning,
+            offsets: pinnedOffsets
+          }) : isEmpty ? null : visibleRows.flatMap(row => {
             const rowId = resolveRowId(row.original, getRowId);
-            return /*#__PURE__*/_jsx(Table.Row, {
-              children: 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 = /*#__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",
-                    className: dataGridSelectCellVariants(),
+                    className: cn(dataGridSelectCellVariants(), pinnedClassName(pin, false)),
+                    style: mergePinnedStyle(undefined, pin, pinnedOffsets, cell.column.id, false),
                     children: /*#__PURE__*/_jsx(Checkbox, {
                       value: String(rowId),
                       isChecked: row.getIsSelected(),
@@ -417,21 +753,94 @@ function DataGridInner(props) {
                     value,
                     row: row.original,
                     field: col.field,
-                    id: rowId
+                    id: rowId,
+                    col
                   });
                 } else if (col?.valueFormatter) {
                   content = col.valueFormatter(value, row.original, col);
+                } else if (col?.type === 'boolean' && typeof value === 'boolean') {
+                  content = /*#__PURE__*/_jsx(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 = /*#__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: normalizeGridAlignment(col?.align),
-                  className: dataGridCellVariants(),
-                  style: cellStyle(col, columnWidths.get(cell.column.id)),
-                  children: content
+                  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: 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, {