@moontra/moonui-pro 2.4.2 → 2.4.4

package/dist/index.mjs

@@ -53265,7 +53265,7 @@ function DataTable({
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "moonui-pro-datatable-wrapper rounded-md border overflow-hidden", style: { contain: "layout style" }, children: /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs("table", { className: "moonui-pro-datatable", style: { width: "100%", tableLayout: "auto" }, children: [
-      /* @__PURE__ */ jsx("thead", { className: "moonui-data-table-header", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "moonui-data-table-row border-b", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("thead", { className: "moonui-data-table-header", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", { className: "moonui-data-table-row border-b", children: headerGroup.headers.filter((header) => header.column.getIsVisible()).map((header) => /* @__PURE__ */ jsx(
         "th",
         {
           className: "moonui-data-table-th h-12 px-4 text-left align-middle font-medium text-muted-foreground",
@@ -53293,7 +53293,7 @@ function DataTable({
           animate: { opacity: 1 },
           exit: { opacity: 0 },
           transition: { duration: 0.2 },
-          children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "h-24 text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-2", children: [
+          children: /* @__PURE__ */ jsx("td", { colSpan: table.getAllLeafColumns().filter((col) => col.getIsVisible()).length, className: "h-24 text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-2", children: [
             /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) }),
             /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading..." })
           ] }) })
@@ -53320,7 +53320,7 @@ function DataTable({
           animate: { opacity: 1 },
           exit: { opacity: 0 },
           transition: { duration: 0.2 },
-          children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "h-24 text-center", children: "No results found." })
+          children: /* @__PURE__ */ jsx("td", { colSpan: table.getAllLeafColumns().filter((col) => col.getIsVisible()).length, className: "h-24 text-center", children: "No results found." })
         },
         "no-results"
       ) })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/data-table/index.tsx

@@ -421,35 +421,37 @@ export function DataTable<TData, TValue>({
           <thead className="moonui-data-table-header">
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id} className="moonui-data-table-row border-b">
-                {headerGroup.headers.map((header) => (
-                  <th
-                    key={header.id}
-                    className="moonui-data-table-th h-12 px-4 text-left align-middle font-medium text-muted-foreground"
-                  >
-                    {header.isPlaceholder ? null : (
-                      <div
-                        className={cn(
-                          "flex items-center space-x-2",
-                          header.column.getCanSort() && "cursor-pointer select-none"
-                        )}
-                        onClick={header.column.getToggleSortingHandler()}
-                      >
-                        {flexRender(header.column.columnDef.header, header.getContext())}
-                        {header.column.getCanSort() && (
-                          <div className="ml-2">
-                            {header.column.getIsSorted() === 'asc' ? (
-                              <span suppressHydrationWarning><ArrowUp className="h-4 w-4" /></span>
-                            ) : header.column.getIsSorted() === 'desc' ? (
-                              <span suppressHydrationWarning><ArrowDown className="h-4 w-4" /></span>
-                            ) : (
-                              <span suppressHydrationWarning><ArrowUpDown className="h-4 w-4" /></span>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </th>
-                ))}
+                {headerGroup.headers
+                  .filter((header) => header.column.getIsVisible())
+                  .map((header) => (
+                    <th
+                      key={header.id}
+                      className="moonui-data-table-th h-12 px-4 text-left align-middle font-medium text-muted-foreground"
+                    >
+                      {header.isPlaceholder ? null : (
+                        <div
+                          className={cn(
+                            "flex items-center space-x-2",
+                            header.column.getCanSort() && "cursor-pointer select-none"
+                          )}
+                          onClick={header.column.getToggleSortingHandler()}
+                        >
+                          {flexRender(header.column.columnDef.header, header.getContext())}
+                          {header.column.getCanSort() && (
+                            <div className="ml-2">
+                              {header.column.getIsSorted() === 'asc' ? (
+                                <span suppressHydrationWarning><ArrowUp className="h-4 w-4" /></span>
+                              ) : header.column.getIsSorted() === 'desc' ? (
+                                <span suppressHydrationWarning><ArrowDown className="h-4 w-4" /></span>
+                              ) : (
+                                <span suppressHydrationWarning><ArrowUpDown className="h-4 w-4" /></span>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </th>
+                  ))}
               </tr>
             ))}
           </thead>
@@ -462,7 +464,7 @@ export function DataTable<TData, TValue>({
                 exit={{ opacity: 0 }}
                 transition={{ duration: 0.2 }}
               >
-                <td colSpan={columns.length} className="h-24 text-center">
+                <td colSpan={table.getAllLeafColumns().filter(col => col.getIsVisible()).length} className="h-24 text-center">
                   <div className="flex items-center justify-center space-x-2">
                     <span suppressHydrationWarning><Loader2 className="h-4 w-4 animate-spin" /></span>
                     <span className="text-sm text-muted-foreground">Loading...</span>
@@ -495,7 +497,7 @@ export function DataTable<TData, TValue>({
                 exit={{ opacity: 0 }}
                 transition={{ duration: 0.2 }}
               >
-                <td colSpan={columns.length} className="h-24 text-center">
+                <td colSpan={table.getAllLeafColumns().filter(col => col.getIsVisible()).length} className="h-24 text-center">
                   No results found.
                 </td>
               </motion.tr>