@versini/ui-datagrid 0.4.0 → 0.4.2

package/dist/DataGrid/DataGrid.js

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

package/dist/DataGrid/DataGridContext.js

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

package/dist/DataGrid/DataGridTypes.d.ts

@@ -0,0 +1,280 @@
+import type React from "react";
+type CSSLength = `${number}px` | `${number}rem` | `${number}em` | `${number}ch` | `${number}vw` | `${number}vh` | `${number}cm` | `${number}mm` | `${number}in` | `${number}pt` | `${number}pc`;
+type CSSPercentage = `${number}%`;
+type CSSFraction = `${number}fr`;
+type CSSVar = `var(${string})`;
+type CSSCalc = `calc(${string})`;
+type CSSClamp = `clamp(${string})`;
+type CSSFitContent = `fit-content(${CSSLength | CSSPercentage})`;
+type GridTrackPrimitive = CSSLength | CSSPercentage | CSSFraction | "auto" | "min-content" | "max-content" | "subgrid" | CSSFitContent | CSSVar | CSSCalc | CSSClamp;
+type CSSMinMax = `minmax(${GridTrackPrimitive}, ${GridTrackPrimitive})`;
+type CSSRepeat = `repeat(${number | "auto-fill" | "auto-fit"}, ${GridTrackPrimitive})`;
+export type DataGridColumnSize = GridTrackPrimitive | CSSMinMax | CSSRepeat;
+import type { BlurEffect, CellWrapperType, SortDirection, ThemeMode } from "../DataGridConstants/DataGridConstants";
+export type DataGridProps = {
+    /**
+     * The content of the DataGrid (DataGridHeader, DataGridBody, DataGridFooter).
+     */
+    children: React.ReactNode;
+    /**
+     * CSS class to apply to the data grid.
+     */
+    className?: string;
+    /**
+     * If true, the data grid will have reduced padding.
+     */
+    compact?: boolean;
+    /**
+     * If true, a frosty overlay will be placed above the data grid, blocking all
+     * interactions (sorting, scrolling, etc.). The content remains visible but
+     * slightly blurred with a spinner.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The max height of the data grid. Required for sticky header/footer to work.
+     * Accepts any valid CSS max-height value.
+     */
+    maxHeight?: string;
+    /**
+     * The theme mode of the data grid. Controls colors and styling.
+     * @default "system"
+     */
+    mode?: ThemeMode;
+    /**
+     * If true, the data grid header will be sticky (stays visible when scrolling).
+     * Requires maxHeight to be set or wrapperClassName to be set with a
+     * max-height.
+     */
+    stickyHeader?: boolean;
+    /**
+     * If true, the data grid footer will be sticky (stays visible when scrolling).
+     * Requires maxHeight to be set or wrapperClassName to be set with a
+     * max-height.
+     */
+    stickyFooter?: boolean;
+    /**
+     * The blur effect intensity for sticky header/footer backgrounds.
+     * @default "none"
+     */
+    blurEffect?: BlurEffect;
+    /**
+     * This attribute defines an alternative text that summarizes the content of
+     * the data grid. Not visible but read by screen readers.
+     */
+    summary?: string;
+    /**
+     * CSS class to apply to the data grid wrapper container.
+     */
+    wrapperClassName?: string;
+    /**
+     * An array of CSS Grid track sizes that define the width of each column.
+     * Template-literal union covers common grid values (fr, %, px/em/rem/etc.,
+     * minmax(), fit-content(), repeat(auto-fill/fit, ...), var(), calc()) so
+     * obviously invalid strings are caught at compile time.
+     * @example ["1fr", "1fr", "auto"] - Two equal columns and one auto-sized column
+     * @example ["200px", "1fr", "min-content"] - Fixed, flexible, and content-sized columns
+     */
+    columns?: ReadonlyArray<DataGridColumnSize>;
+};
+export type DataGridHeaderProps = {
+    /**
+     * The content of the header (DataGridRow elements).
+     */
+    children: React.ReactNode;
+    /**
+     * This attribute defines the caption (or title) of the data grid. When
+     * provided, it will be rendered above the header row as part of the same
+     * block, so they stay together whether sticky or not.
+     */
+    caption?: React.ReactNode;
+    /**
+     * CSS class to apply to the caption element.
+     */
+    captionClassName?: string;
+    /**
+     * CSS class to apply to the header.
+     */
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export type DataGridBodyProps = {
+    /**
+     * The content of the body (DataGridRow elements).
+     */
+    children: React.ReactNode;
+    /**
+     * CSS class to apply to the body.
+     */
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export type DataGridFooterProps = {
+    /**
+     * The content of the footer (DataGridRow elements).
+     */
+    children: React.ReactNode;
+    /**
+     * CSS class to apply to the footer.
+     */
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export type DataGridRowProps = {
+    /**
+     * The content of the row (DataGridCell elements).
+     */
+    children: React.ReactNode;
+    /**
+     * CSS class to apply to the row.
+     */
+    className?: string;
+    /**
+     * If true, the row will display a left border indicator to show it's active.
+     * @default false
+     */
+    active?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+export type DataGridCellProps = {
+    /**
+     * The content of the cell.
+     */
+    children?: React.ReactNode;
+    /**
+     * CSS class to apply to the cell.
+     */
+    className?: string;
+    /**
+     * Horizontal alignment of the cell content.
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * If true, adds a vertical border on the left side of the cell.
+     */
+    borderLeft?: boolean;
+    /**
+     * If true, adds a vertical border on the right side of the cell.
+     */
+    borderRight?: boolean;
+    /**
+     * Number of columns the cell should span. Defaults to 1.
+     */
+    colSpan?: number;
+} & React.HTMLAttributes<HTMLDivElement>;
+export type DataGridCellSortProps = {
+    /**
+     * Unique identifier for the cell. Used to determine which column is sorted.
+     */
+    cellId: string;
+    /**
+     * The label text for the sortable column header.
+     */
+    children: string;
+    /**
+     * Handler called when the sort button is clicked. Receives the cellId and
+     * current direction (if sorted).
+     */
+    onSort?: (cellId: string, currentDirection?: SortDirection) => void;
+    /**
+     * The current sort direction.
+     */
+    sortDirection: SortDirection | false;
+    /**
+     * The cellId of the currently sorted column.
+     */
+    sortedCell: string;
+    /**
+     * Horizontal alignment of the cell content.
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * CSS class to apply to the sort button.
+     */
+    buttonClassName?: string;
+    /**
+     * CSS class to apply to the cell.
+     */
+    className?: string;
+    /**
+     * The focus mode for the sort button.
+     * @default "alt-system"
+     */
+    focusMode?: ThemeMode;
+    /**
+     * The theme mode for the sort button.
+     * @default "alt-system"
+     */
+    mode?: ThemeMode;
+    /**
+     * Content to display on the left side of the label.
+     */
+    slotLeft?: React.ReactNode;
+    /**
+     * Content to display on the right side of the label.
+     */
+    slotRight?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+export type DataGridContextValue = {
+    mode: ThemeMode;
+    stickyHeader?: boolean;
+    stickyFooter?: boolean;
+    compact?: boolean;
+    blurEffect?: BlurEffect;
+    cellWrapper?: CellWrapperType;
+    /**
+     * CSS grid column sizes passed from DataGrid to rows.
+     */
+    columns?: ReadonlyArray<DataGridColumnSize>;
+    /**
+     * Measured column widths in pixels, reported by DataGridBody. Used by sticky
+     * header/footer to sync column widths since they can't use subgrid (being
+     * absolutely positioned).
+     */
+    measuredColumnWidths?: number[];
+    /**
+     * Callback for DataGridHeader to register its caption ID for accessibility.
+     * DataGrid uses this to set aria-labelledby on the grid element.
+     */
+    setCaptionId?: (id: string | undefined) => void;
+    /**
+     * Callback for DataGridHeader to register itself with the parent DataGrid.
+     * Used to enable sticky header behavior regardless of nesting depth.
+     */
+    registerHeader?: () => void;
+    /**
+     * Callback for DataGridHeader to unregister itself when unmounting.
+     */
+    unregisterHeader?: () => void;
+    /**
+     * Callback for DataGridFooter to register itself with the parent DataGrid.
+     * Used to enable sticky footer behavior regardless of nesting depth.
+     */
+    registerFooter?: () => void;
+    /**
+     * Callback for DataGridFooter to unregister itself when unmounting.
+     */
+    unregisterFooter?: () => void;
+    /**
+     * Callback for DataGridHeader to report its measured height. Used for dynamic
+     * padding calculation instead of hard-coded values.
+     */
+    setHeaderHeight?: (height: number) => void;
+    /**
+     * Callback for DataGridFooter to report its measured height. Used for dynamic
+     * padding calculation instead of hard-coded values.
+     */
+    setFooterHeight?: (height: number) => void;
+    /**
+     * Callback for DataGridBody to report measured column widths. Used to sync
+     * sticky header/footer columns with body columns.
+     */
+    setMeasuredColumnWidths?: (widths: number[]) => void;
+    /**
+     * Row index for explicit odd/even styling. Used by DataGridInfiniteBody where
+     * CSS :nth-child selectors don't work due to wrapper elements.
+     */
+    rowIndex?: number;
+    /**
+     * Whether this is the last row (for explicit border removal). Used by
+     * DataGridInfiniteBody where CSS :last-child doesn't work.
+     */
+    isLastRow?: boolean;
+};
+export {};

package/dist/DataGrid/DataGridTypes.js

@@ -0,0 +1,9 @@
+/*!
+  @versini/ui-datagrid v0.4.2
+  © 2026 gizmette.com
+*/
+
+
+;// CONCATENATED MODULE: ./src/DataGrid/DataGridTypes.ts
+
+

package/dist/DataGrid/index.js

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

package/dist/DataGridAnimated/AnimatedWrapper.js

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

package/dist/DataGridAnimated/index.js

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

package/dist/DataGridAnimated/useAnimatedHeight.js

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

package/dist/DataGridBody/DataGridBody.js

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

package/dist/DataGridBody/getBodyClass.d.ts

@@ -1,9 +1,10 @@
 /**
- * Get the CSS class for a DataGrid body element.
- * When columns are provided, use display:contents so the body doesn't
- * interfere with the grid flow. Rows will use subgrid.
+ * Get the CSS class for a DataGrid body element. When columns are provided, use
+ * display:contents so the body doesn't interfere with the grid flow. Rows will
+ * use subgrid.
  *
  * @param hasColumns - Whether the DataGrid has columns defined
  * @param className - Additional class name to merge
+ *
  */
 export declare function getBodyClass(hasColumns: boolean | undefined, className?: string): string;

package/dist/DataGridBody/getBodyClass.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.0
+  @versini/ui-datagrid v0.4.2
   © 2026 gizmette.com
 */
 
@@ -10,12 +10,13 @@ import clsx from "clsx";
 ;// CONCATENATED MODULE: ./src/DataGridBody/getBodyClass.ts
 
 /**
- * Get the CSS class for a DataGrid body element.
- * When columns are provided, use display:contents so the body doesn't
- * interfere with the grid flow. Rows will use subgrid.
+ * Get the CSS class for a DataGrid body element. When columns are provided, use
+ * display:contents so the body doesn't interfere with the grid flow. Rows will
+ * use subgrid.
  *
  * @param hasColumns - Whether the DataGrid has columns defined
  * @param className - Additional class name to merge
+ *
  */ function getBodyClass(hasColumns, className) {
     return hasColumns ? clsx("contents", className) : clsx("flex flex-col", className);
 }

package/dist/DataGridBody/index.js

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

package/dist/DataGridBody/useColumnMeasurement.d.ts

@@ -1,10 +1,11 @@
 /**
- * Hook to 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.
+ * Hook to 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.
  *
  * @param bodyRef - Ref to the body element containing the rows
  * @param contentDependency - Dependency that changes when content changes (children or renderedContent)
+ *
  */
 export declare function useColumnMeasurement(bodyRef: React.RefObject<HTMLDivElement | null>, contentDependency: unknown): void;

package/dist/DataGridBody/useColumnMeasurement.js

@@ -1,9 +1,9 @@
 /*!
-  @versini/ui-datagrid v0.4.0
+  @versini/ui-datagrid v0.4.2
   © 2026 gizmette.com
 */
 
-import { useContext, useLayoutEffect } from "react";
+import { useContext, useLayoutEffect, useRef } from "react";
 import { DataGridContext } from "../DataGrid/DataGridContext.js";
 
 ;// CONCATENATED MODULE: external "react"
@@ -14,15 +14,17 @@ import { DataGridContext } from "../DataGrid/DataGridContext.js";
 
 
 /**
- * Hook to 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.
+ * Hook to 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.
  *
  * @param bodyRef - Ref to the body element containing the rows
  * @param contentDependency - Dependency that changes when content changes (children or renderedContent)
+ *
  */ function useColumnMeasurement(bodyRef, contentDependency) {
     const ctx = useContext(DataGridContext);
+    const prevWidthsRef = useRef([]);
     // biome-ignore lint/correctness/useExhaustiveDependencies: contentDependency triggers remeasurement when rows change
     useLayoutEffect(()=>{
         const element = bodyRef.current;
@@ -40,7 +42,13 @@ import { DataGridContext } from "../DataGrid/DataGridContext.js";
         }
         const measureColumns = ()=>{
             const widths = Array.from(cells).map((cell)=>cell.getBoundingClientRect().width);
-            ctx.setMeasuredColumnWidths?.(widths);
+            // Only update state if widths have actually changed to prevent infinite loops.
+            const prevWidths = prevWidthsRef.current;
+            const hasChanged = widths.length !== prevWidths.length || widths.some((w, i)=>w !== prevWidths[i]);
+            if (hasChanged) {
+                prevWidthsRef.current = widths;
+                ctx.setMeasuredColumnWidths?.(widths);
+            }
         };
         // Initial measurement.
         measureColumns();

package/dist/DataGridCell/DataGridCell.js

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

package/dist/DataGridCell/index.js

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

package/dist/DataGridCellSort/DataGridCellSort.js

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

package/dist/DataGridCellSort/index.js

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

package/dist/DataGridConstants/DataGridConstants.js

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

package/dist/DataGridConstants/index.js

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

package/dist/DataGridFooter/DataGridFooter.js

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

package/dist/DataGridFooter/index.js

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

package/dist/DataGridHeader/DataGridHeader.js

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

package/dist/DataGridHeader/index.js

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

package/dist/DataGridInfinite/DataGridInfiniteBody.d.ts

@@ -4,8 +4,8 @@ export type DataGridInfiniteBodyProps<T> = {
      */
     data: T[];
     /**
-     * Render function for each row. Should return a DataGridRow element.
-     * The consumer is responsible for providing the key prop on the returned element.
+     * Render function for each row. Should return a DataGridRow element. The
+     * consumer is responsible for providing the key prop on the returned element.
      */
     children: (item: T, index: number) => React.ReactNode;
     /**
@@ -14,8 +14,8 @@ export type DataGridInfiniteBodyProps<T> = {
      */
     batchSize?: number;
     /**
-     * How many items to keep below the marker for seamless scrolling.
-     * The marker is placed `threshold` items before the end of visible items.
+     * How many items to keep below the marker for seamless scrolling. The marker
+     * is placed `threshold` items before the end of visible items.
      * @default 5
      */
     threshold?: number;
@@ -38,8 +38,8 @@ export type DataGridInfiniteBodyProps<T> = {
  */
 export type DataGridInfiniteBodyRef = {
     /**
-     * Scroll to a specific row index with smooth animation.
-     * If the row is not yet visible, it will expand the visible count first.
+     * Scroll to a specific row index with smooth animation. If the row is not yet
+     * visible, it will expand the visible count first.
      * @param index - The index of the row to scroll to
      */
     scrollToIndex: (index: number) => void;

package/dist/DataGridInfinite/DataGridInfiniteBody.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.0
+  @versini/ui-datagrid v0.4.2
   © 2026 gizmette.com
 */
 
@@ -34,8 +34,8 @@ const DEFAULT_THRESHOLD = 5;
 const DEFAULT_ROOT_MARGIN = "20px";
 const ROW_INDEX_DATA_ATTR = "data-row-index";
 /**
- * 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){
@@ -89,6 +89,7 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
  *   </DataGridInfiniteBody>
  * </DataGrid>
  * ```
+ *
  */ function DataGridInfiniteBodyInner({ data, children: renderRow, batchSize = DEFAULT_BATCH_SIZE, threshold = DEFAULT_THRESHOLD, rootMargin = DEFAULT_ROOT_MARGIN, onVisibleCountChange, className }, ref) {
     const ctx = useContext(DataGridContext);
     const bodyRef = useRef(null);
@@ -100,9 +101,9 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
     const hasMore = visibleCount < totalItems;
     /**
 	 * Scroll to a row by its index. Called after visibleCount updates.
-	 * Note: We query for the wrapper with data-row-index, then scroll to the
-	 * actual row element inside it (since the wrapper has display:contents
-	 * and doesn't have a bounding box).
+	 * NOTE: We query for the wrapper with data-row-index, then scroll to the
+	 * actual row element inside it (since the wrapper has display:contents and
+	 * doesn't have a bounding box).
 	 */ const scrollToRowElement = useCallback((index)=>{
         const body = bodyRef.current;
         if (!body) {
@@ -151,9 +152,10 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
                     scrollToRowElement(index);
                     return;
                 }
-                // Otherwise, expand visible count to include the target row.
-                // Add some buffer so the row isn't at the very edge.
-                const targetCount = Math.min(index + threshold + 1, totalItems);
+                /**
+				 * Otherwise, expand visible count to include the target row. Add some
+				 * buffer so the row isn't at the very edge.
+				 */ const targetCount = Math.min(index + threshold + 1, totalItems);
                 pendingScrollRef.current = index;
                 setVisibleCount(targetCount);
             }
@@ -180,8 +182,8 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
         onVisibleCountChange
     ]);
     /**
-	 * IntersectionObserver callback - triggered when marker becomes visible.
-	 * Loads the next batch of items.
+	 * IntersectionObserver callback - triggered when marker becomes visible. Loads
+	 * the next batch of items.
 	 */ const handleIntersection = useCallback((entries)=>{
         const target = entries[0];
         if (target?.isIntersecting) {
@@ -192,10 +194,10 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
         totalItems
     ]);
     /**
-	 * Callback ref for the marker element.
-	 * Sets up IntersectionObserver when marker mounts, cleans up when it unmounts.
-	 * This pattern ensures the observer always watches the current marker element,
-	 * even when visibleCount changes and a new marker is created at a different position.
+	 * Callback ref for the marker element. Sets up IntersectionObserver when
+	 * marker mounts, cleans up when it unmounts. This pattern ensures the observer
+	 * always watches the current marker element, even when visibleCount changes
+	 * and a new marker is created at a different position.
 	 */ const markerRefCallback = useCallback((node)=>{
         // Clean up previous observer.
         if (observerRef.current) {
@@ -223,10 +225,9 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
         };
     }, []);
     /**
-	 * Calculate marker position.
-	 * The marker should be placed `threshold` items from the end of visible items.
-	 * This allows seamless scrolling - new items load while user scrolls through
-	 * the remaining `threshold` items.
+	 * Calculate marker position. The marker should be placed `threshold` items
+	 * from the end of visible items. This allows seamless scrolling - new items
+	 * load while user scrolls through the remaining `threshold` items.
 	 */ const markerPosition = useMemo(()=>{
         if (!hasMore) {
             return -1; // No marker needed when all items are loaded.
@@ -239,10 +240,22 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
         threshold
     ]);
     /**
-	 * Render items with marker at the correct position.
-	 * Each row gets a data-row-index attribute for scrollToIndex functionality.
+	 * Context value for body rows (shared base, rowIndex added per-row).
+	 */ const bodyContextBase = useMemo(()=>({
+            ...ctx,
+            cellWrapper: CellWrapper.BODY
+        }), [
+        ctx
+    ]);
+    /**
+	 * Render items with marker at the correct position. Each row gets a
+	 * data-row-index attribute for scrollToIndex functionality. Each row is
+	 * wrapped with a context provider that includes the row index for proper
+	 * odd/even styling (CSS :nth-child doesn't work with wrappers).
 	 */ const renderedContent = useMemo(()=>{
         const result = [];
+        // Determine the actual last visible index (for border styling).
+        const lastVisibleIndex = Math.min(visibleCount, totalItems) - 1;
         for(let i = 0; i < visibleCount && i < totalItems; i++){
             // Insert marker at the calculated position.
             if (i === markerPosition) {
@@ -255,14 +268,26 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
                     }
                 }, "__infinite-scroll-marker-inline__"));
             }
-            // Wrap row with data attribute for scrollToIndex lookup.
-            // Using display:contents so the wrapper doesn't affect grid layout.
-            result.push(/*#__PURE__*/ jsx("div", {
-                [ROW_INDEX_DATA_ATTR]: i,
-                style: {
-                    display: "contents"
+            /**
+			 * Determine if this is the last row (only when all data is loaded). If
+			 * hasMore is true, no row is "last" since more will be loaded.
+			 */ const isLastRow = !hasMore && i === lastVisibleIndex;
+            /**
+			 * Wrap row with context provider that includes rowIndex for proper odd/even
+			 * styling. Using display:contents so the wrapper doesn't affect grid layout.
+			 */ result.push(/*#__PURE__*/ jsx(DataGridContext.Provider, {
+                value: {
+                    ...bodyContextBase,
+                    rowIndex: i,
+                    isLastRow
                 },
-                children: renderRow(data[i], i)
+                children: /*#__PURE__*/ jsx("div", {
+                    [ROW_INDEX_DATA_ATTR]: i,
+                    style: {
+                        display: "contents"
+                    },
+                    children: renderRow(data[i], i)
+                })
             }, i));
         }
         // If marker position is at the end (edge case with small data).
@@ -284,7 +309,8 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
         markerPosition,
         hasMore,
         renderRow,
-        markerRefCallback
+        markerRefCallback,
+        bodyContextBase
     ]);
     // Measure column widths for sticky header/footer sync.
     useColumnMeasurement(bodyRef, renderedContent);

package/dist/DataGridInfinite/index.js

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

package/dist/DataGridRow/DataGridRow.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.0
+  @versini/ui-datagrid v0.4.2
   © 2026 gizmette.com
 */
 
@@ -31,7 +31,7 @@ import { getRowClasses } from "../utilities/classes.js";
     // 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, measuredColumnWidths })=>{
+        children: ({ mode, cellWrapper, stickyHeader, stickyFooter, columns, measuredColumnWidths, rowIndex, isLastRow })=>{
             /**
 				 * 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
@@ -88,7 +88,9 @@ import { getRowClasses } from "../utilities/classes.js";
                 className: getRowClasses({
                     mode,
                     className,
-                    cellWrapper
+                    cellWrapper,
+                    rowIndex,
+                    isLastRow
                 }),
                 style: {
                     ...rowStyle,

package/dist/DataGridRow/index.js

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

package/dist/DataGridSorting/index.js

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

package/dist/DataGridSorting/sortingUtils.js

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

package/dist/utilities/classes.d.ts

@@ -124,12 +124,16 @@ export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEff
     stickyFooter?: boolean;
 }) => string;
 /**
- * Generates classes for DataGridRow.
+ * Generates classes for DataGridRow. When rowIndex is provided (e.g., from
+ * DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
+ * :nth-child selectors, which don't work with wrapper elements.
  */
-export declare const getRowClasses: ({ mode, className, cellWrapper, }: {
+export declare const getRowClasses: ({ mode, className, cellWrapper, rowIndex, isLastRow, }: {
     mode: ThemeMode;
     cellWrapper?: CellWrapperType;
     className?: string;
+    rowIndex?: number;
+    isLastRow?: boolean;
 }) => string;
 /**
  * Generates classes for DataGridCell.

package/dist/utilities/classes.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.4.0
+  @versini/ui-datagrid v0.4.2
   © 2026 gizmette.com
 */
 
@@ -181,22 +181,49 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
     }), className);
 };
 /**
- * Generates classes for DataGridRow.
- */ const getRowClasses = ({ mode, className, cellWrapper })=>{
+ * Generates classes for DataGridRow. When rowIndex is provided (e.g., from
+ * DataGridInfiniteBody), explicit odd/even classes are used instead of CSS
+ * :nth-child selectors, which don't work with wrapper elements.
+ */ const getRowClasses = ({ mode, className, cellWrapper, rowIndex, isLastRow })=>{
     const layoutClass = "group grid items-center";
     if (cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER) {
         return clsx(layoutClass, className);
     }
-    return clsx(layoutClass, "border-b last:border-0", getBorderClasses({
+    /**
+	 * When rowIndex is provided, use explicit classes instead of CSS :nth-child
+	 * selectors. CSS :nth-child doesn't work correctly when rows are wrapped
+	 * (e.g., in DataGridInfiniteBody).
+	 */ const hasExplicitIndex = rowIndex !== undefined;
+    const isOdd = hasExplicitIndex && rowIndex % 2 === 0; // 0-based index: 0,2,4 are visually "odd" rows (1st, 3rd, 5th)
+    const isEven = hasExplicitIndex && rowIndex % 2 === 1;
+    /**
+	 * Border classes: use explicit border-0 for last row when isLastRow is
+	 * provided, otherwise fall back to CSS :last-child selector.
+	 */ const borderClasses = isLastRow !== undefined ? isLastRow ? "border-b border-b-transparent" // Last row: transparent border to maintain spacing
+     : "border-b" : "border-b last:border-0"; // Fallback to CSS :last-child
+    return clsx(layoutClass, borderClasses, getBorderClasses({
         mode
     }), {
-        "odd:bg-table-dark-odd even:bg-table-dark-even": mode === "dark",
+        // Explicit odd/even when rowIndex is provided.
+        "bg-table-dark-odd": hasExplicitIndex && isOdd && mode === "dark",
+        "bg-table-dark-even": hasExplicitIndex && isEven && mode === "dark",
+        "bg-table-light-odd": hasExplicitIndex && isOdd && mode === "light",
+        "bg-table-light-even": hasExplicitIndex && isEven && mode === "light",
+        // System mode with explicit index.
+        "bg-table-dark-odd dark:bg-table-light-odd": hasExplicitIndex && isOdd && mode === "system",
+        "bg-table-dark-even dark:bg-table-light-even": hasExplicitIndex && isEven && mode === "system",
+        // Alt-system mode with explicit index.
+        "bg-table-light-odd dark:bg-table-dark-odd": hasExplicitIndex && isOdd && mode === "alt-system",
+        "bg-table-light-even dark:bg-table-dark-even": hasExplicitIndex && isEven && mode === "alt-system",
+        // CSS :nth-child selectors (original behavior when rowIndex not provided).
+        "odd:bg-table-dark-odd even:bg-table-dark-even": !hasExplicitIndex && mode === "dark",
+        "odd:bg-table-light-odd even:bg-table-light-even": !hasExplicitIndex && mode === "light",
+        "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": !hasExplicitIndex && mode === "system",
+        "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": !hasExplicitIndex && mode === "alt-system",
+        // Hover effects (same for both modes).
         "hover:bg-table-dark-hover": mode === "dark",
-        "odd:bg-table-light-odd even:bg-table-light-even": mode === "light",
         "hover:bg-table-light-hover": mode === "light",
-        "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": mode === "system",
         "hover:bg-table-dark-hover dark:hover:bg-table-light-hover": mode === "system",
-        "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": mode === "alt-system",
         "hover:bg-table-light-hover dark:hover:bg-table-dark-hover": mode === "alt-system"
     }, className);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-datagrid",
-	"version": "0.4.0",
+	"version": "0.4.2",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -94,5 +94,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "fa25a9204c1b506f6eed099cc11e321b53bb0f05"
+	"gitHead": "26d6f863e034c26395f8a67bb203297770864d52"
 }