@juv/codego-react-ui 3.0.7 → 3.1.0

package/dist/index.cjs

@@ -2127,6 +2127,7 @@ function MetricRow({ items, divided = true, className }) {
 
 // src/components/ui/data-grid.tsx
 var React24 = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
 var import_axios = __toESM(require("axios"), 1);
 var import_lucide_react15 = require("lucide-react");
 
@@ -4858,7 +4859,21 @@ function useServerDataGrid({ url, params }) {
     import_axios.default.get(url, { params: { ...params, page: currentPage } }).then(({ data: res }) => {
       if (cancelled) return;
       setData(res.data);
-      setPagination(res.pagination);
+      const rawTotal = res.total;
+      const rawPerPage = res.per_page;
+      const rawLastPage = res.last_page;
+      const lastPage = rawLastPage ?? Math.ceil(rawTotal / rawPerPage);
+      const pg = res.pagination ?? {
+        first_page_url: res.first_page_url ?? `${url}?page=1`,
+        last_page_url: res.last_page_url ?? `${url}?page=${lastPage}`,
+        last_page: lastPage,
+        next_page_url: res.next_page_url !== void 0 ? res.next_page_url : currentPage < lastPage ? `${url}?page=${currentPage + 1}` : null,
+        prev_page_url: res.prev_page_url !== void 0 ? res.prev_page_url : currentPage > 1 ? `${url}?page=${currentPage - 1}` : null,
+        per_page: rawPerPage,
+        total: rawTotal,
+        links: res.links ?? []
+      };
+      setPagination(pg);
       if (res.data.length > 0) {
         setColumns(
           Object.keys(res.data[0]).map((key) => ({
@@ -4890,23 +4905,26 @@ function useServerDataGrid({ url, params }) {
   };
 }
 function DGModalShell({ title, onClose, children, footer }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    "div",
-    {
-      className: "fixed inset-0 z-50 flex items-center justify-center p-4",
-      style: { background: "rgba(0,0,0,0.5)" },
-      onMouseDown: (e) => {
-        if (e.target === e.currentTarget) onClose();
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-base font-semibold", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.X, { className: "h-4 w-4" }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
-        footer && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
-      ] })
-    }
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+        style: { background: "rgba(0,0,0,0.5)" },
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) onClose();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-base font-semibold", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.X, { className: "h-4 w-4" }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
+        ] })
+      }
+    ),
+    document.body
   );
 }
 function DGFieldRenderer({ field, value, onChange }) {
@@ -5220,7 +5238,10 @@ function DataGrid({
       )
     ] })
   } : null;
-  const visibleCols = [
+  const visibleCols = defaultActions?.position === "first" ? [
+    ...actionsCol ? [actionsCol] : [],
+    ...columns.filter((c) => !hiddenCols.includes(String(c.key)))
+  ] : [
     ...columns.filter((c) => !hiddenCols.includes(String(c.key))),
     ...actionsCol ? [actionsCol] : []
   ];
@@ -5360,7 +5381,7 @@ function DataGrid({
     ),
     serverPagination && (() => {
       const { pagination, currentPage: cp, goToPage } = serverPagination;
-      const totalServerPages = Math.ceil(pagination.total / pagination.per_page);
+      const totalServerPages = pagination.last_page ?? Math.ceil(pagination.total / pagination.per_page);
       const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
       return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
         /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
@@ -9471,6 +9492,7 @@ function Stepper({
 
 // src/components/ui/table.tsx
 var React44 = __toESM(require("react"), 1);
+var import_react_dom2 = require("react-dom");
 var import_axios2 = __toESM(require("axios"), 1);
 var import_lucide_react28 = require("lucide-react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
@@ -9491,7 +9513,21 @@ function useServerTable({ url, params }) {
     }).then(({ data: res }) => {
       if (cancelled) return;
       setData(res.data);
-      setPagination(res.pagination);
+      const rawTotal = res.total;
+      const rawPerPage = res.per_page;
+      const rawLastPage = res.last_page;
+      const lastPage = rawLastPage ?? Math.ceil(rawTotal / rawPerPage);
+      const pg = res.pagination ?? {
+        first_page_url: res.first_page_url ?? `${url}?page=1`,
+        last_page_url: res.last_page_url ?? `${url}?page=${lastPage}`,
+        last_page: lastPage,
+        next_page_url: res.next_page_url !== void 0 ? res.next_page_url : currentPage < lastPage ? `${url}?page=${currentPage + 1}` : null,
+        prev_page_url: res.prev_page_url !== void 0 ? res.prev_page_url : currentPage > 1 ? `${url}?page=${currentPage - 1}` : null,
+        per_page: rawPerPage,
+        total: rawTotal,
+        links: res.links ?? []
+      };
+      setPagination(pg);
       if (res.data.length > 0) {
         setColumns(
           Object.keys(res.data[0]).map((key) => ({
@@ -9523,23 +9559,26 @@ function useServerTable({ url, params }) {
   };
 }
 function ModalShell({ title, onClose, children, footer }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-    "div",
-    {
-      className: "fixed inset-0 z-50 flex items-center justify-center p-4",
-      style: { background: "rgba(0,0,0,0.5)" },
-      onMouseDown: (e) => {
-        if (e.target === e.currentTarget) onClose();
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("h2", { className: "text-base font-semibold", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react28.X, { className: "h-4 w-4" }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
-        footer && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
-      ] })
-    }
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+        style: { background: "rgba(0,0,0,0.5)" },
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) onClose();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("h2", { className: "text-base font-semibold", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_lucide_react28.X, { className: "h-4 w-4" }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
+        ] })
+      }
+    ),
+    document.body
   );
 }
 function FieldRenderer({ field, value, onChange }) {
@@ -9882,7 +9921,7 @@ function Table({
         )
       ] })
     };
-    return [...columns, actionsCol];
+    return defaultActions.position === "first" ? [actionsCol, ...columns] : [...columns, actionsCol];
   }, [columns, defaultActions]);
   const handleSort = (key) => {
     if (sortKey !== key) {
@@ -9978,9 +10017,9 @@ function Table({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
-            filteredData.length,
+            serverPagination ? serverPagination.pagination.total : filteredData.length,
             " ",
-            filteredData.length === 1 ? "row" : "rows",
+            (serverPagination ? serverPagination.pagination.total : filteredData.length) === 1 ? "row" : "rows",
             search && ` \xB7 filtered from ${tableData.length}`
           ] })
         ] })
@@ -10154,7 +10193,7 @@ function Table({
       ] }),
       serverPagination && (() => {
         const { pagination: pagination2, currentPage: cp, goToPage } = serverPagination;
-        const totalServerPages = Math.ceil(pagination2.total / pagination2.per_page);
+        const totalServerPages = pagination2.last_page ?? Math.ceil(pagination2.total / pagination2.per_page);
         const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
         return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
           /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "text-xs text-muted-foreground", children: [

package/dist/index.d.cts

@@ -344,16 +344,17 @@ interface ServerPaginationLink {
 interface ServerPagination {
     first_page_url: string;
     last_page_url: string;
+    last_page: number;
     next_page_url: string | null;
     prev_page_url: string | null;
     per_page: number;
     total: number;
     links: ServerPaginationLink[];
 }
-interface ServerTableResponse<T> {
+interface ServerTableResponse<T> extends ServerPagination {
     current_page: number;
     data: T[];
-    pagination: ServerPagination;
+    pagination?: ServerPagination;
 }
 interface UseServerTableOptions {
     /** Base URL — page param appended automatically: `url?page=N` */
@@ -412,6 +413,8 @@ interface DefaultActionsConfig<T> {
     baseUrl: string;
     /** Row key used as the URL id segment. Defaults to "id". */
     idKey?: keyof T;
+    /** Position of the Actions column. Default "last". */
+    position?: "first" | "last";
     /** Fields rendered in the Edit modal form. Auto-derived from row keys when omitted. */
     editForm?: ActionField[];
     /** Fields rendered in the View modal. Auto-derived from row keys when omitted. */

package/dist/index.d.ts

@@ -344,16 +344,17 @@ interface ServerPaginationLink {
 interface ServerPagination {
     first_page_url: string;
     last_page_url: string;
+    last_page: number;
     next_page_url: string | null;
     prev_page_url: string | null;
     per_page: number;
     total: number;
     links: ServerPaginationLink[];
 }
-interface ServerTableResponse<T> {
+interface ServerTableResponse<T> extends ServerPagination {
     current_page: number;
     data: T[];
-    pagination: ServerPagination;
+    pagination?: ServerPagination;
 }
 interface UseServerTableOptions {
     /** Base URL — page param appended automatically: `url?page=N` */
@@ -412,6 +413,8 @@ interface DefaultActionsConfig<T> {
     baseUrl: string;
     /** Row key used as the URL id segment. Defaults to "id". */
     idKey?: keyof T;
+    /** Position of the Actions column. Default "last". */
+    position?: "first" | "last";
     /** Fields rendered in the Edit modal form. Auto-derived from row keys when omitted. */
     editForm?: ActionField[];
     /** Fields rendered in the View modal. Auto-derived from row keys when omitted. */

package/dist/index.global.js

@@ -53077,6 +53077,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
 
   // src/components/ui/data-grid.tsx
   var React24 = __toESM(require_react(), 1);
+  var import_react_dom = __toESM(require_react_dom(), 1);
 
   // node_modules/axios/lib/helpers/bind.js
   function bind(fn, thisArg) {
@@ -61433,7 +61434,21 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       axios_default.get(url2, { params: { ...params, page: currentPage } }).then(({ data: res }) => {
         if (cancelled) return;
         setData(res.data);
-        setPagination(res.pagination);
+        const rawTotal = res.total;
+        const rawPerPage = res.per_page;
+        const rawLastPage = res.last_page;
+        const lastPage = rawLastPage ?? Math.ceil(rawTotal / rawPerPage);
+        const pg = res.pagination ?? {
+          first_page_url: res.first_page_url ?? `${url2}?page=1`,
+          last_page_url: res.last_page_url ?? `${url2}?page=${lastPage}`,
+          last_page: lastPage,
+          next_page_url: res.next_page_url !== void 0 ? res.next_page_url : currentPage < lastPage ? `${url2}?page=${currentPage + 1}` : null,
+          prev_page_url: res.prev_page_url !== void 0 ? res.prev_page_url : currentPage > 1 ? `${url2}?page=${currentPage - 1}` : null,
+          per_page: rawPerPage,
+          total: rawTotal,
+          links: res.links ?? []
+        };
+        setPagination(pg);
         if (res.data.length > 0) {
           setColumns(
             Object.keys(res.data[0]).map((key) => ({
@@ -61465,23 +61480,26 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     };
   }
   function DGModalShell({ title, onClose, children, footer }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      "div",
-      {
-        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
-        style: { background: "rgba(0,0,0,0.5)" },
-        onMouseDown: (e) => {
-          if (e.target === e.currentTarget) onClose();
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-base font-semibold", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(X, { className: "h-4 w-4" }) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
-        ] })
-      }
+    return (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "div",
+        {
+          className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+          style: { background: "rgba(0,0,0,0.5)" },
+          onMouseDown: (e) => {
+            if (e.target === e.currentTarget) onClose();
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-base font-semibold", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(X, { className: "h-4 w-4" }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
+            footer && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
+          ] })
+        }
+      ),
+      document.body
     );
   }
   function DGFieldRenderer({ field, value, onChange }) {
@@ -61795,7 +61813,10 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         )
       ] })
     } : null;
-    const visibleCols = [
+    const visibleCols = defaultActions?.position === "first" ? [
+      ...actionsCol ? [actionsCol] : [],
+      ...columns.filter((c) => !hiddenCols.includes(String(c.key)))
+    ] : [
       ...columns.filter((c) => !hiddenCols.includes(String(c.key))),
       ...actionsCol ? [actionsCol] : []
     ];
@@ -61935,7 +61956,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       ),
       serverPagination && (() => {
         const { pagination, currentPage: cp, goToPage } = serverPagination;
-        const totalServerPages = Math.ceil(pagination.total / pagination.per_page);
+        const totalServerPages = pagination.last_page ?? Math.ceil(pagination.total / pagination.per_page);
         const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
         return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
           /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
@@ -62586,7 +62607,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
 
   // node_modules/@react-leaflet/core/lib/component.js
   var import_react5 = __toESM(require_react(), 1);
-  var import_react_dom = __toESM(require_react_dom(), 1);
+  var import_react_dom2 = __toESM(require_react_dom(), 1);
 
   // node_modules/@react-leaflet/core/lib/context.js
   var import_react4 = __toESM(require_react(), 1);
@@ -62639,7 +62660,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         props.children
       ]);
       const contentNode = instance._contentNode;
-      return contentNode ? /* @__PURE__ */ (0, import_react_dom.createPortal)(props.children, contentNode) : null;
+      return contentNode ? /* @__PURE__ */ (0, import_react_dom2.createPortal)(props.children, contentNode) : null;
     }
     return /* @__PURE__ */ (0, import_react5.forwardRef)(OverlayComponent);
   }
@@ -66459,6 +66480,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
 
   // src/components/ui/table.tsx
   var React46 = __toESM(require_react(), 1);
+  var import_react_dom3 = __toESM(require_react_dom(), 1);
   var import_jsx_runtime55 = __toESM(require_jsx_runtime(), 1);
   function useServerTable({ url: url2, params }) {
     const [data, setData] = React46.useState([]);
@@ -66477,7 +66499,21 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       }).then(({ data: res }) => {
         if (cancelled) return;
         setData(res.data);
-        setPagination(res.pagination);
+        const rawTotal = res.total;
+        const rawPerPage = res.per_page;
+        const rawLastPage = res.last_page;
+        const lastPage = rawLastPage ?? Math.ceil(rawTotal / rawPerPage);
+        const pg = res.pagination ?? {
+          first_page_url: res.first_page_url ?? `${url2}?page=1`,
+          last_page_url: res.last_page_url ?? `${url2}?page=${lastPage}`,
+          last_page: lastPage,
+          next_page_url: res.next_page_url !== void 0 ? res.next_page_url : currentPage < lastPage ? `${url2}?page=${currentPage + 1}` : null,
+          prev_page_url: res.prev_page_url !== void 0 ? res.prev_page_url : currentPage > 1 ? `${url2}?page=${currentPage - 1}` : null,
+          per_page: rawPerPage,
+          total: rawTotal,
+          links: res.links ?? []
+        };
+        setPagination(pg);
         if (res.data.length > 0) {
           setColumns(
             Object.keys(res.data[0]).map((key) => ({
@@ -66509,23 +66545,26 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     };
   }
   function ModalShell({ title, onClose, children, footer }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-      "div",
-      {
-        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
-        style: { background: "rgba(0,0,0,0.5)" },
-        onMouseDown: (e) => {
-          if (e.target === e.currentTarget) onClose();
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("h2", { className: "text-base font-semibold", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(X, { className: "h-4 w-4" }) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
-        ] })
-      }
+    return (0, import_react_dom3.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        "div",
+        {
+          className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+          style: { background: "rgba(0,0,0,0.5)" },
+          onMouseDown: (e) => {
+            if (e.target === e.currentTarget) onClose();
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("h2", { className: "text-base font-semibold", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(X, { className: "h-4 w-4" }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
+            footer && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
+          ] })
+        }
+      ),
+      document.body
     );
   }
   function FieldRenderer({ field, value, onChange }) {
@@ -66868,7 +66907,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           )
         ] })
       };
-      return [...columns, actionsCol];
+      return defaultActions.position === "first" ? [actionsCol, ...columns] : [...columns, actionsCol];
     }, [columns, defaultActions]);
     const handleSort = (key) => {
       if (sortKey !== key) {
@@ -66964,9 +67003,9 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
-              filteredData.length,
+              serverPagination ? serverPagination.pagination.total : filteredData.length,
               " ",
-              filteredData.length === 1 ? "row" : "rows",
+              (serverPagination ? serverPagination.pagination.total : filteredData.length) === 1 ? "row" : "rows",
               search && ` \xB7 filtered from ${tableData.length}`
             ] })
           ] })
@@ -67140,7 +67179,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         ] }),
         serverPagination && (() => {
           const { pagination: pagination2, currentPage: cp, goToPage } = serverPagination;
-          const totalServerPages = Math.ceil(pagination2.total / pagination2.per_page);
+          const totalServerPages = pagination2.last_page ?? Math.ceil(pagination2.total / pagination2.per_page);
           const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
           return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
             /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "text-xs text-muted-foreground", children: [

package/dist/index.js

@@ -1996,6 +1996,7 @@ function MetricRow({ items, divided = true, className }) {
 
 // src/components/ui/data-grid.tsx
 import * as React24 from "react";
+import { createPortal as createPortal2 } from "react-dom";
 import axios from "axios";
 import { ChevronUp, ChevronDown as ChevronDown4, ChevronsUpDown, ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight7, Search as Search4, Settings2, Check as Check5, Eye, Pencil, Trash, Loader2, X as X7 } from "lucide-react";
 
@@ -4744,7 +4745,21 @@ function useServerDataGrid({ url, params }) {
     axios.get(url, { params: { ...params, page: currentPage } }).then(({ data: res }) => {
       if (cancelled) return;
       setData(res.data);
-      setPagination(res.pagination);
+      const rawTotal = res.total;
+      const rawPerPage = res.per_page;
+      const rawLastPage = res.last_page;
+      const lastPage = rawLastPage ?? Math.ceil(rawTotal / rawPerPage);
+      const pg = res.pagination ?? {
+        first_page_url: res.first_page_url ?? `${url}?page=1`,
+        last_page_url: res.last_page_url ?? `${url}?page=${lastPage}`,
+        last_page: lastPage,
+        next_page_url: res.next_page_url !== void 0 ? res.next_page_url : currentPage < lastPage ? `${url}?page=${currentPage + 1}` : null,
+        prev_page_url: res.prev_page_url !== void 0 ? res.prev_page_url : currentPage > 1 ? `${url}?page=${currentPage - 1}` : null,
+        per_page: rawPerPage,
+        total: rawTotal,
+        links: res.links ?? []
+      };
+      setPagination(pg);
       if (res.data.length > 0) {
         setColumns(
           Object.keys(res.data[0]).map((key) => ({
@@ -4776,23 +4791,26 @@ function useServerDataGrid({ url, params }) {
   };
 }
 function DGModalShell({ title, onClose, children, footer }) {
-  return /* @__PURE__ */ jsx28(
-    "div",
-    {
-      className: "fixed inset-0 z-50 flex items-center justify-center p-4",
-      style: { background: "rgba(0,0,0,0.5)" },
-      onMouseDown: (e) => {
-        if (e.target === e.currentTarget) onClose();
-      },
-      children: /* @__PURE__ */ jsxs27("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
-        /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
-          /* @__PURE__ */ jsx28("h2", { className: "text-base font-semibold", children: title }),
-          /* @__PURE__ */ jsx28("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx28(X7, { className: "h-4 w-4" }) })
-        ] }),
-        /* @__PURE__ */ jsx28("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
-        footer && /* @__PURE__ */ jsx28("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
-      ] })
-    }
+  return createPortal2(
+    /* @__PURE__ */ jsx28(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+        style: { background: "rgba(0,0,0,0.5)" },
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) onClose();
+        },
+        children: /* @__PURE__ */ jsxs27("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
+          /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ jsx28("h2", { className: "text-base font-semibold", children: title }),
+            /* @__PURE__ */ jsx28("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx28(X7, { className: "h-4 w-4" }) })
+          ] }),
+          /* @__PURE__ */ jsx28("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
+          footer && /* @__PURE__ */ jsx28("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
+        ] })
+      }
+    ),
+    document.body
   );
 }
 function DGFieldRenderer({ field, value, onChange }) {
@@ -5106,7 +5124,10 @@ function DataGrid({
       )
     ] })
   } : null;
-  const visibleCols = [
+  const visibleCols = defaultActions?.position === "first" ? [
+    ...actionsCol ? [actionsCol] : [],
+    ...columns.filter((c) => !hiddenCols.includes(String(c.key)))
+  ] : [
     ...columns.filter((c) => !hiddenCols.includes(String(c.key))),
     ...actionsCol ? [actionsCol] : []
   ];
@@ -5246,7 +5267,7 @@ function DataGrid({
     ),
     serverPagination && (() => {
       const { pagination, currentPage: cp, goToPage } = serverPagination;
-      const totalServerPages = Math.ceil(pagination.total / pagination.per_page);
+      const totalServerPages = pagination.last_page ?? Math.ceil(pagination.total / pagination.per_page);
       const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
       return /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
         /* @__PURE__ */ jsxs27("span", { className: "text-xs text-muted-foreground", children: [
@@ -9357,6 +9378,7 @@ function Stepper({
 
 // src/components/ui/table.tsx
 import * as React44 from "react";
+import { createPortal as createPortal4 } from "react-dom";
 import axios2 from "axios";
 import { ChevronLeft as ChevronLeft6, ChevronRight as ChevronRight9, Search as Search5, Trash2 as Trash23, ChevronsUpDown as ChevronsUpDown2, ChevronUp as ChevronUp2, ChevronDown as ChevronDown7, X as X13, Eye as Eye2, Pencil as Pencil2, Trash as Trash3, Loader2 as Loader22 } from "lucide-react";
 import { Fragment as Fragment15, jsx as jsx55, jsxs as jsxs48 } from "react/jsx-runtime";
@@ -9377,7 +9399,21 @@ function useServerTable({ url, params }) {
     }).then(({ data: res }) => {
       if (cancelled) return;
       setData(res.data);
-      setPagination(res.pagination);
+      const rawTotal = res.total;
+      const rawPerPage = res.per_page;
+      const rawLastPage = res.last_page;
+      const lastPage = rawLastPage ?? Math.ceil(rawTotal / rawPerPage);
+      const pg = res.pagination ?? {
+        first_page_url: res.first_page_url ?? `${url}?page=1`,
+        last_page_url: res.last_page_url ?? `${url}?page=${lastPage}`,
+        last_page: lastPage,
+        next_page_url: res.next_page_url !== void 0 ? res.next_page_url : currentPage < lastPage ? `${url}?page=${currentPage + 1}` : null,
+        prev_page_url: res.prev_page_url !== void 0 ? res.prev_page_url : currentPage > 1 ? `${url}?page=${currentPage - 1}` : null,
+        per_page: rawPerPage,
+        total: rawTotal,
+        links: res.links ?? []
+      };
+      setPagination(pg);
       if (res.data.length > 0) {
         setColumns(
           Object.keys(res.data[0]).map((key) => ({
@@ -9409,23 +9445,26 @@ function useServerTable({ url, params }) {
   };
 }
 function ModalShell({ title, onClose, children, footer }) {
-  return /* @__PURE__ */ jsx55(
-    "div",
-    {
-      className: "fixed inset-0 z-50 flex items-center justify-center p-4",
-      style: { background: "rgba(0,0,0,0.5)" },
-      onMouseDown: (e) => {
-        if (e.target === e.currentTarget) onClose();
-      },
-      children: /* @__PURE__ */ jsxs48("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
-        /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
-          /* @__PURE__ */ jsx55("h2", { className: "text-base font-semibold", children: title }),
-          /* @__PURE__ */ jsx55("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx55(X13, { className: "h-4 w-4" }) })
-        ] }),
-        /* @__PURE__ */ jsx55("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
-        footer && /* @__PURE__ */ jsx55("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
-      ] })
-    }
+  return createPortal4(
+    /* @__PURE__ */ jsx55(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+        style: { background: "rgba(0,0,0,0.5)" },
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) onClose();
+        },
+        children: /* @__PURE__ */ jsxs48("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
+          /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ jsx55("h2", { className: "text-base font-semibold", children: title }),
+            /* @__PURE__ */ jsx55("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx55(X13, { className: "h-4 w-4" }) })
+          ] }),
+          /* @__PURE__ */ jsx55("div", { className: "overflow-y-auto px-6 py-4 flex-1", children }),
+          footer && /* @__PURE__ */ jsx55("div", { className: "px-6 py-4 border-t border-border shrink-0 flex justify-end gap-2", children: footer })
+        ] })
+      }
+    ),
+    document.body
   );
 }
 function FieldRenderer({ field, value, onChange }) {
@@ -9768,7 +9807,7 @@ function Table({
         )
       ] })
     };
-    return [...columns, actionsCol];
+    return defaultActions.position === "first" ? [actionsCol, ...columns] : [...columns, actionsCol];
   }, [columns, defaultActions]);
   const handleSort = (key) => {
     if (sortKey !== key) {
@@ -9864,9 +9903,9 @@ function Table({
             }
           ),
           /* @__PURE__ */ jsxs48("span", { className: "text-xs text-muted-foreground", children: [
-            filteredData.length,
+            serverPagination ? serverPagination.pagination.total : filteredData.length,
             " ",
-            filteredData.length === 1 ? "row" : "rows",
+            (serverPagination ? serverPagination.pagination.total : filteredData.length) === 1 ? "row" : "rows",
             search && ` \xB7 filtered from ${tableData.length}`
           ] })
         ] })
@@ -10040,7 +10079,7 @@ function Table({
       ] }),
       serverPagination && (() => {
         const { pagination: pagination2, currentPage: cp, goToPage } = serverPagination;
-        const totalServerPages = Math.ceil(pagination2.total / pagination2.per_page);
+        const totalServerPages = pagination2.last_page ?? Math.ceil(pagination2.total / pagination2.per_page);
         const pageLinks = Array.from({ length: totalServerPages }, (_, i) => i + 1);
         return /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
           /* @__PURE__ */ jsxs48("span", { className: "text-xs text-muted-foreground", children: [

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "3.0.7",
+  "version": "3.1.0",
   "description": "Reusable React UI components",
   "license": "MIT",
   "main": "dist/index.js",