@bmsuisse/datagrid 0.23.1 → 0.23.4

package/dist/index.d.ts

@@ -772,7 +772,7 @@ interface DataGridProps<TRow> {
  * (`"server"`). Column filter UI defaults to the type-appropriate widget
  * from `src/filter` unless a column supplies its own `cell` renderer.
  */
-declare function DataGrid<TRow extends RowData>({ columns, dataSource, getRowId, rowActions, headerActions, enableMultiSort, initialState, columnVisibility, renderDetail, enableColumnResizing, columnResizeMode, columnSizing, onColumnSizingChange, virtualize, showPagination, getRowProps, getRowTestId, gridState, selectedIds: controlledSelectedIds, onSelectedIdsChange, testId, loading: loadingProp, }: DataGridProps<TRow>): ReactElement;
+declare function DataGrid<TRow extends RowData>({ columns, dataSource, getRowId, rowActions, headerActions, enableMultiSort, initialState, columnVisibility, renderDetail, enableColumnResizing, columnResizeMode, columnSizing: controlledColumnSizing, onColumnSizingChange, virtualize, showPagination, getRowProps, getRowTestId, gridState, selectedIds: controlledSelectedIds, onSelectedIdsChange, testId, loading: loadingProp, }: DataGridProps<TRow>): ReactElement;
 
 interface GridStateController {
     state: GridState;

package/dist/index.js

@@ -192,7 +192,8 @@ var buttonVariants = cva(
 var Button = forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+    const variantClass = buttonVariants({ variant, size });
+    return /* @__PURE__ */ jsx(Comp, { className: className ? cn(variantClass, className) : variantClass, ref, ...props });
   }
 );
 Button.displayName = "Button";
@@ -648,6 +649,15 @@ function toNumber(value) {
   }
   return null;
 }
+var currencyFormatters = /* @__PURE__ */ new Map();
+function currencyFormatter(currency) {
+  let formatter = currencyFormatters.get(currency);
+  if (!formatter) {
+    formatter = new Intl.NumberFormat(void 0, { style: "currency", currency });
+    currencyFormatters.set(currency, formatter);
+  }
+  return formatter;
+}
 function defaultFormat(column, value) {
   if (value === null || value === void 0) return "";
   switch (column.type) {
@@ -660,10 +670,7 @@ function defaultFormat(column, value) {
     case "currency": {
       const num = toNumber(value);
       if (num === null) return String(value);
-      return new Intl.NumberFormat(void 0, {
-        style: "currency",
-        currency: column.currency ?? "USD"
-      }).format(num);
+      return currencyFormatter(column.currency ?? "USD").format(num);
     }
     case "date": {
       const date = toDate(value);
@@ -1508,6 +1515,7 @@ function resolveMenuItems(items, ctx) {
 
 // src/menu/ActionsMenu.tsx
 import { MoreVertical } from "lucide-react";
+import { useMemo as useMemo3 } from "react";
 
 // src/components/ui/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -1563,7 +1571,10 @@ DropdownMenuLabel.displayName = "DropdownMenuLabel";
 // src/menu/ActionsMenu.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function ActionsMenu({ items, ctx, triggerLabel }) {
-  const resolved = resolveMenuItems(items, ctx);
+  const resolved = useMemo3(
+    () => resolveMenuItems(items, ctx),
+    [items, ctx.row, ctx.selectedRows]
+  );
   if (resolved.length === 0) return null;
   return /* @__PURE__ */ jsxs11(DropdownMenu, { children: [
     /* @__PURE__ */ jsx18(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx18(Button, { variant: "ghost", size: "icon", "aria-label": triggerLabel, onClick: stopRowClick, children: /* @__PURE__ */ jsx18(MoreVertical, { className: "h-4 w-4", "aria-hidden": true }) }) }),
@@ -1585,7 +1596,7 @@ import { BarsArrowDownIcon, BarsArrowUpIcon, FunnelIcon as FunnelIcon7 } from "@
 import { columnResizingFeature, columnSizingFeature, flexRender, tableFeatures, useTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronRight, Loader2 } from "lucide-react";
-import { Fragment as Fragment2, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef5, useState as useState6 } from "react";
+import { Fragment as Fragment2, useEffect as useEffect7, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
 
 // src/grid/processClientData.ts
 function makeComparator(sort) {
@@ -1613,10 +1624,10 @@ function processClientData(data, state) {
 }
 
 // src/grid/useGridState.ts
-import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo4, useState as useState5 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo5, useState as useState5 } from "react";
 
 // src/hooks/useDebouncedCallback.ts
-import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4 } from "react";
 function useDebouncedCallback(callback, delayMs) {
   const callbackRef = useRef4(callback);
   callbackRef.current = callback;
@@ -1626,7 +1637,7 @@ function useDebouncedCallback(callback, delayMs) {
       clearTimeout(timeoutRef.current);
     };
   }, []);
-  return useMemo3(() => {
+  return useMemo4(() => {
     return {
       run: (...args) => {
         clearTimeout(timeoutRef.current);
@@ -1676,7 +1687,7 @@ function useGridState(dataSource, initialState, externalState) {
     cancelDebouncedNotify();
     setState(externalState);
   }, [externalState, cancelDebouncedNotify]);
-  const filtersByColumn = useMemo4(() => {
+  const filtersByColumn = useMemo5(() => {
     const map = /* @__PURE__ */ new Map();
     for (const child of state.filter?.filters ?? []) {
       if ("operator" in child) map.set(fieldKey(child.field), child);
@@ -1743,9 +1754,12 @@ function useGridState(dataSource, initialState, externalState) {
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var gridTableFeatures = tableFeatures({ columnSizingFeature, columnResizingFeature });
 var DEFAULT_COLUMN_SIZE = 150;
-function pinnedOffsets(visibleColumns, side, getSize) {
+var DETAIL_COLUMN_WIDTH = 44;
+var SELECTION_COLUMN_WIDTH = 44;
+var ROW_ACTIONS_COLUMN_WIDTH = 44;
+function pinnedOffsets(visibleColumns, side, getSize, leadingOffset) {
   const offsets = /* @__PURE__ */ new Map();
-  let cursor = 0;
+  let cursor = leadingOffset;
   const ordered = side === "left" ? visibleColumns : [...visibleColumns].reverse();
   for (const column of ordered) {
     if (column.pinned !== side) continue;
@@ -1789,7 +1803,7 @@ function DataGrid({
   renderDetail,
   enableColumnResizing = false,
   columnResizeMode = "onChange",
-  columnSizing,
+  columnSizing: controlledColumnSizing,
   onColumnSizingChange,
   virtualize,
   showPagination = true,
@@ -1812,6 +1826,12 @@ function DataGrid({
     setInternalSelectedIds(next);
     onSelectedIdsChange?.(next);
   }
+  const [internalColumnSizing, setInternalColumnSizing] = useState6({});
+  const columnSizing = controlledColumnSizing ?? internalColumnSizing;
+  function updateColumnSizing(next) {
+    setInternalColumnSizing(next);
+    onColumnSizingChange?.(next);
+  }
   const [expandedIds, setExpandedIds] = useState6(/* @__PURE__ */ new Set());
   function toggleRowExpanded(id) {
     setExpandedIds((prev) => {
@@ -1821,16 +1841,16 @@ function DataGrid({
       return next;
     });
   }
-  const visibleColumns = useMemo5(
+  const visibleColumns = useMemo6(
     () => columnVisibility ? columns.filter((column) => isColumnVisible(columnVisibility, column.id)) : columns,
     [columns, columnVisibility]
   );
   const serverRowCount = dataSource.mode === "server" ? dataSource.rowCount : void 0;
-  const { rows, rowCount } = useMemo5(() => {
+  const { rows, rowCount } = useMemo6(() => {
     if (dataSource.mode === "client") return processClientData(dataSource.data, state);
     return { rows: dataSource.data, rowCount: serverRowCount ?? 0 };
   }, [dataSource.mode, dataSource.data, serverRowCount, state]);
-  const selectedRows = useMemo5(
+  const selectedRows = useMemo6(
     () => rows.filter((row) => selectedIds.has(getRowId(row))),
     [rows, selectedIds, getRowId]
   );
@@ -1849,8 +1869,8 @@ function DataGrid({
     }
     updateSelectedIds(next);
   }
-  const tanstackColumns = useMemo5(() => toTanstackColumns(visibleColumns), [visibleColumns]);
-  const columnById = useMemo5(() => {
+  const tanstackColumns = useMemo6(() => toTanstackColumns(visibleColumns), [visibleColumns]);
+  const columnById = useMemo6(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) map.set(column.id, column);
     return map;
@@ -1862,13 +1882,11 @@ function DataGrid({
     getRowId,
     enableColumnResizing,
     columnResizeMode,
-    ...columnSizing ? {
-      state: { columnSizing },
-      onColumnSizingChange: (updater) => {
-        const next = typeof updater === "function" ? updater(columnSizing) : updater;
-        onColumnSizingChange?.(next);
-      }
-    } : {}
+    state: { columnSizing },
+    onColumnSizingChange: (updater) => {
+      const next = typeof updater === "function" ? updater(columnSizing) : updater;
+      updateColumnSizing(next);
+    }
   });
   const pageCount = Math.max(1, Math.ceil(rowCount / state.pageSize));
   const loading = loadingProp || (dataSource.mode === "server" ? Boolean(dataSource.loading) : false);
@@ -1877,7 +1895,7 @@ function DataGrid({
   const showDetailColumn = Boolean(renderDetail);
   const totalColumnCount = visibleColumns.length + (showDetailColumn ? 1 : 0) + (showSelectionColumn ? 1 : 0) + (showRowActionsColumn ? 1 : 0);
   const hasFilterRow = visibleColumns.some((column) => isFilterable(column) && column.filterDisplay === "row");
-  const headerRuns = useMemo5(() => computeHeaderRuns(visibleColumns), [visibleColumns]);
+  const headerRuns = useMemo6(() => computeHeaderRuns(visibleColumns), [visibleColumns]);
   const hasHeaderGroups = visibleColumns.some((column) => column.headerGroup);
   function renderFilterWidget(column) {
     const value = filtersByColumn.get(column.id);
@@ -1885,19 +1903,79 @@ function DataGrid({
     return column.renderFilter ? column.renderFilter(value, onChange, state.filter) : renderDefaultFilterWidget(column, value, onChange);
   }
   const columnSize = (columnId) => table.getColumn(columnId)?.getSize() ?? DEFAULT_COLUMN_SIZE;
-  const leftPinnedOffsets = pinnedOffsets(visibleColumns, "left", columnSize);
-  const rightPinnedOffsets = pinnedOffsets(visibleColumns, "right", columnSize);
+  const leadingStructuralWidth = (showDetailColumn ? DETAIL_COLUMN_WIDTH : 0) + (showSelectionColumn ? SELECTION_COLUMN_WIDTH : 0);
+  const trailingStructuralWidth = showRowActionsColumn ? ROW_ACTIONS_COLUMN_WIDTH : 0;
+  const leftPinnedOffsets = useMemo6(
+    () => pinnedOffsets(visibleColumns, "left", columnSize, leadingStructuralWidth),
+    [visibleColumns, columnSizing, leadingStructuralWidth]
+  );
+  const rightPinnedOffsets = useMemo6(
+    () => pinnedOffsets(visibleColumns, "right", columnSize, trailingStructuralWidth),
+    [visibleColumns, columnSizing, trailingStructuralWidth]
+  );
   function pinnedCellProps(column, area = "body") {
     const bg = area === "header" ? "bg-muted" : "bg-background";
     if (column.pinned === "left") {
-      return { className: cn("sticky z-10", bg), style: { left: leftPinnedOffsets.get(column.id), width: columnSize(column.id) } };
+      return { className: `sticky z-10 ${bg}`, style: { left: leftPinnedOffsets.get(column.id), width: columnSize(column.id) } };
     }
     if (column.pinned === "right") {
-      return { className: cn("sticky z-10", bg), style: { right: rightPinnedOffsets.get(column.id), width: columnSize(column.id) } };
+      return { className: `sticky z-10 ${bg}`, style: { right: rightPinnedOffsets.get(column.id), width: columnSize(column.id) } };
     }
     if (enableColumnResizing) return { style: { width: columnSize(column.id) } };
     return { style: column.width ? { width: column.width } : void 0 };
   }
+  function structuralCellProps(side, offset, width, area = "body") {
+    const bg = area === "header" ? "bg-muted" : "bg-background";
+    return { className: `border-b p-1 sticky z-10 ${bg}`, style: { [side]: offset, width } };
+  }
+  const detailCellProps = structuralCellProps("left", 0, DETAIL_COLUMN_WIDTH);
+  const selectionCellProps = structuralCellProps(
+    "left",
+    showDetailColumn ? DETAIL_COLUMN_WIDTH : 0,
+    SELECTION_COLUMN_WIDTH
+  );
+  const rowActionsCellProps = structuralCellProps("right", 0, ROW_ACTIONS_COLUMN_WIDTH);
+  const detailHeaderCellProps = structuralCellProps("left", 0, DETAIL_COLUMN_WIDTH, "header");
+  const selectionHeaderCellProps = structuralCellProps(
+    "left",
+    showDetailColumn ? DETAIL_COLUMN_WIDTH : 0,
+    SELECTION_COLUMN_WIDTH,
+    "header"
+  );
+  const rowActionsHeaderCellProps = structuralCellProps("right", 0, ROW_ACTIONS_COLUMN_WIDTH, "header");
+  const BODY_TD_BASE_CLASS = "border-b p-2";
+  function bodyCellClassAndStyle(column) {
+    const pinnedProps = column.pinned || enableColumnResizing ? pinnedCellProps(column) : void 0;
+    return {
+      className: pinnedProps?.className ? `${BODY_TD_BASE_CLASS} ${pinnedProps.className}` : BODY_TD_BASE_CLASS,
+      style: pinnedProps?.style
+    };
+  }
+  const bodyCellPropsByColumn = useMemo6(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const column of visibleColumns) map.set(column.id, bodyCellClassAndStyle(column));
+    return map;
+  }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
+  function headerCellClassAndStyle(column, base) {
+    const pinnedProps = pinnedCellProps(column, "header");
+    const align = alignClassName(column);
+    const className = pinnedProps.className ? `${base} ${align} ${pinnedProps.className}` : `${base} ${align}`;
+    return { className, style: pinnedProps.style };
+  }
+  const leafHeaderCellPropsByColumn = useMemo6(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const column of visibleColumns) {
+      map.set(column.id, headerCellClassAndStyle(column, "relative border-b p-2 font-medium"));
+    }
+    return map;
+  }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
+  const filterHeaderCellPropsByColumn = useMemo6(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const column of visibleColumns) {
+      map.set(column.id, headerCellClassAndStyle(column, "border-b p-2 align-top font-normal"));
+    }
+    return map;
+  }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
   const tableRows = table.getRowModel().rows;
   const shouldVirtualize = Boolean(virtualize) && tableRows.length > (virtualize?.threshold ?? 100);
   const scrollRef = useRef5(null);
@@ -1931,22 +2009,30 @@ function DataGrid({
         {
           ...rowProps,
           "data-testid": rowTestId,
-          className: cn(rowProps?.className, row.index % 2 === 1 && "bg-foreground/5"),
+          className: rowProps?.className ? cn(rowProps.className, row.index % 2 === 1 && "bg-foreground/5") : row.index % 2 === 1 ? "bg-foreground/5" : void 0,
           children: [
-            showDetailColumn && /* @__PURE__ */ jsx19("td", { className: "border-b p-2", children: /* @__PURE__ */ jsx19(
-              "button",
+            showDetailColumn && /* @__PURE__ */ jsx19("td", { className: detailCellProps.className, style: detailCellProps.style, children: /* @__PURE__ */ jsx19(
+              Button,
               {
                 type: "button",
+                variant: "ghost",
+                size: "icon",
                 "aria-label": `${isExpanded ? "Collapse" : "Expand"} row ${row.id}`,
                 "aria-expanded": isExpanded,
                 onClick: (event) => {
                   stopRowClick(event);
                   toggleRowExpanded(row.id);
                 },
-                children: /* @__PURE__ */ jsx19(ChevronRight, { className: cn("h-4 w-4 transition-transform", isExpanded && "rotate-90"), "aria-hidden": true })
+                children: /* @__PURE__ */ jsx19(
+                  ChevronRight,
+                  {
+                    className: `h-4 w-4 transition-transform${isExpanded ? " rotate-90" : ""}`,
+                    "aria-hidden": true
+                  }
+                )
               }
             ) }),
-            showSelectionColumn && /* @__PURE__ */ jsx19("td", { className: "border-b p-2", children: /* @__PURE__ */ jsx19(
+            showSelectionColumn && /* @__PURE__ */ jsx19("td", { className: selectionCellProps.className, style: selectionCellProps.style, children: /* @__PURE__ */ jsx19(
               "input",
               {
                 type: "checkbox",
@@ -1957,11 +2043,10 @@ function DataGrid({
               }
             ) }),
             row.getAllCells().map((cell) => {
-              const cellColumn = columnById.get(cell.column.id);
-              const pinnedProps = cellColumn && (cellColumn.pinned || enableColumnResizing) ? pinnedCellProps(cellColumn) : void 0;
-              return /* @__PURE__ */ jsx19("td", { style: pinnedProps?.style, className: cn("border-b p-2", pinnedProps?.className), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+              const cellProps = bodyCellPropsByColumn.get(cell.column.id);
+              return /* @__PURE__ */ jsx19("td", { style: cellProps?.style, className: cellProps?.className ?? BODY_TD_BASE_CLASS, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
             }),
-            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx19("td", { className: "border-b p-2", children: /* @__PURE__ */ jsx19(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` }) })
+            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx19("td", { className: rowActionsCellProps.className, style: rowActionsCellProps.style, children: /* @__PURE__ */ jsx19(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` }) })
           ]
         }
       ),
@@ -1992,7 +2077,7 @@ function DataGrid({
           "data-testid": testId,
           className: cn("overflow-x-auto rounded-md border", shouldVirtualize && "overflow-y-auto"),
           style: shouldVirtualize ? { maxHeight: virtualize?.maxBodyHeight ?? 480 } : void 0,
-          children: /* @__PURE__ */ jsxs12("table", { className: "w-full border-collapse text-sm", children: [
+          children: /* @__PURE__ */ jsxs12("table", { className: cn("w-full border-collapse text-sm", enableColumnResizing && "table-fixed"), children: [
             /* @__PURE__ */ jsxs12("thead", { className: "bg-muted", children: [
               table.getHeaderGroups().map((headerGroup) => {
                 const headerById = new Map(headerGroup.headers.map((header) => [header.id, header]));
@@ -2002,63 +2087,70 @@ function DataGrid({
                   const sortEntry = state.sort.find((s) => s.field === column.id);
                   const sortable = isSortable(column);
                   const filterable = isFilterable(column) && column.filterDisplay !== "row";
-                  const pinnedProps = pinnedCellProps(column, "header");
-                  return /* @__PURE__ */ jsxs12(
-                    "th",
-                    {
-                      rowSpan,
-                      style: pinnedProps.style,
-                      className: cn("relative border-b p-2 font-medium", alignClassName(column), pinnedProps.className),
-                      children: [
-                        /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
-                          /* @__PURE__ */ jsxs12(
-                            "button",
-                            {
-                              type: "button",
-                              className: cn(
-                                "flex items-center gap-1 rounded-sm px-1",
-                                sortable && "hover:bg-accent hover:text-accent-foreground"
-                              ),
-                              disabled: !sortable,
-                              onClick: (event) => sortable && toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
-                              children: [
-                                column.renderHeader ? column.renderHeader(column) : column.header,
-                                sortable && sortEntry?.dir === "asc" && /* @__PURE__ */ jsx19(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
-                                sortable && sortEntry?.dir === "desc" && /* @__PURE__ */ jsx19(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
-                              ]
-                            }
+                  const cellProps = leafHeaderCellPropsByColumn.get(column.id);
+                  return /* @__PURE__ */ jsxs12("th", { rowSpan, style: cellProps?.style, className: cellProps?.className, children: [
+                    /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsxs12(
+                        "button",
+                        {
+                          type: "button",
+                          className: cn(
+                            "flex items-center gap-1 rounded-sm px-1",
+                            sortable && "hover:bg-accent hover:text-accent-foreground"
                           ),
-                          filterable && /* @__PURE__ */ jsxs12(Popover, { children: [
-                            /* @__PURE__ */ jsx19(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx19(FunnelIcon7, { className: "h-3 w-3", "aria-hidden": true }) }) }),
-                            /* @__PURE__ */ jsx19(PopoverContent, { children: renderFilterWidget(column) })
-                          ] })
-                        ] }),
-                        enableColumnResizing && /* @__PURE__ */ jsx19(
-                          "div",
-                          {
-                            "data-testid": `resize-handle-${column.id}`,
-                            onMouseDown: header.getResizeHandler(),
-                            onTouchStart: header.getResizeHandler(),
-                            className: "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-accent"
-                          }
-                        )
-                      ]
-                    },
-                    header.id
-                  );
+                          disabled: !sortable,
+                          onClick: (event) => sortable && toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
+                          children: [
+                            column.renderHeader ? column.renderHeader(column) : column.header,
+                            sortable && sortEntry?.dir === "asc" && /* @__PURE__ */ jsx19(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
+                            sortable && sortEntry?.dir === "desc" && /* @__PURE__ */ jsx19(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
+                          ]
+                        }
+                      ),
+                      filterable && /* @__PURE__ */ jsxs12(Popover, { children: [
+                        /* @__PURE__ */ jsx19(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx19(FunnelIcon7, { className: "h-3 w-3", "aria-hidden": true }) }) }),
+                        /* @__PURE__ */ jsx19(PopoverContent, { children: renderFilterWidget(column) })
+                      ] })
+                    ] }),
+                    enableColumnResizing && /* @__PURE__ */ jsx19(
+                      "div",
+                      {
+                        "data-testid": `resize-handle-${column.id}`,
+                        onMouseDown: header.getResizeHandler(),
+                        onTouchStart: header.getResizeHandler(),
+                        className: "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-accent"
+                      }
+                    )
+                  ] }, header.id);
                 }
                 return /* @__PURE__ */ jsxs12(Fragment2, { children: [
                   hasHeaderGroups && /* @__PURE__ */ jsxs12("tr", { "data-testid": "header-group-row", children: [
-                    showDetailColumn && /* @__PURE__ */ jsx19("th", { rowSpan: 2, className: "border-b p-2", "aria-hidden": true }),
-                    showSelectionColumn && /* @__PURE__ */ jsx19("th", { rowSpan: 2, className: "border-b p-2", children: /* @__PURE__ */ jsx19(
-                      "input",
+                    showDetailColumn && /* @__PURE__ */ jsx19(
+                      "th",
                       {
-                        type: "checkbox",
-                        "aria-label": "Select all rows on this page",
-                        checked: allOnPageSelected,
-                        onChange: toggleAllOnPageSelected
+                        rowSpan: 2,
+                        className: detailHeaderCellProps.className,
+                        style: detailHeaderCellProps.style,
+                        "aria-hidden": true
+                      }
+                    ),
+                    showSelectionColumn && /* @__PURE__ */ jsx19(
+                      "th",
+                      {
+                        rowSpan: 2,
+                        className: selectionHeaderCellProps.className,
+                        style: selectionHeaderCellProps.style,
+                        children: /* @__PURE__ */ jsx19(
+                          "input",
+                          {
+                            type: "checkbox",
+                            "aria-label": "Select all rows on this page",
+                            checked: allOnPageSelected,
+                            onChange: toggleAllOnPageSelected
+                          }
+                        )
                       }
-                    ) }),
+                    ),
                     headerRuns.map(
                       (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx19(
                         "th",
@@ -2070,44 +2162,77 @@ function DataGrid({
                         `group-${run.label}-${run.columns[0].id}`
                       )
                     ),
-                    showRowActionsColumn && /* @__PURE__ */ jsx19("th", { rowSpan: 2, className: "border-b p-2", "aria-label": "Row actions" })
+                    showRowActionsColumn && /* @__PURE__ */ jsx19(
+                      "th",
+                      {
+                        rowSpan: 2,
+                        className: rowActionsHeaderCellProps.className,
+                        style: rowActionsHeaderCellProps.style,
+                        "aria-label": "Row actions"
+                      }
+                    )
                   ] }, `${headerGroup.id}-groups`),
                   /* @__PURE__ */ jsxs12("tr", { children: [
-                    !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2", "aria-hidden": true }),
-                    !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2", children: /* @__PURE__ */ jsx19(
-                      "input",
+                    !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx19(
+                      "th",
+                      {
+                        className: detailHeaderCellProps.className,
+                        style: detailHeaderCellProps.style,
+                        "aria-hidden": true
+                      }
+                    ),
+                    !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx19(
+                      "th",
                       {
-                        type: "checkbox",
-                        "aria-label": "Select all rows on this page",
-                        checked: allOnPageSelected,
-                        onChange: toggleAllOnPageSelected
+                        className: selectionHeaderCellProps.className,
+                        style: selectionHeaderCellProps.style,
+                        children: /* @__PURE__ */ jsx19(
+                          "input",
+                          {
+                            type: "checkbox",
+                            "aria-label": "Select all rows on this page",
+                            checked: allOnPageSelected,
+                            onChange: toggleAllOnPageSelected
+                          }
+                        )
                       }
-                    ) }),
+                    ),
                     headerGroup.headers.map((header) => {
                       const column = columnById.get(header.id);
                       if (!column || hasHeaderGroups && !column.headerGroup) return null;
                       return renderLeafHeaderCell(column);
                     }),
-                    !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2", "aria-label": "Row actions" })
+                    !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx19(
+                      "th",
+                      {
+                        className: rowActionsHeaderCellProps.className,
+                        style: rowActionsHeaderCellProps.style,
+                        "aria-label": "Row actions"
+                      }
+                    )
                   ] }, headerGroup.id)
                 ] }, headerGroup.id);
               }),
               hasFilterRow && /* @__PURE__ */ jsxs12("tr", { "data-testid": "filter-row", children: [
-                showDetailColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2" }),
-                showSelectionColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2" }),
+                showDetailColumn && /* @__PURE__ */ jsx19("th", { className: detailHeaderCellProps.className, style: detailHeaderCellProps.style }),
+                showSelectionColumn && /* @__PURE__ */ jsx19(
+                  "th",
+                  {
+                    className: selectionHeaderCellProps.className,
+                    style: selectionHeaderCellProps.style
+                  }
+                ),
                 visibleColumns.map((column) => {
-                  const pinnedProps = pinnedCellProps(column, "header");
-                  return /* @__PURE__ */ jsx19(
-                    "th",
-                    {
-                      style: pinnedProps.style,
-                      className: cn("border-b p-2 align-top font-normal", alignClassName(column), pinnedProps.className),
-                      children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null
-                    },
-                    column.id
-                  );
+                  const cellProps = filterHeaderCellPropsByColumn.get(column.id);
+                  return /* @__PURE__ */ jsx19("th", { style: cellProps?.style, className: cellProps?.className, children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null }, column.id);
                 }),
-                showRowActionsColumn && /* @__PURE__ */ jsx19("th", { className: "border-b p-2" })
+                showRowActionsColumn && /* @__PURE__ */ jsx19(
+                  "th",
+                  {
+                    className: rowActionsHeaderCellProps.className,
+                    style: rowActionsHeaderCellProps.style
+                  }
+                )
               ] })
             ] }),
             rows.length === 0 ? /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
@@ -2162,7 +2287,7 @@ function DataGrid({
 // src/tree/TreeDataGrid.tsx
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { AlertCircle, ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, Loader2 as Loader22 } from "lucide-react";
-import { useEffect as useEffect8, useMemo as useMemo7, useRef as useRef6 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo8, useRef as useRef6 } from "react";
 
 // src/tree/flattenTree.ts
 function flattenTree(roots, accessors, expanded, childrenOverride) {
@@ -2182,7 +2307,7 @@ function flattenTree(roots, accessors, expanded, childrenOverride) {
 }
 
 // src/tree/useTreeState.ts
-import { useCallback as useCallback3, useMemo as useMemo6, useState as useState7 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo7, useState as useState7 } from "react";
 function useTreeState({
   data,
   getRowId,
@@ -2207,7 +2332,7 @@ function useTreeState({
   const [childrenMap, setChildrenMap] = useState7(/* @__PURE__ */ new Map());
   const [loadingIds, setLoadingIds] = useState7(/* @__PURE__ */ new Set());
   const [errorIds, setErrorIds] = useState7(/* @__PURE__ */ new Map());
-  const resolveHasChildren = useMemo6(
+  const resolveHasChildren = useMemo7(
     () => hasChildren ?? ((row) => (getChildren(row)?.length ?? 0) > 0),
     [hasChildren, getChildren]
   );
@@ -2343,7 +2468,7 @@ function TreeDataGrid({
   estimatedRowHeight = 40,
   maxBodyHeight = 480
 }) {
-  const accessors = useMemo7(
+  const accessors = useMemo8(
     () => ({ getRowId, getChildren, hasChildren }),
     [getRowId, getChildren, hasChildren]
   );
@@ -2362,13 +2487,18 @@ function TreeDataGrid({
     didAutoExpand.current = true;
     if (initialExpandedLevel > 0) void expandToLevel(initialExpandedLevel);
   }, []);
-  const flatRows = useMemo7(
+  const flatRows = useMemo8(
     () => flattenTree(data, accessors, expanded, childrenMap),
     [data, accessors, expanded, childrenMap]
   );
   const treeColId = treeColumnId ?? columns[0]?.id;
   const showRowActionsColumn = Boolean(rowActions?.length);
   const totalColumnCount = columns.length + (showRowActionsColumn ? 1 : 0);
+  const bodyTdClassByColumn = useMemo8(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const column of columns) map.set(column.id, `p-2 ${alignClassName(column)}`);
+    return map;
+  }, [columns]);
   const scrollRef = useRef6(null);
   const shouldVirtualize = flatRows.length > virtualizeThreshold;
   const virtualizer = useVirtualizer2({
@@ -2387,9 +2517,9 @@ function TreeDataGrid({
         ref: measureRef,
         ...rowProps,
         "data-testid": rowTestId,
-        className: cn("border-b", rowProps?.className, index % 2 === 1 && "bg-foreground/5"),
+        className: rowProps?.className ? cn("border-b", rowProps.className, index % 2 === 1 && "bg-foreground/5") : `border-b${index % 2 === 1 ? " bg-foreground/5" : ""}`,
         children: [
-          columns.map((column) => /* @__PURE__ */ jsx20("td", { className: cn("p-2", alignClassName(column)), children: column.id === treeColId ? /* @__PURE__ */ jsx20(
+          columns.map((column) => /* @__PURE__ */ jsx20("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx20(
             TreeCell,
             {
               flatRow,
@@ -2429,7 +2559,7 @@ function TreeDataGrid({
             "th",
             {
               style: column.width ? { width: column.width } : void 0,
-              className: cn("border-b p-2 font-medium", alignClassName(column)),
+              className: `border-b p-2 font-medium ${alignClassName(column)}`,
               children: column.header
             },
             column.id