@versini/ui-datagrid 0.1.0

package/dist/DataGridVirtual/useVirtualDataGrid.d.ts

@@ -0,0 +1,112 @@
+import { type Virtualizer } from "@tanstack/react-virtual";
+export type UseVirtualDataGridOptions<T = unknown> = {
+    /**
+     * Array of data items.
+     */
+    data: T[];
+    /**
+     * Estimated height of each row in pixels.
+     * @default 40
+     */
+    estimateSize?: number | ((index: number) => number);
+    /**
+     * Number of rows to render above/below the visible area.
+     * @default 5
+     */
+    overscan?: number;
+    /**
+     * Function to get a unique key for each item.
+     */
+    getItemKey: (index: number) => string | number;
+    /**
+     * Whether virtualization is enabled.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Whether to use React's flushSync for synchronous updates. Set to false for
+     * React 19 compatibility.
+     * @default true
+     */
+    useFlushSync?: boolean;
+};
+export type UseVirtualDataGridReturn<T = unknown> = {
+    /**
+     * Ref to attach to the scroll container.
+     */
+    scrollContainerRef: React.RefObject<HTMLDivElement | null>;
+    /**
+     * Total height of all rows (for container sizing).
+     */
+    totalSize: number;
+    /**
+     * Virtual items to render.
+     */
+    virtualItems: {
+        index: number;
+        key: string | number | bigint;
+        size: number;
+        start: number;
+        data: T;
+    }[];
+    /**
+     * Scroll to a specific row index.
+     */
+    scrollToIndex: (index: number, options?: {
+        align?: "start" | "center" | "end" | "auto";
+        behavior?: "auto" | "smooth";
+    }) => void;
+    /**
+     * Whether the list is currently being scrolled.
+     */
+    isScrolling: boolean;
+    /**
+     * The virtualizer instance for advanced usage.
+     */
+    virtualizer: Virtualizer<HTMLDivElement, Element>;
+    /**
+     * Measure a row element (for dynamic sizing).
+     */
+    measureElement: (element: Element | null) => void;
+};
+/**
+ * Hook for virtualizing a data grid with TanStack Virtual.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   scrollContainerRef,
+ *   totalSize,
+ *   virtualItems,
+ *   scrollToIndex,
+ * } = useVirtualDataGrid({
+ *   data: items,
+ *   estimateSize: 48,
+ *   overscan: 10,
+ * });
+ *
+ * return (
+ *   <div ref={scrollContainerRef} style={{ height: '500px', overflow: 'auto' }}>
+ *     <div style={{ height: totalSize }}>
+ *       <table>
+ *         <tbody>
+ *           {virtualItems.map((virtualRow) => (
+ *             <tr
+ *               key={virtualRow.key}
+ *               style={{
+ *                 height: virtualRow.size,
+ *                 transform: `translateY(${virtualRow.start}px)`,
+ *               }}
+ *             >
+ *               {renderCells(virtualRow.data)}
+ *             </tr>
+ *           ))}
+ *         </tbody>
+ *       </table>
+ *     </div>
+ *   </div>
+ * );
+ * ```
+ *
+ */
+export declare function useVirtualDataGrid<T>({ data, estimateSize, overscan, getItemKey, enabled, useFlushSync, }: UseVirtualDataGridOptions<T>): UseVirtualDataGridReturn<T>;

package/dist/DataGridVirtual/useVirtualDataGrid.js

@@ -0,0 +1,89 @@
+/*!
+  @versini/ui-datagrid v0.1.0
+  © 2026 gizmette.com
+*/
+
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useCallback, useRef } from "react";
+
+;// CONCATENATED MODULE: external "@tanstack/react-virtual"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: ./src/DataGridVirtual/useVirtualDataGrid.ts
+
+
+const DEFAULT_ESTIMATE_SIZE = 40;
+const DEFAULT_OVERSCAN = 5;
+/**
+ * Hook for virtualizing a data grid with TanStack Virtual.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   scrollContainerRef,
+ *   totalSize,
+ *   virtualItems,
+ *   scrollToIndex,
+ * } = useVirtualDataGrid({
+ *   data: items,
+ *   estimateSize: 48,
+ *   overscan: 10,
+ * });
+ *
+ * return (
+ *   <div ref={scrollContainerRef} style={{ height: '500px', overflow: 'auto' }}>
+ *     <div style={{ height: totalSize }}>
+ *       <table>
+ *         <tbody>
+ *           {virtualItems.map((virtualRow) => (
+ *             <tr
+ *               key={virtualRow.key}
+ *               style={{
+ *                 height: virtualRow.size,
+ *                 transform: `translateY(${virtualRow.start}px)`,
+ *               }}
+ *             >
+ *               {renderCells(virtualRow.data)}
+ *             </tr>
+ *           ))}
+ *         </tbody>
+ *       </table>
+ *     </div>
+ *   </div>
+ * );
+ * ```
+ *
+ */ function useVirtualDataGrid({ data, estimateSize = DEFAULT_ESTIMATE_SIZE, overscan = DEFAULT_OVERSCAN, getItemKey, enabled = true, useFlushSync = true }) {
+    const scrollContainerRef = useRef(null);
+    const estimateSizeFn = useCallback((index)=>typeof estimateSize === "function" ? estimateSize(index) : estimateSize, [
+        estimateSize
+    ]);
+    const virtualizer = useVirtualizer({
+        count: data.length,
+        getScrollElement: ()=>scrollContainerRef.current,
+        estimateSize: estimateSizeFn,
+        overscan,
+        getItemKey,
+        enabled,
+        useFlushSync
+    });
+    const virtualItems = virtualizer.getVirtualItems().map((virtualItem)=>({
+            index: virtualItem.index,
+            key: virtualItem.key,
+            size: virtualItem.size,
+            start: virtualItem.start,
+            data: data[virtualItem.index]
+        }));
+    return {
+        scrollContainerRef,
+        totalSize: virtualizer.getTotalSize(),
+        virtualItems,
+        scrollToIndex: virtualizer.scrollToIndex,
+        isScrolling: virtualizer.isScrolling,
+        virtualizer,
+        measureElement: virtualizer.measureElement
+    };
+}
+
+export { useVirtualDataGrid };

package/package.json

@@ -0,0 +1,103 @@
+{
+	"name": "@versini/ui-datagrid",
+	"version": "0.1.0",
+	"license": "MIT",
+	"author": "Arno Versini",
+	"publishConfig": {
+		"access": "public"
+	},
+	"homepage": "https://www.npmjs.com/package/@versini/ui-datagrid",
+	"repository": {
+		"type": "git",
+		"url": "git@github.com:aversini/ui-components.git"
+	},
+	"type": "module",
+	"exports": {
+		"./animated": {
+			"types": "./dist/DataGridAnimated/index.d.ts",
+			"import": "./dist/DataGridAnimated/index.js"
+		},
+		"./body": {
+			"types": "./dist/DataGridBody/index.d.ts",
+			"import": "./dist/DataGridBody/index.js"
+		},
+		"./cell": {
+			"types": "./dist/DataGridCell/index.d.ts",
+			"import": "./dist/DataGridCell/index.js"
+		},
+		"./cell-sort": {
+			"types": "./dist/DataGridCellSort/index.d.ts",
+			"import": "./dist/DataGridCellSort/index.js"
+		},
+		"./constants": {
+			"types": "./dist/DataGridConstants/index.d.ts",
+			"import": "./dist/DataGridConstants/index.js"
+		},
+		"./datagrid": {
+			"types": "./dist/DataGrid/index.d.ts",
+			"import": "./dist/DataGrid/index.js"
+		},
+		"./footer": {
+			"types": "./dist/DataGridFooter/index.d.ts",
+			"import": "./dist/DataGridFooter/index.js"
+		},
+		"./header": {
+			"types": "./dist/DataGridHeader/index.d.ts",
+			"import": "./dist/DataGridHeader/index.js"
+		},
+		"./infinite": {
+			"types": "./dist/DataGridInfinite/index.d.ts",
+			"import": "./dist/DataGridInfinite/index.js"
+		},
+		"./row": {
+			"types": "./dist/DataGridRow/index.d.ts",
+			"import": "./dist/DataGridRow/index.js"
+		},
+		"./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": [
+		"dist",
+		"README.md"
+	],
+	"scripts": {
+		"build:check": "tsc",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js",
+		"clean": "rimraf dist tmp coverage",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
+		"lint": "biome lint src",
+		"lint:fix": "biome check src --write --no-errors-on-unmatched",
+		"prettier": "biome check --write --no-errors-on-unmatched",
+		"start": "static-server dist --port 5173",
+		"test:coverage:ui": "vitest --coverage --ui",
+		"test:coverage": "vitest run --coverage",
+		"test:watch": "vitest",
+		"test": "vitest run"
+	},
+	"devDependencies": {
+		"@testing-library/jest-dom": "6.9.1",
+		"@versini/ui-types": "8.3.0"
+	},
+	"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",
+		"tailwindcss": "4.1.18"
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"gitHead": "d88af405285c38faec12d7cb52e575207b99173f"
+}