@bmsuisse/datagrid 0.39.0 → 0.40.0

package/dist/index.d.ts

@@ -2235,6 +2235,20 @@ interface TreeDataGridProps<TRow> extends TreeAccessors<TRow> {
      * bottom) but neither requires the other. Defaults to false.
      */
     showTotals?: boolean;
+    /**
+     * Opt-in: defaults to false. Gives every header a drag handle (and
+     * ArrowLeft/ArrowRight keyboard resize) on its trailing edge, and switches
+     * the table to `table-layout: fixed` so a dragged width is exactly the
+     * rendered width. A column without an explicit `width` stays flexible and
+     * absorbs the leftover space until it is resized itself.
+     */
+    enableColumnResizing?: boolean;
+    /**
+     * Controlled column widths in px, keyed by column id. Both must be supplied
+     * together to control it — omit both for `<TreeDataGrid>` to own the state.
+     */
+    columnSizing?: ColumnSizingState;
+    onColumnSizingChange?: (sizing: ColumnSizingState) => void;
     /**
      * Enables the same built-in inline-editing workflow `<DataGrid>` has:
      * any column with `editable` set renders as an interactive editor
@@ -2263,7 +2277,7 @@ interface TreeDataGridProps<TRow> extends TreeAccessors<TRow> {
  * column's cell matches `treeColumnId` (defaults to `columns[0]`); every
  * other column renders exactly like it would in `<DataGrid>`.
  */
-declare function TreeDataGrid<TRow>({ columns, data, loading, error, onRetry, statusLabels, treeColumnId, columnVisibility, getRowId, getChildren, hasChildren, onLoadChildren, initialExpandedLevel, expanded: controlledExpanded, onExpandedChange, childrenMap: controlledChildrenMap, onChildrenMapChange, indentSize, getRowProps, getRowTestId, rowActions, virtualizeThreshold, estimatedRowHeight, maxBodyHeight, testId, selectedIds: controlledSelectedIds, onSelectedIdsChange, getRowSelectionState, isRowSelectionDisabled, groupBy, renderGroupHeader, defaultGroupsExpanded, expandedGroups: controlledExpandedGroups, onExpandedGroupsChange, zebra, showTotals, editing, }: TreeDataGridProps<TRow>): ReactElement;
+declare function TreeDataGrid<TRow>({ columns, data, loading, error, onRetry, statusLabels, treeColumnId, columnVisibility, getRowId, getChildren, hasChildren, onLoadChildren, initialExpandedLevel, expanded: controlledExpanded, onExpandedChange, childrenMap: controlledChildrenMap, onChildrenMapChange, indentSize, getRowProps, getRowTestId, rowActions, virtualizeThreshold, estimatedRowHeight, maxBodyHeight, testId, selectedIds: controlledSelectedIds, onSelectedIdsChange, getRowSelectionState, isRowSelectionDisabled, groupBy, renderGroupHeader, defaultGroupsExpanded, expandedGroups: controlledExpandedGroups, onExpandedGroupsChange, zebra, showTotals, editing, enableColumnResizing, columnSizing: controlledColumnSizing, onColumnSizingChange, }: TreeDataGridProps<TRow>): ReactElement;
 
 interface FlatTreeRow<TRow> {
     row: TRow;

package/dist/index.js

@@ -4718,7 +4718,73 @@ import {
   ChevronDownIcon as ChevronDownIcon3,
   ChevronRightIcon as ChevronRightIcon3
 } from "@heroicons/react/24/outline";
-import { Fragment as Fragment5, useEffect as useEffect13, useMemo as useMemo11, useRef as useRef14 } from "react";
+import { Fragment as Fragment5, useEffect as useEffect13, useMemo as useMemo11, useRef as useRef15 } from "react";
+
+// src/hooks/useColumnSizing.ts
+import { useCallback as useCallback5, useState as useState17 } from "react";
+var MIN_COLUMN_SIZE2 = 40;
+var KEYBOARD_RESIZE_STEP = 10;
+function useColumnSizing(controlled, onChange) {
+  const [internal, setInternal] = useState17({});
+  const columnSizing = controlled ?? internal;
+  const setColumnSize = useCallback5(
+    (columnId, width) => {
+      const next = { ...columnSizing, [columnId]: Math.max(MIN_COLUMN_SIZE2, Math.round(width)) };
+      setInternal(next);
+      onChange?.(next);
+    },
+    [columnSizing, onChange]
+  );
+  return { columnSizing, setColumnSize };
+}
+
+// src/tree/ColumnResizeHandle.tsx
+import { useRef as useRef14 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
+function ColumnResizeHandle({ columnId, label, width, onResize }) {
+  const drag = useRef14(null);
+  const cellWidth = (handle) => handle.parentElement?.getBoundingClientRect().width ?? 0;
+  const onPointerDown = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    drag.current = { startX: event.clientX, startWidth: cellWidth(event.currentTarget) };
+  };
+  const onPointerMove = (event) => {
+    if (!drag.current) return;
+    onResize(columnId, drag.current.startWidth + event.clientX - drag.current.startX);
+  };
+  const endDrag = (event) => {
+    if (!drag.current) return;
+    drag.current = null;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+  };
+  const onKeyDown = (event) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+    event.preventDefault();
+    const delta = event.key === "ArrowRight" ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
+    onResize(columnId, cellWidth(event.currentTarget) + delta);
+  };
+  return /* @__PURE__ */ jsx36(
+    "div",
+    {
+      "data-testid": `resize-handle-${columnId}`,
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": `Resize ${label} column`,
+      "aria-valuenow": width,
+      "aria-valuemin": MIN_COLUMN_SIZE2,
+      "aria-valuetext": width === void 0 ? void 0 : `${width} pixels`,
+      tabIndex: 0,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+      onKeyDown,
+      className: "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
+    }
+  );
+}
 
 // src/tree/flattenTree.ts
 function flattenTree(roots, accessors, expanded, childrenOverride) {
@@ -4763,7 +4829,7 @@ function computeSelectionStates(roots, accessors, childrenOverride, selectedIds)
 }
 
 // src/tree/useTreeState.ts
-import { useCallback as useCallback5, useMemo as useMemo10, useState as useState17 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo10, useState as useState18 } from "react";
 function useTreeState({
   data,
   getRowId,
@@ -4775,9 +4841,9 @@ function useTreeState({
   childrenMap: controlledChildrenMap,
   onChildrenMapChange
 }) {
-  const [internalExpanded, setInternalExpanded] = useState17({});
+  const [internalExpanded, setInternalExpanded] = useState18({});
   const expanded = controlledExpanded ?? internalExpanded;
-  const setExpanded = useCallback5(
+  const setExpanded = useCallback6(
     (updater) => {
       if (controlledExpanded) {
         onExpandedChange?.(updater(controlledExpanded));
@@ -4787,9 +4853,9 @@ function useTreeState({
     },
     [controlledExpanded, onExpandedChange]
   );
-  const [internalChildrenMap, setInternalChildrenMap] = useState17(/* @__PURE__ */ new Map());
+  const [internalChildrenMap, setInternalChildrenMap] = useState18(/* @__PURE__ */ new Map());
   const childrenMap = controlledChildrenMap ?? internalChildrenMap;
-  const setChildrenMap = useCallback5(
+  const setChildrenMap = useCallback6(
     (updater) => {
       if (controlledChildrenMap) {
         onChildrenMapChange?.(updater(controlledChildrenMap));
@@ -4799,13 +4865,13 @@ function useTreeState({
     },
     [controlledChildrenMap, onChildrenMapChange]
   );
-  const [loadingIds, setLoadingIds] = useState17(/* @__PURE__ */ new Set());
-  const [errorIds, setErrorIds] = useState17(/* @__PURE__ */ new Map());
+  const [loadingIds, setLoadingIds] = useState18(/* @__PURE__ */ new Set());
+  const [errorIds, setErrorIds] = useState18(/* @__PURE__ */ new Map());
   const resolveHasChildren = useMemo10(
     () => hasChildren ?? ((row) => (getChildren(row)?.length ?? 0) > 0),
     [hasChildren, getChildren]
   );
-  const loadChildrenFor = useCallback5(
+  const loadChildrenFor = useCallback6(
     async (row) => {
       const id = getRowId(row);
       const cached = childrenMap.get(id);
@@ -4838,7 +4904,7 @@ function useTreeState({
     },
     [childrenMap, getChildren, getRowId, onLoadChildren, setChildrenMap]
   );
-  const toggleExpand = useCallback5(
+  const toggleExpand = useCallback6(
     (row) => {
       const id = getRowId(row);
       const willExpand = !expanded[id];
@@ -4850,14 +4916,14 @@ function useTreeState({
     },
     [expanded, getRowId, loadChildrenFor, resolveHasChildren, setExpanded]
   );
-  const retry = useCallback5(
+  const retry = useCallback6(
     (row) => {
       loadChildrenFor(row).catch(() => {
       });
     },
     [loadChildrenFor]
   );
-  const expandToLevel = useCallback5(
+  const expandToLevel = useCallback6(
     async (level) => {
       const nextExpanded = { ...expanded };
       async function visit(row, depth) {
@@ -4880,7 +4946,7 @@ function useTreeState({
 }
 
 // src/tree/TreeDataGrid.tsx
-import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 var EMPTY_SELECTED_IDS = /* @__PURE__ */ new Set();
 var UNCHECKED_STATE = { checked: false, indeterminate: false };
 function renderCell(column, row, editingCtx) {
@@ -4898,7 +4964,7 @@ function TreeCell({
   editingCtx
 }) {
   return /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1", style: { paddingLeft: flatRow.depth * indentSize }, children: [
-    flatRow.hasChildren ? /* @__PURE__ */ jsx36(
+    flatRow.hasChildren ? /* @__PURE__ */ jsx37(
       "button",
       {
         type: "button",
@@ -4910,11 +4976,11 @@ function TreeCell({
         "aria-label": flatRow.isExpanded ? "Collapse" : "Expand",
         "aria-expanded": flatRow.isExpanded,
         className: "flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground disabled:opacity-50",
-        children: isLoading ? /* @__PURE__ */ jsx36(ArrowPathIcon2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" }) : flatRow.isExpanded ? /* @__PURE__ */ jsx36(ChevronDownIcon3, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx36(ChevronRightIcon3, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+        children: isLoading ? /* @__PURE__ */ jsx37(ArrowPathIcon2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" }) : flatRow.isExpanded ? /* @__PURE__ */ jsx37(ChevronDownIcon3, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx37(ChevronRightIcon3, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
       }
-    ) : /* @__PURE__ */ jsx36("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx36("span", { className: "min-w-0 flex-1 truncate", children: renderCell(column, flatRow.row, editingCtx) }),
-    flatRow.isExpanded && error ? /* @__PURE__ */ jsx36(
+    ) : /* @__PURE__ */ jsx37("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx37("span", { className: "min-w-0 flex-1 truncate", children: renderCell(column, flatRow.row, editingCtx) }),
+    flatRow.isExpanded && error ? /* @__PURE__ */ jsx37(
       GridInlineError,
       {
         error: { message: labels.nodeLoadFailed, details: error },
@@ -4962,7 +5028,10 @@ function TreeDataGrid({
   onExpandedGroupsChange,
   zebra = true,
   showTotals = false,
-  editing
+  editing,
+  enableColumnResizing = false,
+  columnSizing: controlledColumnSizing,
+  onColumnSizingChange
 }) {
   const labels = resolveStatusLabels(statusLabels);
   const hasError = toErrorInfo(error) !== void 0;
@@ -4982,7 +5051,7 @@ function TreeDataGrid({
     childrenMap: controlledChildrenMap,
     onChildrenMapChange
   });
-  const didAutoExpand = useRef14(false);
+  const didAutoExpand = useRef15(false);
   useEffect13(() => {
     if (didAutoExpand.current) return;
     didAutoExpand.current = true;
@@ -5022,6 +5091,12 @@ function TreeDataGrid({
   const showRowActionsColumn = Boolean(rowActions?.length);
   const showSelectionColumn = controlledSelectedIds !== void 0;
   const totalColumnCount = visibleColumns.length + (showRowActionsColumn ? 1 : 0) + (showSelectionColumn ? 1 : 0);
+  const { columnSizing, setColumnSize } = useColumnSizing(controlledColumnSizing, onColumnSizingChange);
+  const columnWidthStyle = (column) => {
+    const width = enableColumnResizing ? columnSizing[column.id] ?? column.width : column.width;
+    return width ? { width } : void 0;
+  };
+  const fixedTableWidth = enableColumnResizing && !showRowActionsColumn && visibleColumns.every((c) => columnWidthStyle(c)) ? visibleColumns.reduce((sum, c) => sum + Number(columnWidthStyle(c)?.width), showSelectionColumn ? SELECTION_COLUMN_WIDTH : 0) : void 0;
   const { theadRef, groupHeaderTop } = useStickyGroupHeaderTop(Boolean(groupBy));
   const selectionStates = useMemo11(
     () => showSelectionColumn ? computeSelectionStates(data, accessors, childrenMap, controlledSelectedIds ?? EMPTY_SELECTED_IDS) : void 0,
@@ -5055,14 +5130,15 @@ function TreeDataGrid({
   }
   const bodyTdClassByColumn = useMemo11(() => {
     const map = /* @__PURE__ */ new Map();
-    for (const column of visibleColumns) map.set(column.id, `p-2 ${alignClassName(column)}`);
+    const clip = enableColumnResizing ? "overflow-hidden " : "";
+    for (const column of visibleColumns) map.set(column.id, `${clip}p-2 ${alignClassName(column)}`);
     return map;
-  }, [visibleColumns]);
+  }, [visibleColumns, enableColumnResizing]);
   const hasColumnSummary = visibleColumns.some((column) => column.summary);
   function renderGroupSummaryCells(rows) {
-    return visibleColumns.map((column) => /* @__PURE__ */ jsx36("td", { className: cn(bodyTdClassByColumn.get(column.id), "font-medium"), children: column.summary?.(rows) }, column.id));
+    return visibleColumns.map((column) => /* @__PURE__ */ jsx37("td", { className: cn(bodyTdClassByColumn.get(column.id), "font-medium"), children: column.summary?.(rows) }, column.id));
   }
-  const scrollRef = useRef14(null);
+  const scrollRef = useRef15(null);
   const shouldVirtualize = !groupBy && flatRows.length > virtualizeThreshold;
   const virtualizer = useVirtualizer2({
     count: flatRows.length,
@@ -5088,9 +5164,9 @@ function TreeDataGrid({
           isOddRow && "bg-foreground/5"
         ) : `border-b border-border divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
         children: [
-          showSelectionColumn && /* @__PURE__ */ jsx36("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
+          showSelectionColumn && /* @__PURE__ */ jsx37("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
             const state = resolveSelectionState(flatRow.row, flatRow.id);
-            return /* @__PURE__ */ jsx36(
+            return /* @__PURE__ */ jsx37(
               Checkbox,
               {
                 "aria-label": `Select row ${flatRow.id}`,
@@ -5101,7 +5177,7 @@ function TreeDataGrid({
               }
             );
           })() }),
-          visibleColumns.map((column) => /* @__PURE__ */ jsx36("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx36(
+          visibleColumns.map((column) => /* @__PURE__ */ jsx37("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx37(
             TreeCell,
             {
               flatRow,
@@ -5115,7 +5191,7 @@ function TreeDataGrid({
               editingCtx: editingState.ctx
             }
           ) : renderCell(column, flatRow.row, editingState.ctx) }, column.id)),
-          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx36("td", { className: "p-2", children: /* @__PURE__ */ jsx36(
+          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx37("td", { className: "p-2", children: /* @__PURE__ */ jsx37(
             ActionsMenu,
             {
               items: rowActions,
@@ -5132,8 +5208,8 @@ function TreeDataGrid({
   const paddingTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
   const paddingBottom = virtualItems.length > 0 ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
   return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-2", "data-testid": "tree-datagrid", children: [
-    hasError && data.length > 0 && /* @__PURE__ */ jsx36("div", { className: "flex shrink-0 items-center rounded-md border border-destructive/40 bg-destructive/10 px-2 py-1", children: /* @__PURE__ */ jsx36(GridInlineError, { error, onRetry, labels }) }),
-    editing && editingState.pendingEdits.size > 0 && /* @__PURE__ */ jsx36(
+    hasError && data.length > 0 && /* @__PURE__ */ jsx37("div", { className: "flex shrink-0 items-center rounded-md border border-destructive/40 bg-destructive/10 px-2 py-1", children: /* @__PURE__ */ jsx37(GridInlineError, { error, onRetry, labels }) }),
+    editing && editingState.pendingEdits.size > 0 && /* @__PURE__ */ jsx37(
       EditingBar,
       {
         editing,
@@ -5144,143 +5220,167 @@ function TreeDataGrid({
         testIdPrefix: "tree-datagrid"
       }
     ),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       "div",
       {
         ref: scrollRef,
         "data-testid": testId,
         className: "overflow-y-auto",
         style: { maxHeight: maxBodyHeight },
-        children: /* @__PURE__ */ jsxs22("table", { className: "w-full border-collapse text-sm", children: [
-          /* @__PURE__ */ jsx36("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs22("tr", { className: "divide-x divide-border", children: [
-            showSelectionColumn && /* @__PURE__ */ jsx36(
-              "th",
-              {
-                className: "sticky top-0 z-20 border-b border-border bg-muted p-1",
-                style: { width: SELECTION_COLUMN_WIDTH },
-                children: /* @__PURE__ */ jsx36(
-                  Checkbox,
+        children: /* @__PURE__ */ jsxs22(
+          "table",
+          {
+            className: cn(
+              "border-collapse text-sm",
+              fixedTableWidth === void 0 && "w-full",
+              enableColumnResizing && "table-fixed"
+            ),
+            style: fixedTableWidth === void 0 ? void 0 : { width: fixedTableWidth },
+            children: [
+              /* @__PURE__ */ jsx37("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs22("tr", { className: "divide-x divide-border", children: [
+                showSelectionColumn && /* @__PURE__ */ jsx37(
+                  "th",
                   {
-                    "aria-label": "Select all visible rows",
-                    checked: allVisibleSelected,
-                    onCheckedChange: toggleAllVisibleSelected
+                    className: "sticky top-0 z-20 border-b border-border bg-muted p-1",
+                    style: { width: SELECTION_COLUMN_WIDTH },
+                    children: /* @__PURE__ */ jsx37(
+                      Checkbox,
+                      {
+                        "aria-label": "Select all visible rows",
+                        checked: allVisibleSelected,
+                        onCheckedChange: toggleAllVisibleSelected
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            visibleColumns.map((column) => /* @__PURE__ */ jsx36(
-              "th",
-              {
-                style: column.width ? { width: column.width } : void 0,
-                className: cn(
-                  "sticky top-0 z-20 border-b border-border bg-muted p-2 font-medium",
-                  alignClassName(column)
                 ),
-                children: column.header
-              },
-              column.id
-            )),
-            showRowActionsColumn && /* @__PURE__ */ jsx36("th", { className: "sticky top-0 z-20 border-b border-border bg-muted p-2", "aria-label": "Row actions" })
-          ] }) }),
-          /* @__PURE__ */ jsx36("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? /* @__PURE__ */ jsx36(LoadingRows, { label: labels.loading }) : hasError ? /* @__PURE__ */ jsx36(GridErrorState, { error, onRetry, labels }) : labels.noResults }) }) : groupedBuckets ? groupedBuckets.map((bucket) => {
-            const groupExpanded = isGroupExpanded(bucket.key);
-            return /* @__PURE__ */ jsxs22(Fragment5, { children: [
-              /* @__PURE__ */ jsx36("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx36(
-                "td",
-                {
-                  colSpan: totalColumnCount,
-                  className: cn(
-                    "sticky z-20 border-b p-2 font-medium",
-                    zebra ? "bg-muted" : "bg-background"
-                  ),
-                  style: { top: groupHeaderTop },
-                  children: /* @__PURE__ */ jsxs22(
-                    "button",
+                visibleColumns.map((column) => /* @__PURE__ */ jsxs22(
+                  "th",
+                  {
+                    style: columnWidthStyle(column),
+                    className: cn(
+                      "sticky top-0 z-20 border-b border-border bg-muted p-2 font-medium",
+                      enableColumnResizing && "overflow-hidden",
+                      alignClassName(column)
+                    ),
+                    children: [
+                      column.header,
+                      enableColumnResizing && /* @__PURE__ */ jsx37(
+                        ColumnResizeHandle,
+                        {
+                          columnId: column.id,
+                          label: String(column.header),
+                          width: columnSizing[column.id] ?? column.width,
+                          onResize: setColumnSize
+                        }
+                      )
+                    ]
+                  },
+                  column.id
+                )),
+                showRowActionsColumn && /* @__PURE__ */ jsx37("th", { className: "sticky top-0 z-20 border-b border-border bg-muted p-2", "aria-label": "Row actions" })
+              ] }) }),
+              /* @__PURE__ */ jsx37("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx37("tr", { children: /* @__PURE__ */ jsx37("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? /* @__PURE__ */ jsx37(LoadingRows, { label: labels.loading }) : hasError ? /* @__PURE__ */ jsx37(GridErrorState, { error, onRetry, labels }) : labels.noResults }) }) : groupedBuckets ? groupedBuckets.map((bucket) => {
+                const groupExpanded = isGroupExpanded(bucket.key);
+                return /* @__PURE__ */ jsxs22(Fragment5, { children: [
+                  /* @__PURE__ */ jsx37("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx37(
+                    "td",
+                    {
+                      colSpan: totalColumnCount,
+                      className: cn(
+                        "sticky z-20 border-b p-2 font-medium",
+                        zebra ? "bg-muted" : "bg-background"
+                      ),
+                      style: { top: groupHeaderTop },
+                      children: /* @__PURE__ */ jsxs22(
+                        "button",
+                        {
+                          type: "button",
+                          className: "flex w-full items-center gap-1 text-left",
+                          onClick: () => toggleGroupExpanded(bucket.key),
+                          "aria-expanded": groupExpanded,
+                          children: [
+                            /* @__PURE__ */ jsx37(
+                              ChevronRightIcon3,
+                              {
+                                className: `h-4 w-4 shrink-0 transition-transform${groupExpanded ? " rotate-90" : ""}`,
+                                "aria-hidden": true
+                              }
+                            ),
+                            renderGroupHeader ? renderGroupHeader(bucket.key, bucket.roots, groupExpanded) : `${bucket.key} (${bucket.roots.length})`
+                          ]
+                        }
+                      )
+                    }
+                  ) }),
+                  hasColumnSummary && /* @__PURE__ */ jsxs22(
+                    "tr",
                     {
-                      type: "button",
-                      className: "flex w-full items-center gap-1 text-left",
-                      onClick: () => toggleGroupExpanded(bucket.key),
-                      "aria-expanded": groupExpanded,
+                      "data-testid": `group-summary-${bucket.key}`,
+                      className: "border-b border-border divide-x divide-border",
                       children: [
-                        /* @__PURE__ */ jsx36(
-                          ChevronRightIcon3,
+                        showSelectionColumn && /* @__PURE__ */ jsx37(
+                          "td",
                           {
-                            className: `h-4 w-4 shrink-0 transition-transform${groupExpanded ? " rotate-90" : ""}`,
-                            "aria-hidden": true
+                            className: cn("p-2", zebra ? "bg-muted" : "bg-background"),
+                            style: { width: SELECTION_COLUMN_WIDTH }
                           }
                         ),
-                        renderGroupHeader ? renderGroupHeader(bucket.key, bucket.roots, groupExpanded) : `${bucket.key} (${bucket.roots.length})`
+                        renderGroupSummaryCells(bucket.roots),
+                        showRowActionsColumn && /* @__PURE__ */ jsx37("td", { className: cn("p-2", zebra ? "bg-muted" : "bg-background"), "aria-hidden": true })
                       ]
                     }
-                  )
-                }
-              ) }),
-              hasColumnSummary && /* @__PURE__ */ jsxs22(
-                "tr",
-                {
-                  "data-testid": `group-summary-${bucket.key}`,
-                  className: "border-b border-border divide-x divide-border",
-                  children: [
-                    showSelectionColumn && /* @__PURE__ */ jsx36(
-                      "td",
-                      {
-                        className: cn("p-2", zebra ? "bg-muted" : "bg-background"),
-                        style: { width: SELECTION_COLUMN_WIDTH }
-                      }
-                    ),
-                    renderGroupSummaryCells(bucket.roots),
-                    showRowActionsColumn && /* @__PURE__ */ jsx36("td", { className: cn("p-2", zebra ? "bg-muted" : "bg-background"), "aria-hidden": true })
-                  ]
-                }
-              ),
-              groupExpanded && (() => {
-                const startIndex = groupedRender?.startIndexByBucket.get(bucket.key) ?? 0;
-                return bucket.flatRows.map((flatRow, i) => renderRow(flatRow, startIndex + i));
-              })()
-            ] }, `group-${bucket.key}`);
-          }) : shouldVirtualize ? /* @__PURE__ */ jsxs22(Fragment6, { children: [
-            paddingTop > 0 && /* @__PURE__ */ jsx36("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx36("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }),
-            virtualItems.map(
-              (virtualItem) => renderRow(flatRows[virtualItem.index], virtualItem.index, (el) => virtualizer.measureElement(el))
-            ),
-            paddingBottom > 0 && /* @__PURE__ */ jsx36("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx36(
-              "td",
-              {
-                colSpan: totalColumnCount,
-                style: { padding: 0, border: "none", height: paddingBottom }
-              }
-            ) })
-          ] }) : flatRows.map((flatRow, index) => renderRow(flatRow, index)) }),
-          showTotals && hasColumnSummary && // Sticky to the BOTTOM of the scroll container, mirroring the
-          // `<thead>`'s own `top-0` stickiness — see `<DataGrid>`'s own
-          // `renderTotalsFooter` for the full reasoning. Summarizes `data`
-          // (the root-level rows), not `flatRows`/`allFlatRows` — same
-          // "roots only" scope `groupBy` itself uses, and for the same
-          // reason (a child's value is usually already folded into its
-          // parent's).
-          /* @__PURE__ */ jsx36("tfoot", { children: /* @__PURE__ */ jsxs22("tr", { "data-testid": "totals-row", className: "divide-x divide-border", children: [
-            showSelectionColumn && /* @__PURE__ */ jsx36(
-              "td",
-              {
-                className: "sticky bottom-0 z-20 border-t border-border bg-muted p-2",
-                style: { width: SELECTION_COLUMN_WIDTH }
-              }
-            ),
-            visibleColumns.map((column) => /* @__PURE__ */ jsx36(
-              "td",
-              {
-                style: column.width ? { width: column.width } : void 0,
-                className: cn(
-                  "sticky bottom-0 z-20 border-t border-border bg-muted p-2 font-medium",
-                  alignClassName(column)
+                  ),
+                  groupExpanded && (() => {
+                    const startIndex = groupedRender?.startIndexByBucket.get(bucket.key) ?? 0;
+                    return bucket.flatRows.map((flatRow, i) => renderRow(flatRow, startIndex + i));
+                  })()
+                ] }, `group-${bucket.key}`);
+              }) : shouldVirtualize ? /* @__PURE__ */ jsxs22(Fragment6, { children: [
+                paddingTop > 0 && /* @__PURE__ */ jsx37("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx37("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }),
+                virtualItems.map(
+                  (virtualItem) => renderRow(flatRows[virtualItem.index], virtualItem.index, (el) => virtualizer.measureElement(el))
                 ),
-                children: column.summary?.(data)
-              },
-              column.id
-            )),
-            showRowActionsColumn && /* @__PURE__ */ jsx36("td", { className: "sticky bottom-0 z-20 border-t border-border bg-muted p-2", "aria-hidden": true })
-          ] }) })
-        ] })
+                paddingBottom > 0 && /* @__PURE__ */ jsx37("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx37(
+                  "td",
+                  {
+                    colSpan: totalColumnCount,
+                    style: { padding: 0, border: "none", height: paddingBottom }
+                  }
+                ) })
+              ] }) : flatRows.map((flatRow, index) => renderRow(flatRow, index)) }),
+              showTotals && hasColumnSummary && // Sticky to the BOTTOM of the scroll container, mirroring the
+              // `<thead>`'s own `top-0` stickiness — see `<DataGrid>`'s own
+              // `renderTotalsFooter` for the full reasoning. Summarizes `data`
+              // (the root-level rows), not `flatRows`/`allFlatRows` — same
+              // "roots only" scope `groupBy` itself uses, and for the same
+              // reason (a child's value is usually already folded into its
+              // parent's).
+              /* @__PURE__ */ jsx37("tfoot", { children: /* @__PURE__ */ jsxs22("tr", { "data-testid": "totals-row", className: "divide-x divide-border", children: [
+                showSelectionColumn && /* @__PURE__ */ jsx37(
+                  "td",
+                  {
+                    className: "sticky bottom-0 z-20 border-t border-border bg-muted p-2",
+                    style: { width: SELECTION_COLUMN_WIDTH }
+                  }
+                ),
+                visibleColumns.map((column) => /* @__PURE__ */ jsx37(
+                  "td",
+                  {
+                    style: columnWidthStyle(column),
+                    className: cn(
+                      "sticky bottom-0 z-20 border-t border-border bg-muted p-2 font-medium",
+                      enableColumnResizing && "overflow-hidden",
+                      alignClassName(column)
+                    ),
+                    children: column.summary?.(data)
+                  },
+                  column.id
+                )),
+                showRowActionsColumn && /* @__PURE__ */ jsx37("td", { className: "sticky bottom-0 z-20 border-t border-border bg-muted p-2", "aria-hidden": true })
+              ] }) })
+            ]
+          }
+        )
       }
     )
   ] });