@machinemetrics/mm-react-components 0.2.3-25 → 0.2.3-27

package/dist/mm-react-components.es.js

@@ -23981,6 +23981,198 @@ function useDroppable(_ref) {
     setNodeRef
   };
 }
+const restrictToHorizontalAxis = (_ref) => {
+  let {
+    transform
+  } = _ref;
+  return {
+    ...transform,
+    y: 0
+  };
+};
+function restrictToBoundingRect(transform, rect, boundingRect) {
+  const value = {
+    ...transform
+  };
+  if (rect.top + transform.y <= boundingRect.top) {
+    value.y = boundingRect.top - rect.top;
+  } else if (rect.bottom + transform.y >= boundingRect.top + boundingRect.height) {
+    value.y = boundingRect.top + boundingRect.height - rect.bottom;
+  }
+  if (rect.left + transform.x <= boundingRect.left) {
+    value.x = boundingRect.left - rect.left;
+  } else if (rect.right + transform.x >= boundingRect.left + boundingRect.width) {
+    value.x = boundingRect.left + boundingRect.width - rect.right;
+  }
+  return value;
+}
+const restrictToParentElement = (_ref) => {
+  let {
+    containerNodeRect,
+    draggingNodeRect,
+    transform
+  } = _ref;
+  if (!draggingNodeRect || !containerNodeRect) {
+    return transform;
+  }
+  return restrictToBoundingRect(transform, draggingNodeRect, containerNodeRect);
+};
+const restrictToVerticalAxis = (_ref) => {
+  let {
+    transform
+  } = _ref;
+  return {
+    ...transform,
+    x: 0
+  };
+};
+function DataTablePagination({
+  table,
+  pageSizeOptions = [25, 50, 100, 250],
+  className,
+  compact: compact2 = false,
+  onPageChange,
+  onPageSizeChange,
+  manualPagination = false,
+  totalRowCount
+}) {
+  const state = table.getState();
+  const pageSize = state.pagination?.pageSize ?? 25;
+  const pageIndex = state.pagination?.pageIndex ?? 0;
+  const canPrev = table.getCanPreviousPage();
+  const canNext = table.getCanNextPage();
+  const totalRows = React.useMemo(() => {
+    if (manualPagination) {
+      if (totalRowCount !== void 0) {
+        return totalRowCount;
+      }
+      const pageCount = table.getPageCount();
+      if (pageCount > 0) {
+        const approximateTotal = pageCount * pageSize;
+        const currentPageRows = table.getRowModel().rows.length;
+        if (pageIndex === pageCount - 1 && currentPageRows < pageSize) {
+          return (pageCount - 1) * pageSize + currentPageRows;
+        }
+        return approximateTotal;
+      }
+      return 0;
+    }
+    return table.getFilteredRowModel().rows.length;
+  }, [manualPagination, totalRowCount, table, pageSize, pageIndex]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: "mmc-pagination flex items-center justify-between gap-3 px-4 py-3 " + (className || ""),
+      "data-slot": "pagination",
+      children: [
+        !compact2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 flex-1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-foreground", children: (() => {
+            const selected = table.getFilteredSelectedRowModel().rows.length;
+            if (selected > 0) {
+              return `${selected} selected of ${totalRows} items`;
+            }
+            if (totalRows === 0) return "Showing 0 to 0 of 0 items";
+            const start = pageIndex * pageSize + 1;
+            const currentPageRows = table.getRowModel().rows.length;
+            const end = manualPagination ? pageIndex * pageSize + currentPageRows : Math.min(totalRows, (pageIndex + 1) * pageSize);
+            return `Showing ${start} to ${end} of ${totalRows} items`;
+          })() }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: "mmc-pagination__page-size flex items-center gap-2",
+              "data-slot": "page-size",
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-foreground", children: "Show:" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  Select$1,
+                  {
+                    value: String(pageSize),
+                    onValueChange: (value) => {
+                      const size2 = Number(value);
+                      table.setPageIndex(0);
+                      table.setPageSize(size2);
+                      if (onPageSizeChange) {
+                        onPageSizeChange(size2);
+                      }
+                      if (onPageChange) {
+                        onPageChange(0);
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-9 w-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, {}) }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectContent, { align: "end", children: pageSizeOptions.map((size2) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: String(size2), children: size2 }, size2)) })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mmc-pagination__nav space-x-4", "data-slot": "nav", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button$1,
+            {
+              variant: "ghost",
+              className: "px-2.5 text-foreground hover:text-foreground disabled:text-muted-foreground disabled:opacity-50 disabled:hover:text-muted-foreground",
+              onClick: () => {
+                table.previousPage();
+                if (onPageChange) {
+                  onPageChange(table.getState().pagination?.pageIndex ?? 0);
+                }
+              },
+              disabled: !canPrev,
+              "data-slot": "previous",
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "span",
+            {
+              className: "text-sm text-foreground select-none",
+              "data-slot": "page-indicator",
+              children: (() => {
+                const p2 = table.getState().pagination ?? {};
+                const current = Math.max(1, (p2.pageIndex ?? 0) + 1);
+                let count2;
+                if (manualPagination) {
+                  const pageCountFn = table.getPageCount;
+                  count2 = typeof pageCountFn === "function" ? pageCountFn() : Math.max(1, Math.ceil(totalRows / Math.max(1, pageSize)));
+                } else {
+                  const pageCountFn = table.getPageCount;
+                  count2 = typeof pageCountFn === "function" ? pageCountFn() : Math.max(
+                    1,
+                    Math.ceil(
+                      (table.getFilteredRowModel().rows.length || 0) / Math.max(1, p2.pageSize ?? 10)
+                    )
+                  );
+                }
+                const safeCurrent = Math.min(current, count2);
+                return `Page ${safeCurrent} of ${count2}`;
+              })()
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button$1,
+            {
+              variant: "ghost",
+              className: "px-2.5 text-foreground hover:text-foreground disabled:text-muted-foreground disabled:opacity-50 disabled:hover:text-muted-foreground",
+              onClick: () => {
+                table.nextPage();
+                if (onPageChange) {
+                  onPageChange(table.getState().pagination?.pageIndex ?? 0);
+                }
+              },
+              disabled: !canNext,
+              "data-slot": "next",
+              children: "Next"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function arrayMove(array, from, to) {
   const newArray = array.slice();
   newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
@@ -24620,180 +24812,15 @@ function isAfter(a2, b) {
   }
   return a2.data.current.sortable.index < b.data.current.sortable.index;
 }
-const restrictToHorizontalAxis = (_ref) => {
-  let {
-    transform
-  } = _ref;
-  return {
-    ...transform,
-    y: 0
-  };
-};
-function restrictToBoundingRect(transform, rect, boundingRect) {
-  const value = {
-    ...transform
-  };
-  if (rect.top + transform.y <= boundingRect.top) {
-    value.y = boundingRect.top - rect.top;
-  } else if (rect.bottom + transform.y >= boundingRect.top + boundingRect.height) {
-    value.y = boundingRect.top + boundingRect.height - rect.bottom;
-  }
-  if (rect.left + transform.x <= boundingRect.left) {
-    value.x = boundingRect.left - rect.left;
-  } else if (rect.right + transform.x >= boundingRect.left + boundingRect.width) {
-    value.x = boundingRect.left + boundingRect.width - rect.right;
-  }
-  return value;
-}
-const restrictToParentElement = (_ref) => {
-  let {
-    containerNodeRect,
-    draggingNodeRect,
-    transform
-  } = _ref;
-  if (!draggingNodeRect || !containerNodeRect) {
-    return transform;
-  }
-  return restrictToBoundingRect(transform, draggingNodeRect, containerNodeRect);
-};
-const restrictToVerticalAxis = (_ref) => {
-  let {
-    transform
-  } = _ref;
-  return {
-    ...transform,
-    x: 0
-  };
-};
-function DataTablePagination({
-  table,
-  pageSizeOptions = [25, 50, 100, 250],
-  className,
-  compact: compact2 = false,
-  onPageChange,
-  onPageSizeChange
-}) {
-  const state = table.getState();
-  const pageSize = state.pagination?.pageSize ?? 25;
-  const canPrev = table.getCanPreviousPage();
-  const canNext = table.getCanNextPage();
+function MenuHeader({ title, className, right }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: "mmc-pagination flex items-center justify-between gap-3 px-4 py-3 " + (className || ""),
-      "data-slot": "pagination",
-      children: [
-        !compact2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 flex-1", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-foreground", children: (() => {
-            const total = table.getFilteredRowModel().rows.length;
-            const selected = table.getFilteredSelectedRowModel().rows.length;
-            if (selected > 0) {
-              return `${selected} selected of ${total} items`;
-            }
-            if (total === 0) return "Showing 0 to 0 of 0 items";
-            const { pageIndex = 0, pageSize: pageSize2 = 25 } = table.getState().pagination ?? {};
-            const start = pageIndex * pageSize2 + 1;
-            const end = Math.min(total, (pageIndex + 1) * pageSize2);
-            return `Showing ${start} to ${end} of ${total} items`;
-          })() }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
-            {
-              className: "mmc-pagination__page-size flex items-center gap-2",
-              "data-slot": "page-size",
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-foreground", children: "Show:" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  Select$1,
-                  {
-                    value: String(pageSize),
-                    onValueChange: (value) => {
-                      const size2 = Number(value);
-                      table.setPageIndex(0);
-                      table.setPageSize(size2);
-                      if (onPageSizeChange) {
-                        onPageSizeChange(size2);
-                      }
-                      if (onPageChange) {
-                        onPageChange(0);
-                      }
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-9 w-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, {}) }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectContent, { align: "end", children: pageSizeOptions.map((size2) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: String(size2), children: size2 }, size2)) })
-                    ]
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mmc-pagination__nav space-x-4", "data-slot": "nav", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button$1,
-            {
-              variant: "ghost",
-              className: "px-2.5 text-foreground hover:text-foreground disabled:text-muted-foreground disabled:opacity-50 disabled:hover:text-muted-foreground",
-              onClick: () => {
-                table.previousPage();
-                if (onPageChange) {
-                  onPageChange(table.getState().pagination?.pageIndex ?? 0);
-                }
-              },
-              disabled: !canPrev,
-              "data-slot": "previous",
-              children: "Previous"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "span",
-            {
-              className: "text-sm text-foreground select-none",
-              "data-slot": "page-indicator",
-              children: (() => {
-                const p2 = table.getState().pagination ?? {};
-                const current = Math.max(1, (p2.pageIndex ?? 0) + 1);
-                const count2 = typeof table.getPageCount === "function" ? table.getPageCount() : Math.max(
-                  1,
-                  Math.ceil(
-                    (table.getFilteredRowModel().rows.length || 0) / Math.max(1, p2.pageSize ?? 10)
-                  )
-                );
-                const safeCurrent = Math.min(current, count2);
-                return `Page ${safeCurrent} of ${count2}`;
-              })()
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button$1,
-            {
-              variant: "ghost",
-              className: "px-2.5 text-foreground hover:text-foreground disabled:text-muted-foreground disabled:opacity-50 disabled:hover:text-muted-foreground",
-              onClick: () => {
-                table.nextPage();
-                if (onPageChange) {
-                  onPageChange(table.getState().pagination?.pageIndex ?? 0);
-                }
-              },
-              disabled: !canNext,
-              "data-slot": "next",
-              children: "Next"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function MenuHeader({ title, className, right }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      className: cn$1(
-        "mmc-menu-header flex items-center justify-between border-b px-4 py-2",
-        className
-      ),
-      "data-slot": "menu-header",
+      className: cn$1(
+        "mmc-menu-header flex items-center justify-between border-b px-4 py-2",
+        className
+      ),
+      "data-slot": "menu-header",
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "span",
@@ -29450,77 +29477,56 @@ function useBreakpoint(query = QUERY) {
   }, [query]);
   return matches;
 }
-function useTableController(options) {
-  const {
-    columns,
-    data,
-    columnRegistry,
-    initialState: initialState2,
-    tableId,
-    disableGlobalFilter,
-    customGlobalFilterFn,
-    onRowSelectionChange,
-    onSortingChange,
-    onPaginationChange,
-    onColumnVisibilityChange,
-    onColumnOrderChange,
-    onBatchAction,
-    onRowClick,
-    onExportComplete
-  } = options;
-  const storageKey = tableId ? `mmrc:table:${tableId}` : void 0;
-  const persistedState = React.useMemo(() => {
-    if (!storageKey) return null;
-    try {
-      const raw = localStorage.getItem(storageKey);
-      if (!raw) return null;
-      const parsed = JSON.parse(raw);
-      return parsed;
-    } catch {
-      return null;
+function loadPersistedState(storageKey) {
+  if (!storageKey) return null;
+  try {
+    const raw = localStorage.getItem(storageKey);
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function resolveColumnsFromRegistry(columns, columnRegistry, columnOrder) {
+  if (!columnRegistry) return columns;
+  const entries = Object.entries(columnRegistry);
+  const registryOrder = resolveColumnOrder(
+    columnRegistry
+  );
+  const activeOrder = columnOrder.length ? columnOrder : registryOrder;
+  const registryMap = new Map(entries);
+  const seen = /* @__PURE__ */ new Set();
+  const ordered = activeOrder.map((id) => {
+    const descriptor = registryMap.get(id);
+    if (!descriptor) return null;
+    seen.add(id);
+    return descriptor.columnDef;
+  }).filter(Boolean);
+  entries.forEach(([id, descriptor]) => {
+    if (!seen.has(id)) {
+      ordered.push(descriptor.columnDef);
     }
-  }, [storageKey]);
-  const {
-    sorting: [sorting, setSorting],
-    columnVisibility: [columnVisibility, setColumnVisibility],
-    columnOrder: [columnOrder, setColumnOrder],
-    columnPinning: [columnPinning, setColumnPinning],
-    rowSelection: [rowSelection, setRowSelection]
-  } = useDataTableState({
-    registry: columnRegistry,
-    initialSorting: persistedState?.sorting ?? initialState2?.sorting,
-    initialVisibility: persistedState?.columnVisibility ?? initialState2?.visibility,
-    initialColumnOrder: persistedState?.columnOrder ?? initialState2?.columnOrder,
-    initialPinning: initialState2?.columnPinning,
-    initialRowSelection: initialState2?.rowSelection
-  });
-  const resolvedColumns = React.useMemo(() => {
-    if (!columnRegistry) return columns;
-    const entries = Object.entries(columnRegistry);
-    const registryOrder = resolveColumnOrder(
-      columnRegistry
-    );
-    const activeOrder = columnOrder.length ? columnOrder : registryOrder;
-    const registryMap = new Map(entries);
-    const seen = /* @__PURE__ */ new Set();
-    const ordered = activeOrder.map((id) => {
-      const descriptor = registryMap.get(id);
-      if (!descriptor) return null;
-      seen.add(id);
-      return descriptor.columnDef;
-    }).filter(Boolean);
-    entries.forEach(([id, descriptor]) => {
-      if (!seen.has(id)) {
-        ordered.push(descriptor.columnDef);
-      }
-    });
-    return ordered;
-  }, [columnRegistry, columns, columnOrder]);
-  const [globalFilter, setGlobalFilter] = React.useState("");
-  const [pagination, setPagination] = React.useState({
-    pageIndex: 0,
-    pageSize: 25
   });
+  return ordered;
+}
+function useWrappedStateSetters({
+  rowSelection,
+  setRowSelection,
+  onRowSelectionChange,
+  data,
+  sorting,
+  setSorting,
+  onSortingChange,
+  pagination,
+  setPagination,
+  onPaginationChange,
+  columnVisibility,
+  setColumnVisibility,
+  onColumnVisibilityChange,
+  columnOrder,
+  setColumnOrder,
+  onColumnOrderChange
+}) {
   const wrappedSetRowSelection = React.useCallback(
     (updater) => {
       const newSelection = typeof updater === "function" ? updater(rowSelection) : updater;
@@ -29572,6 +29578,141 @@ function useTableController(options) {
     },
     [columnOrder, setColumnOrder, onColumnOrderChange]
   );
+  return {
+    wrappedSetRowSelection,
+    wrappedSetSorting,
+    wrappedSetPagination,
+    wrappedSetColumnVisibility,
+    wrappedSetColumnOrder
+  };
+}
+function getGlobalFilterFn(disableGlobalFilter, customGlobalFilterFn) {
+  if (disableGlobalFilter) {
+    return (_row, _columnId, _filterValue) => true;
+  }
+  if (customGlobalFilterFn) {
+    return customGlobalFilterFn;
+  }
+  return void 0;
+}
+function createResetColumnsHandler({
+  columnRegistry,
+  initialState: initialState2,
+  storageKey,
+  registryDefaultVisibility,
+  registryDefaultOrder,
+  setSorting,
+  setColumnVisibility,
+  setColumnOrder,
+  setColumnPinning,
+  table
+}) {
+  if (!columnRegistry && !initialState2) return void 0;
+  return () => {
+    if (storageKey) {
+      try {
+        localStorage.removeItem(storageKey);
+      } catch {
+      }
+    }
+    if (initialState2?.sorting) {
+      setSorting([...initialState2.sorting]);
+    } else {
+      setSorting([]);
+    }
+    if (registryDefaultVisibility) {
+      setColumnVisibility({ ...registryDefaultVisibility });
+    } else if (initialState2?.visibility) {
+      setColumnVisibility({ ...initialState2.visibility });
+    } else {
+      setColumnVisibility({});
+    }
+    if (registryDefaultOrder?.length) {
+      setColumnOrder([...registryDefaultOrder]);
+    } else if (initialState2?.columnOrder) {
+      setColumnOrder([...initialState2.columnOrder]);
+    }
+    setColumnPinning(
+      initialState2?.columnPinning ? {
+        left: [...initialState2.columnPinning.left ?? []],
+        right: [...initialState2.columnPinning.right ?? []]
+      } : { left: [], right: [] }
+    );
+    table.resetColumnSizing();
+  };
+}
+function useTableController(options) {
+  const {
+    columns,
+    data,
+    columnRegistry,
+    initialState: initialState2,
+    tableId,
+    disableGlobalFilter,
+    customGlobalFilterFn,
+    manualPagination = false,
+    pageCount,
+    onRowSelectionChange,
+    onSortingChange,
+    onPaginationChange,
+    onColumnVisibilityChange,
+    onColumnOrderChange,
+    onBatchAction,
+    onRowClick,
+    onExportComplete
+  } = options;
+  const storageKey = tableId ? `mmrc:table:${tableId}` : void 0;
+  const persistedState = React.useMemo(
+    () => loadPersistedState(storageKey),
+    [storageKey]
+  );
+  const {
+    sorting: [sorting, setSorting],
+    columnVisibility: [columnVisibility, setColumnVisibility],
+    columnOrder: [columnOrder, setColumnOrder],
+    columnPinning: [columnPinning, setColumnPinning],
+    rowSelection: [rowSelection, setRowSelection]
+  } = useDataTableState({
+    registry: columnRegistry,
+    initialSorting: persistedState?.sorting ?? initialState2?.sorting,
+    initialVisibility: persistedState?.columnVisibility ?? initialState2?.visibility,
+    initialColumnOrder: persistedState?.columnOrder ?? initialState2?.columnOrder,
+    initialPinning: initialState2?.columnPinning,
+    initialRowSelection: initialState2?.rowSelection
+  });
+  const resolvedColumns = React.useMemo(
+    () => resolveColumnsFromRegistry(columns, columnRegistry, columnOrder),
+    [columns, columnRegistry, columnOrder]
+  );
+  const [globalFilter, setGlobalFilter] = React.useState("");
+  const [pagination, setPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 25
+  });
+  const {
+    wrappedSetRowSelection,
+    wrappedSetSorting,
+    wrappedSetPagination,
+    wrappedSetColumnVisibility,
+    wrappedSetColumnOrder
+  } = useWrappedStateSetters({
+    rowSelection,
+    setRowSelection,
+    onRowSelectionChange,
+    data,
+    sorting,
+    setSorting,
+    onSortingChange,
+    pagination,
+    setPagination,
+    onPaginationChange,
+    columnVisibility,
+    setColumnVisibility,
+    onColumnVisibilityChange,
+    columnOrder,
+    setColumnOrder,
+    onColumnOrderChange
+  });
   React.useEffect(() => {
     if (!storageKey) return;
     try {
@@ -29584,15 +29725,10 @@ function useTableController(options) {
     } catch {
     }
   }, [columnOrder, columnVisibility, sorting, storageKey]);
-  const globalFilterFn = React.useMemo(() => {
-    if (disableGlobalFilter) {
-      return (_row, _columnId, _filterValue) => true;
-    }
-    if (customGlobalFilterFn) {
-      return customGlobalFilterFn;
-    }
-    return void 0;
-  }, [disableGlobalFilter, customGlobalFilterFn]);
+  const globalFilterFn = React.useMemo(
+    () => getGlobalFilterFn(disableGlobalFilter, customGlobalFilterFn),
+    [disableGlobalFilter, customGlobalFilterFn]
+  );
   const table = useReactTable({
     data,
     columns: resolvedColumns,
@@ -29609,6 +29745,9 @@ function useTableController(options) {
     enableColumnResizing: true,
     enableColumnPinning: true,
     enableGlobalFilter: true,
+    // Server-side pagination configuration
+    manualPagination,
+    ...manualPagination && pageCount !== void 0 && { pageCount },
     // Only include globalFilterFn prop if we have a custom filter or disabled filter
     // Omitting it allows TanStack Table to use its default filter behavior
     ...globalFilterFn !== void 0 && { globalFilterFn },
@@ -29622,7 +29761,10 @@ function useTableController(options) {
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
+    // Only use pagination row model for client-side pagination
+    ...!manualPagination && {
+      getPaginationRowModel: getPaginationRowModel()
+    },
     getFacetedRowModel: getFacetedRowModel(),
     getFacetedUniqueValues: getFacetedUniqueValues(),
     debugTable: false
@@ -29642,52 +29784,32 @@ function useTableController(options) {
     ) : void 0,
     [columnRegistry]
   );
-  const handleResetColumns = React.useMemo(() => {
-    if (!columnRegistry && !initialState2) return void 0;
-    return () => {
-      if (storageKey) {
-        try {
-          localStorage.removeItem(storageKey);
-        } catch {
-        }
-      }
-      if (initialState2?.sorting) {
-        setSorting([...initialState2.sorting]);
-      } else {
-        setSorting([]);
-      }
-      if (registryDefaultVisibility) {
-        setColumnVisibility({ ...registryDefaultVisibility });
-      } else if (initialState2?.visibility) {
-        setColumnVisibility({ ...initialState2.visibility });
-      } else {
-        setColumnVisibility({});
-      }
-      if (registryDefaultOrder && registryDefaultOrder.length) {
-        setColumnOrder([...registryDefaultOrder]);
-      } else if (initialState2?.columnOrder) {
-        setColumnOrder([...initialState2.columnOrder]);
-      }
-      setColumnPinning(
-        initialState2?.columnPinning ? {
-          left: [...initialState2.columnPinning.left ?? []],
-          right: [...initialState2.columnPinning.right ?? []]
-        } : { left: [], right: [] }
-      );
-      table.resetColumnSizing();
-    };
-  }, [
-    columnRegistry,
-    initialState2,
-    registryDefaultVisibility,
-    registryDefaultOrder,
-    setColumnVisibility,
-    setColumnOrder,
-    setColumnPinning,
-    setSorting,
-    table,
-    storageKey
-  ]);
+  const handleResetColumns = React.useMemo(
+    () => createResetColumnsHandler({
+      columnRegistry,
+      initialState: initialState2,
+      storageKey,
+      registryDefaultVisibility,
+      registryDefaultOrder,
+      setSorting,
+      setColumnVisibility,
+      setColumnOrder,
+      setColumnPinning,
+      table
+    }),
+    [
+      columnRegistry,
+      initialState2,
+      storageKey,
+      registryDefaultVisibility,
+      registryDefaultOrder,
+      setSorting,
+      setColumnVisibility,
+      setColumnOrder,
+      setColumnPinning,
+      table
+    ]
+  );
   return {
     table,
     resolvedColumns,
@@ -29745,25 +29867,126 @@ function getAlignmentClass(align) {
       return void 0;
   }
 }
-const TABLE_TOKENS = {
-  defaultColumnWidth: 160,
-  minColumnWidth: 96,
-  maxColumnWidth: 420,
-  toolbarGap: 8,
-  selectionColumnWidth: 44,
-  actionsColumnWidth: 64
-};
-function SortableHeader({
-  header,
-  isDragging,
-  activeColumnId,
-  clampRef
+function computeClampBounds(activeId, containerRef) {
+  try {
+    const th = document.querySelector(`th[data-col-id="${activeId}"]`);
+    const container = containerRef.current;
+    if (th && container) {
+      const t = th.getBoundingClientRect();
+      const c2 = container.getBoundingClientRect();
+      return { minX: c2.left - t.left, maxX: c2.right - t.right };
+    }
+  } catch {
+  }
+  return {
+    minX: Number.NEGATIVE_INFINITY,
+    maxX: Number.POSITIVE_INFINITY
+  };
+}
+function getVisibleColumnOrder(table, currentOrder) {
+  const groups = table.getHeaderGroups();
+  if (!groups.length) return currentOrder;
+  return groups[0].headers.filter((h) => h.column.getIsVisible()).map((h) => h.column.id);
+}
+function useDragAndDrop({
+  table,
+  containerRef
 }) {
-  const id = header.column.id;
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [activeColumnId, setActiveColumnId] = React.useState(
+    null
+  );
+  const [tempColumnOrder, setTempColumnOrder] = React.useState([]);
+  const clampRef = React.useRef({
+    minX: Number.NEGATIVE_INFINITY,
+    maxX: Number.POSITIVE_INFINITY
+  });
+  const stateColumnOrder = table.getState().columnOrder;
+  const allLeafColumnIds = table.getAllLeafColumns().map((c2) => c2.id);
+  const baseOrder = stateColumnOrder?.length ? stateColumnOrder : allLeafColumnIds;
+  const currentOrder = pinBoundaries(baseOrder);
+  const visibleOrder = getVisibleColumnOrder(table, currentOrder);
+  const renderOrder = pinBoundaries(
+    isDragging && tempColumnOrder.length ? tempColumnOrder : visibleOrder
+  );
+  const sortableHeaderIds = React.useMemo(
+    () => renderOrder.filter((id) => id !== "select" && id !== "actions"),
+    [renderOrder]
+  );
+  const handleDragStart = React.useCallback(
+    (event) => {
+      setIsDragging(true);
+      const activeId = String(event.active.id);
+      setActiveColumnId(activeId);
+      const visible = getVisibleColumnOrder(table, currentOrder);
+      setTempColumnOrder(pinBoundaries(visible));
+      clampRef.current = computeClampBounds(activeId, containerRef);
+    },
+    [currentOrder, table, containerRef]
+  );
+  const handleDragOver = React.useCallback((event) => {
+    const { active, over } = event;
+    if (!over) return;
+    const activeId = String(active.id);
+    const overId = String(over.id);
+    if (activeId === overId) return;
+    setTempColumnOrder((prev) => {
+      const from = prev.indexOf(activeId);
+      const to = prev.indexOf(overId);
+      if (from === -1 || to === -1) return prev;
+      const moved = arrayMove(prev, from, to);
+      if (!moved.includes("select")) return moved;
+      return ["select", ...moved.filter((id) => id !== "select")];
+    });
+  }, []);
+  const handleDragEnd = React.useCallback(
+    (_event) => {
+      setIsDragging(false);
+      setActiveColumnId(null);
+      if (!tempColumnOrder.length) {
+        setTempColumnOrder([]);
+        return;
+      }
+      const normalizedTempOrder = pinBoundaries(tempColumnOrder);
+      const prev = JSON.stringify(currentOrder);
+      const next = JSON.stringify(normalizedTempOrder);
+      if (prev !== next) {
+        table.setColumnOrder(normalizedTempOrder);
+      }
+      setTempColumnOrder([]);
+    },
+    [currentOrder, table, tempColumnOrder]
+  );
+  return {
+    isDragging,
+    activeColumnId,
+    renderOrder,
+    sortableHeaderIds,
+    clampRef,
+    handleDragStart,
+    handleDragOver,
+    handleDragEnd
+  };
+}
+const TABLE_TOKENS = {
+  defaultColumnWidth: 160,
+  minColumnWidth: 96,
+  maxColumnWidth: 420,
+  toolbarGap: 8,
+  selectionColumnWidth: 44,
+  actionsColumnWidth: 64
+};
+function SortableHeader({
+  header,
+  isDragging,
+  activeColumnId,
+  clampRef
+}) {
+  const id = header.column.id;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
     transform,
     transition,
     isDragging: isItemDragging
@@ -30028,71 +30251,129 @@ function CellContent({
   }, [isRightAligned]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref, className: "mmc-table-cell__content", children });
 }
+function renderSkeletonRows(skeletonRowCount, resolvedColumns) {
+  return [...Array(skeletonRowCount)].map((_, rowIndex) => {
+    const rowKey = `skeleton-row-${rowIndex}`;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { className: "border-b", children: resolvedColumns.map((column, colIndex) => {
+      const columnId = column.id || `skeleton-col-${rowIndex}-${colIndex}`;
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "td",
+        {
+          className: cn$1(
+            "px-4 py-2.5 align-middle text-xs font-normal transition-all duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] will-change-transform",
+            getAlignmentClass(column.meta?.align)
+          ),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-[21.333px] w-full" })
+        },
+        columnId
+      );
+    }) }, rowKey);
+  });
+}
+function createFixedWidthStyle(width) {
+  return {
+    width,
+    minWidth: width,
+    maxWidth: width
+  };
+}
+function renderTableCell(cell, isDragging, activeColumnId) {
+  const isOtherColumnDimmed = isDragging && activeColumnId != null && cell.column.id !== activeColumnId && cell.column.id !== "select";
+  let cellPaddingClass;
+  if (cell.column.id === "select") {
+    cellPaddingClass = "p-0";
+  } else {
+    cellPaddingClass = "[&:has([role=checkbox])]:pr-0";
+  }
+  const actionsPaddingClass = cell.column.id === "actions" ? "py-1.5" : void 0;
+  let cellStyle;
+  if (cell.column.id === "select") {
+    cellStyle = createFixedWidthStyle(TABLE_TOKENS.selectionColumnWidth);
+  } else if (cell.column.id === "actions") {
+    cellStyle = createFixedWidthStyle(TABLE_TOKENS.actionsColumnWidth);
+  } else {
+    cellStyle = { width: cell.column.getSize() };
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "td",
+    {
+      className: cn$1(
+        "px-4 py-2.5 align-middle text-xs font-normal",
+        cellPaddingClass,
+        actionsPaddingClass,
+        getAlignmentClass(
+          cell.column.columnDef.meta?.align
+        ),
+        isOtherColumnDimmed ? "opacity-40" : void 0
+      ),
+      style: cellStyle,
+      "data-col-id": cell.column.id,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        CellContent,
+        {
+          align: cell.column.columnDef.meta?.align,
+          children: flexRender(cell.column.columnDef.cell, cell.getContext())
+        }
+      )
+    },
+    cell.id
+  );
+}
+function getVisibleCellsInOrder(row, isDragging, renderOrder) {
+  if (!isDragging) {
+    return row.getVisibleCells();
+  }
+  return row.getVisibleCells().slice().sort((a2, b) => {
+    const ia = renderOrder.indexOf(a2.column.id);
+    const ib = renderOrder.indexOf(b.column.id);
+    return ia - ib;
+  });
+}
 function TableBody({
   loading,
   resolvedColumns,
   rows,
   renderOrder,
   isDragging,
-  activeColumnId
+  activeColumnId,
+  skeletonRowCount = 5,
+  onRowClick
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: "[&_tr:last-child]:border-0", children: loading ? [...Array(5)].map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: resolvedColumns.map((column, j) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "td",
-    {
-      className: cn$1(
-        "px-4 py-2.5 align-middle text-xs font-normal transition-all duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] will-change-transform",
-        getAlignmentClass(column.meta?.align)
-      ),
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-6 w-full" })
-    },
-    j
-  )) }, i)) : rows?.length ? rows.map((row) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "tr",
-    {
-      "data-state": row.getIsSelected() && "selected",
-      className: "border-b transition-colors hover:bg-[var(--accent)] data-[state=selected]:bg-muted",
-      children: (isDragging ? row.getVisibleCells().slice().sort((a2, b) => {
-        const ia = renderOrder.indexOf(a2.column.id);
-        const ib = renderOrder.indexOf(b.column.id);
-        return ia - ib;
-      }) : row.getVisibleCells()).map((cell) => {
-        const isOtherColumnDimmed = isDragging && activeColumnId != null && cell.column.id !== activeColumnId && cell.column.id !== "select";
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "td",
-          {
-            className: cn$1(
-              "px-4 py-2.5 align-middle text-xs font-normal",
-              cell.column.id === "select" ? "p-0" : "[&:has([role=checkbox])]:pr-0",
-              cell.column.id === "actions" ? "py-1.5" : void 0,
-              getAlignmentClass(
-                cell.column.columnDef.meta?.align
-              ),
-              isOtherColumnDimmed ? "opacity-40" : void 0
-            ),
-            style: cell.column.id === "select" ? {
-              width: TABLE_TOKENS.selectionColumnWidth,
-              minWidth: TABLE_TOKENS.selectionColumnWidth,
-              maxWidth: TABLE_TOKENS.selectionColumnWidth
-            } : cell.column.id === "actions" ? {
-              width: TABLE_TOKENS.actionsColumnWidth,
-              minWidth: TABLE_TOKENS.actionsColumnWidth,
-              maxWidth: TABLE_TOKENS.actionsColumnWidth
-            } : { width: cell.column.getSize() },
-            "data-col-id": cell.column.id,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              CellContent,
-              {
-                align: cell.column.columnDef.meta?.align,
-                children: flexRender(cell.column.columnDef.cell, cell.getContext())
-              }
-            )
-          },
-          cell.id
+  let tableContent;
+  if (loading) {
+    tableContent = renderSkeletonRows(skeletonRowCount, resolvedColumns);
+  } else if (rows?.length) {
+    tableContent = rows.map((row) => {
+      const visibleCells = getVisibleCellsInOrder(row, isDragging, renderOrder);
+      const handleRowClick = onRowClick ? (event) => {
+        const target = event.target;
+        if (!target) return;
+        const interactive = target.closest(
+          'a,button,input,select,textarea,label,[role=checkbox],[data-slot="table-action-trigger"]'
         );
-      })
-    },
-    row.id
-  )) : /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("td", { colSpan: resolvedColumns.length, className: "h-24 text-center", children: "No results." }) }) });
+        if (interactive) return;
+        onRowClick(row.original, row.index);
+      } : void 0;
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "tr",
+        {
+          "data-state": row.getIsSelected() && "selected",
+          className: cn$1(
+            "border-b transition-colors hover:bg-[var(--accent)] data-[state=selected]:bg-muted",
+            onRowClick && "cursor-pointer"
+          ),
+          onClick: handleRowClick,
+          children: visibleCells.map(
+            (cell) => renderTableCell(cell, isDragging, activeColumnId)
+          )
+        },
+        row.id
+      );
+    });
+  } else {
+    tableContent = /* @__PURE__ */ jsxRuntimeExports.jsx("tr", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("td", { colSpan: resolvedColumns.length, className: "h-24 text-center", children: "No results." }) });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: "[&_tr:last-child]:border-0", children: tableContent });
 }
 function BatchActionsToolbar({
   selectedCount,
@@ -30133,6 +30414,151 @@ function ColGroup({ columns, debug: debug2 }) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("col", { style: { width } }, String(col.id));
   }) });
 }
+function useDataTableHandlers({
+  table,
+  controllerOnBatchAction,
+  onPaginationChange,
+  setIsBodyScrolled,
+  isBodyScrolled
+}) {
+  const handleBatchAction = React.useCallback(
+    (action) => {
+      if (!controllerOnBatchAction) return;
+      const selectedRows = table.getFilteredSelectedRowModel().rows.map((row) => row.original);
+      controllerOnBatchAction(action, selectedRows);
+    },
+    [controllerOnBatchAction, table]
+  );
+  const handleScroll2 = React.useCallback(
+    (e) => {
+      const scrolled = (e.currentTarget?.scrollTop ?? 0) > 0;
+      if (scrolled !== isBodyScrolled) setIsBodyScrolled(scrolled);
+    },
+    [isBodyScrolled, setIsBodyScrolled]
+  );
+  const handlePageChange = React.useCallback(
+    (pageIndex) => {
+      if (!onPaginationChange) return;
+      onPaginationChange(
+        pageIndex,
+        table.getState().pagination?.pageSize ?? 25
+      );
+    },
+    [onPaginationChange, table]
+  );
+  const handlePageSizeChange = React.useCallback(
+    (pageSize) => {
+      if (!onPaginationChange) return;
+      onPaginationChange(table.getState().pagination?.pageIndex ?? 0, pageSize);
+    },
+    [onPaginationChange, table]
+  );
+  const handleExport = React.useCallback(() => {
+    exportTableToCSV(table);
+  }, [table]);
+  return {
+    handleBatchAction,
+    handleScroll: handleScroll2,
+    handlePageChange,
+    handlePageSizeChange,
+    handleExport
+  };
+}
+function renderEmptyState(emptyState) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: "mmc-table-empty flex h-full w-full items-center justify-center",
+      role: "region",
+      "aria-label": "Empty state",
+      children: emptyState
+    }
+  );
+}
+function renderTableLayout({
+  toolbar,
+  batchActions,
+  scrollArea,
+  pagination
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full flex flex-col min-h-0", children: [
+    toolbar,
+    batchActions,
+    scrollArea,
+    pagination
+  ] });
+}
+function renderTableContent({
+  table,
+  loading,
+  resolvedColumns,
+  renderOrder,
+  isDragging,
+  activeColumnId,
+  skeletonRowCount,
+  isBodyScrolled,
+  sortableHeaderIds,
+  clampRef,
+  sensors,
+  handleDragStart,
+  handleDragOver,
+  handleDragEnd,
+  tableRef,
+  debug: debug2,
+  onRowClick
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      modifiers: [restrictToHorizontalAxis],
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "table",
+        {
+          ref: tableRef,
+          className: "w-full caption-bottom text-sm table-fixed",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ColGroup,
+              {
+                columns: table.getVisibleLeafColumns(),
+                debug: debug2
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              TableHeader,
+              {
+                headerGroups: table.getHeaderGroups(),
+                sortableHeaderIds,
+                isBodyScrolled,
+                isDragging,
+                activeColumnId,
+                clampRef
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              TableBody,
+              {
+                loading,
+                resolvedColumns,
+                rows: table.getRowModel().rows,
+                renderOrder,
+                isDragging,
+                activeColumnId,
+                skeletonRowCount,
+                onRowClick
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 function DataTable({
   columns,
   data,
@@ -30143,6 +30569,9 @@ function DataTable({
   toolbar,
   emptyState,
   forceEmptyState,
+  manualPagination = false,
+  pageCount,
+  totalRowCount,
   onRowSelectionChange,
   onSortingChange,
   onPaginationChange,
@@ -30163,7 +30592,8 @@ function DataTable({
     setGlobalFilter,
     handleResetColumns,
     onBatchAction: controllerOnBatchAction,
-    onExportComplete: controllerOnExportComplete
+    onExportComplete: controllerOnExportComplete,
+    onRowClick: controllerOnRowClick
   } = useTableController({
     columns,
     data,
@@ -30172,6 +30602,8 @@ function DataTable({
     tableId,
     disableGlobalFilter: toolbar?.disableGlobalFilter,
     customGlobalFilterFn,
+    manualPagination,
+    pageCount,
     onRowSelectionChange,
     onSortingChange,
     onPaginationChange,
@@ -30181,208 +30613,111 @@ function DataTable({
     onRowClick,
     onExportComplete
   });
-  const [isDragging, setIsDragging] = React.useState(false);
-  const [activeColumnId, setActiveColumnId] = React.useState(
-    null
-  );
-  const [tempColumnOrder, setTempColumnOrder] = React.useState([]);
   const containerRef = React.useRef(null);
   const tableRef = React.useRef(null);
-  const clampRef = React.useRef({
-    minX: Number.NEGATIVE_INFINITY,
-    maxX: Number.POSITIVE_INFINITY
-  });
   const [isBodyScrolled, setIsBodyScrolled] = React.useState(false);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 10 } }),
     useSensor(KeyboardSensor)
   );
-  const stateColumnOrder = table.getState().columnOrder;
-  const allLeafColumnIds = table.getAllLeafColumns().map((c2) => c2.id);
-  const baseOrder = stateColumnOrder?.length ? stateColumnOrder : allLeafColumnIds;
-  const currentOrder = pinBoundaries(baseOrder);
-  const headerGroups = table.getHeaderGroups();
-  const visibleOrder = headerGroups.length ? headerGroups[0].headers.filter((h) => h.column.getIsVisible()).map((h) => h.column.id) : currentOrder;
-  const renderOrder = pinBoundaries(
-    isDragging && tempColumnOrder.length ? tempColumnOrder : visibleOrder
-  );
-  const sortableHeaderIds = React.useMemo(
-    () => renderOrder.filter((id) => id !== "select" && id !== "actions"),
-    [renderOrder]
-  );
-  const handleDragStart = React.useCallback(
-    (event) => {
-      setIsDragging(true);
-      setActiveColumnId(String(event.active.id));
-      const groups = table.getHeaderGroups();
-      const visible = groups.length ? groups[0].headers.filter((h) => h.column.getIsVisible()).map((h) => h.column.id) : currentOrder;
-      setTempColumnOrder(pinBoundaries(visible));
-      try {
-        const activeId = String(event.active.id);
-        const th = document.querySelector(`th[data-col-id="${activeId}"]`);
-        const container = containerRef.current;
-        if (th && container) {
-          const t = th.getBoundingClientRect();
-          const c2 = container.getBoundingClientRect();
-          clampRef.current = { minX: c2.left - t.left, maxX: c2.right - t.right };
-        } else {
-          clampRef.current = {
-            minX: Number.NEGATIVE_INFINITY,
-            maxX: Number.POSITIVE_INFINITY
-          };
-        }
-      } catch {
-        clampRef.current = {
-          minX: Number.NEGATIVE_INFINITY,
-          maxX: Number.POSITIVE_INFINITY
-        };
-      }
-    },
-    [currentOrder, table]
+  const {
+    isDragging,
+    activeColumnId,
+    renderOrder,
+    sortableHeaderIds,
+    clampRef,
+    handleDragStart,
+    handleDragOver,
+    handleDragEnd
+  } = useDragAndDrop({
+    table,
+    containerRef
+  });
+  const {
+    handleBatchAction,
+    handleScroll: handleScroll2,
+    handlePageChange,
+    handlePageSizeChange,
+    handleExport
+  } = useDataTableHandlers({
+    table,
+    controllerOnBatchAction,
+    onPaginationChange,
+    setIsBodyScrolled,
+    isBodyScrolled
+  });
+  const isForcedEmpty = !loading && Boolean(forceEmptyState) && Boolean(emptyState);
+  const selectedRowCount = table.getFilteredSelectedRowModel().rows.length;
+  const hasSelectedRows = selectedRowCount > 0;
+  const skeletonRowCount = loading ? table.getState().pagination?.pageSize ?? 25 : void 0;
+  const batchActionHandler = controllerOnBatchAction ? handleBatchAction : void 0;
+  const pageChangeHandler = onPaginationChange ? handlePageChange : void 0;
+  const pageSizeChangeHandler = onPaginationChange ? handlePageSizeChange : void 0;
+  const tableContent = isForcedEmpty ? renderEmptyState(emptyState) : renderTableContent({
+    table,
+    loading,
+    resolvedColumns,
+    renderOrder,
+    isDragging,
+    activeColumnId,
+    skeletonRowCount,
+    isBodyScrolled,
+    sortableHeaderIds,
+    clampRef,
+    sensors,
+    handleDragStart,
+    handleDragOver,
+    handleDragEnd,
+    tableRef,
+    debug: debug2,
+    onRowClick: controllerOnRowClick
+  });
+  const toolbarElement = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    DataTableToolbar,
+    {
+      table,
+      loading,
+      globalFilter: globalFilter ?? "",
+      onGlobalFilterChange: setGlobalFilter,
+      onResetColumns: handleResetColumns,
+      columnRegistry,
+      onExport: handleExport,
+      onExportComplete: controllerOnExportComplete,
+      options: toolbar
+    }
   );
-  const handleDragOver = React.useCallback((event) => {
-    const { active, over } = event;
-    if (!over) return;
-    const activeId = String(active.id);
-    const overId = String(over.id);
-    if (activeId === overId) return;
-    setTempColumnOrder((prev) => {
-      const from = prev.indexOf(activeId);
-      const to = prev.indexOf(overId);
-      if (from === -1 || to === -1) return prev;
-      const moved = arrayMove(prev, from, to);
-      if (moved.includes("select")) {
-        const next = ["select", ...moved.filter((id) => id !== "select")];
-        return next;
-      }
-      return moved;
-    });
-  }, []);
-  const handleDragEnd = React.useCallback(
-    (_event) => {
-      setIsDragging(false);
-      setActiveColumnId(null);
-      if (!tempColumnOrder.length) return;
-      const normalizedTempOrder = pinBoundaries(tempColumnOrder);
-      const prev = JSON.stringify(currentOrder);
-      const next = JSON.stringify(normalizedTempOrder);
-      if (prev !== next) {
-        table.setColumnOrder(normalizedTempOrder);
-      }
-      setTempColumnOrder([]);
-    },
-    [currentOrder, table, tempColumnOrder]
+  const batchActions = hasSelectedRows ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    BatchActionsToolbar,
+    {
+      selectedCount: selectedRowCount,
+      onBatchAction: batchActionHandler
+    }
+  ) : null;
+  const scrollArea = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: "relative w-full flex-1 min-h-0 overflow-auto",
+      ref: containerRef,
+      onScroll: handleScroll2,
+      children: tableContent
+    }
   );
-  const isForcedEmpty = !loading && Boolean(forceEmptyState) && Boolean(emptyState);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full h-full flex flex-col min-h-0", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      DataTableToolbar,
-      {
-        table,
-        loading,
-        globalFilter: globalFilter ?? "",
-        onGlobalFilterChange: setGlobalFilter,
-        onResetColumns: handleResetColumns,
-        columnRegistry,
-        onExport: () => exportTableToCSV(table),
-        onExportComplete: controllerOnExportComplete,
-        options: toolbar
-      }
-    ),
-    table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
-      BatchActionsToolbar,
-      {
-        selectedCount: table.getFilteredSelectedRowModel().rows.length,
-        onBatchAction: controllerOnBatchAction ? (action) => {
-          const selectedRows = table.getFilteredSelectedRowModel().rows.map((row) => row.original);
-          controllerOnBatchAction(action, selectedRows);
-        } : void 0
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        className: "relative w-full flex-1 min-h-0 overflow-auto",
-        ref: containerRef,
-        onScroll: (e) => {
-          const t = e.currentTarget;
-          const scrolled = (t?.scrollTop ?? 0) > 0;
-          if (scrolled !== isBodyScrolled) setIsBodyScrolled(scrolled);
-        },
-        children: isForcedEmpty ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: "mmc-table-empty flex h-full w-full items-center justify-center",
-            role: "region",
-            "aria-label": "Empty state",
-            children: emptyState
-          }
-        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-          DndContext,
-          {
-            sensors,
-            collisionDetection: closestCenter,
-            modifiers: [restrictToHorizontalAxis],
-            onDragStart: handleDragStart,
-            onDragOver: handleDragOver,
-            onDragEnd: handleDragEnd,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "table",
-              {
-                ref: tableRef,
-                className: "w-full caption-bottom text-sm table-fixed",
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    ColGroup,
-                    {
-                      columns: table.getVisibleLeafColumns(),
-                      debug: debug2
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    TableHeader,
-                    {
-                      headerGroups: table.getHeaderGroups(),
-                      sortableHeaderIds,
-                      isBodyScrolled,
-                      isDragging,
-                      activeColumnId,
-                      clampRef
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    TableBody,
-                    {
-                      loading,
-                      resolvedColumns,
-                      rows: table.getRowModel().rows,
-                      renderOrder,
-                      isDragging,
-                      activeColumnId
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        )
-      }
-    ),
-    isForcedEmpty ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-border bg-[var(--tablehead-bg)]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      DataTablePagination,
-      {
-        table,
-        onPageChange: onPaginationChange ? (pageIndex) => onPaginationChange(
-          pageIndex,
-          table.getState().pagination?.pageSize ?? 25
-        ) : void 0,
-        onPageSizeChange: onPaginationChange ? (pageSize) => onPaginationChange(
-          table.getState().pagination?.pageIndex ?? 0,
-          pageSize
-        ) : void 0
-      }
-    ) })
-  ] });
+  const pagination = !isForcedEmpty ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 border-t border-border bg-[var(--tablehead-bg)]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    DataTablePagination,
+    {
+      table,
+      manualPagination,
+      totalRowCount,
+      onPageChange: pageChangeHandler,
+      onPageSizeChange: pageSizeChangeHandler
+    }
+  ) }) : null;
+  return renderTableLayout({
+    toolbar: toolbarElement,
+    batchActions,
+    scrollArea,
+    pagination
+  });
 }
 const ALIGNMENT_PRESETS = {
   NAME: "left",
@@ -32040,6 +32375,9 @@ function ResponsiveTable({
   toolbarOptions,
   emptyState,
   forceEmptyState,
+  manualPagination,
+  pageCount,
+  totalRowCount,
   onRowSelectionChange,
   onSortingChange,
   onPaginationChange,
@@ -32064,6 +32402,9 @@ function ResponsiveTable({
         toolbar: toolbarOptions,
         emptyState,
         forceEmptyState,
+        manualPagination,
+        pageCount,
+        totalRowCount,
         onRowSelectionChange,
         onSortingChange,
         onPaginationChange,