@bmsuisse/datagrid 0.23.2 → 0.23.4

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);
@@ -1830,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]
   );
@@ -1858,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;
@@ -1884,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);
@@ -1894,22 +1905,28 @@ function DataGrid({
   const columnSize = (columnId) => table.getColumn(columnId)?.getSize() ?? DEFAULT_COLUMN_SIZE;
   const leadingStructuralWidth = (showDetailColumn ? DETAIL_COLUMN_WIDTH : 0) + (showSelectionColumn ? SELECTION_COLUMN_WIDTH : 0);
   const trailingStructuralWidth = showRowActionsColumn ? ROW_ACTIONS_COLUMN_WIDTH : 0;
-  const leftPinnedOffsets = pinnedOffsets(visibleColumns, "left", columnSize, leadingStructuralWidth);
-  const rightPinnedOffsets = pinnedOffsets(visibleColumns, "right", columnSize, trailingStructuralWidth);
+  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: cn("sticky z-10", bg), style: { [side]: offset, width } };
+    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(
@@ -1926,6 +1943,39 @@ function DataGrid({
     "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);
@@ -1959,9 +2009,9 @@ 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: cn("border-b p-1", detailCellProps.className), style: detailCellProps.style, children: /* @__PURE__ */ jsx19(
+            showDetailColumn && /* @__PURE__ */ jsx19("td", { className: detailCellProps.className, style: detailCellProps.style, children: /* @__PURE__ */ jsx19(
               Button,
               {
                 type: "button",
@@ -1973,10 +2023,16 @@ function DataGrid({
                   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: cn("border-b p-1", selectionCellProps.className), style: selectionCellProps.style, children: /* @__PURE__ */ jsx19(
+            showSelectionColumn && /* @__PURE__ */ jsx19("td", { className: selectionCellProps.className, style: selectionCellProps.style, children: /* @__PURE__ */ jsx19(
               "input",
               {
                 type: "checkbox",
@@ -1987,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: cn("border-b p-1", rowActionsCellProps.className), style: rowActionsCellProps.style, 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}` }) })
           ]
         }
       ),
@@ -2032,50 +2087,41 @@ 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: [
@@ -2083,7 +2129,7 @@ function DataGrid({
                       "th",
                       {
                         rowSpan: 2,
-                        className: cn("border-b p-1", detailHeaderCellProps.className),
+                        className: detailHeaderCellProps.className,
                         style: detailHeaderCellProps.style,
                         "aria-hidden": true
                       }
@@ -2092,7 +2138,7 @@ function DataGrid({
                       "th",
                       {
                         rowSpan: 2,
-                        className: cn("border-b p-1", selectionHeaderCellProps.className),
+                        className: selectionHeaderCellProps.className,
                         style: selectionHeaderCellProps.style,
                         children: /* @__PURE__ */ jsx19(
                           "input",
@@ -2120,7 +2166,7 @@ function DataGrid({
                       "th",
                       {
                         rowSpan: 2,
-                        className: cn("border-b p-1", rowActionsHeaderCellProps.className),
+                        className: rowActionsHeaderCellProps.className,
                         style: rowActionsHeaderCellProps.style,
                         "aria-label": "Row actions"
                       }
@@ -2130,7 +2176,7 @@ function DataGrid({
                     !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx19(
                       "th",
                       {
-                        className: cn("border-b p-1", detailHeaderCellProps.className),
+                        className: detailHeaderCellProps.className,
                         style: detailHeaderCellProps.style,
                         "aria-hidden": true
                       }
@@ -2138,7 +2184,7 @@ function DataGrid({
                     !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx19(
                       "th",
                       {
-                        className: cn("border-b p-1", selectionHeaderCellProps.className),
+                        className: selectionHeaderCellProps.className,
                         style: selectionHeaderCellProps.style,
                         children: /* @__PURE__ */ jsx19(
                           "input",
@@ -2159,7 +2205,7 @@ function DataGrid({
                     !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx19(
                       "th",
                       {
-                        className: cn("border-b p-1", rowActionsHeaderCellProps.className),
+                        className: rowActionsHeaderCellProps.className,
                         style: rowActionsHeaderCellProps.style,
                         "aria-label": "Row actions"
                       }
@@ -2168,30 +2214,22 @@ function DataGrid({
                 ] }, headerGroup.id);
               }),
               hasFilterRow && /* @__PURE__ */ jsxs12("tr", { "data-testid": "filter-row", children: [
-                showDetailColumn && /* @__PURE__ */ jsx19("th", { className: cn("border-b p-1", detailHeaderCellProps.className), style: detailHeaderCellProps.style }),
+                showDetailColumn && /* @__PURE__ */ jsx19("th", { className: detailHeaderCellProps.className, style: detailHeaderCellProps.style }),
                 showSelectionColumn && /* @__PURE__ */ jsx19(
                   "th",
                   {
-                    className: cn("border-b p-1", selectionHeaderCellProps.className),
+                    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: cn("border-b p-1", rowActionsHeaderCellProps.className),
+                    className: rowActionsHeaderCellProps.className,
                     style: rowActionsHeaderCellProps.style
                   }
                 )
@@ -2249,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) {
@@ -2269,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,
@@ -2294,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]
   );
@@ -2430,7 +2468,7 @@ function TreeDataGrid({
   estimatedRowHeight = 40,
   maxBodyHeight = 480
 }) {
-  const accessors = useMemo7(
+  const accessors = useMemo8(
     () => ({ getRowId, getChildren, hasChildren }),
     [getRowId, getChildren, hasChildren]
   );
@@ -2449,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({
@@ -2474,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,
@@ -2516,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