@cdx-ui/data-grid 0.3.11 → 0.3.13

package/lib/commonjs/DataGrid.js

@@ -11,16 +11,23 @@ var _icons = require("@cdx-ui/icons");
 var _primitives = require("@cdx-ui/primitives");
 var _utils = require("@cdx-ui/utils");
 var _columns = require("./adapter/columns");
+var _pinning = require("./adapter/pinning");
+var _columnTypes = require("./adapter/columnTypes");
+var _DataGridFilterPanel = require("./DataGridFilterPanel");
 var _styles = require("./styles");
 var _types = require("./types");
 var _useDataGridTable = require("./useDataGridTable");
 var _jsxRuntime = require("react/jsx-runtime");
 const MAX_SKELETON_ROW_COUNT = 10;
+/** Matches the detail panel cell's `px-4`. */
+const DETAIL_PANEL_INSET = 16;
+const TREE_INDENT = 24;
 const DEFAULT_WEB_COLUMN_WIDTH = 100;
-const 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;
@@ -43,36 +50,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 ?? _pinning.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) ? _pinning.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) ? _pinning.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,
+    ...(0, _pinning.pinnedCellStyle)(pin.edge, offset, isHeader)
+  };
+}
+function pinnedClassName(pin, isHeader) {
+  if (!pin.edge) {
+    return undefined;
+  }
+  return (0, _utils.cn)((0, _styles.dataGridPinnedSurfaceVariants)({
+    header: isHeader
+  }), (0, _styles.dataGridPinnedEdgeVariants)({
+    edge: pin.isEdgeDivider ? pin.edge : 'none'
+  }));
+}
+function BooleanCell({
+  value
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
+    as: value ? _icons.Check : _icons.Close,
+    accessibilityLabel: value ? 'Yes' : 'No',
+    className: "size-5"
+  });
+}
 function defaultCellContent(value) {
   if (value == null) {
     return '';
@@ -92,30 +159,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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: Array.from({
       length: rowCount
-    }, (_, rowIndex) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Table.Row, {
+    }, (_, rowIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
       className: "pointer-events-none web:hover:bg-surface-primary",
       testID: rowIndex === 0 ? 'data-grid-default-loading-rows' : undefined,
-      children: [checkboxSelection ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
-        align: "center",
-        className: (0, _styles.dataGridSelectCellVariants)(),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Skeleton, {
-          className: "size-5"
-        })
-      }) : null, columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
-        align: (0, _columns.normalizeGridAlignment)(column.align),
-        className: (0, _styles.dataGridCellVariants)(),
-        style: cellStyle(column, columnWidths.get(column.field)),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Skeleton, {
-          className: "h-4 w-3/5"
-        })
-      }, column.field))]
+      children: ids.map(columnId => {
+        const pin = pinMetaFor(columnId, pinning);
+        if (columnId === _types.SELECT_COLUMN_ID) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
+            align: "center",
+            className: (0, _utils.cn)((0, _styles.dataGridSelectCellVariants)(), pinnedClassName(pin, false)),
+            style: mergePinnedStyle(undefined, pin, offsets, columnId, false),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Skeleton, {
+              className: "size-5"
+            })
+          }, columnId);
+        }
+        if (columnId === _types.DETAIL_PANEL_TOGGLE_ID) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
+            className: (0, _utils.cn)((0, _styles.dataGridDetailToggleCellVariants)(), pinnedClassName(pin, false)),
+            style: mergePinnedStyle(undefined, pin, offsets, columnId, false)
+          }, columnId);
+        }
+        const column = colByField.get(columnId);
+        if (!column) {
+          return null;
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
+          align: (0, _columns.resolveColumnAlign)(column),
+          className: (0, _utils.cn)((0, _styles.dataGridCellVariants)(), pinnedClassName(pin, false)),
+          style: mergePinnedStyle(cellStyle(column, columnWidths.get(column.field)), pin, offsets, column.field, false),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Skeleton, {
+            className: "h-4 w-3/5"
+          })
+        }, column.field);
+      })
     }, rowIndex))
   });
 }
@@ -148,6 +237,8 @@ function DataGridInner(props) {
     rowCount,
     showToolbar = false,
     headerFilters = false,
+    pinnedColumns,
+    columnVisibilityModel,
     pageSizeOptions = _types.DEFAULT_PAGE_SIZE_OPTIONS,
     noRowsOverlay,
     loadingOverlay,
@@ -156,8 +247,49 @@ function DataGridInner(props) {
     style,
     label,
     'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy
+    'aria-labelledby': ariaLabelledBy,
+    treeData = false,
+    getTreeDataPath,
+    groupingColDef,
+    defaultGroupingExpansionDepth,
+    isGroupExpandedByDefault,
+    rowSelectionPropagation,
+    getDetailPanelContent
   } = props;
+  const treeActive = treeData && getTreeDataPath !== undefined;
+  const isColumnVisible = (0, _react.useCallback)(column => columnVisibilityModel?.[column.field] !== false, [columnVisibilityModel]);
+  const treeField = treeActive ? columns.find(isColumnVisible)?.field : undefined;
+  const gridColumns = (0, _react.useMemo)(() => {
+    if (treeField === undefined || groupingColDef === undefined) {
+      return columns;
+    }
+    return columns.map(column => column.field === treeField ? {
+      ...column,
+      ...groupingColDef,
+      field: column.field
+    } : column);
+  }, [columns, groupingColDef, treeField]);
+  const visibleColumns = (0, _react.useMemo)(() => gridColumns.filter(isColumnVisible), [gridColumns, isColumnVisible]);
+  const selectColumn = checkboxSelection && !treeActive;
+  const treeCheckbox = checkboxSelection && treeActive;
+  const detailPanel = getDetailPanelContent !== undefined;
+  const leadingColumnIds = (0, _react.useMemo)(() => [...(selectColumn ? [_types.SELECT_COLUMN_ID] : []), ...(detailPanel ? [_types.DETAIL_PANEL_TOGGLE_ID] : [])], [detailPanel, selectColumn]);
+  const leadingWidth = (selectColumn ? _pinning.SELECT_COLUMN_WIDTH : 0) + (detailPanel ? _pinning.DETAIL_PANEL_TOGGLE_WIDTH : 0);
+  const [detailPanelExpandedRowIds, setDetailPanelExpandedRowIds] = (0, _utils.useControllableState)({
+    prop: props.detailPanelExpandedRowIds,
+    defaultProp: props.defaultDetailPanelExpandedRowIds ?? _types.EMPTY_ROW_ID_SET,
+    onChange: ids => props.onDetailPanelExpandedRowIdsChange?.(new Set(ids))
+  });
+  const resolvedDetailIds = detailPanelExpandedRowIds ?? _types.EMPTY_ROW_ID_SET;
+  const toggleDetailPanel = id => {
+    const next = new Set(resolvedDetailIds);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    setDetailPanelExpandedRowIds(next);
+  };
   const [sortModel, setSortModel] = (0, _utils.useControllableState)({
     prop: props.sortModel,
     defaultProp: props.defaultSortModel ?? [],
@@ -173,6 +305,11 @@ function DataGridInner(props) {
     defaultProp: props.defaultFilterModel ?? [],
     onChange: props.onFilterModelChange
   });
+  const [filterLogicOperator, setFilterLogicOperator] = (0, _utils.useControllableState)({
+    prop: props.filterLogicOperator,
+    defaultProp: props.defaultFilterLogicOperator ?? 'and',
+    onChange: props.onFilterLogicOperatorChange
+  });
   const [quickFilter, setQuickFilter] = (0, _utils.useControllableState)({
     prop: props.quickFilter,
     defaultProp: props.defaultQuickFilter ?? '',
@@ -186,16 +323,29 @@ function DataGridInner(props) {
   const resolvedSortModel = sortModel ?? [];
   const resolvedPagination = paginationModel ?? _types.DEFAULT_PAGINATION_MODEL;
   const resolvedFilterModel = filterModel ?? [];
+  const resolvedFilterLogicOperator = filterLogicOperator ?? 'and';
   const resolvedQuickFilter = quickFilter ?? '';
   const resolvedSelection = rowSelectionModel ?? _types.EMPTY_SELECTION;
+  const knownFields = (0, _react.useMemo)(() => new Set(columns.map(column => column.field)), [columns]);
+  const columnPinning = (0, _react.useMemo)(() => (0, _columns.normalizePinnedColumns)(pinnedColumns, knownFields, selectColumn, detailPanel), [pinnedColumns, knownFields, selectColumn, detailPanel]);
+  const pinningActive = (0, _pinning.isColumnPinningActive)(columnPinning);
+  const pinnedFields = (0, _react.useMemo)(() => (0, _pinning.pinnedFieldSet)(columnPinning), [columnPinning]);
   const {
     table,
     setQuickFilter: setQuickFilterWithPageReset,
-    setColumnFilter
+    setColumnFilter,
+    setFilterModel: setFilterModelWithPageReset,
+    tree
   } = (0, _useDataGridTable.useDataGridTable)({
     rows,
-    columns,
+    columns: gridColumns,
     getRowId,
+    detailPanel,
+    treeData: treeActive,
+    getTreeDataPath,
+    defaultGroupingExpansionDepth,
+    isGroupExpandedByDefault,
+    rowSelectionPropagation,
     checkboxSelection,
     disableColumnSorting,
     paginationMode,
@@ -208,25 +358,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 = (0, _react.useMemo)(() => {
     const map = new Map();
-    for (const col of columns) {
+    for (const col of gridColumns) {
       map.set(col.field, col);
     }
     return map;
-  }, [columns]);
-  const columnWidths = (0, _react.useMemo)(() => webColumnWidths(columns, checkboxSelection), [checkboxSelection, columns]);
-  const hasFlexColumns = (0, _react.useMemo)(() => columns.some(column => (column.flex ?? 0) > 0), [columns]);
+  }, [gridColumns]);
+  (0, _pinning.warnPinnedFlexColumns)(visibleColumns, pinnedFields);
+  const columnWidths = (0, _react.useMemo)(() => webColumnWidths(visibleColumns, leadingWidth, pinnedFields), [leadingWidth, visibleColumns, pinnedFields]);
+  const hasFlexColumns = (0, _react.useMemo)(() => visibleColumns.some(column => effectiveFlex(column, pinnedFields) > 0), [visibleColumns, pinnedFields]);
+  const pinnedOffsets = (0, _react.useMemo)(() => pinningActive ? (0, _pinning.buildPinnedOffsets)(columnPinning, colByField) : null, [pinningActive, columnPinning, colByField]);
+  const orderedLeafColumnIds = (0, _react.useMemo)(() => {
+    if (!pinningActive) {
+      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 = (0, _react.useMemo)(() => {
+    if (!pinningActive || pinnedOffsets == null) {
+      return undefined;
+    }
+    const guides = _reactNative.Platform.OS === 'web' && !isEmpty ? (0, _pinning.pinnedEdgeGuidesImage)(pinnedOffsets, PINNED_EDGE_COLOR, _reactNative.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 ? {
@@ -235,16 +412,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 = (0, _react.useMemo)(() => gridColumns.filter(column => column.filterable !== false), [gridColumns]);
+  // Header filter cells and the column menu open the panel through `filterPanel.openForField`.
+  const filterPanel = (0, _DataGridFilterPanel.useDataGridFilterPanel)({
+    columns: filterPanelColumns,
+    filterModel: resolvedFilterModel,
+    onFilterModelChange: setFilterModel
+  });
+  const filterPanelOpen = filterPanel.opener !== null && filterPanelColumns.length > 0;
+  const filterPanelAnchored = filterPanel.opener?.field !== undefined;
+  const filterPanelButtonRef = (0, _react.useRef)(null);
+  const showFilterPanelButton = showToolbar && filterPanelColumns.length > 0;
+  const mainRef = (0, _react.useRef)(null);
+  const [viewportWidth, setViewportWidth] = (0, _react.useState)(undefined);
+  (0, _react.useEffect)(() => {
+    const main = mainRef.current;
+    if (_reactNative.Platform.OS !== 'web' || !detailPanel || main === null || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(() => setViewportWidth(main.clientWidth));
+    observer.observe(main);
+    return () => observer.disconnect();
+  }, [detailPanel]);
+  const detailPanelContentStyle = (0, _react.useMemo)(() => viewportWidth === undefined ? undefined : {
+    position: 'sticky',
+    insetInlineStart: DETAIL_PANEL_INSET,
+    width: viewportWidth - DETAIL_PANEL_INSET * 2
+  }, [viewportWidth]);
+  const rootRef = (0, _react.useRef)(null);
+  const searchRef = (0, _react.useRef)(null);
+  const bodyFocusRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (_reactNative.Platform.OS !== 'web') {
+      return undefined;
+    }
+    const root = rootRef.current;
+    const onFocusIn = event => {
+      const target = event.target instanceof Element ? event.target : null;
+      bodyFocusRef.current = target !== null && root?.contains(target.closest('tbody')) === true ? target : null;
+    };
+    document.addEventListener('focusin', onFocusIn);
+    return () => document.removeEventListener('focusin', onFocusIn);
+  }, []);
+  // Only when the focused row control was removed: focus that left the grid stays where it went.
+  (0, _react.useEffect)(() => {
+    const focused = bodyFocusRef.current;
+    if (_reactNative.Platform.OS !== 'web' || focused === null || focused.isConnected) {
+      return;
+    }
+    bodyFocusRef.current = null;
+    const active = document.activeElement;
+    if (active === null || active === document.body) {
+      searchRef.current?.focus();
+    }
+  }, [visibleRows]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: rootRef,
     className: (0, _utils.cn)((0, _styles.dataGridRootVariants)({
       autoHeight
-    }), className),
+    }), className, filterPanelOpen && !filterPanelAnchored && 'overflow-visible'),
     style: style,
     ...(0, _primitives.mergeDataAttributes)({}, (0, _primitives.dataAttributes)({
       slot: 'data-grid'
@@ -257,20 +492,50 @@ function DataGridInner(props) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Input.Icon, {
           as: _icons.Search
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Input.Field, {
+          ref: searchRef,
           value: resolvedQuickFilter,
           onChangeText: setQuickFilterWithPageReset,
           placeholder: "Search",
           accessibilityLabel: "Search"
         })]
+      }) : null, showFilterPanelButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+        ref: filterPanelButtonRef,
+        as: _icons.FilterList,
+        variant: "ghost",
+        color: "neutral",
+        size: "small",
+        accessibilityLabel: "Filters",
+        accessibilityState: {
+          expanded: filterPanelOpen
+        },
+        onPress: () => filterPanel.toggle(filterPanelButtonRef)
       }) : null, toolbarActions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         className: (0, _styles.dataGridToolbarActionsVariants)(),
         children: toolbarActions
       }) : null]
+    }) : null, filterPanelOpen && filterPanel.opener ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataGridFilterPanel.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      ref: mainRef,
       className: (0, _styles.dataGridMainVariants)({
         autoHeight,
         overlay: isEmpty || loading && loadingOverlay != null
       }),
+      style: mainScrollStyle,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Table, {
         className: (0, _utils.cn)((0, _styles.dataGridTableVariants)(), _reactNative.Platform.OS === 'web' && hasFlexColumns ? 'table-fixed' : undefined),
         containerStyle: _reactNative.Platform.OS === 'web' ? WEB_TABLE_CONTAINER_STYLE : undefined,
@@ -282,25 +547,34 @@ function DataGridInner(props) {
         } : {}),
         children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Caption, {
           children: label
-        }) : null, _reactNative.Platform.OS === 'web' && hasFlexColumns ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("colgroup", {
-          children: [checkboxSelection ? /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
+        }) : null, _reactNative.Platform.OS === 'web' && hasFlexColumns ? /*#__PURE__*/(0, _jsxRuntime.jsx)("colgroup", {
+          children: (orderedLeafColumnIds ?? [...leadingColumnIds, ...visibleColumns.map(column => column.field)]).map(columnId => columnId === _types.SELECT_COLUMN_ID ? /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
+            style: {
+              width: _pinning.SELECT_COLUMN_WIDTH
+            }
+          }, columnId) : columnId === _types.DETAIL_PANEL_TOGGLE_ID ? /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
             style: {
-              width: SELECT_COLUMN_WIDTH
+              width: _pinning.DETAIL_PANEL_TOGGLE_WIDTH
             }
-          }) : null, columns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)("col", {
+          }, columnId) : /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(_components.Table.Header, {
           className: (0, _styles.dataGridHeaderVariants)(),
-          children: [table.getHeaderGroups().map(headerGroup => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
+          children: [(pinningActive ? [{
+            id: 'pinned',
+            headers: [...table.getStartLeafHeaders(), ...table.getCenterLeafHeaders(), ...table.getEndLeafHeaders()]
+          }] : table.getHeaderGroups()).map(headerGroup => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
             children: headerGroup.headers.map(header => {
+              const pin = pinMetaFor(header.column.id, columnPinning);
               if (header.id === _types.SELECT_COLUMN_ID) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Head, {
                   align: "center",
-                  className: (0, _styles.dataGridSelectHeadVariants)(),
+                  className: (0, _utils.cn)((0, _styles.dataGridSelectHeadVariants)(), pinnedClassName(pin, true)),
+                  style: mergePinnedStyle(undefined, pin, pinnedOffsets, header.id, true),
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Checkbox, {
                     value: "select-all",
                     isChecked: headerSelectState.checked,
@@ -311,10 +585,17 @@ function DataGridInner(props) {
                   })
                 }, header.id);
               }
+              if (header.id === _types.DETAIL_PANEL_TOGGLE_ID) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
+                  className: (0, _utils.cn)((0, _styles.dataGridHeadVariants)(), (0, _styles.dataGridDetailToggleCellVariants)(), pinnedClassName(pin, true)),
+                  style: mergePinnedStyle(undefined, pin, pinnedOffsets, header.id, true)
+                }, header.id);
+              }
               const col = colByField.get(header.column.id);
+              const isTreeColumn = header.column.id === treeField;
               const sorted = header.column.getIsSorted();
               const canSort = !disableColumnSorting && header.column.getCanSort();
-              const headerAlign = (0, _columns.normalizeGridAlignment)(col?.headerAlign ?? col?.align);
+              const headerAlign = (0, _columns.resolveColumnHeaderAlign)(col);
               const headerName = col?.headerName ?? header.column.id;
               const SortIcon = sorted === 'asc' ? _icons.KeyboardArrowUp : _icons.KeyboardArrowDown;
               const sortButton = canSort ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
@@ -332,50 +613,71 @@ function DataGridInner(props) {
                   sorted: sorted !== false
                 })
               }) : null;
+              const headerLabel = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [headerAlign === 'end' ? sortButton : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
+                  numberOfLines: 1,
+                  className: (0, _styles.dataGridHeaderLabelVariants)(),
+                  children: col?.renderHeader ? col.renderHeader() : headerName
+                }), headerAlign === 'end' ? null : sortButton]
+              });
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Head, {
                 align: headerAlign,
-                className: (0, _styles.dataGridHeadVariants)(),
-                style: cellStyle(col, columnWidths.get(header.column.id)),
+                className: (0, _utils.cn)((0, _styles.dataGridHeadVariants)(), pinnedClassName(pin, true)),
+                style: mergePinnedStyle(cellStyle(col, columnWidths.get(header.column.id)), pin, pinnedOffsets, header.column.id, true),
                 ...(_reactNative.Platform.OS === 'web' ? {
                   title: col?.renderHeader ? undefined : headerName,
                   ...(canSort ? {
                     'aria-sort': sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : 'none'
                   } : {})
                 } : {}),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                children: isTreeColumn ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  className: (0, _styles.dataGridTreeCellInnerVariants)(),
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    className: (0, _styles.dataGridTreeToggleSlotVariants)()
+                  }), treeCheckbox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Checkbox, {
+                    value: "select-all",
+                    isChecked: headerSelectState.checked,
+                    isIndeterminate: headerSelectState.indeterminate,
+                    onChange: () => tree?.toggleAllRowsSelected(),
+                    accessibilityLabel: "Select all",
+                    "aria-label": "Select all"
+                  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    className: (0, _utils.cn)((0, _styles.dataGridHeaderCellInnerVariants)({
+                      align: headerAlign
+                    }), 'flex-1'),
+                    children: headerLabel
+                  })]
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                   className: (0, _styles.dataGridHeaderCellInnerVariants)({
                     align: headerAlign,
                     fitToColumn: _reactNative.Platform.OS === 'web' && columnWidths.has(header.column.id)
                   }),
-                  children: [headerAlign === 'end' ? sortButton : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
-                    numberOfLines: 1,
-                    className: (0, _styles.dataGridHeaderLabelVariants)(),
-                    children: col?.renderHeader ? col.renderHeader() : headerName
-                  }), headerAlign === 'end' ? null : sortButton]
+                  children: headerLabel
                 })
               }, header.id);
             })
           }, headerGroup.id)), headerFilters ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
-            children: table.getAllLeafColumns().map(column => {
-              if (column.id === _types.SELECT_COLUMN_ID) {
+            children: (pinningActive ? [...table.getStartVisibleLeafColumns(), ...table.getCenterVisibleLeafColumns(), ...table.getEndVisibleLeafColumns()] : table.getVisibleLeafColumns()).map(column => {
+              const pin = pinMetaFor(column.id, columnPinning);
+              if (column.id === _types.SELECT_COLUMN_ID || column.id === _types.DETAIL_PANEL_TOGGLE_ID) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
                   align: "center",
-                  className: (0, _styles.dataGridSelectHeadVariants)()
+                  className: (0, _utils.cn)((0, _styles.dataGridSelectHeadVariants)(), column.id === _types.DETAIL_PANEL_TOGGLE_ID && 'w-12 px-2', pinnedClassName(pin, true)),
+                  style: mergePinnedStyle(undefined, pin, pinnedOffsets, column.id, true)
                 }, column.id);
               }
               const col = colByField.get(column.id);
-              const headerAlign = col?.headerAlign ?? col?.align;
               if (col?.filterable === false) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Head, {
-                  align: (0, _columns.normalizeGridAlignment)(headerAlign),
-                  className: (0, _styles.dataGridHeadVariants)(),
-                  style: cellStyle(col, columnWidths.get(column.id))
+                  align: (0, _columns.resolveColumnHeaderAlign)(col),
+                  className: (0, _utils.cn)((0, _styles.dataGridHeadVariants)(), pinnedClassName(pin, true)),
+                  style: mergePinnedStyle(cellStyle(col, columnWidths.get(column.id)), pin, pinnedOffsets, column.id, true)
                 }, column.id);
               }
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Head, {
-                align: (0, _columns.normalizeGridAlignment)(headerAlign),
-                className: (0, _styles.dataGridHeadVariants)(),
-                style: cellStyle(col, columnWidths.get(column.id)),
+                align: (0, _columns.resolveColumnHeaderAlign)(col),
+                className: (0, _utils.cn)((0, _styles.dataGridHeadVariants)(), pinnedClassName(pin, true)),
+                style: mergePinnedStyle(cellStyle(col, columnWidths.get(column.id)), pin, pinnedOffsets, column.id, true),
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Input, {
                   size: "small",
                   className: (0, _styles.dataGridFilterInputVariants)(),
@@ -392,18 +694,52 @@ function DataGridInner(props) {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Body, {
           className: (0, _styles.dataGridBodyVariants)(),
           children: loading && loadingOverlay == null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultLoadingRows, {
-            columns: columns,
-            checkboxSelection: checkboxSelection,
+            columns: visibleColumns,
+            leadingColumnIds: leadingColumnIds,
             rowCount: Math.min(resolvedPagination.pageSize, MAX_SKELETON_ROW_COUNT),
-            columnWidths: columnWidths
-          }) : isEmpty ? null : visibleRows.map(row => {
+            columnWidths: columnWidths,
+            orderedColumnIds: orderedLeafColumnIds,
+            pinning: columnPinning,
+            offsets: pinnedOffsets
+          }) : isEmpty ? null : visibleRows.flatMap(row => {
             const rowId = (0, _useDataGridTable.resolveRowId)(row.original, getRowId);
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
+              className: detailOpen ? 'web:[&>*]:border-b-0' : undefined,
+              children: cells.map(cell => {
+                const pin = pinMetaFor(cell.column.id, columnPinning);
+                if (cell.column.id === _types.DETAIL_PANEL_TOGGLE_ID) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
+                    align: "center",
+                    className: (0, _utils.cn)((0, _styles.dataGridDetailToggleCellVariants)(), pinnedClassName(pin, false)),
+                    style: mergePinnedStyle(undefined, pin, pinnedOffsets, cell.column.id, false),
+                    children: hasDetailPanel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+                      as: detailOpen ? _icons.KeyboardArrowDown : _icons.KeyboardArrowRight,
+                      variant: "ghost",
+                      color: "neutral",
+                      size: "small",
+                      iconClassName: detailOpen ? undefined : 'rtl:-scale-x-100',
+                      accessibilityLabel: `${detailOpen ? 'Collapse' : 'Expand'} row ${String(rowId)}`,
+                      accessibilityState: {
+                        expanded: detailOpen
+                      },
+                      "aria-expanded": detailOpen,
+                      onPress: () => toggleDetailPanel(rowId)
+                    }) : null
+                  }, cell.id);
+                }
                 if (cell.column.id === _types.SELECT_COLUMN_ID) {
                   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
                     align: "center",
-                    className: (0, _styles.dataGridSelectCellVariants)(),
+                    className: (0, _utils.cn)((0, _styles.dataGridSelectCellVariants)(), pinnedClassName(pin, false)),
+                    style: mergePinnedStyle(undefined, pin, pinnedOffsets, cell.column.id, false),
                     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Checkbox, {
                       value: String(rowId),
                       isChecked: row.getIsSelected(),
@@ -421,21 +757,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__*/(0, _jsxRuntime.jsx)(BooleanCell, {
+                    value: value
+                  });
                 } else {
-                  content = defaultCellContent(value);
+                  const typedText = (0, _columnTypes.getTypedCellText)(col, value, row.original);
+                  content = typedText !== undefined ? typedText : defaultCellContent(value);
+                }
+                if (tree && cell.column.id === treeField) {
+                  const canExpand = row.subRows.length > 0;
+                  const expanded = canExpand && tree.isRowExpanded(row.id);
+                  const status = tree.selectionStatus(row.id);
+                  content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                    className: (0, _styles.dataGridTreeCellInnerVariants)(),
+                    style: {
+                      paddingStart: row.depth * TREE_INDENT
+                    },
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                      className: (0, _styles.dataGridTreeToggleSlotVariants)(),
+                      children: canExpand ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+                        as: expanded ? _icons.KeyboardArrowDown : _icons.KeyboardArrowRight,
+                        variant: "ghost",
+                        color: "neutral",
+                        size: "small",
+                        iconClassName: expanded ? undefined : 'rtl:-scale-x-100',
+                        accessibilityLabel: `${expanded ? 'Collapse' : 'Expand'} ${treeLabel}`,
+                        accessibilityState: {
+                          expanded
+                        },
+                        "aria-expanded": expanded,
+                        onPress: () => tree.toggleRowExpanded(row.id)
+                      }) : null
+                    }), treeCheckbox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Checkbox, {
+                      value: String(rowId),
+                      isChecked: status === 'all',
+                      isIndeterminate: status === 'some',
+                      onChange: () => tree.toggleRowSelected(row),
+                      accessibilityLabel: `Select ${treeLabel}`,
+                      "aria-label": `Select ${treeLabel}`
+                    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                      className: (0, _styles.dataGridTreeContentVariants)(),
+                      children: typeof content === 'string' || typeof content === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
+                        numberOfLines: 1,
+                        children: content
+                      }) : content
+                    })]
+                  });
                 }
+                const align = (0, _columns.resolveColumnAlign)(col);
+                const cellText = !col?.renderCell && (typeof content === 'string' || typeof content === 'number') ? String(content) : undefined;
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
-                  align: (0, _columns.normalizeGridAlignment)(col?.align),
-                  className: (0, _styles.dataGridCellVariants)(),
-                  style: cellStyle(col, columnWidths.get(cell.column.id)),
-                  children: content
+                  align: align,
+                  ...(_reactNative.Platform.OS === 'web' && cellText ? {
+                    title: cellText
+                  } : {}),
+                  className: (0, _utils.cn)((0, _styles.dataGridCellVariants)(), pinnedClassName(pin, false)),
+                  style: mergePinnedStyle(cellStyle(col, columnWidths.get(cell.column.id)), pin, pinnedOffsets, cell.column.id, false),
+                  children: cellText !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
+                    numberOfLines: 1,
+                    className: (0, _styles.dataGridCellTextVariants)({
+                      align,
+                      fitToColumn: _reactNative.Platform.OS === 'web' && columnWidths.has(cell.column.id)
+                    }),
+                    children: cellText
+                  }) : content
                 }, cell.id);
               })
             }, row.id);
+            if (!detailOpen) {
+              return [dataRow];
+            }
+            return [dataRow, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Row, {
+              className: "web:hover:bg-transparent",
+              testID: `data-grid-detail-panel-${String(rowId)}`,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Table.Cell, {
+                colSpan: leafColumnCount,
+                className: (0, _styles.dataGridDetailPanelCellVariants)(),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                  style: detailPanelContentStyle,
+                  children: detailContent
+                })
+              })
+            }, `${row.id}:detail`)];
           })
         })]
       }), isEmpty ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {