@versini/ui-datagrid 0.1.0 → 0.2.0

package/dist/DataGridFooter/DataGridFooter.d.ts

@@ -2,11 +2,15 @@ import type { DataGridFooterProps } from "../DataGrid/DataGridTypes";
 import { type BlurEffect, type ThemeMode } 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.
  */
-export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEffect, }: {
+export declare const getFooterClasses: ({ className, stickyFooter, mode, blurEffect, hasColumns, }: {
     mode: ThemeMode;
     blurEffect?: BlurEffect;
     className?: string;
+    hasColumns?: boolean;
     stickyFooter?: boolean;
 }) => string;
 export declare const DataGridFooter: ({ className, children, ...rest }: DataGridFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataGridFooter/DataGridFooter.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.1.0
+  @versini/ui-datagrid v0.2.0
   © 2026 gizmette.com
 */
 
@@ -27,9 +27,18 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
 
 /**
  * Generates classes for the DataGridFooter.
- */ const getFooterClasses = ({ className, stickyFooter, mode, blurEffect })=>{
+ *
+ * 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
+	 * rowgroup doesn't interfere with the grid flow. The rows will use subgrid.
+	 */ if (hasColumns && !stickyFooter) {
+        return clsx("contents", className);
+    }
     const hasBlur = blurEffect && blurEffect !== BlurEffects.NONE;
-    return clsx({
+    return clsx("flex flex-col", {
         /**
 			 * Absolute positioning like Panel's footer: absolute left-0 right-0 z-20
 			 * bottom-0 rounded-b-lg to match the wrapper's rounded-lg corners.
@@ -57,18 +66,20 @@ import { BlurEffects, CellWrapper } from "../DataGridConstants/DataGridConstants
  * DataGridFooter
  * ========================================================================== */ const DataGridFooter = ({ className, children, ...rest })=>{
     return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
-        children: ({ mode, stickyFooter, blurEffect })=>/*#__PURE__*/ jsx(DataGridContext.Consumer, {
+        children: ({ mode, stickyFooter, blurEffect, columns })=>/*#__PURE__*/ jsx(DataGridContext.Consumer, {
                 children: (ctx)=>/*#__PURE__*/ jsx(DataGridContext.Provider, {
                         value: {
                             ...ctx,
                             cellWrapper: CellWrapper.FOOTER
                         },
-                        children: /*#__PURE__*/ jsx("tfoot", {
+                        children: /*#__PURE__*/ jsx("div", {
+                            role: "rowgroup",
                             className: getFooterClasses({
                                 className,
                                 stickyFooter,
                                 mode,
-                                blurEffect
+                                blurEffect,
+                                hasColumns: Boolean(columns)
                             }),
                             ...rest,
                             children: children

package/dist/DataGridFooter/index.js

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

package/dist/DataGridHeader/DataGridHeader.d.ts

@@ -3,11 +3,16 @@ import { type BlurEffect, type ThemeMode } from "../DataGridConstants/DataGridCo
 /**
  * Generates classes for the DataGridHeader. Uses absolute positioning like
  * Panel - header floats above the scrollable content.
+ *
+ * When columns are provided (subgrid mode), uses display:contents so the
+ * header doesn't break the parent grid flow.
  */
-export declare const getHeaderClasses: ({ className, stickyHeader, mode, blurEffect, }: {
+export declare const getHeaderClasses: ({ className, stickyHeader, mode, blurEffect, hasCaption, hasColumns, }: {
     mode: ThemeMode;
     blurEffect?: BlurEffect;
     className?: string;
+    hasCaption?: boolean;
+    hasColumns?: boolean;
     stickyHeader?: boolean;
 }) => string;
 export declare const DataGridHeader: ({ className, children, ...rest }: DataGridHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataGridHeader/DataGridHeader.js

@@ -1,13 +1,13 @@
 /*!
-  @versini/ui-datagrid v0.1.0
+  @versini/ui-datagrid v0.2.0
   © 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,30 @@ 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({
+ *
+ * When columns are provided (subgrid mode), uses display:contents so the
+ * header doesn't break the parent grid flow.
+ */ const getHeaderClasses = ({ className, stickyHeader, mode, blurEffect, hasCaption, hasColumns })=>{
+    /**
+	 * When columns are provided and not sticky, use display:contents so the
+	 * rowgroup doesn't interfere with the grid flow. The rows will use subgrid.
+	 */ if (hasColumns && !stickyHeader) {
+        return clsx("contents", getCaptionBackgroundClasses({
+            mode
+        }), getCaptionCopyClasses({
+            mode
+        }), className);
+    }
+    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 +64,15 @@ 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,
+                        hasColumns: Boolean(ctx.columns)
                     }),
                     ...rest,
                     children: children

package/dist/DataGridHeader/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.1.0
+  @versini/ui-datagrid v0.2.0
   © 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.2.0
   © 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.2.0
   © 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.2.0
   © 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.d.ts

@@ -1,2 +1,2 @@
 import type { DataGridRowProps } from "../DataGrid/DataGridTypes";
-export declare const DataGridRow: ({ className, children, ...rest }: DataGridRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridRow: ({ className, children, style: userStyle, ...rest }: DataGridRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataGridRow/DataGridRow.js

@@ -1,10 +1,11 @@
 /*!
-  @versini/ui-datagrid v0.1.0
+  @versini/ui-datagrid v0.2.0
   © 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",
@@ -56,9 +62,50 @@ const getRowClasses = ({ mode, className, cellWrapper, stickyHeader, stickyFoote
 };
 /* =============================================================================
  * DataGridRow
- * ========================================================================== */ const DataGridRow = ({ className, children, ...rest })=>{
+ * ========================================================================== */ const DataGridRow = ({ className, children, style: userStyle, ...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, columns })=>{
+            /**
+				 * Determine if this row is inside a sticky header/footer.
+				 * Sticky elements are absolutely positioned and outside the main grid
+				 * flow, so they can't use subgrid.
+				 */ 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.
+				 *
+				 * For sticky headers/footers, use the explicit column template since
+				 * they're absolutely positioned outside the main grid.
+				 *
+				 * When columns are not provided, fall back to the original behavior
+				 * where each row defines its own equal-width columns.
+				 */ let rowStyle;
+            if (columns) {
+                if (isInStickyContext) {
+                    // Sticky elements can't use subgrid, use explicit template
+                    rowStyle = {
+                        gridTemplateColumns: columns.join(" ")
+                    };
+                } else {
+                    // Normal flow: use subgrid to inherit from parent grid
+                    rowStyle = {
+                        gridColumn: "1 / -1",
+                        gridTemplateColumns: "subgrid"
+                    };
+                }
+            } else {
+                // No columns prop: use equal-width columns
+                rowStyle = {
+                    gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`
+                };
+            }
+            return /*#__PURE__*/ jsx("div", {
+                role: "row",
                 className: getRowClasses({
                     mode,
                     className,
@@ -66,9 +113,14 @@ const getRowClasses = ({ mode, className, cellWrapper, stickyHeader, stickyFoote
                     stickyHeader,
                     stickyFooter
                 }),
+                style: {
+                    ...rowStyle,
+                    ...userStyle
+                },
                 ...rest,
                 children: children
-            })
+            });
+        }
     });
 };
 

package/dist/DataGridRow/index.js

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

package/dist/DataGridSorting/index.js

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

package/dist/DataGridSorting/sortingUtils.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-datagrid",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"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": "51fb2afed4cea9931d78243b1587e5699024d03e"
 }

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;