@versini/ui-datagrid 0.3.0 → 0.3.2

package/dist/DataGrid/DataGrid.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 
@@ -29,16 +29,22 @@ import { getDataGridClasses } from "./utilities.js";
  * DataGrid (main component)
  * ========================================================================== */ const DataGrid = ({ className, wrapperClassName, children, mode = "system", compact = false, stickyHeader = false, stickyFooter = false, blurEffect = BlurEffects.NONE, maxHeight, disabled = false, columns, ...rest })=>{
     /**
-	 * Track registered header/footer components via context registration.
-	 * Uses counter-based tracking to properly handle multiple instances.
-	 * Components register themselves when they mount, regardless of nesting depth.
-	 * This replaces the previous displayName-based child inspection approach.
+	 * Track registered header/footer components via context registration. Uses
+	 * counter-based tracking to properly handle multiple instances. Components
+	 * register themselves when they mount, regardless of nesting depth. This
+	 * replaces the previous displayName-based child inspection approach.
 	 */ const [headerCount, setHeaderCount] = useState(0);
     const [footerCount, setFooterCount] = useState(0);
     /**
-	 * Registration callbacks with stable references.
-	 * Called by DataGridHeader/DataGridFooter on mount/unmount.
-	 * Uses increment/decrement to handle multiple instances correctly.
+	 * Track measured heights of header/footer for dynamic padding. Reported by
+	 * DataGridHeader/Footer via ResizeObserver. This replaces the brittle
+	 * hard-coded Tailwind padding classes.
+	 */ const [headerHeight, setHeaderHeight] = useState(0);
+    const [footerHeight, setFooterHeight] = useState(0);
+    /**
+	 * Registration callbacks with stable references. Called by
+	 * DataGridHeader/DataGridFooter on mount/unmount. Uses increment/decrement to
+	 * handle multiple instances correctly.
 	 */ const registerHeader = useCallback(()=>setHeaderCount((c)=>c + 1), []);
     const unregisterHeader = useCallback(()=>setHeaderCount((c)=>c - 1), []);
     const registerFooter = useCallback(()=>setFooterCount((c)=>c + 1), []);
@@ -46,23 +52,18 @@ import { getDataGridClasses } from "./utilities.js";
     const hasRegisteredHeader = headerCount > 0;
     const hasRegisteredFooter = footerCount > 0;
     /**
-	 * Only apply sticky behavior if both the prop is true AND the
-	 * corresponding component exists. This prevents adding padding/styles
-	 * for non-existent headers/footers.
+	 * Only apply sticky behavior if both the prop is true AND the corresponding
+	 * component exists. This prevents adding padding/styles for non-existent
+	 * headers/footers.
 	 */ const effectiveStickyHeader = stickyHeader && hasRegisteredHeader;
     const effectiveStickyFooter = stickyFooter && hasRegisteredFooter;
     /**
-	 * State to hold the caption ID registered by DataGridHeader.
-	 * Used for aria-labelledby on the grid element for accessibility.
-	 * Also used to determine if a caption exists (for padding calculations).
+	 * State to hold the caption ID registered by DataGridHeader. Used for
+	 * aria-labelledby on the grid element for accessibility.
 	 */ const [captionId, setCaptionId] = useState(undefined);
     const handleSetCaptionId = useCallback((id)=>{
         setCaptionId(id);
     }, []);
-    /**
-	 * Determine if caption exists based on registered captionId.
-	 * This replaces the previous child inspection approach.
-	 */ const hasCaption = Boolean(captionId);
     const classes = useMemo(()=>getDataGridClasses({
             mode,
             className,
@@ -70,7 +71,6 @@ import { getDataGridClasses } from "./utilities.js";
             stickyHeader: effectiveStickyHeader,
             stickyFooter: effectiveStickyFooter,
             disabled,
-            hasCaption,
             hasColumns: Boolean(columns)
         }), [
         mode,
@@ -79,7 +79,6 @@ import { getDataGridClasses } from "./utilities.js";
         effectiveStickyHeader,
         effectiveStickyFooter,
         disabled,
-        hasCaption,
         columns
     ]);
     const contextValue = useMemo(()=>({
@@ -93,7 +92,9 @@ import { getDataGridClasses } from "./utilities.js";
             registerHeader,
             unregisterHeader,
             registerFooter,
-            unregisterFooter
+            unregisterFooter,
+            setHeaderHeight,
+            setFooterHeight
         }), [
         mode,
         compact,
@@ -110,14 +111,22 @@ import { getDataGridClasses } from "./utilities.js";
     const wrapperStyle = maxHeight ? {
         maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
     } : undefined;
+    /**
+	 * Dynamic padding for scrollable content based on measured header/footer
+	 * heights. This replaces the brittle hard-coded Tailwind padding classes.
+	 */ const scrollableContentStyle = {
+        ...wrapperStyle,
+        paddingTop: effectiveStickyHeader ? headerHeight : undefined,
+        paddingBottom: effectiveStickyFooter ? footerHeight : undefined
+    };
     /**
 	 * When sticky header/footer is enabled, use Panel-like structure: - Outer
 	 * wrapper has overflow-hidden - Scrollable content area in the middle with
 	 * padding - Header/footer are absolutely positioned.
 	 */ const hasSticky = effectiveStickyHeader || effectiveStickyFooter;
     /**
-	 * When columns are provided, apply grid-template-columns at the grid level
-	 * so all rows can use subgrid to inherit the same column sizing.
+	 * When columns are provided, apply grid-template-columns at the grid level so
+	 * all rows can use subgrid to inherit the same column sizing.
 	 */ const gridStyle = columns ? {
         gridTemplateColumns: columns.join(" ")
     } : undefined;
@@ -158,7 +167,7 @@ import { getDataGridClasses } from "./utilities.js";
                     style: wrapperStyle,
                     children: hasSticky ? /*#__PURE__*/ jsx("div", {
                         className: classes.scrollableContent,
-                        style: wrapperStyle,
+                        style: scrollableContentStyle,
                         children: gridContent
                     }) : gridContent
                 })

package/dist/DataGrid/DataGridContext.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGrid/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGrid/utilities.d.ts

@@ -3,18 +3,18 @@ import { type ThemeMode } from "../DataGridConstants/DataGridConstants";
  * Generates classes for the main DataGrid wrapper and grid. When sticky
  * header/footer is enabled:
  * - Outer wrapper has overflow-hidden
- * - Scrollable area is a separate inner container with padding for header/footer
+ * - Scrollable area is a separate inner container with dynamic padding
  * - Header/footer use position:absolute to overlay scrollbar
- * - Padding is auto-calculated based on whether caption is present
+ * - Padding is dynamically set via inline styles based on measured heights
  *
  * When columns prop is provided, the grid uses CSS Grid layout with subgrid
  * support for proper column alignment across all rows.
+ *
  */
-export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, hasCaption, hasColumns, }: {
+export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, hasColumns, }: {
     mode: ThemeMode;
     className?: string;
     disabled?: boolean;
-    hasCaption?: boolean;
     hasColumns?: boolean;
     stickyFooter?: boolean;
     stickyHeader?: boolean;
@@ -24,12 +24,16 @@ export declare const getDataGridClasses: ({ mode, className, wrapperClassName, s
     inner: string;
     spinnerWrapper: string;
     spinner: string;
+    /**
+     * Outer wrapper - overflow-hidden when sticky, like Panel's outerWrapper.
+     * Uses flex layout when sticky to allow scrollableContent to respect
+     * max-height.
+     */
     wrapper: string;
     /**
-     * Scrollable content area with padding for absolute-positioned header/footer.
-     * Header height varies based on whether caption is present:
-     * - pt-10 (40px): header row only
-     * - pt-19 (76px): header row + caption
+     * Scrollable content area for absolute-positioned header/footer. Padding is
+     * applied via inline styles based on measured header/footer heights,
+     * eliminating the need for hard-coded values that break when styles change.
      */
     scrollableContent: string;
     /**

package/dist/DataGrid/utilities.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 
@@ -35,13 +35,14 @@ import clsx from "clsx";
  * Generates classes for the main DataGrid wrapper and grid. When sticky
  * header/footer is enabled:
  * - Outer wrapper has overflow-hidden
- * - Scrollable area is a separate inner container with padding for header/footer
+ * - Scrollable area is a separate inner container with dynamic padding
  * - Header/footer use position:absolute to overlay scrollbar
- * - Padding is auto-calculated based on whether caption is present
+ * - Padding is dynamically set via inline styles based on measured heights
  *
  * When columns prop is provided, the grid uses CSS Grid layout with subgrid
  * support for proper column alignment across all rows.
- */ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, hasCaption, hasColumns })=>{
+ *
+ */ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, hasColumns })=>{
     const overlayClasses = disabled ? getOverlayClasses({
         mode
     }) : null;
@@ -51,9 +52,11 @@ import clsx from "clsx";
         inner: overlayClasses?.inner ?? "",
         spinnerWrapper: overlayClasses?.spinnerWrapper ?? "",
         spinner: overlayClasses?.spinner ?? "",
-        // Outer wrapper - overflow-hidden when sticky, like Panel's outerWrapper.
-        // Uses flex layout when sticky to allow scrollableContent to respect max-height.
-        wrapper: clsx("not-prose relative w-full rounded-lg shadow-md", {
+        /**
+		 * Outer wrapper - overflow-hidden when sticky, like Panel's outerWrapper.
+		 * Uses flex layout when sticky to allow scrollableContent to respect
+		 * max-height.
+		 */ wrapper: clsx("not-prose relative w-full rounded-lg shadow-md", {
             "overflow-x-auto": !hasSticky && !disabled,
             "overflow-hidden flex flex-col": hasSticky || disabled,
             "bg-surface-darker": mode === "dark" || mode === "system",
@@ -66,17 +69,14 @@ import clsx from "clsx";
             "text-copy-dark dark:text-copy-light": mode === "alt-system"
         }, wrapperClassName),
         /**
-		 * Scrollable content area with padding for absolute-positioned header/footer.
-		 * Header height varies based on whether caption is present:
-		 * - pt-10 (40px): header row only
-		 * - pt-19 (76px): header row + caption
-		 */ scrollableContent: clsx(// flex-1 + min-h-0 allows this to shrink within flex parent and enable scrolling.
-        // min-h-0 overrides the default min-height:auto that prevents flex items from shrinking.
-        "overflow-y-auto overflow-x-hidden rounded-[inherit] flex-1 min-h-0", {
-            "pt-10": stickyHeader && !hasCaption,
-            "pt-19": stickyHeader && hasCaption,
-            "pb-10": stickyFooter
-        }),
+		 * Scrollable content area for absolute-positioned header/footer. Padding is
+		 * applied via inline styles based on measured header/footer heights,
+		 * eliminating the need for hard-coded values that break when styles change.
+		 */ scrollableContent: clsx(/**
+			 * flex-1 + min-h-0 allows this to shrink within flex parent and enable
+			 * scrolling. min-h-0 overrides the default min-height:auto that prevents
+			 * flex items from shrinking.
+			 */ "overflow-y-auto overflow-x-hidden rounded-[inherit] flex-1 min-h-0"),
         /**
 		 * When columns are provided, use CSS Grid so rows can use subgrid for
 		 * consistent column alignment. Otherwise, use flexbox.

package/dist/DataGridAnimated/AnimatedWrapper.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridAnimated/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridAnimated/useAnimatedHeight.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridBody/DataGridBody.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 
@@ -27,8 +27,8 @@ import { CellWrapper } from "../DataGridConstants/index.js";
     return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
         children: (ctx)=>{
             /**
-				 * When columns are provided, use display:contents so the body
-				 * doesn't interfere with the grid flow. Rows will use subgrid.
+				 * When columns are provided, use display:contents so the body doesn't
+				 * interfere with the grid flow. Rows will use subgrid.
 				 */ const bodyClass = ctx.columns ? clsx("contents", className) : clsx("flex flex-col", className);
             return /*#__PURE__*/ jsx(DataGridContext.Provider, {
                 value: {

package/dist/DataGridBody/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridCell/DataGridCell.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 
@@ -42,9 +42,10 @@ const getCellClasses = ({ cellWrapper, className, compact, align, active, mode,
         "before:bg-table-active-light": active && mode === "light",
         "before:bg-table-active-dark dark:before:bg-table-active-light": active && mode === "system",
         "before:bg-table-active-light dark:before:bg-table-active-dark": active && mode === "alt-system"
-    }, // Vertical borders.
-    // self-stretch ensures border spans full row height in grid layout.
-    {
+    }, /**
+		 * Vertical borders. self-stretch ensures border spans full row height in grid
+		 * layout.
+		 */ {
         "self-stretch": borderLeft || borderRight,
         "border-l border-l-table-dark": borderLeft && mode === "dark",
         "border-l border-l-table-light": borderLeft && mode === "light",
@@ -58,7 +59,8 @@ const getCellClasses = ({ cellWrapper, className, compact, align, active, mode,
     return mainClasses;
 };
 /**
- * Returns the appropriate ARIA role for the cell based on the cell wrapper type.
+ * Returns the appropriate ARIA role for the cell based on the cell wrapper
+ * type.
  */ const getCellRole = (cellWrapper)=>{
     if (cellWrapper === CellWrapper.HEADER) {
         return "columnheader";
@@ -81,7 +83,7 @@ const getCellClasses = ({ cellWrapper, className, compact, align, active, mode,
                 borderRight
             });
             const role = getCellRole(cellWrapper);
-            // Apply grid-column span for colSpan > 1
+            // Apply grid-column span for colSpan > 1.
             const cellStyle = colSpan && colSpan > 1 ? {
                 ...style,
                 gridColumn: `span ${colSpan}`

package/dist/DataGridCell/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridCellSort/DataGridCellSort.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 
@@ -76,7 +76,7 @@ import { getCellClasses } from "../DataGridCell/DataGridCell.js";
                 compact,
                 align
             });
-            // Flex container for alignment of button within the cell
+            // Flex container for alignment of button within the cell.
             const contentClasses = clsx("flex", {
                 "justify-start": align === "left" || !align,
                 "justify-center": align === "center",

package/dist/DataGridCellSort/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridConstants/DataGridConstants.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridConstants/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridFooter/DataGridFooter.d.ts

@@ -3,8 +3,9 @@ import { type BlurEffect, type ThemeMode } from "../DataGridConstants/DataGridCo
 /**
  * Generates classes for the DataGridFooter.
  *
- * When columns are provided (subgrid mode), uses display:contents so the
- * footer doesn't break the parent grid flow.
+ * When columns are provided (subgrid mode), uses display:contents so the footer
+ * doesn't break the parent grid flow.
+ *
  */
 export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEffect, hasColumns, }: {
     mode: ThemeMode;

package/dist/DataGridFooter/DataGridFooter.js

@@ -1,11 +1,11 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useEffect } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 import { getHeaderFooterBackgroundClasses, getStickyBlurClasses } from "../common/utilities.js";
 import { DataGridContext } from "../DataGrid/DataGridContext.js";
 import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants.js";
@@ -32,8 +32,9 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
 /**
  * Generates classes for the DataGridFooter.
  *
- * When columns are provided (subgrid mode), uses display:contents so the
- * footer doesn't break the parent grid flow.
+ * When columns are provided (subgrid mode), uses display:contents so the footer
+ * doesn't break the parent grid flow.
+ *
  */ const getFooterClasses = ({ className, stickyFooter, mode, blurEffect, hasColumns })=>{
     /**
 	 * When columns are provided and not sticky, use display:contents so the
@@ -74,13 +75,15 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
 };
 DataGridFooter.displayName = "DataGridFooter";
 /**
- * Inner component to handle the useEffect for registering footer.
- * Separated to avoid hooks inside Consumer render prop.
+ * Inner component to handle the useEffect for registering footer. Separated to
+ * avoid hooks inside Consumer render prop.
  */ const DataGridFooterInner = ({ className, ctx, children, ...rest })=>{
     const hasColumns = Boolean(ctx.columns);
-    // Register this footer with the parent DataGrid on mount.
-    // This enables sticky footer behavior regardless of nesting depth.
-    useEffect(()=>{
+    const footerRef = useRef(null);
+    /**
+	 * Register this footer with the parent DataGrid on mount. This enables sticky
+	 * footer behavior regardless of nesting depth.
+	 */ useEffect(()=>{
         ctx.registerFooter?.();
         return ()=>{
             ctx.unregisterFooter?.();
@@ -89,12 +92,33 @@ DataGridFooter.displayName = "DataGridFooter";
         ctx.registerFooter,
         ctx.unregisterFooter
     ]);
+    /**
+	 * Measure and report footer height for dynamic padding calculation. Uses
+	 * ResizeObserver to handle dynamic content changes.
+	 */ useLayoutEffect(()=>{
+        const element = footerRef.current;
+        if (!element || !ctx.stickyFooter || !ctx.setFooterHeight) {
+            return;
+        }
+        const observer = new ResizeObserver((entries)=>{
+            const height = entries[0]?.borderBoxSize?.[0]?.blockSize;
+            if (height !== undefined) {
+                ctx.setFooterHeight?.(height);
+            }
+        });
+        observer.observe(element);
+        return ()=>observer.disconnect();
+    }, [
+        ctx.stickyFooter,
+        ctx.setFooterHeight
+    ]);
     return /*#__PURE__*/ jsx(DataGridContext.Provider, {
         value: {
             ...ctx,
             cellWrapper: CellWrapper.FOOTER
         },
         children: /*#__PURE__*/ jsx("div", {
+            ref: footerRef,
             role: "rowgroup",
             className: getFooterClasses({
                 className,

package/dist/DataGridFooter/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridHeader/DataGridHeader.d.ts

@@ -3,12 +3,13 @@ import { type BlurEffect, type ThemeMode } from "../DataGridConstants/DataGridCo
 /**
  * Generates classes for the DataGridHeader wrapper.
  *
- * When stickyHeader is true, uses position:absolute so the header overlays
- * the scrollbar area. The parent DataGrid auto-detects caption presence and
- * applies appropriate padding to the scrollable content.
+ * When stickyHeader is true, uses position:absolute so the header overlays the
+ * scrollbar area. The parent DataGrid auto-detects caption presence and applies
+ * appropriate padding to the scrollable content.
+ *
+ * When columns are provided (subgrid mode) and not sticky, uses
+ * display:contents so the header doesn't break the parent grid flow.
  *
- * When columns are provided (subgrid mode) and not sticky, uses display:contents
- * so the header doesn't break the parent grid flow.
  */
 export declare const getHeaderClasses: ({ className, stickyHeader, mode, blurEffect, hasColumns, }: {
     mode: ThemeMode;
@@ -18,8 +19,8 @@ export declare const getHeaderClasses: ({ className, stickyHeader, mode, blurEff
     stickyHeader?: boolean;
 }) => string;
 /**
- * Generates classes for the caption element inside DataGridHeader.
- * When hasColumns is true (subgrid mode), adds col-span-full to span all columns.
+ * Generates classes for the caption element inside DataGridHeader. When
+ * hasColumns is true (subgrid mode), adds col-span-full to span all columns.
  */
 export declare const getCaptionClasses: ({ captionClassName, hasColumns, }: {
     captionClassName?: string;

package/dist/DataGridHeader/DataGridHeader.js

@@ -1,11 +1,11 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useEffect, useId } from "react";
+import { useEffect, useId, useLayoutEffect, useRef } from "react";
 import { getHeaderFooterBackgroundClasses, getHeaderFooterCopyClasses, getStickyBlurClasses } from "../common/utilities.js";
 import { DataGridContext } from "../DataGrid/DataGridContext.js";
 import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants.js";
@@ -32,12 +32,13 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
 /**
  * Generates classes for the DataGridHeader wrapper.
  *
- * When stickyHeader is true, uses position:absolute so the header overlays
- * the scrollbar area. The parent DataGrid auto-detects caption presence and
- * applies appropriate padding to the scrollable content.
+ * When stickyHeader is true, uses position:absolute so the header overlays the
+ * scrollbar area. The parent DataGrid auto-detects caption presence and applies
+ * appropriate padding to the scrollable content.
+ *
+ * When columns are provided (subgrid mode) and not sticky, uses
+ * display:contents so the header doesn't break the parent grid flow.
  *
- * When columns are provided (subgrid mode) and not sticky, uses display:contents
- * so the header doesn't break the parent grid flow.
  */ const getHeaderClasses = ({ className, stickyHeader, mode, blurEffect, hasColumns })=>{
     const hasBlur = Boolean(blurEffect && blurEffect !== BlurEffects.NONE);
     /**
@@ -53,7 +54,7 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
         }), className);
     }
     return clsx("flex flex-col", {
-        // Absolute positioning to overlay scrollbar, matching footer behavior
+        // Absolute positioning to overlay scrollbar, matching footer behavior.
         "absolute left-0 right-0 z-20 top-0 rounded-t-lg": stickyHeader
     }, getHeaderFooterBackgroundClasses({
         mode,
@@ -66,10 +67,10 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
     }), className);
 };
 /**
- * Generates classes for the caption element inside DataGridHeader.
- * When hasColumns is true (subgrid mode), adds col-span-full to span all columns.
+ * Generates classes for the caption element inside DataGridHeader. When
+ * hasColumns is true (subgrid mode), adds col-span-full to span all columns.
  */ const getCaptionClasses = ({ captionClassName, hasColumns })=>{
-    return clsx("py-2 text-sm text-center font-bold", // In subgrid mode, caption needs to span all columns
+    return clsx("py-2 text-sm text-center font-bold", // In subgrid mode, caption needs to span all columns.
     hasColumns && "col-span-full", captionClassName);
 };
 /* =============================================================================
@@ -94,9 +95,11 @@ DataGridHeader.displayName = "DataGridHeader";
  * Separated to avoid hooks inside Consumer render prop.
  */ const DataGridHeaderInner = ({ caption, captionClassName, captionId, className, ctx, children, ...rest })=>{
     const hasColumns = Boolean(ctx.columns);
-    // Register this header with the parent DataGrid on mount.
-    // This enables sticky header behavior regardless of nesting depth.
-    useEffect(()=>{
+    const headerRef = useRef(null);
+    /**
+	 * Register this header with the parent DataGrid on mount. This enables sticky
+	 * header behavior regardless of nesting depth.
+	 */ useEffect(()=>{
         ctx.registerHeader?.();
         return ()=>{
             ctx.unregisterHeader?.();
@@ -105,7 +108,7 @@ DataGridHeader.displayName = "DataGridHeader";
         ctx.registerHeader,
         ctx.unregisterHeader
     ]);
-    // Register the caption ID with the parent DataGrid for aria-labelledby
+    // Register the caption ID with the parent DataGrid for aria-labelledby.
     useEffect(()=>{
         if (caption && ctx.setCaptionId) {
             ctx.setCaptionId(captionId);
@@ -120,12 +123,33 @@ DataGridHeader.displayName = "DataGridHeader";
         captionId,
         ctx.setCaptionId
     ]);
+    /**
+	 * Measure and report header height for dynamic padding calculation. Uses
+	 * ResizeObserver to handle dynamic content changes (text wrapping, etc.).
+	 */ useLayoutEffect(()=>{
+        const element = headerRef.current;
+        if (!element || !ctx.stickyHeader || !ctx.setHeaderHeight) {
+            return;
+        }
+        const observer = new ResizeObserver((entries)=>{
+            const height = entries[0]?.borderBoxSize?.[0]?.blockSize;
+            if (height !== undefined) {
+                ctx.setHeaderHeight?.(height);
+            }
+        });
+        observer.observe(element);
+        return ()=>observer.disconnect();
+    }, [
+        ctx.stickyHeader,
+        ctx.setHeaderHeight
+    ]);
     return /*#__PURE__*/ jsx(DataGridContext.Provider, {
         value: {
             ...ctx,
             cellWrapper: CellWrapper.HEADER
         },
         children: /*#__PURE__*/ jsxs("div", {
+            ref: headerRef,
             role: "rowgroup",
             className: getHeaderClasses({
                 className,

package/dist/DataGridHeader/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridInfinite/InfiniteScrollMarker.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridInfinite/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridInfinite/useInfiniteScroll.d.ts

@@ -1,6 +1,6 @@
 /**
- * Finds the nearest scrollable ancestor of an element.
- * Returns null if no scrollable ancestor is found (uses viewport).
+ * Finds the nearest scrollable ancestor of an element. Returns null if no
+ * scrollable ancestor is found (uses viewport).
  */
 export declare function findScrollableAncestor(element: HTMLElement): Element | null;
 export type UseInfiniteScrollOptions = {
@@ -34,9 +34,9 @@ export type UseInfiniteScrollOptions = {
      */
     onLoadMore?: (newVisibleCount: number) => void;
     /**
-     * The scroll container element for IntersectionObserver root.
-     * Required when the DataGrid is inside a scrollable container (e.g., with maxHeight).
-     * Pass null to use the viewport as root.
+     * The scroll container element for IntersectionObserver root. Required when
+     * the DataGrid is inside a scrollable container (e.g., with maxHeight). Pass
+     * null to use the viewport as root.
      */
     scrollContainer?: Element | null;
 };

package/dist/DataGridInfinite/useInfiniteScroll.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 
@@ -13,8 +13,8 @@ const DEFAULT_BATCH_SIZE = 20;
 const DEFAULT_THRESHOLD = 5;
 const DEFAULT_ROOT_MARGIN = "20px";
 /**
- * Finds the nearest scrollable ancestor of an element.
- * Returns null if no scrollable ancestor is found (uses viewport).
+ * Finds the nearest scrollable ancestor of an element. Returns null if no
+ * scrollable ancestor is found (uses viewport).
  */ function findScrollableAncestor(element) {
     let parent = element.parentElement;
     while(parent){

package/dist/DataGridRow/DataGridRow.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 
@@ -26,7 +26,7 @@ import { CellWrapper } from "../DataGridConstants/index.js";
 
 
 const getRowClasses = ({ mode, className, cellWrapper })=>{
-    // Always use CSS Grid for proper column alignment, with vertical centering
+    // Always use CSS Grid for proper column alignment, with vertical centering.
     const layoutClass = "grid items-center";
     if (cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER) {
         /**
@@ -52,43 +52,44 @@ const getRowClasses = ({ mode, className, cellWrapper })=>{
 /* =============================================================================
  * DataGridRow
  * ========================================================================== */ const DataGridRow = ({ className, children, style: userStyle, ...rest })=>{
-    // Count the number of direct children to determine column count
+    // Count the number of direct children to determine column count.
     const columnCount = react.Children.count(children);
     return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
         children: ({ mode, cellWrapper, stickyHeader, stickyFooter, columns })=>{
             /**
-				 * Determine if this row is inside a sticky header/footer.
-				 * Sticky elements are absolutely positioned and outside the main grid
-				 * flow, so they can't use subgrid.
+				 * Determine if this row is inside a sticky header/footer. Sticky elements
+				 * are absolutely positioned and outside the main grid flow, so they can't
+				 * use subgrid.
 				 */ const isInStickyHeader = cellWrapper === CellWrapper.HEADER && stickyHeader;
             const isInStickyFooter = cellWrapper === CellWrapper.FOOTER && stickyFooter;
             const isInStickyContext = isInStickyHeader || isInStickyFooter;
             /**
-				 * When columns are provided AND the row is inside the grid flow
-				 * (not in a sticky header/footer), use CSS subgrid to inherit the
-				 * column sizing from the parent grid.
+				 * When columns are provided AND the row is inside the grid flow (not in a
+				 * sticky header/footer), use CSS subgrid to inherit the column sizing from
+				 * the parent grid.
 				 *
 				 * For sticky headers/footers, use the explicit column template since
 				 * they're absolutely positioned outside the main grid.
 				 *
-				 * When columns are not provided, fall back to the original behavior
-				 * where each row defines its own equal-width columns.
+				 * When columns are not provided, fall back to the original behavior where
+				 * each row defines its own equal-width columns.
+				 *
 				 */ let rowStyle;
             if (columns) {
                 if (isInStickyContext) {
-                    // Sticky elements can't use subgrid, use explicit template
+                    // Sticky elements can't use subgrid, use explicit template.
                     rowStyle = {
                         gridTemplateColumns: columns.join(" ")
                     };
                 } else {
-                    // Normal flow: use subgrid to inherit from parent grid
+                    // Normal flow: use subgrid to inherit from parent grid.
                     rowStyle = {
                         gridColumn: "1 / -1",
                         gridTemplateColumns: "subgrid"
                     };
                 }
             } else {
-                // No columns prop: use equal-width columns
+                // No columns prop: use equal-width columns.
                 rowStyle = {
                     gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`
                 };

package/dist/DataGridRow/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridSorting/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/DataGridSorting/sortingUtils.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/dist/common/utilities.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.0
+  @versini/ui-datagrid v0.3.2
   © 2026 gizmette.com
 */
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-datagrid",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -94,5 +94,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "f67b8a86233049086793d0b19d160c25fbfc0828"
+	"gitHead": "598551d562037d7496d877be9a03b1ee8e687de5"
 }