@onesaz/ui 0.3.12 → 0.3.15

package/dist/index.js

@@ -3474,6 +3474,27 @@ import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-r
 function isMultipleProps(props) {
   return props.multiple === true;
 }
+function Adornment({
+  children,
+  onClick,
+  className
+}) {
+  if (onClick) {
+    return /* @__PURE__ */ jsx34(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onClick(e);
+        },
+        className: cn("shrink-0 rounded p-0.5 hover:bg-muted", className),
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx34("span", { className: cn("shrink-0 pointer-events-none opacity-50", className), children });
+}
 var Combobox = React34.forwardRef(
   (props, ref) => {
     const {
@@ -3484,7 +3505,11 @@ var Combobox = React34.forwardRef(
       disabled = false,
       clearable = true,
       openOnFocus = true,
-      className
+      className,
+      startAdornment,
+      onStartAdornmentClick,
+      endAdornment,
+      onEndAdornmentClick
     } = props;
     const labelKey = props.labelKey ?? "label";
     const valueKey = props.valueKey ?? "value";
@@ -3645,7 +3670,7 @@ var Combobox = React34.forwardRef(
           disabled,
           onClick: () => setOpen(!open),
           className: cn(
-            "flex min-h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm",
+            "flex min-h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm text-left",
             "ring-offset-background",
             "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
             "disabled:cursor-not-allowed disabled:opacity-50",
@@ -3653,6 +3678,7 @@ var Combobox = React34.forwardRef(
             className
           ),
           children: [
+            startAdornment && /* @__PURE__ */ jsx34(Adornment, { onClick: onStartAdornmentClick, className: "mr-1.5", children: startAdornment }),
             isMultiple ? /* @__PURE__ */ jsx34("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx34("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs19(Fragment4, { children: [
               displayedOptions.map((option) => /* @__PURE__ */ jsxs19(
                 "span",
@@ -3692,7 +3718,7 @@ var Combobox = React34.forwardRef(
                 remainingCount,
                 " more"
               ] })
-            ] }) }) : /* @__PURE__ */ jsx34("span", { className: cn(!singleValue && "text-muted-foreground"), children: singleValue ? getOptionLabel(singleValue) : placeholder }),
+            ] }) }) : /* @__PURE__ */ jsx34("span", { className: cn("flex-1", !singleValue && "text-muted-foreground"), children: singleValue ? getOptionLabel(singleValue) : placeholder }),
             /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1", children: [
               isMultiple && selectedOptions.length > 0 && /* @__PURE__ */ jsx34(
                 "button",
@@ -3743,6 +3769,7 @@ var Combobox = React34.forwardRef(
                   )
                 }
               ),
+              endAdornment && /* @__PURE__ */ jsx34(Adornment, { onClick: onEndAdornmentClick, children: endAdornment }),
               /* @__PURE__ */ jsx34(
                 "svg",
                 {
@@ -4001,7 +4028,9 @@ function convertColumns(columns, checkboxSelection) {
         wrapText: col.wrapText,
         scrollable: col.scrollable,
         maxCellHeight: col.maxCellHeight,
-        cellClassName: col.cellClassName
+        cellClassName: col.cellClassName,
+        colSpan: col.colSpan,
+        rowSpan: col.rowSpan
       }
     };
     tanstackColumns.push(tanstackCol);
@@ -4138,7 +4167,7 @@ var ColumnVisibilityDropdown = ({
       }
     ),
     open && /* @__PURE__ */ jsxs20("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[180px] rounded-md border border-border bg-popover p-2 shadow-md", children: [
-      /* @__PURE__ */ jsx35("div", { className: "text-sm font-medium text-foreground mb-2 px-2", children: "Show/Hide Columns" }),
+      /* @__PURE__ */ jsx35("div", { className: "text-xs font-medium text-foreground mb-2 px-2", children: "Show/Hide Columns" }),
       /* @__PURE__ */ jsx35("div", { className: "max-h-[300px] overflow-auto", children: allColumns.map((column) => {
         const meta = column.columnDef.meta;
         const headerName = meta?.headerName || column.id;
@@ -4154,7 +4183,7 @@ var ColumnVisibilityDropdown = ({
                   onChange: (e) => column.toggleVisibility(e.target.checked)
                 }
               ),
-              /* @__PURE__ */ jsx35("span", { className: "text-sm", children: headerName })
+              /* @__PURE__ */ jsx35("span", { className: "text-xs", children: headerName })
             ]
           },
           column.id
@@ -4222,19 +4251,19 @@ var DataGridPagination = ({
   const startRow = currentPage * pageSize + 1;
   const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
   return /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: [
-    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 text-sm text-muted-foreground whitespace-nowrap", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 text-xs text-muted-foreground whitespace-nowrap", children: [
       /* @__PURE__ */ jsx35("span", { children: "Rows per page:" }),
       /* @__PURE__ */ jsx35(
         "select",
         {
           value: pageSize,
           onChange: (e) => table.setPageSize(Number(e.target.value)),
-          className: "h-8 rounded-md border border-border bg-background px-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+          className: "h-8 rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
           children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx35("option", { value: size, children: size }, size))
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs20("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: [
+    /* @__PURE__ */ jsxs20("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
       startRow,
       "-",
       endRow,
@@ -4373,7 +4402,7 @@ var ExportDropdown = ({
       /* @__PURE__ */ jsxs20(
         "button",
         {
-          className: "flex w-full items-center gap-2 rounded px-3 py-2 text-sm hover:bg-muted",
+          className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
           onClick: exportToCSV,
           children: [
             /* @__PURE__ */ jsxs20("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
@@ -4387,7 +4416,7 @@ var ExportDropdown = ({
       onExport && /* @__PURE__ */ jsxs20(
         "button",
         {
-          className: "flex w-full items-center gap-2 rounded px-3 py-2 text-sm hover:bg-muted",
+          className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
           onClick: handleCustomExport,
           children: [
             /* @__PURE__ */ jsxs20("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
@@ -4434,7 +4463,7 @@ var MoreOptionsDropdown = ({
     open && /* @__PURE__ */ jsx35("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-md border border-border bg-popover p-1 shadow-md", children: options.map((option, index) => /* @__PURE__ */ jsxs20(
       "button",
       {
-        className: "flex w-full items-center gap-2 rounded px-3 py-2 text-sm hover:bg-muted",
+        className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
         onClick: () => {
           option.onClick();
           setOpen(false);
@@ -4490,6 +4519,59 @@ var DataGridToolbar = ({
     ] })
   ] });
 };
+function computeRowSpanMap(rows, columns) {
+  const rowSpanColumns = columns.filter((col) => col.rowSpan);
+  if (rowSpanColumns.length === 0) return void 0;
+  const map = /* @__PURE__ */ new Map();
+  rowSpanColumns.forEach((col) => {
+    const colMap = /* @__PURE__ */ new Map();
+    const field = col.field;
+    if (typeof col.rowSpan === "function") {
+      const rowSpanFn = col.rowSpan;
+      let i = 0;
+      while (i < rows.length) {
+        const row = rows[i];
+        const value = row.original ? row.original[field] : row[field];
+        const span = rowSpanFn({ row: row.original || row, value, field, rowIndex: i });
+        if (span && span > 1) {
+          colMap.set(i, span);
+          for (let j = 1; j < span && i + j < rows.length; j++) {
+            colMap.set(i + j, 0);
+          }
+          i += span;
+        } else {
+          colMap.set(i, 1);
+          i++;
+        }
+      }
+    } else if (col.rowSpan === true) {
+      let i = 0;
+      while (i < rows.length) {
+        const row = rows[i];
+        const value = row.original ? row.original[field] : row[field];
+        let span = 1;
+        while (i + span < rows.length) {
+          const nextRow = rows[i + span];
+          const nextValue = nextRow.original ? nextRow.original[field] : nextRow[field];
+          if (nextValue === value) {
+            span++;
+          } else {
+            break;
+          }
+        }
+        colMap.set(i, span);
+        for (let j = 1; j < span; j++) {
+          colMap.set(i + j, 0);
+        }
+        i += span;
+      }
+    }
+    if (colMap.size > 0) {
+      map.set(field, colMap);
+    }
+  });
+  return map.size > 0 ? map : void 0;
+}
 var RowRenderer = ({
   row,
   rowIndex,
@@ -4502,9 +4584,36 @@ var RowRenderer = ({
   globalWrapText = false,
   columnWidths,
   pinnedColumnOffsets,
-  isPinnedRow = false
+  isPinnedRow = false,
+  rowSpanMap,
+  gridColumns
 }) => {
   const customClassName = getRowClassName?.({ row: row.original, rowIndex });
+  const visibleCells = row.getVisibleCells();
+  const colSpanSkipSet = /* @__PURE__ */ new Set();
+  const colSpanValues = /* @__PURE__ */ new Map();
+  if (gridColumns) {
+    visibleCells.forEach((cell, cellIndex) => {
+      if (colSpanSkipSet.has(cellIndex)) return;
+      const meta = cell.column.columnDef.meta;
+      const colSpanDef = meta?.colSpan;
+      if (colSpanDef) {
+        const value = cell.getValue();
+        let span;
+        if (typeof colSpanDef === "function") {
+          span = colSpanDef({ row: row.original, value, field: cell.column.id, rowIndex });
+        } else if (typeof colSpanDef === "number") {
+          span = colSpanDef;
+        }
+        if (span && span > 1) {
+          colSpanValues.set(cellIndex, span);
+          for (let j = 1; j < span && cellIndex + j < visibleCells.length; j++) {
+            colSpanSkipSet.add(cellIndex + j);
+          }
+        }
+      }
+    });
+  }
   return /* @__PURE__ */ jsx35(
     "tr",
     {
@@ -4521,7 +4630,16 @@ var RowRenderer = ({
           row.toggleSelected();
         }
       },
-      children: row.getVisibleCells().map((cell) => {
+      children: visibleCells.map((cell, cellIndex) => {
+        if (colSpanSkipSet.has(cellIndex)) return null;
+        const colId = cell.column.id;
+        if (rowSpanMap) {
+          const colRowSpan = rowSpanMap.get(colId);
+          if (colRowSpan) {
+            const spanValue = colRowSpan.get(rowIndex);
+            if (spanValue === 0) return null;
+          }
+        }
         const meta = cell.column.columnDef.meta;
         const align = meta?.align || "left";
         const wrapText = meta?.wrapText !== void 0 ? meta.wrapText : globalWrapText;
@@ -4531,23 +4649,46 @@ var RowRenderer = ({
         const colWidth = columnWidths.get(cell.column.id);
         const width = colWidth?.width || cell.column.getSize();
         const pinnedInfo = pinnedColumnOffsets?.get(cell.column.id);
+        const htmlColSpan = colSpanValues.get(cellIndex);
+        let htmlRowSpan;
+        if (rowSpanMap) {
+          const colRowSpan = rowSpanMap.get(colId);
+          if (colRowSpan) {
+            const spanValue = colRowSpan.get(rowIndex);
+            if (spanValue && spanValue > 1) {
+              htmlRowSpan = spanValue;
+            }
+          }
+        }
+        let totalWidth = width;
+        if (htmlColSpan && htmlColSpan > 1) {
+          for (let j = 1; j < htmlColSpan && cellIndex + j < visibleCells.length; j++) {
+            const spannedCell = visibleCells[cellIndex + j];
+            const spannedColWidth = columnWidths.get(spannedCell.column.id);
+            totalWidth += spannedColWidth?.width || spannedCell.column.getSize();
+          }
+        }
         return /* @__PURE__ */ jsx35(
           "td",
           {
+            colSpan: htmlColSpan,
+            rowSpan: htmlRowSpan,
             className: cn(
-              "px-4 overflow-hidden",
-              showCellVerticalBorder && "border-r last:border-r-0 border-border",
+              "px-4 overflow-hidden border-b border-border",
+              showCellVerticalBorder && "border-r border-border",
               pinnedInfo && "sticky z-[1] bg-background",
               pinnedInfo?.side === "left" && "border-r border-border",
-              pinnedInfo?.side === "right" && "border-l border-border"
+              pinnedInfo?.side === "right" && "border-l border-border",
+              htmlRowSpan && htmlRowSpan > 1 && "align-middle"
             ),
             style: {
-              height: wrapText || scrollable ? "auto" : rowHeight,
+              height: htmlRowSpan && htmlRowSpan > 1 ? rowHeight * htmlRowSpan : wrapText || scrollable ? void 0 : rowHeight,
               minHeight: rowHeight,
               textAlign: align,
-              width,
-              maxWidth: colWidth?.maxWidth || width,
+              width: htmlColSpan && htmlColSpan > 1 ? totalWidth : width,
+              maxWidth: htmlColSpan && htmlColSpan > 1 ? void 0 : colWidth?.maxWidth || width,
               minWidth: colWidth?.minWidth || cell.column.columnDef.minSize,
+              verticalAlign: htmlRowSpan && htmlRowSpan > 1 ? "middle" : void 0,
               ...pinnedInfo ? {
                 position: "sticky",
                 [pinnedInfo.side]: pinnedInfo.offset,
@@ -4565,10 +4706,7 @@ var RowRenderer = ({
                 style: {
                   maxHeight: scrollable ? `${maxCellHeight}px` : void 0
                 },
-                title: (
-                  // Show tooltip for truncated simple text values (not for scrollable or wrapped content)
-                  !wrapText && !scrollable && (typeof cell.getValue() === "string" || typeof cell.getValue() === "number") ? String(cell.getValue()) : void 0
-                ),
+                title: !wrapText && !scrollable && (typeof cell.getValue() === "string" || typeof cell.getValue() === "number") ? String(cell.getValue()) : void 0,
                 children: flexRender(cell.column.columnDef.cell, cell.getContext())
               }
             )
@@ -4591,7 +4729,9 @@ var VirtualizedTableBody = ({
   parentRef,
   globalWrapText = false,
   columnWidths,
-  pinnedColumnOffsets
+  pinnedColumnOffsets,
+  rowSpanMap,
+  gridColumns
 }) => {
   const rows = table.getRowModel().rows;
   const virtualizer = useVirtualizer({
@@ -4635,7 +4775,9 @@ var VirtualizedTableBody = ({
           getRowClassName,
           globalWrapText,
           columnWidths,
-          pinnedColumnOffsets
+          pinnedColumnOffsets,
+          rowSpanMap,
+          gridColumns
         },
         row.id
       );
@@ -4658,7 +4800,9 @@ var StandardTableBody = ({
   getRowClassName,
   globalWrapText = false,
   columnWidths,
-  pinnedColumnOffsets
+  pinnedColumnOffsets,
+  rowSpanMap,
+  gridColumns
 }) => {
   const rows = table.getRowModel().rows;
   if (rows.length === 0) {
@@ -4683,7 +4827,9 @@ var StandardTableBody = ({
       getRowClassName,
       globalWrapText,
       columnWidths,
-      pinnedColumnOffsets
+      pinnedColumnOffsets,
+      rowSpanMap,
+      gridColumns
     },
     row.id
   )) });
@@ -4699,91 +4845,83 @@ var PinnedRowsRenderer = ({
   globalWrapText = false,
   columnWidths,
   pinnedColumnOffsets,
-  position
+  position,
+  columnVisibility
 }) => {
   const pinnedTable = useReactTable({
     data: pinnedData,
     columns: tanstackColumns,
     getCoreRowModel: getCoreRowModel(),
-    getRowId: getRowIdFn ? (row) => String(getRowIdFn(row)) : void 0
+    getRowId: getRowIdFn ? (row) => String(getRowIdFn(row)) : void 0,
+    state: { columnVisibility }
   });
   const pinnedRows = pinnedTable.getRowModel().rows;
   if (pinnedRows.length === 0) return null;
-  return /* @__PURE__ */ jsx35(
-    "tbody",
-    {
-      className: cn(
-        "sticky z-[2]",
-        position === "top" && "top-0",
-        position === "bottom" && "bottom-0"
-      ),
-      children: pinnedRows.map((row, rowIndex) => {
-        const customClassName = getRowClassName?.({ row: row.original, rowIndex });
-        return /* @__PURE__ */ jsx35(
-          "tr",
-          {
-            className: cn(
-              "border-b border-border bg-muted/60 font-medium",
-              position === "top" && "border-b-2 border-b-border",
-              position === "bottom" && "border-t-2 border-t-border",
-              customClassName
-            ),
-            children: row.getVisibleCells().map((cell) => {
-              const meta = cell.column.columnDef.meta;
-              const align = meta?.align || "left";
-              const wrapText = meta?.wrapText !== void 0 ? meta.wrapText : globalWrapText;
-              const scrollable = meta?.scrollable || false;
-              const maxCellHeight = meta?.maxCellHeight || 100;
-              const cellClassName = meta?.cellClassName;
-              const colWidth = columnWidths.get(cell.column.id);
-              const width = colWidth?.width || cell.column.getSize();
-              const pinnedInfo = pinnedColumnOffsets?.get(cell.column.id);
-              return /* @__PURE__ */ jsx35(
-                "td",
+  return /* @__PURE__ */ jsx35("tbody", { children: pinnedRows.map((row, rowIndex) => {
+    const customClassName = getRowClassName?.({ row: row.original, rowIndex });
+    return /* @__PURE__ */ jsx35(
+      "tr",
+      {
+        className: cn(
+          "sticky z-[2] border-b border-border bg-muted font-medium",
+          position === "top" && "top-0 border-b-2 border-b-border",
+          position === "bottom" && "bottom-0 border-t-2 border-t-border",
+          customClassName
+        ),
+        children: row.getVisibleCells().map((cell) => {
+          const meta = cell.column.columnDef.meta;
+          const align = meta?.align || "left";
+          const wrapText = meta?.wrapText !== void 0 ? meta.wrapText : globalWrapText;
+          const scrollable = meta?.scrollable || false;
+          const maxCellHeight = meta?.maxCellHeight || 100;
+          const cellClassName = meta?.cellClassName;
+          const colWidth = columnWidths.get(cell.column.id);
+          const width = colWidth?.width || cell.column.getSize();
+          const pinnedInfo = pinnedColumnOffsets?.get(cell.column.id);
+          return /* @__PURE__ */ jsx35(
+            "td",
+            {
+              className: cn(
+                "px-4 overflow-hidden bg-muted border-b border-border",
+                showCellVerticalBorder && "border-r border-border",
+                pinnedInfo && "sticky z-[3]",
+                pinnedInfo?.side === "left" && "border-r border-border",
+                pinnedInfo?.side === "right" && "border-l border-border"
+              ),
+              style: {
+                height: wrapText || scrollable ? "auto" : rowHeight,
+                minHeight: rowHeight,
+                textAlign: align,
+                width,
+                maxWidth: colWidth?.maxWidth || width,
+                minWidth: colWidth?.minWidth || cell.column.columnDef.minSize,
+                ...pinnedInfo ? {
+                  position: "sticky",
+                  [pinnedInfo.side]: pinnedInfo.offset
+                } : {}
+              },
+              children: /* @__PURE__ */ jsx35(
+                "div",
                 {
                   className: cn(
-                    "px-4 overflow-hidden bg-muted/60",
-                    showCellVerticalBorder && "border-r last:border-r-0 border-border",
-                    pinnedInfo && "sticky z-[3]",
-                    pinnedInfo?.side === "left" && "border-r border-border",
-                    pinnedInfo?.side === "right" && "border-l border-border"
+                    wrapText ? "whitespace-normal break-words" : scrollable ? "overflow-auto" : "truncate",
+                    scrollable && "max-h-[100px]",
+                    cellClassName
                   ),
                   style: {
-                    height: wrapText || scrollable ? "auto" : rowHeight,
-                    minHeight: rowHeight,
-                    textAlign: align,
-                    width,
-                    maxWidth: colWidth?.maxWidth || width,
-                    minWidth: colWidth?.minWidth || cell.column.columnDef.minSize,
-                    ...pinnedInfo ? {
-                      position: "sticky",
-                      [pinnedInfo.side]: pinnedInfo.offset
-                    } : {}
+                    maxHeight: scrollable ? `${maxCellHeight}px` : void 0
                   },
-                  children: /* @__PURE__ */ jsx35(
-                    "div",
-                    {
-                      className: cn(
-                        wrapText ? "whitespace-normal break-words" : scrollable ? "overflow-auto" : "truncate",
-                        scrollable && "max-h-[100px]",
-                        cellClassName
-                      ),
-                      style: {
-                        maxHeight: scrollable ? `${maxCellHeight}px` : void 0
-                      },
-                      children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                    }
-                  )
-                },
-                cell.id
-              );
-            })
-          },
-          row.id
-        );
-      })
-    }
-  );
+                  children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                }
+              )
+            },
+            cell.id
+          );
+        })
+      },
+      row.id
+    );
+  }) });
 };
 var ColumnGroupHeader = ({
   columnGroupingModel,
@@ -4839,12 +4977,12 @@ var ColumnGroupHeader = ({
     });
     return cells;
   }, [fieldToGroup, gridColumns, columnWidths, columnVisibility, checkboxSelection, pinnedColumnOffsets]);
-  return /* @__PURE__ */ jsx35("tr", { className: "bg-muted border-b border-border", children: groupCells.map((cell, idx) => /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx35("tr", { className: "bg-muted", children: groupCells.map((cell, idx) => /* @__PURE__ */ jsx35(
     "th",
     {
       colSpan: cell.colSpan,
       className: cn(
-        "px-4 text-center font-semibold text-muted-foreground border-b-2 border-border bg-muted overflow-hidden",
+        "px-4 text-center font-semibold text-muted-foreground border-b border-border bg-muted overflow-hidden",
         showColumnVerticalBorder && "border-r last:border-r-0",
         cell.pinnedInfo && "sticky z-[2]"
       ),
@@ -4910,6 +5048,7 @@ function DataGrid({
   columnGroupingModel
 }) {
   const tableContainerRef = React35.useRef(null);
+  const effectiveVirtualized = virtualized && !columns.some((col) => col.rowSpan);
   const computedInitialSort = React35.useMemo(() => {
     if (initialSortModel && initialSortModel.length > 0) {
       return initialSortModel.map((s) => ({ id: s.field, desc: s.sort === "desc" }));
@@ -5005,7 +5144,7 @@ function DataGrid({
     data: rows,
     columns: tanstackColumns,
     getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: virtualized ? void 0 : paginationMode === "client" ? getPaginationRowModel() : void 0,
+    getPaginationRowModel: effectiveVirtualized ? void 0 : paginationMode === "client" ? getPaginationRowModel() : void 0,
     getSortedRowModel: sortingMode === "client" ? getSortedRowModel() : void 0,
     getFilteredRowModel: filterMode === "client" ? getFilteredRowModel() : void 0,
     getRowId: getRowId ? (row) => String(getRowId(row)) : void 0,
@@ -5013,7 +5152,7 @@ function DataGrid({
       sorting,
       globalFilter,
       rowSelection,
-      pagination: virtualized ? void 0 : pagination,
+      pagination: effectiveVirtualized ? void 0 : pagination,
       columnVisibility,
       columnSizing
     },
@@ -5024,7 +5163,7 @@ function DataGrid({
       setRowSelection(newValue);
       onRowSelectionModelChange?.(newValue);
     },
-    onPaginationChange: virtualized ? void 0 : (updater) => {
+    onPaginationChange: effectiveVirtualized ? void 0 : (updater) => {
       const newValue = typeof updater === "function" ? updater(pagination) : updater;
       setPagination(newValue);
       onPaginationModelChange?.({ page: newValue.pageIndex, pageSize: newValue.pageSize });
@@ -5050,10 +5189,10 @@ function DataGrid({
       }
     },
     enableRowSelection: checkboxSelection,
-    manualPagination: virtualized ? true : paginationMode === "server",
+    manualPagination: effectiveVirtualized ? true : paginationMode === "server",
     manualSorting: sortingMode === "server",
     manualFiltering: filterMode === "server",
-    pageCount: virtualized ? void 0 : paginationMode === "server" && rowCount ? Math.ceil(rowCount / pagination.pageSize) : void 0
+    pageCount: effectiveVirtualized ? void 0 : paginationMode === "server" && rowCount ? Math.ceil(rowCount / pagination.pageSize) : void 0
   });
   const rowHeight = densityRowHeights[density];
   const showQuickFilter = slotProps?.toolbar?.showQuickFilter !== false;
@@ -5061,6 +5200,12 @@ function DataGrid({
   const showExport = slotProps?.toolbar?.showExport !== false;
   const customButtons = slotProps?.toolbar?.customButtons;
   const moreOptions = slotProps?.toolbar?.moreOptions || [];
+  const rowSpanMap = React35.useMemo(() => {
+    const hasRowSpan = columns.some((col) => col.rowSpan);
+    if (!hasRowSpan) return void 0;
+    return computeRowSpanMap(table.getRowModel().rows, columns);
+  }, [table.getRowModel().rows, columns]);
+  const hasColSpan = React35.useMemo(() => columns.some((col) => col.colSpan), [columns]);
   const containerStyle = {
     ...sx
   };
@@ -5073,7 +5218,7 @@ function DataGrid({
     "div",
     {
       className: cn(
-        "rounded-lg border border-border bg-background overflow-hidden flex flex-col",
+        "rounded-lg border border-border bg-background overflow-hidden flex flex-col text-xs",
         className
       ),
       style: containerStyle,
@@ -5103,7 +5248,7 @@ function DataGrid({
             className: "relative flex-1 overflow-auto",
             children: [
               loading && /* @__PURE__ */ jsx35("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center z-10", children: /* @__PURE__ */ jsx35(Spinner, { size: "lg" }) }),
-              /* @__PURE__ */ jsxs20("table", { className: "w-full border-collapse table-fixed", children: [
+              /* @__PURE__ */ jsxs20("table", { className: "w-full border-separate border-spacing-0 table-fixed", children: [
                 /* @__PURE__ */ jsx35("colgroup", { children: table.getVisibleLeafColumns().map((column) => {
                   const colWidth = columnWidths.get(column.id);
                   return /* @__PURE__ */ jsx35(
@@ -5118,7 +5263,7 @@ function DataGrid({
                     column.id
                   );
                 }) }),
-                /* @__PURE__ */ jsxs20("thead", { className: "sticky top-0 z-[1]", children: [
+                /* @__PURE__ */ jsxs20("thead", { className: "sticky top-0 z-[3] bg-muted", children: [
                   columnGroupingModel && columnGroupingModel.length > 0 && /* @__PURE__ */ jsx35(
                     ColumnGroupHeader,
                     {
@@ -5142,13 +5287,13 @@ function DataGrid({
                       "th",
                       {
                         className: cn(
-                          "px-4 text-left font-medium text-muted-foreground border-b border-border bg-muted overflow-hidden relative",
+                          "px-4 text-left text-xs font-medium text-muted-foreground border-b border-border bg-muted overflow-hidden relative",
                           showColumnVerticalBorder && "border-r last:border-r-0",
                           header.column.getCanSort() && "cursor-pointer select-none hover:bg-muted/80",
                           // Add cursor class when resizing
                           header.column.getIsResizing() && "cursor-col-resize",
                           // Pinned column styling
-                          pinnedInfo && "sticky z-[2]",
+                          pinnedInfo && "sticky z-[4]",
                           pinnedInfo?.side === "left" && "border-r border-border",
                           pinnedInfo?.side === "right" && "border-l border-border"
                         ),
@@ -5199,10 +5344,11 @@ function DataGrid({
                     globalWrapText: wrapText,
                     columnWidths,
                     pinnedColumnOffsets,
+                    columnVisibility,
                     position: "top"
                   }
                 ),
-                virtualized ? /* @__PURE__ */ jsx35(
+                effectiveVirtualized ? /* @__PURE__ */ jsx35(
                   VirtualizedTableBody,
                   {
                     table,
@@ -5215,7 +5361,9 @@ function DataGrid({
                     parentRef: tableContainerRef,
                     globalWrapText: wrapText,
                     columnWidths,
-                    pinnedColumnOffsets
+                    pinnedColumnOffsets,
+                    rowSpanMap,
+                    gridColumns: hasColSpan ? columns : void 0
                   }
                 ) : /* @__PURE__ */ jsx35(
                   StandardTableBody,
@@ -5228,7 +5376,9 @@ function DataGrid({
                     getRowClassName,
                     globalWrapText: wrapText,
                     columnWidths,
-                    pinnedColumnOffsets
+                    pinnedColumnOffsets,
+                    rowSpanMap,
+                    gridColumns: hasColSpan ? columns : void 0
                   }
                 ),
                 pinnedBottomTable && pinnedBottomTable.length > 0 && /* @__PURE__ */ jsx35(
@@ -5244,6 +5394,7 @@ function DataGrid({
                     globalWrapText: wrapText,
                     columnWidths,
                     pinnedColumnOffsets,
+                    columnVisibility,
                     position: "bottom"
                   }
                 )
@@ -5251,7 +5402,7 @@ function DataGrid({
             ]
           }
         ),
-        !virtualized && !hideFooter && !hideFooterPagination && /* @__PURE__ */ jsx35(
+        !effectiveVirtualized && !hideFooter && !hideFooterPagination && /* @__PURE__ */ jsx35(
           DataGridPagination,
           {
             table,
@@ -5260,7 +5411,7 @@ function DataGrid({
             paginationMode
           }
         ),
-        virtualized && !hideFooter && /* @__PURE__ */ jsx35("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: /* @__PURE__ */ jsxs20("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: [
+        effectiveVirtualized && !hideFooter && /* @__PURE__ */ jsx35("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: /* @__PURE__ */ jsxs20("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
           table.getFilteredRowModel().rows.length,
           " total rows (virtualized)"
         ] }) })