@moontra/moonui-pro 2.27.2 → 2.27.4

package/dist/index.mjs

@@ -72964,7 +72964,7 @@ function DataTableBulkActions({
     /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
       /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "secondary", className: "gap-1", children: [
         /* @__PURE__ */ jsx("span", { className: "font-semibold", children: selectedCount }),
-        /* @__PURE__ */ jsx("span", { children: "selected" })
+        /* @__PURE__ */ jsx("span", { children: " Selected" })
       ] }),
       /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
         /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -73975,7 +73975,9 @@ function DataTable({
   const createSortingHandler = (columnId) => {
     return () => {
       const currentSorting = externalState?.sorting ?? sorting;
-      const currentSort = currentSorting.find((s) => s.id === columnId);
+      const currentSort = currentSorting.find(
+        (s) => s.id === columnId
+      );
       let newSorting = [];
       if (!currentSort) {
         newSorting = [{ id: columnId, desc: false }];
@@ -73991,15 +73993,20 @@ function DataTable({
     };
   };
   const tableRef = t__default.useRef(null);
-  const handleRowSelectionChange = t__default.useCallback((updater) => {
-    const newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
-    setRowSelection(newSelection);
-    if (onRowSelect && tableRef.current) {
-      const selectedRowIds = Object.keys(newSelection).filter((key) => newSelection[key]);
-      const selectedRows = tableRef.current.getRowModel().rows.filter((row) => selectedRowIds.includes(row.id)).map((row) => row.original);
-      onRowSelect(selectedRows);
-    }
-  }, [rowSelection, onRowSelect]);
+  const handleRowSelectionChange = t__default.useCallback(
+    (updater) => {
+      const newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
+      setRowSelection(newSelection);
+      if (onRowSelect && tableRef.current) {
+        const selectedRowIds = Object.keys(newSelection).filter(
+          (key) => newSelection[key]
+        );
+        const selectedRows = tableRef.current.getRowModel().rows.filter((row) => selectedRowIds.includes(row.id)).map((row) => row.original);
+        onRowSelect(selectedRows);
+      }
+    },
+    [rowSelection, onRowSelect]
+  );
   const processedColumns = t__default.useMemo(() => {
     let cols = columns.map((col) => {
       if (!col.id && col.accessorKey) {
@@ -74218,7 +74225,10 @@ function DataTable({
       return;
     }
     const filename = typeof exportable === "object" && exportable.filename ? exportable.filename : "data-export";
-    const visibleColumns = getVisibleColumns(columns, columnVisibility);
+    const visibleColumns = getVisibleColumns(
+      columns,
+      columnVisibility
+    );
     await exportData2(dataToExport, {
       format: format8,
       filename,
@@ -74239,276 +74249,392 @@ function DataTable({
   const clearRowSelection = () => {
     table.resetRowSelection();
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("moonui-pro-datatable-container flex flex-col gap-4", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "moonui-pro-datatable-toolbar flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-        searchable && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }) }),
-          /* @__PURE__ */ jsx(
-            MoonUIInputPro,
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "moonui-pro-datatable-container flex flex-col gap-4",
+        className
+      ),
+      children: [
+        selectable && table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-md bg-muted/50 px-4 py-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+            table.getFilteredSelectedRowModel().rows.length,
+            " Selected"
+          ] }),
+          bulkActions.length > 0 && /* @__PURE__ */ jsx(
+            DataTableBulkActions,
             {
-              placeholder: filterPlaceholder,
-              value: globalFilter,
-              onChange: (e) => setGlobalFilter(e.target.value),
-              className: "pl-8 w-full sm:w-64"
+              selectedRows: table.getFilteredSelectedRowModel().rows.map((row) => row.original),
+              actions: bulkActions,
+              onClearSelection: clearRowSelection
             }
           )
         ] }),
-        quickFilters.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: quickFilters.map((filter, index2) => /* @__PURE__ */ jsx(
-          DataTableQuickFilter,
-          {
-            table,
-            filter,
-            data
-          },
-          `quick-${filter.column}-${index2}`
-        )) }),
-        facetedFilters.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: facetedFilters.map((filter, index2) => {
-          const columnId = typeof filter === "string" ? filter : filter.column;
-          const label = typeof filter === "string" ? void 0 : filter.label;
-          return /* @__PURE__ */ jsx(
-            DataTableFacetedFilter,
-            {
-              table,
-              column: columnId,
-              title: label,
-              data
-            },
-            `faceted-${columnId}-${index2}`
-          );
-        }) }),
-        filterable && /* @__PURE__ */ jsxs(
-          MoonUIButtonPro,
+        /* @__PURE__ */ jsxs("div", { className: "moonui-pro-datatable-toolbar flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            searchable && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }) }),
+              /* @__PURE__ */ jsx(
+                MoonUIInputPro,
+                {
+                  placeholder: filterPlaceholder,
+                  value: globalFilter,
+                  onChange: (e) => setGlobalFilter(e.target.value),
+                  className: "pl-8 w-full sm:w-64"
+                }
+              )
+            ] }),
+            quickFilters.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: quickFilters.map((filter, index2) => /* @__PURE__ */ jsx(
+              DataTableQuickFilter,
+              {
+                table,
+                filter,
+                data
+              },
+              `quick-${filter.column}-${index2}`
+            )) }),
+            facetedFilters.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: facetedFilters.map((filter, index2) => {
+              const columnId = typeof filter === "string" ? filter : filter.column;
+              const label = typeof filter === "string" ? void 0 : filter.label;
+              return /* @__PURE__ */ jsx(
+                DataTableFacetedFilter,
+                {
+                  table,
+                  column: columnId,
+                  title: label,
+                  data
+                },
+                `faceted-${columnId}-${index2}`
+              );
+            }) }),
+            filterable && /* @__PURE__ */ jsxs(
+              MoonUIButtonPro,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => setFilterDrawerOpen(true),
+                children: [
+                  /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }) }),
+                  "Filters",
+                  columnFilters.length > 0 && /* @__PURE__ */ jsx("span", { className: "ml-2 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground", children: columnFilters.length })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            exportable && exportFormats.length > 0 && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+              /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
+                /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }) }),
+                "Export"
+              ] }) }),
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
+                exportFormats.includes("csv") && /* @__PURE__ */ jsxs(
+                  MoonUIDropdownMenuItemPro,
+                  {
+                    onClick: () => handleExport("csv"),
+                    children: [
+                      /* @__PURE__ */ jsx(FileSpreadsheet, { className: "mr-2 h-4 w-4" }),
+                      "Export as CSV"
+                    ]
+                  }
+                ),
+                exportFormats.includes("json") && /* @__PURE__ */ jsxs(
+                  MoonUIDropdownMenuItemPro,
+                  {
+                    onClick: () => handleExport("json"),
+                    children: [
+                      /* @__PURE__ */ jsx(FileJson, { className: "mr-2 h-4 w-4" }),
+                      "Export as JSON"
+                    ]
+                  }
+                ),
+                exportFormats.includes("xlsx") && /* @__PURE__ */ jsxs(
+                  MoonUIDropdownMenuItemPro,
+                  {
+                    onClick: () => handleExport("xlsx"),
+                    children: [
+                      /* @__PURE__ */ jsx(FileDown, { className: "mr-2 h-4 w-4" }),
+                      "Export as Excel"
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(DataTableColumnToggle, { table })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            variant: "outline",
-            size: "sm",
-            onClick: () => setFilterDrawerOpen(true),
-            children: [
-              /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }) }),
-              "Filters",
-              columnFilters.length > 0 && /* @__PURE__ */ jsx("span", { className: "ml-2 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground", children: columnFilters.length })
-            ]
+            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.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",
+                          children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: cn(
+                                "flex items-center space-x-2",
+                                header.column.getCanSort() && "cursor-pointer select-none"
+                              ),
+                              onClick: header.column.getCanSort() ? createSortingHandler(
+                                header.column.id
+                              ) : void 0,
+                              children: [
+                                flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext()
+                                ),
+                                header.column.getCanSort() && /* @__PURE__ */ jsx("div", { className: "ml-2", children: header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    suppressHydrationWarning: true,
+                                    children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" })
+                                  }
+                                ) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    suppressHydrationWarning: true,
+                                    children: /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" })
+                                  }
+                                ) : /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    suppressHydrationWarning: true,
+                                    children: /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" })
+                                  }
+                                ) })
+                              ]
+                            }
+                          )
+                        },
+                        header.id
+                      ))
+                    },
+                    headerGroup.id
+                  )) }),
+                  /* @__PURE__ */ jsx("tbody", { className: "moonui-data-table-body", children: isPaginationLoading ? /* @__PURE__ */ jsx(
+                    motion.tr,
+                    {
+                      initial: { opacity: 0 },
+                      animate: { opacity: 1 },
+                      exit: { opacity: 0 },
+                      transition: { duration: 0.2 },
+                      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..." })
+                          ] })
+                        }
+                      )
+                    },
+                    "loading"
+                  ) : rows?.length ? /* @__PURE__ */ jsx(Fragment, { children: rows.map((row, index2) => {
+                    const rowId = row.original.id || row.id;
+                    const isExpanded = enableExpandable && expandedRows.has(rowId);
+                    return /* @__PURE__ */ jsx(
+                      TableRow2,
+                      {
+                        row,
+                        columns,
+                        isExpanded,
+                        enableExpandable,
+                        renderSubComponent,
+                        visibilityState: table.getState().columnVisibility
+                      },
+                      rowId
+                    );
+                  }) }) : /* @__PURE__ */ jsx(
+                    motion.tr,
+                    {
+                      initial: { opacity: 0 },
+                      animate: { opacity: 1 },
+                      exit: { opacity: 0 },
+                      transition: { duration: 0.2 },
+                      children: /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          colSpan: table.getAllLeafColumns().filter(
+                            (col) => col.getIsVisible()
+                          ).length,
+                          className: "h-24 text-center",
+                          children: "No results found."
+                        }
+                      )
+                    },
+                    "no-results"
+                  ) })
+                ]
+              }
+            ) })
           }
         ),
-        selectable && bulkActions.length > 0 && /* @__PURE__ */ jsx(
-          DataTableBulkActions,
-          {
-            selectedRows: table.getFilteredSelectedRowModel().rows.map((row) => row.original),
-            actions: bulkActions,
-            onClearSelection: clearRowSelection
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-        exportable && exportFormats.length > 0 && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
-          /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
-            /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Download, { className: "mr-2 h-4 w-4" }) }),
-            "Export"
+        pagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 text-sm text-muted-foreground", children: selectable && table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
+            table.getFilteredSelectedRowModel().rows.length,
+            " ",
+            "of ",
+            table.getFilteredRowModel().rows.length,
+            " ",
+            "row(s) selected."
           ] }) }),
-          /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
-            exportFormats.includes("csv") && /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleExport("csv"), children: [
-              /* @__PURE__ */ jsx(FileSpreadsheet, { className: "mr-2 h-4 w-4" }),
-              "Export as CSV"
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Rows per page" }),
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  value: table.getState().pagination.pageSize,
+                  onChange: async (e) => {
+                    const newPageSize = Number(e.target.value);
+                    if (onPaginationChange) {
+                      onPaginationChange({
+                        pageIndex: table.getState().pagination.pageIndex,
+                        pageSize: newPageSize
+                      });
+                    } else {
+                      setIsPaginationLoading(true);
+                      await new Promise(
+                        (resolve) => setTimeout(resolve, 300)
+                      );
+                      table.setPageSize(newPageSize);
+                      setIsPaginationLoading(false);
+                    }
+                  },
+                  className: "h-8 w-[70px] rounded border border-input bg-background px-3 py-1 text-sm",
+                  disabled: isPaginationLoading,
+                  children: pageSizeOptions.map((size4) => /* @__PURE__ */ jsx("option", { value: size4, children: size4 }, size4))
+                }
+              )
             ] }),
-            exportFormats.includes("json") && /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleExport("json"), children: [
-              /* @__PURE__ */ jsx(FileJson, { className: "mr-2 h-4 w-4" }),
-              "Export as JSON"
+            /* @__PURE__ */ jsxs("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
+              "Page ",
+              table.getState().pagination.pageIndex + 1,
+              " of",
+              " ",
+              table.getPageCount()
             ] }),
-            exportFormats.includes("xlsx") && /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleExport("xlsx"), children: [
-              /* @__PURE__ */ jsx(FileDown, { className: "mr-2 h-4 w-4" }),
-              "Export as Excel"
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(DataTableColumnToggle, { table })
-      ] })
-    ] }),
-    /* @__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.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",
-          children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "flex items-center space-x-2",
-                header.column.getCanSort() && "cursor-pointer select-none"
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsx(
+                MoonUIButtonPro,
+                {
+                  variant: "outline",
+                  className: "hidden h-8 w-8 p-0 lg:flex",
+                  onClick: async () => {
+                    if (onPaginationChange) {
+                      onPaginationChange({
+                        pageIndex: 0,
+                        pageSize: table.getState().pagination.pageSize
+                      });
+                    } else {
+                      setIsPaginationLoading(true);
+                      await new Promise(
+                        (resolve) => setTimeout(resolve, 300)
+                      );
+                      table.setPageIndex(0);
+                      setIsPaginationLoading(false);
+                    }
+                  },
+                  disabled: !table.getCanPreviousPage() || isPaginationLoading,
+                  children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }) })
+                }
               ),
-              onClick: header.column.getCanSort() ? createSortingHandler(header.column.id) : void 0,
-              children: [
-                flexRender(header.column.columnDef.header, header.getContext()),
-                header.column.getCanSort() && /* @__PURE__ */ jsx("div", { className: "ml-2", children: header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" }) }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" }) }) : /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" }) }) })
-              ]
-            }
-          )
-        },
-        header.id
-      )) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx("tbody", { className: "moonui-data-table-body", children: isPaginationLoading ? /* @__PURE__ */ jsx(
-        motion.tr,
-        {
-          initial: { opacity: 0 },
-          animate: { opacity: 1 },
-          exit: { opacity: 0 },
-          transition: { duration: 0.2 },
-          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..." })
-          ] }) })
-        },
-        "loading"
-      ) : rows?.length ? /* @__PURE__ */ jsx(Fragment, { children: rows.map((row, index2) => {
-        const rowId = row.original.id || row.id;
-        const isExpanded = enableExpandable && expandedRows.has(rowId);
-        return /* @__PURE__ */ jsx(
-          TableRow2,
-          {
-            row,
-            columns,
-            isExpanded,
-            enableExpandable,
-            renderSubComponent,
-            visibilityState: table.getState().columnVisibility
-          },
-          rowId
-        );
-      }) }) : /* @__PURE__ */ jsx(
-        motion.tr,
-        {
-          initial: { opacity: 0 },
-          animate: { opacity: 1 },
-          exit: { opacity: 0 },
-          transition: { duration: 0.2 },
-          children: /* @__PURE__ */ jsx("td", { colSpan: table.getAllLeafColumns().filter((col) => col.getIsVisible()).length, className: "h-24 text-center", children: "No results found." })
-        },
-        "no-results"
-      ) })
-    ] }) }) }),
-    pagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex-1 text-sm text-muted-foreground", children: selectable && table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
-        table.getFilteredSelectedRowModel().rows.length,
-        " of",
-        " ",
-        table.getFilteredRowModel().rows.length,
-        " row(s) selected."
-      ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-6 lg:space-x-8", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Rows per page" }),
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              value: table.getState().pagination.pageSize,
-              onChange: async (e) => {
-                const newPageSize = Number(e.target.value);
-                if (onPaginationChange) {
-                  onPaginationChange({
-                    pageIndex: table.getState().pagination.pageIndex,
-                    pageSize: newPageSize
-                  });
-                } else {
-                  setIsPaginationLoading(true);
-                  await new Promise((resolve) => setTimeout(resolve, 300));
-                  table.setPageSize(newPageSize);
-                  setIsPaginationLoading(false);
+              /* @__PURE__ */ jsx(
+                MoonUIButtonPro,
+                {
+                  variant: "outline",
+                  className: "h-8 w-8 p-0",
+                  onClick: async () => {
+                    if (onPaginationChange) {
+                      const currentIndex = table.getState().pagination.pageIndex;
+                      onPaginationChange({
+                        pageIndex: currentIndex - 1,
+                        pageSize: table.getState().pagination.pageSize
+                      });
+                    } else {
+                      setIsPaginationLoading(true);
+                      await new Promise(
+                        (resolve) => setTimeout(resolve, 300)
+                      );
+                      table.previousPage();
+                      setIsPaginationLoading(false);
+                    }
+                  },
+                  disabled: !table.getCanPreviousPage() || isPaginationLoading,
+                  children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) })
                 }
-              },
-              className: "h-8 w-[70px] rounded border border-input bg-background px-3 py-1 text-sm",
-              disabled: isPaginationLoading,
-              children: pageSizeOptions.map((size4) => /* @__PURE__ */ jsx("option", { value: size4, children: size4 }, size4))
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
-          "Page ",
-          table.getState().pagination.pageIndex + 1,
-          " of",
-          " ",
-          table.getPageCount()
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ jsx(
-            MoonUIButtonPro,
-            {
-              variant: "outline",
-              className: "hidden h-8 w-8 p-0 lg:flex",
-              onClick: async () => {
-                if (onPaginationChange) {
-                  onPaginationChange({ pageIndex: 0, pageSize: table.getState().pagination.pageSize });
-                } else {
-                  setIsPaginationLoading(true);
-                  await new Promise((resolve) => setTimeout(resolve, 300));
-                  table.setPageIndex(0);
-                  setIsPaginationLoading(false);
+              ),
+              /* @__PURE__ */ jsx(
+                MoonUIButtonPro,
+                {
+                  variant: "outline",
+                  className: "h-8 w-8 p-0",
+                  onClick: async () => {
+                    setIsPaginationLoading(true);
+                    await new Promise(
+                      (resolve) => setTimeout(resolve, 300)
+                    );
+                    table.nextPage();
+                    setIsPaginationLoading(false);
+                  },
+                  disabled: !table.getCanNextPage() || isPaginationLoading,
+                  children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) })
                 }
-              },
-              disabled: !table.getCanPreviousPage() || isPaginationLoading,
-              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }) })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            MoonUIButtonPro,
-            {
-              variant: "outline",
-              className: "h-8 w-8 p-0",
-              onClick: async () => {
-                if (onPaginationChange) {
-                  const currentIndex = table.getState().pagination.pageIndex;
-                  onPaginationChange({ pageIndex: currentIndex - 1, pageSize: table.getState().pagination.pageSize });
-                } else {
-                  setIsPaginationLoading(true);
-                  await new Promise((resolve) => setTimeout(resolve, 300));
-                  table.previousPage();
-                  setIsPaginationLoading(false);
+              ),
+              /* @__PURE__ */ jsx(
+                MoonUIButtonPro,
+                {
+                  variant: "outline",
+                  className: "hidden h-8 w-8 p-0 lg:flex",
+                  onClick: async () => {
+                    setIsPaginationLoading(true);
+                    await new Promise(
+                      (resolve) => setTimeout(resolve, 300)
+                    );
+                    table.setPageIndex(
+                      table.getPageCount() - 1
+                    );
+                    setIsPaginationLoading(false);
+                  },
+                  disabled: !table.getCanNextPage() || isPaginationLoading,
+                  children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) })
                 }
-              },
-              disabled: !table.getCanPreviousPage() || isPaginationLoading,
-              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            MoonUIButtonPro,
-            {
-              variant: "outline",
-              className: "h-8 w-8 p-0",
-              onClick: async () => {
-                setIsPaginationLoading(true);
-                await new Promise((resolve) => setTimeout(resolve, 300));
-                table.nextPage();
-                setIsPaginationLoading(false);
-              },
-              disabled: !table.getCanNextPage() || isPaginationLoading,
-              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            MoonUIButtonPro,
-            {
-              variant: "outline",
-              className: "hidden h-8 w-8 p-0 lg:flex",
-              onClick: async () => {
-                setIsPaginationLoading(true);
-                await new Promise((resolve) => setTimeout(resolve, 300));
-                table.setPageIndex(table.getPageCount() - 1);
-                setIsPaginationLoading(false);
-              },
-              disabled: !table.getCanNextPage() || isPaginationLoading,
-              children: /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) })
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    filterable && /* @__PURE__ */ jsx(
-      DataTableFilterDrawer,
-      {
-        table,
-        open: filterDrawerOpen,
-        onOpenChange: setFilterDrawerOpen
-      }
-    )
-  ] });
+              )
+            ] })
+          ] })
+        ] }),
+        filterable && /* @__PURE__ */ jsx(
+          DataTableFilterDrawer,
+          {
+            table,
+            open: filterDrawerOpen,
+            onOpenChange: setFilterDrawerOpen
+          }
+        )
+      ]
+    }
+  );
 }
 function getExpandableColumn(expandedRows, onToggle) {
   return {
@@ -74582,23 +74708,42 @@ var TableRow2 = ({
           const isVisible = visibilityState[cell.column.id] !== false;
           return isVisible;
         }).map((cell) => {
-          return /* @__PURE__ */ jsx("td", { className: "moonui-data-table-td p-4 align-middle", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: "moonui-data-table-td p-4 align-middle",
+              children: flexRender(
+                cell.column.columnDef.cell,
+                cell.getContext()
+              )
+            },
+            cell.id
+          );
         })
       }
     ),
-    isExpanded && renderSubComponent && /* @__PURE__ */ jsx("tr", { className: "border-b", children: /* @__PURE__ */ jsx("td", { colSpan: row.getAllCells().filter(
-      (cell) => visibilityState[cell.column.id] !== false
-    ).length || 1, className: "p-0 overflow-hidden", children: /* @__PURE__ */ jsx(
-      "div",
+    isExpanded && renderSubComponent && /* @__PURE__ */ jsx("tr", { className: "border-b", children: /* @__PURE__ */ jsx(
+      "td",
       {
-        className: "transition-all duration-300 ease-out",
-        style: {
-          maxHeight: isExpanded ? "1000px" : "0",
-          opacity: isExpanded ? 1 : 0
-        },
-        children: /* @__PURE__ */ jsx("div", { className: "border-t border-border/50", children: renderSubComponent({ row: { original: row.original, id: rowId } }) })
+        colSpan: row.getAllCells().filter(
+          (cell) => visibilityState[cell.column.id] !== false
+        ).length || 1,
+        className: "p-0 overflow-hidden",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "transition-all duration-300 ease-out",
+            style: {
+              maxHeight: isExpanded ? "1000px" : "0",
+              opacity: isExpanded ? 1 : 0
+            },
+            children: /* @__PURE__ */ jsx("div", { className: "border-t border-border/50", children: renderSubComponent({
+              row: { original: row.original, id: rowId }
+            }) })
+          }
+        )
       }
-    ) }) })
+    ) })
   ] });
 };
 TableRow2.displayName = "TableRow";