@versini/ui-datagrid 0.1.0 → 0.2.0

package/README.md

@@ -1,8 +1,9 @@
 # @versini/ui-datagrid
 
-A high-performance data grid component library for React with support for:
+A data grid component library for React built with div-based ARIA grid layout for maximum flexibility and accessibility. Features include:
 
-- **Virtualization**: Efficiently render thousands of rows using TanStack Virtual
+- **Accessible**: Uses ARIA grid roles for screen reader support
+- **Flexible Layout**: Div-based structure allows for complex styling
 - **Infinite Scrolling**: Progressive loading with IntersectionObserver
 - **Animated Height**: Smooth height transitions when content changes
 - **Sorting**: Built-in sorting utilities and sortable column headers
@@ -39,12 +40,6 @@ import {
   InfiniteScrollMarker
 } from "@versini/ui-datagrid/infinite";
 
-// True virtualization for large datasets
-import {
-  VirtualDataGrid,
-  useVirtualDataGrid
-} from "@versini/ui-datagrid/virtual";
-
 // Animated height wrapper
 import {
   AnimatedWrapper,
@@ -152,31 +147,6 @@ function MyInfiniteTable({ data }) {
 }
 ```
 
-## Virtualization for Large Datasets
-
-For datasets with 1000+ rows, use true virtualization:
-
-```tsx
-import { VirtualDataGrid } from "@versini/ui-datagrid/virtual";
-
-function MyVirtualTable({ data }) {
-  return (
-    <VirtualDataGrid
-      data={data}
-      height="500px"
-      columns={[
-        { id: "name", header: "Name", cell: (item) => item.name },
-        { id: "email", header: "Email", cell: (item) => item.email },
-        { id: "date", header: "Date", cell: (item) => formatDate(item.date) }
-      ]}
-      getRowKey={(item) => item.id}
-      estimateSize={48}
-      overscan={10}
-    />
-  );
-}
-```
-
 ## Sorting
 
 ```tsx
@@ -279,16 +249,6 @@ function MySortableTable({ data }) {
 | `threshold`  | `number` | `5`          | Items before end to trigger load |
 | `rootMargin` | `string` | `'20px'`     | IntersectionObserver margin      |
 
-### VirtualDataGrid
-
-| Prop           | Type                         | Default      | Description                     |
-| -------------- | ---------------------------- | ------------ | ------------------------------- |
-| `data`         | `T[]`                        | **required** | Array of data items             |
-| `columns`      | `VirtualDataGridColumn<T>[]` | **required** | Column definitions              |
-| `height`       | `string \| number`           | **required** | Container height                |
-| `estimateSize` | `number`                     | `40`         | Estimated row height            |
-| `overscan`     | `number`                     | `5`          | Rows to render outside viewport |
-
 ## License
 
 MIT

package/dist/DataGrid/DataGrid.d.ts

@@ -1,2 +1,2 @@
 import type { DataGridProps } from "./DataGridTypes";
-export declare const DataGrid: ({ caption, className, wrapperClassName, children, mode, compact, stickyHeader, stickyFooter, blurEffect, maxHeight, disabled, ...rest }: DataGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGrid: ({ caption, className, wrapperClassName, children, mode, compact, stickyHeader, stickyFooter, blurEffect, maxHeight, disabled, columns, ...rest }: DataGridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataGrid/DataGrid.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.1.0
+  @versini/ui-datagrid v0.2.0
   © 2026 gizmette.com
 */
 
@@ -27,7 +27,7 @@ import { getDataGridClasses } from "./utilities.js";
 
 /* =============================================================================
  * DataGrid (main component)
- * ========================================================================== */ const DataGrid = ({ caption, className, wrapperClassName, children, mode = "system", compact = false, stickyHeader = false, stickyFooter = false, blurEffect = BlurEffects.NONE, maxHeight, disabled = false, ...rest })=>{
+ * ========================================================================== */ const DataGrid = ({ caption, className, wrapperClassName, children, mode = "system", compact = false, stickyHeader = false, stickyFooter = false, blurEffect = BlurEffects.NONE, maxHeight, disabled = false, columns, ...rest })=>{
     const captionId = useId();
     const classes = useMemo(()=>getDataGridClasses({
             mode,
@@ -35,14 +35,18 @@ import { getDataGridClasses } from "./utilities.js";
             wrapperClassName,
             stickyHeader,
             stickyFooter,
-            disabled
+            disabled,
+            hasCaption: Boolean(caption),
+            hasColumns: Boolean(columns)
         }), [
         mode,
         className,
         wrapperClassName,
         stickyHeader,
         stickyFooter,
-        disabled
+        disabled,
+        caption,
+        columns
     ]);
     const contextValue = useMemo(()=>({
             mode,
@@ -50,14 +54,18 @@ import { getDataGridClasses } from "./utilities.js";
             stickyHeader,
             stickyFooter,
             blurEffect,
-            disabled
+            disabled,
+            hasCaption: Boolean(caption),
+            columns
         }), [
         mode,
         compact,
         stickyHeader,
         stickyFooter,
         blurEffect,
-        disabled
+        disabled,
+        caption,
+        columns
     ]);
     const wrapperStyle = maxHeight ? {
         maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
@@ -67,6 +75,20 @@ import { getDataGridClasses } from "./utilities.js";
 	 * wrapper has overflow-hidden - Scrollable content area in the middle with
 	 * padding - Header/footer are absolutely positioned.
 	 */ const hasSticky = stickyHeader || stickyFooter;
+    /**
+	 * When columns are provided, apply grid-template-columns at the grid level
+	 * so all rows can use subgrid to inherit the same column sizing.
+	 */ const gridStyle = columns ? {
+        gridTemplateColumns: columns.join(" ")
+    } : undefined;
+    const gridContent = /*#__PURE__*/ jsx("div", {
+        role: "grid",
+        className: classes.grid,
+        "aria-labelledby": caption ? captionId : undefined,
+        style: gridStyle,
+        ...rest,
+        children: children
+    });
     return /*#__PURE__*/ jsx(DataGridContext.Provider, {
         value: contextValue,
         children: /*#__PURE__*/ jsxs("div", {
@@ -91,38 +113,21 @@ import { getDataGridClasses } from "./utilities.js";
                         })
                     ]
                 }),
-                /*#__PURE__*/ jsx("div", {
+                /*#__PURE__*/ jsxs("div", {
                     className: classes.wrapper,
                     style: wrapperStyle,
-                    children: hasSticky ? /*#__PURE__*/ jsx("div", {
-                        className: classes.scrollableContent,
-                        style: wrapperStyle,
-                        children: /*#__PURE__*/ jsxs("table", {
-                            className: classes.table,
-                            "aria-describedby": caption ? captionId : undefined,
-                            ...rest,
-                            children: [
-                                caption && /*#__PURE__*/ jsx("caption", {
-                                    id: captionId,
-                                    className: classes.caption,
-                                    children: caption
-                                }),
-                                children
-                            ]
-                        })
-                    }) : /*#__PURE__*/ jsxs("table", {
-                        className: classes.table,
-                        "aria-describedby": caption ? captionId : undefined,
-                        ...rest,
-                        children: [
-                            caption && /*#__PURE__*/ jsx("caption", {
-                                id: captionId,
-                                className: classes.caption,
-                                children: caption
-                            }),
-                            children
-                        ]
-                    })
+                    children: [
+                        caption && /*#__PURE__*/ jsx("div", {
+                            id: captionId,
+                            className: classes.caption,
+                            children: caption
+                        }),
+                        hasSticky ? /*#__PURE__*/ jsx("div", {
+                            className: classes.scrollableContent,
+                            style: wrapperStyle,
+                            children: gridContent
+                        }) : gridContent
+                    ]
                 })
             ]
         })

package/dist/DataGrid/DataGridContext.js

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

package/dist/DataGrid/index.js

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

package/dist/DataGrid/utilities.d.ts

@@ -5,17 +5,28 @@ import { type BlurEffect, type ThemeMode } from "../DataGridConstants/DataGridCo
 export declare const getStickyBlurClasses: ({ blurEffect, }: {
     blurEffect?: BlurEffect;
 }) => string;
+export declare const getCaptionBackgroundClasses: ({ mode }: {
+    mode: ThemeMode;
+}) => string;
+export declare const getCaptionCopyClasses: ({ mode }: {
+    mode: ThemeMode;
+}) => string;
 /**
- * Generates classes for the main DataGrid wrapper and table. When sticky
+ * Generates classes for the main DataGrid wrapper and grid. When sticky
  * header/footer is enabled, uses the Panel-like approach:
  * - Outer wrapper has overflow-hidden
  * - Scrollable area is a separate inner container
  * - Header/footer are absolutely positioned overlays
+ *
+ * When columns prop is provided, the grid uses CSS Grid layout with subgrid
+ * support for proper column alignment across all rows.
  */
-export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, }: {
+export declare const getDataGridClasses: ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, hasCaption, hasColumns, }: {
     mode: ThemeMode;
     className?: string;
     disabled?: boolean;
+    hasCaption?: boolean;
+    hasColumns?: boolean;
     stickyFooter?: boolean;
     stickyHeader?: boolean;
     wrapperClassName?: string;
@@ -29,8 +40,13 @@ export declare const getDataGridClasses: ({ mode, className, wrapperClassName, s
      * Scrollable content area - like Panel's scrollableContent Has padding to
      * make room for absolutely positioned header/footer rounded-[inherit] clips
      * the scrollbar at the rounded corners.
+     * When there's a caption, add extra padding for caption (~36px) + header (~40px).
      */
     scrollableContent: string;
-    table: string;
+    /**
+     * When columns are provided, use CSS Grid so rows can use subgrid for
+     * consistent column alignment. Otherwise, use flexbox.
+     */
+    grid: string;
     caption: string;
 };

package/dist/DataGrid/utilities.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.1.0
+  @versini/ui-datagrid v0.2.0
   © 2026 gizmette.com
 */
 
@@ -44,13 +44,32 @@ import { BlurEffects } from "../DataGridConstants/DataGridConstants.js";
         "backdrop-blur-lg": blurEffect === BlurEffects.LARGE
     });
 };
+const getCaptionBackgroundClasses = ({ mode })=>{
+    return clsx({
+        "bg-surface-darker": mode === "dark" || mode === "system",
+        "bg-surface-light": mode === "light" || mode === "alt-system",
+        "dark:bg-surface-light": mode === "system",
+        "dark:bg-surface-darker": mode === "alt-system"
+    });
+};
+const getCaptionCopyClasses = ({ mode })=>{
+    return clsx({
+        "text-copy-light": mode === "dark",
+        "text-copy-dark": mode === "light",
+        "text-copy-light dark:text-copy-dark": mode === "system",
+        "text-copy-dark dark:text-copy-light": mode === "alt-system"
+    });
+};
 /**
- * Generates classes for the main DataGrid wrapper and table. When sticky
+ * Generates classes for the main DataGrid wrapper and grid. When sticky
  * header/footer is enabled, uses the Panel-like approach:
  * - Outer wrapper has overflow-hidden
  * - Scrollable area is a separate inner container
  * - Header/footer are absolutely positioned overlays
- */ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled })=>{
+ *
+ * When columns prop is provided, the grid uses CSS Grid layout with subgrid
+ * support for proper column alignment across all rows.
+ */ const getDataGridClasses = ({ mode, className, wrapperClassName, stickyHeader, stickyFooter, disabled, hasCaption, hasColumns })=>{
     const overlayClasses = disabled ? getOverlayClasses({
         mode
     }) : null;
@@ -77,23 +96,30 @@ import { BlurEffects } from "../DataGridConstants/DataGridConstants.js";
 		 * Scrollable content area - like Panel's scrollableContent Has padding to
 		 * make room for absolutely positioned header/footer rounded-[inherit] clips
 		 * the scrollbar at the rounded corners.
+		 * When there's a caption, add extra padding for caption (~36px) + header (~40px).
 		 */ scrollableContent: clsx("overflow-y-auto overflow-x-hidden rounded-[inherit]", {
-            "pt-10": stickyHeader,
+            "pt-10": stickyHeader && !hasCaption,
+            "pt-19": stickyHeader && hasCaption,
             "pb-10": stickyFooter
         }),
-        table: clsx("my-0 w-full text-left text-sm", className, {
+        /**
+		 * When columns are provided, use CSS Grid so rows can use subgrid for
+		 * consistent column alignment. Otherwise, use flexbox.
+		 */ grid: clsx("my-0 w-full text-left text-sm", hasColumns ? "grid" : "flex flex-col", className, {
             "text-copy-light": mode === "dark",
             "text-copy-dark": mode === "light",
             "text-copy-light dark:text-copy-dark": mode === "system",
             "text-copy-dark dark:text-copy-light": mode === "alt-system"
         }),
-        caption: clsx("py-2 text-sm font-bold", {
-            "text-copy-light": mode === "dark",
-            "text-copy-dark": mode === "light",
-            "text-copy-light dark:text-copy-dark": mode === "system",
-            "text-copy-dark dark:text-copy-light": mode === "alt-system"
-        })
+        caption: clsx("py-2 text-sm text-center font-bold", {
+            // When stickyHeader is enabled, caption is absolutely positioned at top
+            "absolute left-0 right-0 z-20 top-0 rounded-t-lg": stickyHeader
+        }, getCaptionBackgroundClasses({
+            mode
+        }), getCaptionCopyClasses({
+            mode
+        }))
     };
 };
 
-export { getDataGridClasses, getStickyBlurClasses };
+export { getCaptionBackgroundClasses, getCaptionCopyClasses, getDataGridClasses, getStickyBlurClasses };

package/dist/DataGridAnimated/AnimatedWrapper.js

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

package/dist/DataGridAnimated/index.js

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

package/dist/DataGridAnimated/useAnimatedHeight.js

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

package/dist/DataGridBody/DataGridBody.js

@@ -1,14 +1,17 @@
 /*!
-  @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 { CellWrapper } from "../DataGridConstants/index.js";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
+;// CONCATENATED MODULE: external "clsx"
+
 ;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
 
 ;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
@@ -17,21 +20,29 @@ import { CellWrapper } from "../DataGridConstants/index.js";
 
 
 
+
 /* =============================================================================
  * DataGridBody
  * ========================================================================== */ const DataGridBody = ({ className, children, ...rest })=>{
     return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
-        children: (ctx)=>/*#__PURE__*/ jsx(DataGridContext.Provider, {
+        children: (ctx)=>{
+            /**
+				 * 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);
+            return /*#__PURE__*/ jsx(DataGridContext.Provider, {
                 value: {
                     ...ctx,
                     cellWrapper: CellWrapper.BODY
                 },
-                children: /*#__PURE__*/ jsx("tbody", {
-                    className: className,
+                children: /*#__PURE__*/ jsx("div", {
+                    role: "rowgroup",
+                    className: bodyClass,
                     ...rest,
                     children: children
                 })
-            })
+            });
+        }
     });
 };
 

package/dist/DataGridBody/index.js

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

package/dist/DataGridCell/DataGridCell.d.ts

@@ -7,8 +7,5 @@ export declare const getCellClasses: ({ cellWrapper, className, compact, align,
     compact?: boolean;
     align?: "left" | "center" | "right";
     active?: boolean;
-}) => {
-    mainClasses: string;
-    alignClasses: string;
-};
-export declare const DataGridCell: ({ className, children, align, active, component, ...rest }: DataGridCellProps) => import("react/jsx-runtime").JSX.Element;
+}) => string;
+export declare const DataGridCell: ({ className, children, align, active, colSpan, style, ...rest }: DataGridCellProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataGridCell/DataGridCell.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v0.1.0
+  @versini/ui-datagrid v0.2.0
   © 2026 gizmette.com
 */
 
@@ -27,6 +27,11 @@ const getCellClasses = ({ cellWrapper, className, compact, align, active, mode }
     {
         "px-2 py-1": compact,
         "px-4 py-3": !compact
+    }, // Text alignment.
+    {
+        "text-left": align === "left" || !align,
+        "text-center": align === "center",
+        "text-right": align === "right"
     }, // Header/footer specific styles.
     {
         "font-semibold": isHeader
@@ -38,22 +43,22 @@ const getCellClasses = ({ cellWrapper, className, compact, align, active, mode }
         "before:bg-table-active-dark dark:before:bg-table-active-light": active && mode === "system",
         "before:bg-table-active-light dark:before:bg-table-active-dark": active && mode === "alt-system"
     }, className);
-    const alignClasses = clsx("flex", {
-        "justify-start": align === "left" || !align,
-        "justify-center": align === "center",
-        "justify-end": align === "right"
-    });
-    return {
-        mainClasses,
-        alignClasses
-    };
+    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, active, component, ...rest })=>{
+ * ========================================================================== */ const DataGridCell = ({ className, children, align, active, colSpan, style, ...rest })=>{
     return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
         children: ({ mode, compact, cellWrapper })=>{
-            const { mainClasses, alignClasses } = getCellClasses({
+            const mainClasses = getCellClasses({
                 cellWrapper,
                 className,
                 mode,
@@ -61,14 +66,18 @@ const getCellClasses = ({ cellWrapper, className, compact, align, active, mode }
                 align,
                 active
             });
-            const Component = component || (cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER ? "th" : "td");
-            return /*#__PURE__*/ jsx(Component, {
+            const role = getCellRole(cellWrapper);
+            // Apply grid-column span for colSpan > 1
+            const cellStyle = colSpan && colSpan > 1 ? {
+                ...style,
+                gridColumn: `span ${colSpan}`
+            } : style;
+            return /*#__PURE__*/ jsx("div", {
+                role: role,
                 className: mainClasses,
+                style: cellStyle,
                 ...rest,
-                children: /*#__PURE__*/ jsx("div", {
-                    className: alignClasses,
-                    children: children
-                })
+                children: children
             });
         }
     });

package/dist/DataGridCell/index.js

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

package/dist/DataGridCellSort/DataGridCellSort.d.ts

@@ -1,2 +1,2 @@
 import type { DataGridCellSortProps } from "../DataGrid/DataGridTypes";
-export declare const DataGridCellSort: ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, focusMode, ...rest }: DataGridCellSortProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridCellSort: ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, focusMode, align, ...rest }: DataGridCellSortProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DataGridCellSort/DataGridCellSort.js

@@ -1,14 +1,14 @@
 /*!
-  @versini/ui-datagrid v0.1.0
+  @versini/ui-datagrid v0.2.0
   © 2026 gizmette.com
 */
 
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ButtonSort_private } from "@versini/ui-button/private";
 import { IconSort, IconSortDown, IconSortUp } from "@versini/ui-icons";
+import clsx from "clsx";
 import { DataGridContext } from "../DataGrid/DataGridContext.js";
 import { getCellClasses } from "../DataGridCell/DataGridCell.js";
-import { CellWrapper } from "../DataGridConstants/index.js";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
@@ -16,12 +16,12 @@ import { CellWrapper } from "../DataGridConstants/index.js";
 
 ;// CONCATENATED MODULE: external "@versini/ui-icons"
 
+;// CONCATENATED MODULE: external "clsx"
+
 ;// CONCATENATED MODULE: external "../DataGrid/DataGridContext.js"
 
 ;// CONCATENATED MODULE: external "../DataGridCell/DataGridCell.js"
 
-;// CONCATENATED MODULE: external "../DataGridConstants/index.js"
-
 ;// CONCATENATED MODULE: ./src/DataGridCellSort/DataGridCellSort.tsx
 
 
@@ -31,7 +31,7 @@ import { CellWrapper } from "../DataGridConstants/index.js";
 
 /* =============================================================================
  * DataGridCellSort
- * ========================================================================== */ const DataGridCellSort = ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, focusMode = "alt-system", ...rest })=>{
+ * ========================================================================== */ const DataGridCellSort = ({ className, children, cellId, onSort, sortDirection, sortedCell, slotLeft, slotRight, buttonClassName, focusMode = "alt-system", align, ...rest })=>{
     const isSorted = sortedCell === cellId;
     const handleSort = ()=>{
         if (onSort) {
@@ -69,20 +69,26 @@ import { CellWrapper } from "../DataGridConstants/index.js";
     };
     return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
         children: ({ mode, compact, cellWrapper })=>{
-            const { mainClasses, alignClasses } = getCellClasses({
+            const mainClasses = getCellClasses({
                 cellWrapper,
                 className,
                 mode,
-                compact
+                compact,
+                align
+            });
+            // Flex container for alignment of button within the cell
+            const contentClasses = clsx("flex", {
+                "justify-start": align === "left" || !align,
+                "justify-center": align === "center",
+                "justify-end": align === "right"
             });
-            const Component = cellWrapper === CellWrapper.HEADER || cellWrapper === CellWrapper.FOOTER ? "th" : "td";
-            return /*#__PURE__*/ jsx(Component, {
+            return /*#__PURE__*/ jsx("div", {
                 className: mainClasses,
                 role: "columnheader",
                 "aria-sort": getAriaSort(),
                 ...rest,
                 children: /*#__PURE__*/ jsxs("div", {
-                    className: alignClasses,
+                    className: contentClasses,
                     children: [
                         slotLeft,
                         /*#__PURE__*/ jsx(ButtonSort_private, {
@@ -92,7 +98,6 @@ import { CellWrapper } from "../DataGridConstants/index.js";
                             noBorder: true,
                             focusMode: focusMode,
                             mode: mode,
-                            fullWidth: true,
                             labelRight: children,
                             children: getSortIcon()
                         }),

package/dist/DataGridCellSort/index.js

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

package/dist/DataGridConstants/DataGridConstants.js

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

package/dist/DataGridConstants/index.js

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