@versini/ui-datagrid 0.1.0 → 0.1.1

package/dist/DataGridHeader/DataGridHeader.js

@@ -1,13 +1,13 @@
 /*!
-  @versini/ui-datagrid v0.1.0
+  @versini/ui-datagrid v0.1.1
   © 2026 gizmette.com
 */
 
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { DataGridContext } from "../DataGrid/DataGridContext.js";
-import { getStickyBlurClasses } from "../DataGrid/utilities.js";
-import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants.js";
+import { getCaptionBackgroundClasses, getCaptionCopyClasses, getStickyBlurClasses } from "../DataGrid/utilities.js";
+import { CellWrapper } from "../DataGridConstants/DataGridConstants.js";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
@@ -28,29 +28,17 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
 /**
  * Generates classes for the DataGridHeader. Uses absolute positioning like
  * Panel - header floats above the scrollable content.
- */ const getHeaderClasses = ({ className, stickyHeader, mode, blurEffect })=>{
-    const hasBlur = blurEffect && blurEffect !== BlurEffects.NONE;
-    return clsx({
-        /**
-			 * Absolute positioning like Panel's header: absolute left-0 right-0 z-20
-			 * top-0 rounded-t-lg to match the wrapper's rounded-lg corners.
-			 */ "absolute left-0 right-0 z-20 top-0 rounded-t-lg": stickyHeader,
-        // Shadow for visual depth (downward glow).
-        "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": stickyHeader && mode === "dark",
-        "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": stickyHeader && mode === "system",
-        "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": stickyHeader && mode === "light",
-        "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": stickyHeader && mode === "alt-system",
-        // Semi-transparent backgrounds for blur effect.
-        "bg-table-head-dark/50": hasBlur && stickyHeader && (mode === "dark" || mode === "system"),
-        "bg-table-head-light/50": hasBlur && stickyHeader && (mode === "light" || mode === "alt-system"),
-        "dark:bg-table-head-light/50": hasBlur && stickyHeader && mode === "system",
-        "dark:bg-table-head-dark/50": hasBlur && stickyHeader && mode === "alt-system",
-        // Solid backgrounds when no blur effect.
-        "bg-table-head-dark": !hasBlur && stickyHeader && (mode === "dark" || mode === "system"),
-        "bg-table-head-light": !hasBlur && stickyHeader && (mode === "light" || mode === "alt-system"),
-        "dark:bg-table-head-light": !hasBlur && stickyHeader && mode === "system",
-        "dark:bg-table-head-dark": !hasBlur && stickyHeader && mode === "alt-system"
-    }, stickyHeader && getStickyBlurClasses({
+ */ const getHeaderClasses = ({ className, stickyHeader, mode, blurEffect, hasCaption })=>{
+    return clsx("flex flex-col", {
+        "absolute left-0 right-0 z-20": stickyHeader,
+        "top-0": stickyHeader && !hasCaption,
+        "top-9": stickyHeader && hasCaption,
+        "rounded-t-lg": stickyHeader && !hasCaption
+    }, getCaptionBackgroundClasses({
+        mode
+    }), getCaptionCopyClasses({
+        mode
+    }), stickyHeader && getStickyBlurClasses({
         blurEffect
     }), className);
 };
@@ -63,12 +51,14 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
                     ...ctx,
                     cellWrapper: CellWrapper.HEADER
                 },
-                children: /*#__PURE__*/ jsx("thead", {
+                children: /*#__PURE__*/ jsx("div", {
+                    role: "rowgroup",
                     className: getHeaderClasses({
                         className,
                         stickyHeader: ctx.stickyHeader,
                         mode: ctx.mode,
-                        blurEffect: ctx.blurEffect
+                        blurEffect: ctx.blurEffect,
+                        hasCaption: ctx.hasCaption
                     }),
                     ...rest,
                     children: children

package/dist/DataGridHeader/index.js

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

package/dist/DataGridInfinite/InfiniteScrollMarker.d.ts

@@ -1,8 +1,4 @@
 export type InfiniteScrollMarkerProps = {
-    /**
-     * Number of columns in the table (for proper colspan).
-     */
-    colSpan?: number;
     /**
      * Custom class name for the row.
      */
@@ -26,10 +22,10 @@ export type InfiniteScrollMarkerProps = {
  *     {data.slice(0, visibleCount).map((item) => (
  *       <DataGridRow key={item.id}>...</DataGridRow>
  *     ))}
- *     {hasMore && <InfiniteScrollMarker ref={markerRef} colSpan={5} />}
+ *     {hasMore && <InfiniteScrollMarker ref={markerRef} />}
  *   </DataGridBody>
  * );
  * ```
  *
  */
-export declare const InfiniteScrollMarker: import("react").ForwardRefExoticComponent<InfiniteScrollMarkerProps & import("react").RefAttributes<HTMLTableRowElement>>;
+export declare const InfiniteScrollMarker: import("react").ForwardRefExoticComponent<InfiniteScrollMarkerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/DataGridInfinite/InfiniteScrollMarker.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.1.0
+  @versini/ui-datagrid v0.1.1
   © 2026 gizmette.com
 */
 
@@ -26,22 +26,23 @@ import { forwardRef } from "react";
  *     {data.slice(0, visibleCount).map((item) => (
  *       <DataGridRow key={item.id}>...</DataGridRow>
  *     ))}
- *     {hasMore && <InfiniteScrollMarker ref={markerRef} colSpan={5} />}
+ *     {hasMore && <InfiniteScrollMarker ref={markerRef} />}
  *   </DataGridBody>
  * );
  * ```
  *
- */ const InfiniteScrollMarker_InfiniteScrollMarker = /*#__PURE__*/ forwardRef(function InfiniteScrollMarker({ colSpan = 1, className, debug = false }, ref) {
-    return /*#__PURE__*/ jsx("tr", {
+ */ const InfiniteScrollMarker_InfiniteScrollMarker = /*#__PURE__*/ forwardRef(function InfiniteScrollMarker({ className, debug = false }, ref) {
+    return /*#__PURE__*/ jsx("div", {
         ref: ref,
+        role: "row",
         className: className,
         "aria-hidden": "true",
         style: {
             height: debug ? "40px" : "1px",
             background: debug ? "red" : "transparent"
         },
-        children: /*#__PURE__*/ jsx("td", {
-            colSpan: colSpan,
+        children: /*#__PURE__*/ jsx("div", {
+            role: "gridcell",
             style: {
                 padding: 0,
                 border: 0

package/dist/DataGridInfinite/index.js

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

package/dist/DataGridInfinite/useInfiniteScroll.d.ts

@@ -1,3 +1,8 @@
+/**
+ * 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 = {
     /**
      * Number of items to show initially and to add on each scroll.
@@ -28,6 +33,12 @@ export type UseInfiniteScrollOptions = {
      * Callback when more items are loaded.
      */
     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.
+     */
+    scrollContainer?: Element | null;
 };
 export type UseInfiniteScrollReturn = {
     /**
@@ -78,4 +89,4 @@ export type UseInfiniteScrollReturn = {
  * ```
  *
  */
-export declare function useInfiniteScroll({ batchSize, threshold, rootMargin, totalItems, initialVisibleCount, onLoadMore, }: UseInfiniteScrollOptions): UseInfiniteScrollReturn;
+export declare function useInfiniteScroll({ batchSize, threshold, rootMargin, totalItems, initialVisibleCount, onLoadMore, scrollContainer, }: UseInfiniteScrollOptions): UseInfiniteScrollReturn;

package/dist/DataGridInfinite/useInfiniteScroll.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.1.0
+  @versini/ui-datagrid v0.1.1
   © 2026 gizmette.com
 */
 
@@ -12,6 +12,21 @@ import { useCallback, useEffect, useRef, useState } from "react";
 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).
+ */ function findScrollableAncestor(element) {
+    let parent = element.parentElement;
+    while(parent){
+        const style = getComputedStyle(parent);
+        const overflowY = style.overflowY;
+        if (overflowY === "auto" || overflowY === "scroll") {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    return null;
+}
 /**
  * Hook for implementing infinite scroll with IntersectionObserver.
  *
@@ -34,7 +49,7 @@ const DEFAULT_ROOT_MARGIN = "20px";
  * );
  * ```
  *
- */ function useInfiniteScroll({ batchSize = DEFAULT_BATCH_SIZE, threshold = DEFAULT_THRESHOLD, rootMargin = DEFAULT_ROOT_MARGIN, totalItems, initialVisibleCount, onLoadMore }) {
+ */ function useInfiniteScroll({ batchSize = DEFAULT_BATCH_SIZE, threshold = DEFAULT_THRESHOLD, rootMargin = DEFAULT_ROOT_MARGIN, totalItems, initialVisibleCount, onLoadMore, scrollContainer }) {
     const observerRef = useRef(null);
     const initialCount = initialVisibleCount ?? batchSize + threshold;
     const [visibleCount, setVisibleCount] = useState(Math.min(initialCount, totalItems));
@@ -66,7 +81,10 @@ const DEFAULT_ROOT_MARGIN = "20px";
             observerRef.current = null;
         }
         if (node && typeof IntersectionObserver !== "undefined") {
+            // Find the scrollable ancestor if not explicitly provided.
+            const root = scrollContainer ?? findScrollableAncestor(node);
             const options = {
+                root,
                 rootMargin
             };
             observerRef.current = new IntersectionObserver(handleIntersection, options);
@@ -74,7 +92,8 @@ const DEFAULT_ROOT_MARGIN = "20px";
         }
     }, [
         handleIntersection,
-        rootMargin
+        rootMargin,
+        scrollContainer
     ]);
     /**
 	 * Reset to initial count.
@@ -114,4 +133,4 @@ const DEFAULT_ROOT_MARGIN = "20px";
     };
 }
 
-export { useInfiniteScroll };
+export { findScrollableAncestor, useInfiniteScroll };

package/dist/DataGridRow/DataGridRow.js

@@ -1,10 +1,11 @@
 /*!
-  @versini/ui-datagrid v0.1.0
+  @versini/ui-datagrid v0.1.1
   © 2026 gizmette.com
 */
 
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
+import react 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,25 +24,28 @@ import { CellWrapper } from "../DataGridConstants/index.js";
 
 
 
+
 const getRowClasses = ({ mode, className, cellWrapper, stickyHeader, stickyFooter })=>{
+    // Always use CSS Grid for proper column alignment, with vertical centering
+    const layoutClass = "grid items-center";
     if (cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER) {
         /**
 		 * When in a sticky header/footer, don't apply background to row since the
-		 * background is applied to thead/tfoot for blur effect to work.
+		 * background is applied to the rowgroup for blur effect to work.
 		 */ const isSticky = cellWrapper === CellWrapper.HEADER && stickyHeader || cellWrapper === CellWrapper.FOOTER && stickyFooter;
         if (isSticky) {
-            // No background on row - it's on the thead/tfoot.
-            return clsx(className);
+            // No background on row - it's on the rowgroup.
+            return clsx(layoutClass, className);
         }
         // Non-sticky header/footer still gets background on row.
-        return clsx({
+        return clsx(layoutClass, {
             "bg-table-head-dark": mode === "dark" || mode === "system",
             "bg-table-head-light": mode === "light" || mode === "alt-system",
             "dark:bg-table-head-light": mode === "system",
             "dark:bg-table-head-dark": mode === "alt-system"
         }, className);
     }
-    return clsx("border-b last:border-0", {
+    return clsx(layoutClass, "border-b last:border-0", {
         "border-table-dark": mode === "dark" || mode === "system",
         "border-table-light": mode === "light" || mode === "alt-system",
         "dark:border-table-light": mode === "system",
@@ -57,8 +63,15 @@ const getRowClasses = ({ mode, className, cellWrapper, stickyHeader, stickyFoote
 /* =============================================================================
  * DataGridRow
  * ========================================================================== */ const DataGridRow = ({ className, children, ...rest })=>{
+    // 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 })=>/*#__PURE__*/ jsx("tr", {
+        children: ({ mode, cellWrapper, stickyHeader, stickyFooter })=>{
+            const rowStyle = {
+                gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`
+            };
+            return /*#__PURE__*/ jsx("div", {
+                role: "row",
                 className: getRowClasses({
                     mode,
                     className,
@@ -66,9 +79,11 @@ const getRowClasses = ({ mode, className, cellWrapper, stickyHeader, stickyFoote
                     stickyHeader,
                     stickyFooter
                 }),
+                style: rowStyle,
                 ...rest,
                 children: children
-            })
+            });
+        }
     });
 };
 

package/dist/DataGridRow/index.js

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

package/dist/DataGridSorting/index.js

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

package/dist/DataGridSorting/sortingUtils.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-datagrid",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -56,10 +56,6 @@
 		"./sorting": {
 			"types": "./dist/DataGridSorting/index.d.ts",
 			"import": "./dist/DataGridSorting/index.js"
-		},
-		"./virtual": {
-			"types": "./dist/DataGridVirtual/index.d.ts",
-			"import": "./dist/DataGridVirtual/index.js"
 		}
 	},
 	"files": [
@@ -90,7 +86,6 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.19",
-		"@tanstack/react-virtual": "3.13.16",
 		"@versini/ui-button": "11.3.2",
 		"@versini/ui-icons": "4.16.1",
 		"clsx": "2.1.1",
@@ -99,5 +94,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "d88af405285c38faec12d7cb52e575207b99173f"
+	"gitHead": "1d0a3b87ca454d716cbf671cd805df03bf77e962"
 }

package/dist/DataGridVirtual/VirtualDataGrid.d.ts

@@ -1,114 +0,0 @@
-import { type BlurEffect, type ThemeMode } from "../DataGridConstants/DataGridConstants";
-export type VirtualDataGridColumn<T> = {
-    /**
-     * Unique identifier for the column.
-     */
-    id: string;
-    /**
-     * Header content.
-     */
-    header: React.ReactNode;
-    /**
-     * Cell renderer function.
-     */
-    cell: (item: T, index: number) => React.ReactNode;
-    /**
-     * Column width (CSS value).
-     */
-    width?: string | number;
-    /**
-     * Additional class name for cells in this column.
-     */
-    className?: string;
-};
-export type VirtualDataGridProps<T> = {
-    /**
-     * Array of data items.
-     */
-    data: T[];
-    /**
-     * Column definitions.
-     */
-    columns: VirtualDataGridColumn<T>[];
-    /**
-     * Height of the container (required for virtualization).
-     */
-    height: string | number;
-    /**
-     * Theme mode.
-     * @default "system"
-     */
-    mode?: ThemeMode;
-    /**
-     * Use compact row height.
-     * @default false
-     */
-    compact?: boolean;
-    /**
-     * Keep header fixed while scrolling.
-     * @default true
-     */
-    stickyHeader?: boolean;
-    /**
-     * Blur effect for sticky header.
-     * @default BlurEffects.NONE
-     */
-    blurEffect?: BlurEffect;
-    /**
-     * Caption text for accessibility.
-     */
-    caption?: string;
-    /**
-     * Additional class name for the wrapper.
-     */
-    wrapperClassName?: string;
-    /**
-     * Additional class name for the table.
-     */
-    className?: string;
-    /**
-     * Function to get a unique key for each row.
-     */
-    getRowKey?: (item: T, index: number) => string | number;
-    /**
-     * Callback when a row is clicked.
-     */
-    onRowClick?: (item: T, index: number) => void;
-    /**
-     * Index of the active row (for highlighting).
-     */
-    activeRowIndex?: number;
-    /**
-     * Estimated row height for virtualization.
-     * @default 40
-     */
-    estimateSize?: number | ((index: number) => number);
-    /**
-     * Number of rows to render above/below visible area.
-     * @default 5
-     */
-    overscan?: number;
-    /**
-     * Whether to use React's flushSync. Set to false for React 19.
-     * @default true
-     */
-    useFlushSync?: boolean;
-};
-/**
- * A virtualized data grid component for rendering large datasets.
- *
- * @example
- * ```tsx
- * <VirtualDataGrid
- *   data={items}
- *   height="500px"
- *   columns={[
- *     { id: 'name', header: 'Name', cell: (item) => item.name },
- *     { id: 'date', header: 'Date', cell: (item) => formatDate(item.date) },
- *   ]}
- *   getRowKey={(item) => item.id}
- * />
- * ```
- *
- */
-export declare function VirtualDataGrid<T>({ data, columns, height, mode, compact, stickyHeader, blurEffect, caption, wrapperClassName, className, getRowKey, onRowClick, activeRowIndex, estimateSize, overscan, useFlushSync, }: VirtualDataGridProps<T>): import("react/jsx-runtime").JSX.Element;