@versini/ui-datagrid 0.3.1 → 0.3.3

package/dist/DataGrid/DataGrid.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.1
+  @versini/ui-datagrid v0.3.3
   © 2026 gizmette.com
 */
 
@@ -29,16 +29,27 @@ 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);
+    /**
+	 * Track measured column widths from the body. Used by sticky header/footer
+	 * to sync column widths since absolutely positioned elements can't use
+	 * CSS subgrid.
+	 */ const [measuredColumnWidths, setMeasuredColumnWidths] = useState([]);
+    /**
+	 * 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 +57,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,9 +76,7 @@ import { getDataGridClasses } from "./utilities.js";
             stickyHeader: effectiveStickyHeader,
             stickyFooter: effectiveStickyFooter,
             disabled,
-            hasCaption,
-            hasColumns: Boolean(columns),
-            compact
+            hasColumns: Boolean(columns)
         }), [
         mode,
         className,
@@ -80,9 +84,7 @@ import { getDataGridClasses } from "./utilities.js";
         effectiveStickyHeader,
         effectiveStickyFooter,
         disabled,
-        hasCaption,
-        columns,
-        compact
+        columns
     ]);
     const contextValue = useMemo(()=>({
             mode,
@@ -91,11 +93,15 @@ import { getDataGridClasses } from "./utilities.js";
             stickyFooter: effectiveStickyFooter,
             blurEffect,
             columns,
+            measuredColumnWidths,
             setCaptionId: handleSetCaptionId,
             registerHeader,
             unregisterHeader,
             registerFooter,
-            unregisterFooter
+            unregisterFooter,
+            setHeaderHeight,
+            setFooterHeight,
+            setMeasuredColumnWidths
         }), [
         mode,
         compact,
@@ -103,6 +109,7 @@ import { getDataGridClasses } from "./utilities.js";
         effectiveStickyFooter,
         blurEffect,
         columns,
+        measuredColumnWidths,
         handleSetCaptionId,
         registerHeader,
         unregisterHeader,
@@ -112,14 +119,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;
@@ -160,7 +175,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.1
+  @versini/ui-datagrid v0.3.3
   © 2026 gizmette.com
 */
 

package/dist/DataGrid/index.js

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

package/dist/DataGrid/utilities.d.ts

@@ -3,34 +3,37 @@ 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, compact, }: {
+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;
     wrapperClassName?: string;
-    compact?: boolean;
 }) => {
     overlay: string;
     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.1
+  @versini/ui-datagrid v0.3.3
   © 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, compact })=>{
+ *
+ */ 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,26 +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", {
-            // Padding adjusted for header + caption when compact is false
-            "pt-20": stickyHeader && hasCaption && !compact,
-            // Padding adjusted for header row only when compact is false
-            "pt-11": stickyHeader && !hasCaption && !compact,
-            // Padding adjusted for footer row when compact is false
-            "pb-11": stickyFooter && !compact,
-            // Padding adjusted for header row only when compact is true
-            "pt-7": stickyHeader && !hasCaption && compact,
-            // Padding adjusted for header + caption when compact is true
-            "pt-16": stickyHeader && hasCaption && compact,
-            // Padding adjusted for footer row when compact is true
-            "pb-7": stickyFooter && compact
-        }),
+		 * 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.1
+  @versini/ui-datagrid v0.3.3
   © 2026 gizmette.com
 */
 

package/dist/DataGridAnimated/index.js

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

package/dist/DataGridAnimated/useAnimatedHeight.js

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

package/dist/DataGridBody/DataGridBody.js

@@ -1,10 +1,11 @@
 /*!
-  @versini/ui-datagrid v0.3.1
+  @versini/ui-datagrid v0.3.3
   © 2026 gizmette.com
 */
 
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
+import { useContext, useLayoutEffect, useRef } from "react";
 import { DataGridContext } from "../DataGrid/DataGridContext.js";
 import { CellWrapper } from "../DataGridConstants/index.js";
 
@@ -12,6 +13,8 @@ import { CellWrapper } from "../DataGridConstants/index.js";
 
 ;// CONCATENATED MODULE: external "clsx"
 
+;// CONCATENATED MODULE: external "react"
+
 ;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
 
 ;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
@@ -21,28 +24,73 @@ import { CellWrapper } from "../DataGridConstants/index.js";
 
 
 
+
 /* =============================================================================
  * DataGridBody
  * ========================================================================== */ const DataGridBody = ({ className, children, ...rest })=>{
-    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.
-				 */ const bodyClass = ctx.columns ? clsx("contents", className) : clsx("flex flex-col", className);
-            return /*#__PURE__*/ jsx(DataGridContext.Provider, {
-                value: {
-                    ...ctx,
-                    cellWrapper: CellWrapper.BODY
-                },
-                children: /*#__PURE__*/ jsx("div", {
-                    role: "rowgroup",
-                    className: bodyClass,
-                    ...rest,
-                    children: children
-                })
-            });
+    const ctx = useContext(DataGridContext);
+    const bodyRef = useRef(null);
+    /**
+	 * Measure column widths from the first body row's cells. This is needed
+	 * because sticky header/footer are absolutely positioned and can't use
+	 * CSS subgrid. We measure the body cells (which ARE in the grid flow)
+	 * and report the widths so header/footer can use the same pixel values.
+	 */ useLayoutEffect(()=>{
+        const element = bodyRef.current;
+        const needsMeasurement = ctx.columns && (ctx.stickyHeader || ctx.stickyFooter);
+        if (!element || !needsMeasurement || !ctx.setMeasuredColumnWidths) {
+            return;
+        }
+        // Find the first row and its cells once, reuse for both measurement and observation
+        const firstRow = element.querySelector('[role="row"]');
+        if (!firstRow) {
+            return;
+        }
+        const cells = firstRow.querySelectorAll('[role="cell"], [role="columnheader"], [role="gridcell"]');
+        if (cells.length === 0) {
+            return;
+        }
+        const measureColumns = ()=>{
+            // Measure each cell's width
+            const widths = Array.from(cells).map((cell)=>cell.getBoundingClientRect().width);
+            ctx.setMeasuredColumnWidths?.(widths);
+        };
+        // Initial measurement
+        measureColumns();
+        // Set up ResizeObserver to re-measure when cells resize
+        const observer = new ResizeObserver(()=>{
+            measureColumns();
+        });
+        // Observe the body element for any size changes
+        observer.observe(element);
+        // Also observe the first row's cells directly for more accurate updates
+        for (const cell of cells){
+            observer.observe(cell);
         }
+        return ()=>observer.disconnect();
+    }, [
+        ctx.columns,
+        ctx.stickyHeader,
+        ctx.stickyFooter,
+        ctx.setMeasuredColumnWidths,
+        children
+    ]);
+    /**
+	 * 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: {
+            ...ctx,
+            cellWrapper: CellWrapper.BODY
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            ref: bodyRef,
+            role: "rowgroup",
+            className: bodyClass,
+            ...rest,
+            children: children
+        })
     });
 };
 

package/dist/DataGridBody/index.js

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

package/dist/DataGridCell/DataGridCell.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.1
+  @versini/ui-datagrid v0.3.3
   © 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.1
+  @versini/ui-datagrid v0.3.3
   © 2026 gizmette.com
 */
 

package/dist/DataGridCellSort/DataGridCellSort.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.1
+  @versini/ui-datagrid v0.3.3
   © 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.1
+  @versini/ui-datagrid v0.3.3
   © 2026 gizmette.com
 */
 

package/dist/DataGridConstants/DataGridConstants.js

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

package/dist/DataGridConstants/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.1
+  @versini/ui-datagrid v0.3.3
   © 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.1
+  @versini/ui-datagrid v0.3.3
   © 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.1
+  @versini/ui-datagrid v0.3.3
   © 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.1
+  @versini/ui-datagrid v0.3.3
   © 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.1
+  @versini/ui-datagrid v0.3.3
   © 2026 gizmette.com
 */
 

package/dist/DataGridInfinite/InfiniteScrollMarker.js

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

package/dist/DataGridInfinite/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.1
+  @versini/ui-datagrid v0.3.3
   © 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.1
+  @versini/ui-datagrid v0.3.3
   © 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.1
+  @versini/ui-datagrid v0.3.3
   © 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,56 @@ 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 })=>{
+        children: ({ mode, cellWrapper, stickyHeader, stickyFooter, columns, measuredColumnWidths })=>{
             /**
-				 * 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.
+				 * For sticky headers/footers, use measured pixel widths from the body if
+				 * available. This syncs the header/footer columns with the body columns
+				 * since absolutely positioned elements can't use subgrid.
+				 *
+				 * 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
-                    rowStyle = {
-                        gridTemplateColumns: columns.join(" ")
-                    };
+                    // Sticky elements can't use subgrid.
+                    // Use measured widths from body if available for perfect alignment.
+                    // Also check that widths are valid (non-zero) - in test environments
+                    // or before layout, measurements may be zero.
+                    const hasValidMeasurements = measuredColumnWidths && measuredColumnWidths.length === columns.length && measuredColumnWidths.some((w)=>w > 0);
+                    if (hasValidMeasurements) {
+                        rowStyle = {
+                            gridTemplateColumns: measuredColumnWidths.map((w)=>`${w}px`).join(" ")
+                        };
+                    } else {
+                        // Fallback to explicit template while measurements are pending.
+                        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.1
+  @versini/ui-datagrid v0.3.3
   © 2026 gizmette.com
 */
 

package/dist/DataGridSorting/index.js

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

package/dist/DataGridSorting/sortingUtils.js

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

package/dist/common/utilities.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-datagrid",
-	"version": "0.3.1",
+	"version": "0.3.3",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -94,5 +94,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "30fcda9a659ee83caeaf29475095ff6f192b65c2"
+	"gitHead": "92252168e1ae927c8c874cd6549dc54922805ae7"
 }