@versini/ui-datagrid 0.3.7 → 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,13 +1,13 @@
 /*!
-  @versini/ui-datagrid v0.3.7
+  @versini/ui-datagrid v0.4.0
   © 2026 gizmette.com
 */
 
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
 import { BlurEffects } from "../DataGridConstants/DataGridConstants.js";
+import { getDataGridClasses } from "../utilities/classes.js";
 import { DataGridContext } from "./DataGridContext.js";
-import { getDataGridClasses } from "./utilities.js";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
@@ -15,9 +15,9 @@ import { getDataGridClasses } from "./utilities.js";
 
 ;// CONCATENATED MODULE: external "../DataGridConstants/DataGridConstants.js"
 
-;// CONCATENATED MODULE: external "./DataGridContext.js"
+;// CONCATENATED MODULE: external "../utilities/classes.js"
 
-;// CONCATENATED MODULE: external "./utilities.js"
+;// CONCATENATED MODULE: external "./DataGridContext.js"
 
 ;// CONCATENATED MODULE: ./src/DataGrid/DataGrid.tsx
 
@@ -42,9 +42,9 @@ import { getDataGridClasses } from "./utilities.js";
 	 */ const [headerHeight, setHeaderHeight] = useState(0);
     const [footerHeight, setFooterHeight] = useState(0);
     /**
-	 * Track measured column widths from the body. Used by sticky header/footer
-	 * to sync column widths since absolutely positioned elements can't use
-	 * CSS subgrid.
+	 * Track measured column widths from the body. Used by sticky header/footer to
+	 * sync column widths since absolutely positioned elements can't use CSS
+	 * subgrid.
 	 */ const [measuredColumnWidths, setMeasuredColumnWidths] = useState([]);
     /**
 	 * Registration callbacks with stable references. Called by

package/dist/DataGrid/DataGridContext.js

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

package/dist/DataGrid/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.3.7
+  @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.7
+  @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.7
+  @versini/ui-datagrid v0.4.0
   © 2026 gizmette.com
 */
 

package/dist/DataGridAnimated/useAnimatedHeight.js

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

package/dist/DataGridBody/DataGridBody.js

@@ -1,84 +1,42 @@
 /*!
-  @versini/ui-datagrid v0.3.7
+  @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.7
+  @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.d.ts

@@ -1,12 +1,2 @@
 import type { DataGridCellProps } from "../DataGrid/DataGridTypes";
-import { type CellWrapperType, type ThemeMode } from "../DataGridConstants";
-export declare const getCellClasses: ({ cellWrapper, className, compact, align, mode, borderLeft, borderRight, }: {
-    cellWrapper?: CellWrapperType;
-    className?: string;
-    mode?: ThemeMode;
-    compact?: boolean;
-    align?: "left" | "center" | "right";
-    borderLeft?: boolean;
-    borderRight?: boolean;
-}) => string;
 export declare const DataGridCell: ({ className, children, align, borderLeft, borderRight, colSpan, style, ...rest }: DataGridCellProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataGridCell/DataGridCell.js

@@ -1,76 +1,22 @@
 /*!
-  @versini/ui-datagrid v0.3.7
+  @versini/ui-datagrid v0.4.0
   © 2026 gizmette.com
 */
 
 import { jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
 import { DataGridContext } from "../DataGrid/DataGridContext.js";
-import { CellWrapper } from "../DataGridConstants/index.js";
+import { getCellClasses, getCellRole } from "../utilities/classes.js";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
-;// CONCATENATED MODULE: external "clsx"
-
 ;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
 
-;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
+;// CONCATENATED MODULE: external "../utilities/classes.js"
 
 ;// CONCATENATED MODULE: ./src/DataGridCell/DataGridCell.tsx
 
 
 
-
-const getCellClasses = ({ cellWrapper, className, compact, align, mode, borderLeft, borderRight })=>{
-    const isHeader = cellWrapper === CellWrapper.HEADER;
-    const mainClasses = clsx(// Base padding.
-    {
-        "px-2 py-1": compact,
-        "px-4 py-3": !compact
-    }, // Text alignment.
-    {
-        "text-left justify-start": align === "left" || !align,
-        "text-center justify-center": align === "center",
-        "text-right justify-end": align === "right"
-    }, // Header/footer specific styles.
-    {
-        "font-semibold": isHeader
-    }, /**
-		 * Active row indicator (left border on first cell only).
-		 * Uses CSS group-data-[active] to detect when parent row has data-active attribute.
-		 * The `first:` variant ensures only the first cell in the row shows the indicator.
-		 */ "first:group-data-[active]:relative", "first:group-data-[active]:before:absolute first:group-data-[active]:before:left-0 first:group-data-[active]:before:top-0 first:group-data-[active]:before:bottom-0 first:group-data-[active]:before:w-1", "first:group-data-[active]:self-stretch first:group-data-[active]:flex first:group-data-[active]:items-center", // Active indicator color based on theme mode.
-    {
-        "first:group-data-[active]:before:bg-table-active-dark": mode === "dark",
-        "first:group-data-[active]:before:bg-table-active-light": mode === "light",
-        "first:group-data-[active]:before:bg-table-active-dark dark:first:group-data-[active]:before:bg-table-active-light": mode === "system",
-        "first:group-data-[active]:before:bg-table-active-light dark:first:group-data-[active]:before:bg-table-active-dark": mode === "alt-system"
-    }, /**
-		 * Vertical borders. self-stretch ensures border spans full row height in
-		 * grid layout. When stretching, use flex + items-center to maintain
-		 * vertical centering of content.
-		 */ {
-        "self-stretch flex items-center": borderLeft || borderRight,
-        "border-l border-l-table-dark": borderLeft && mode === "dark",
-        "border-l border-l-table-light": borderLeft && mode === "light",
-        "border-l border-l-table-dark dark:border-l-table-light": borderLeft && mode === "system",
-        "border-l border-l-table-light dark:border-l-table-dark": borderLeft && mode === "alt-system",
-        "border-r border-r-table-dark": borderRight && mode === "dark",
-        "border-r border-r-table-light": borderRight && mode === "light",
-        "border-r border-r-table-dark dark:border-r-table-light": borderRight && mode === "system",
-        "border-r border-r-table-light dark:border-r-table-dark": borderRight && mode === "alt-system"
-    }, className);
-    return mainClasses;
-};
-/**
- * Returns the appropriate ARIA role for the cell based on the cell wrapper
- * type.
- */ const getCellRole = (cellWrapper)=>{
-    if (cellWrapper === CellWrapper.HEADER) {
-        return "columnheader";
-    }
-    return "gridcell";
-};
 /* =============================================================================
  * DataGridCell
  * ========================================================================== */ const DataGridCell = ({ className, children, align, borderLeft, borderRight, colSpan, style, ...rest })=>{
@@ -102,4 +48,4 @@ const getCellClasses = ({ cellWrapper, className, compact, align, mode, borderLe
     });
 };
 
-export { DataGridCell, getCellClasses };
+export { DataGridCell };

package/dist/DataGridCell/index.js

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