@versini/ui-datagrid 0.3.8 → 0.4.0

package/README.md

@@ -36,10 +36,7 @@ import { DataGridCell } from "@versini/ui-datagrid/cell";
 import { DataGridCellSort } from "@versini/ui-datagrid/cell-sort";
 
 // Infinite scroll (progressive loading)
-import {
-  useInfiniteScroll,
-  InfiniteScrollMarker
-} from "@versini/ui-datagrid/infinite";
+import { DataGridInfiniteBody } from "@versini/ui-datagrid/infinite";
 
 // Animated height wrapper
 import {
@@ -138,52 +135,122 @@ Supported column values include:
 
 ## Infinite Scroll
 
-For datasets with hundreds to thousands of rows, use progressive loading:
+For datasets with hundreds to thousands of rows, use `DataGridInfiniteBody` for progressive loading:
 
 ```tsx
+import { useState } from "react";
 import { DataGrid } from "@versini/ui-datagrid/datagrid";
 import { DataGridHeader } from "@versini/ui-datagrid/header";
-import { DataGridBody } from "@versini/ui-datagrid/body";
 import { DataGridRow } from "@versini/ui-datagrid/row";
 import { DataGridCell } from "@versini/ui-datagrid/cell";
-import {
-  useInfiniteScroll,
-  InfiniteScrollMarker
-} from "@versini/ui-datagrid/infinite";
+import { DataGridInfiniteBody } from "@versini/ui-datagrid/infinite";
 import { AnimatedWrapper } from "@versini/ui-datagrid/animated";
 
 function MyInfiniteTable({ data }) {
-  const { visibleCount, hasMore, markerRef } = useInfiniteScroll({
-    totalItems: data.length,
-    batchSize: 25
-  });
-
-  const visibleData = data.slice(0, visibleCount);
+  const [visibleCount, setVisibleCount] = useState(0);
 
   return (
     <AnimatedWrapper dependency={visibleCount}>
       <DataGrid maxHeight="500px" stickyHeader>
-        <DataGridHeader>
+        <DataGridHeader caption={`Showing ${visibleCount} of ${data.length}`}>
           <DataGridRow>
             <DataGridCell>Name</DataGridCell>
             <DataGridCell>Date</DataGridCell>
           </DataGridRow>
         </DataGridHeader>
-        <DataGridBody>
-          {visibleData.map((item) => (
+
+        <DataGridInfiniteBody
+          data={data}
+          batchSize={25}
+          threshold={5}
+          onVisibleCountChange={(count) => setVisibleCount(count)}
+        >
+          {(item) => (
             <DataGridRow key={item.id}>
               <DataGridCell>{item.name}</DataGridCell>
               <DataGridCell>{item.date}</DataGridCell>
             </DataGridRow>
-          ))}
-          {hasMore && <InfiniteScrollMarker ref={markerRef} colSpan={2} />}
-        </DataGridBody>
+          )}
+        </DataGridInfiniteBody>
       </DataGrid>
     </AnimatedWrapper>
   );
 }
 ```
 
+The `DataGridInfiniteBody` component handles all the complexity internally:
+- Progressive loading with IntersectionObserver
+- Correct marker placement for seamless scrolling (marker is placed `threshold` items before the end)
+- Automatic data slicing and memoization
+
+### Jump to Row
+
+Use the `scrollToIndex` imperative method to programmatically scroll to any row, even if it's not yet loaded:
+
+```tsx
+import { useRef, useState } from "react";
+import { DataGrid } from "@versini/ui-datagrid/datagrid";
+import { DataGridHeader } from "@versini/ui-datagrid/header";
+import { DataGridRow } from "@versini/ui-datagrid/row";
+import { DataGridCell } from "@versini/ui-datagrid/cell";
+import {
+  DataGridInfiniteBody,
+  type DataGridInfiniteBodyRef
+} from "@versini/ui-datagrid/infinite";
+
+function MyInfiniteTableWithJump({ data }) {
+  const [activeRowId, setActiveRowId] = useState(null);
+  const infiniteBodyRef = useRef<DataGridInfiniteBodyRef>(null);
+
+  const handleJumpToRow = (targetId) => {
+    // Find the index of the row with the target id
+    const targetIndex = data.findIndex((row) => row.id === targetId);
+    if (targetIndex !== -1) {
+      setActiveRowId(targetId);
+      infiniteBodyRef.current?.scrollToIndex(targetIndex);
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={() => handleJumpToRow(1341)}>
+        Jump to row with id=1341
+      </button>
+
+      <DataGrid maxHeight="400px" stickyHeader>
+        <DataGridHeader>
+          <DataGridRow>
+            <DataGridCell>ID</DataGridCell>
+            <DataGridCell>Name</DataGridCell>
+          </DataGridRow>
+        </DataGridHeader>
+
+        <DataGridInfiniteBody
+          ref={infiniteBodyRef}
+          data={data}
+          batchSize={25}
+        >
+          {(item) => (
+            <DataGridRow
+              key={item.id}
+              active={activeRowId === item.id}
+              onClick={() => setActiveRowId(item.id)}
+            >
+              <DataGridCell>{item.id}</DataGridCell>
+              <DataGridCell>{item.name}</DataGridCell>
+            </DataGridRow>
+          )}
+        </DataGridInfiniteBody>
+      </DataGrid>
+    </div>
+  );
+}
+```
+
+The `scrollToIndex` method:
+- If the row is already visible → smooth scrolls to it immediately
+- If the row is not yet loaded → expands visible count first, then scrolls after render
+
 ## Sorting
 
 ```tsx
@@ -328,14 +395,24 @@ function MySortableTable({ data }) {
 | `className`       | `string`                                        | -              | CSS class for the cell              |
 | `buttonClassName` | `string`                                        | -              | CSS class for the sort button       |
 
-### useInfiniteScroll
+### DataGridInfiniteBody
+
+| Prop                   | Type                                        | Default | Description                                       |
+| ---------------------- | ------------------------------------------- | ------- | ------------------------------------------------- |
+| `data`                 | `T[]`                                       | **required** | The full dataset to render progressively     |
+| `children`             | `(item: T, index: number) => ReactNode`     | **required** | Render function for each row                 |
+| `batchSize`            | `number`                                    | `20`    | Items to show initially and add per scroll        |
+| `threshold`            | `number`                                    | `5`     | Items before marker to allow seamless scrolling   |
+| `rootMargin`           | `string`                                    | `'20px'`| IntersectionObserver margin                       |
+| `onVisibleCountChange` | `(visibleCount: number, total: number) => void` | -   | Callback when visible count changes               |
+| `className`            | `string`                                    | -       | CSS class for the body element                    |
+| `ref`                  | `React.Ref<DataGridInfiniteBodyRef>`        | -       | Ref to access imperative methods                  |
+
+### DataGridInfiniteBodyRef (Imperative Handle)
 
-| Option       | Type     | Default      | Description                      |
-| ------------ | -------- | ------------ | -------------------------------- |
-| `totalItems` | `number` | **required** | Total number of items            |
-| `batchSize`  | `number` | `20`         | Items to load per batch          |
-| `threshold`  | `number` | `5`          | Items before end to trigger load |
-| `rootMargin` | `string` | `'20px'`     | IntersectionObserver margin      |
+| Method          | Signature                    | Description                                              |
+| --------------- | ---------------------------- | -------------------------------------------------------- |
+| `scrollToIndex` | `(index: number) => void`    | Scroll to a row by index. Expands visible count if needed, then smooth scrolls. |
 
 ## License
 

package/dist/DataGrid/DataGrid.js

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

package/dist/DataGrid/DataGridContext.js

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

package/dist/DataGrid/index.js

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

package/dist/DataGridAnimated/AnimatedWrapper.d.ts

@@ -28,16 +28,20 @@ export type AnimatedWrapperProps = {
  *
  * @example
  * ```tsx
- * const { visibleCount } = useInfiniteScroll({ totalItems: data.length });
+ * const [visibleCount, setVisibleCount] = useState(0);
  *
  * return (
  *   <AnimatedWrapper dependency={visibleCount}>
- *     <DataGrid>
- *       <DataGridBody>
- *         {data.slice(0, visibleCount).map((item) => (
- *           <DataGridRow key={item.id}>...</DataGridRow>
- *         ))}
- *       </DataGridBody>
+ *     <DataGrid maxHeight="400px" stickyHeader>
+ *       <DataGridInfiniteBody
+ *         data={largeData}
+ *         batchSize={25}
+ *         onVisibleCountChange={(count) => setVisibleCount(count)}
+ *       >
+ *         {(row) => (
+ *           <DataGridRow key={row.id}>...</DataGridRow>
+ *         )}
+ *       </DataGridInfiniteBody>
  *     </DataGrid>
  *   </AnimatedWrapper>
  * );

package/dist/DataGridAnimated/AnimatedWrapper.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.0
   © 2026 gizmette.com
 */
 
@@ -18,16 +18,20 @@ import { useAnimatedHeight } from "./useAnimatedHeight.js";
  *
  * @example
  * ```tsx
- * const { visibleCount } = useInfiniteScroll({ totalItems: data.length });
+ * const [visibleCount, setVisibleCount] = useState(0);
  *
  * return (
  *   <AnimatedWrapper dependency={visibleCount}>
- *     <DataGrid>
- *       <DataGridBody>
- *         {data.slice(0, visibleCount).map((item) => (
- *           <DataGridRow key={item.id}>...</DataGridRow>
- *         ))}
- *       </DataGridBody>
+ *     <DataGrid maxHeight="400px" stickyHeader>
+ *       <DataGridInfiniteBody
+ *         data={largeData}
+ *         batchSize={25}
+ *         onVisibleCountChange={(count) => setVisibleCount(count)}
+ *       >
+ *         {(row) => (
+ *           <DataGridRow key={row.id}>...</DataGridRow>
+ *         )}
+ *       </DataGridInfiniteBody>
  *     </DataGrid>
  *   </AnimatedWrapper>
  * );

package/dist/DataGridAnimated/index.js

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

package/dist/DataGridAnimated/useAnimatedHeight.js

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

package/dist/DataGridBody/DataGridBody.js

@@ -1,86 +1,42 @@
 /*!
-  @versini/ui-datagrid v0.3.8
+  @versini/ui-datagrid v0.4.0
   © 2026 gizmette.com
 */
 
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useContext, useLayoutEffect, useRef } from "react";
+import { useContext, useRef } from "react";
 import { DataGridContext } from "../DataGrid/DataGridContext.js";
 import { CellWrapper } from "../DataGridConstants/index.js";
+import { getBodyClass } from "./getBodyClass.js";
+import { useColumnMeasurement } from "./useColumnMeasurement.js";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
-;// CONCATENATED MODULE: external "clsx"
-
 ;// CONCATENATED MODULE: external "react"
 
 ;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
 
 ;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
 
+;// CONCATENATED MODULE: external "./getBodyClass.js"
+
+;// CONCATENATED MODULE: external "./useColumnMeasurement.js"
+
 ;// CONCATENATED MODULE: ./src/DataGridBody/DataGridBody.tsx
 
 
 
 
 
+
 /* =============================================================================
  * DataGridBody
  * ========================================================================== */ const DataGridBody = ({ className, children, ...rest })=>{
     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);
+    // Measure column widths for sticky header/footer sync.
+    useColumnMeasurement(bodyRef, children);
+    const bodyClass = getBodyClass(Boolean(ctx.columns), className);
     return /*#__PURE__*/ jsx(DataGridContext.Provider, {
         value: {
             ...ctx,

package/dist/DataGridBody/getBodyClass.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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

@@ -0,0 +1,23 @@
+/*!
+  @versini/ui-datagrid v0.4.0
+  © 2026 gizmette.com
+*/
+
+import clsx from "clsx";
+
+;// CONCATENATED MODULE: external "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.
+ *
+ * @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);
+}
+
+export { getBodyClass };

package/dist/DataGridBody/index.js

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

package/dist/DataGridBody/useColumnMeasurement.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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

@@ -0,0 +1,67 @@
+/*!
+  @versini/ui-datagrid v0.4.0
+  © 2026 gizmette.com
+*/
+
+import { useContext, useLayoutEffect } from "react";
+import { DataGridContext } from "../DataGrid/DataGridContext.js";
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
+
+;// CONCATENATED MODULE: ./src/DataGridBody/useColumnMeasurement.ts
+
+
+/**
+ * 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);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: contentDependency triggers remeasurement when rows change
+    useLayoutEffect(()=>{
+        const element = bodyRef.current;
+        const needsMeasurement = ctx.columns && (ctx.stickyHeader || ctx.stickyFooter);
+        if (!element || !needsMeasurement || !ctx.setMeasuredColumnWidths) {
+            return;
+        }
+        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 = ()=>{
+            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,
+        contentDependency
+    ]);
+}
+
+export { useColumnMeasurement };

package/dist/DataGridCell/DataGridCell.js

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

package/dist/DataGridCell/index.js

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

package/dist/DataGridCellSort/DataGridCellSort.js

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

package/dist/DataGridCellSort/index.js

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

package/dist/DataGridConstants/DataGridConstants.js

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

package/dist/DataGridConstants/index.js

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

package/dist/DataGridFooter/DataGridFooter.js

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

package/dist/DataGridFooter/index.js

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

package/dist/DataGridHeader/DataGridHeader.js

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

package/dist/DataGridHeader/index.js

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

package/dist/DataGridInfinite/DataGridInfiniteBody.d.ts

@@ -0,0 +1,52 @@
+export type DataGridInfiniteBodyProps<T> = {
+    /**
+     * The full dataset to render progressively.
+     */
+    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.
+     */
+    children: (item: T, index: number) => React.ReactNode;
+    /**
+     * Number of items to show initially and to add on each scroll.
+     * @default 20
+     */
+    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.
+     * @default 5
+     */
+    threshold?: number;
+    /**
+     * IntersectionObserver root margin.
+     * @default "20px"
+     */
+    rootMargin?: string;
+    /**
+     * Callback when visible count changes. Useful for displaying count in header.
+     */
+    onVisibleCountChange?: (visibleCount: number, totalItems: number) => void;
+    /**
+     * CSS class to apply to the body.
+     */
+    className?: string;
+};
+/**
+ * Ref handle for DataGridInfiniteBody, exposing imperative methods.
+ */
+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.
+     * @param index - The index of the row to scroll to
+     */
+    scrollToIndex: (index: number) => void;
+};
+/**
+ * DataGridInfiniteBody with forwardRef support for imperative methods.
+ */
+export declare const DataGridInfiniteBody: <T>(props: DataGridInfiniteBodyProps<T> & {
+    ref?: React.ForwardedRef<DataGridInfiniteBodyRef>;
+}) => React.ReactElement;