dn-react-router-toolkit 0.7.15 → 0.8.1

package/dist/crud/index.mjs

@@ -6510,10 +6510,10 @@ var require_listCacheClear = __commonJS({
 var require_eq = __commonJS({
   "node_modules/lodash/eq.js"(exports, module) {
     "use strict";
-    function eq(value, other) {
+    function eq2(value, other) {
       return value === other || value !== value && other !== other;
     }
-    module.exports = eq;
+    module.exports = eq2;
   }
 });
 
@@ -6521,11 +6521,11 @@ var require_eq = __commonJS({
 var require_assocIndexOf = __commonJS({
   "node_modules/lodash/_assocIndexOf.js"(exports, module) {
     "use strict";
-    var eq = require_eq();
+    var eq2 = require_eq();
     function assocIndexOf(array, key) {
       var length = array.length;
       while (length--) {
-        if (eq(array[length][0], key)) {
+        if (eq2(array[length][0], key)) {
           return length;
         }
       }
@@ -6983,12 +6983,12 @@ var require_assignValue = __commonJS({
   "node_modules/lodash/_assignValue.js"(exports, module) {
     "use strict";
     var baseAssignValue = require_baseAssignValue();
-    var eq = require_eq();
+    var eq2 = require_eq();
     var objectProto = Object.prototype;
     var hasOwnProperty = objectProto.hasOwnProperty;
     function assignValue(object, key, value) {
       var objValue = object[key];
-      if (!(hasOwnProperty.call(object, key) && eq(objValue, value)) || value === void 0 && !(key in object)) {
+      if (!(hasOwnProperty.call(object, key) && eq2(objValue, value)) || value === void 0 && !(key in object)) {
         baseAssignValue(object, key, value);
       }
     }
@@ -7977,48 +7977,83 @@ function CrudForm({
   ] });
 }
 
-// src/table/loader.tsx
+// src/table/load_table.tsx
 import {
   and,
+  eq,
   ilike
 } from "drizzle-orm";
+async function loadTable({
+  request,
+  repository,
+  options
+}) {
+  const searchParams = new URL(request.url).searchParams;
+  const { where, searchKey, defaultOrderBy, defaultDirection } = options;
+  const query = searchParams.get("query") ?? void 0;
+  const limit = Number(searchParams.get("limit") ?? "20");
+  const offset = Number(searchParams.get("offset") ?? "0");
+  const orderBy = searchParams.get("orderBy") ?? defaultOrderBy;
+  const direction = searchParams.get("direction") ?? defaultDirection;
+  const filterWhere = Object.entries(options.filters ?? {}).map(([key, value]) => {
+    const param = searchParams.get(key);
+    if (param) {
+      return eq(
+        repository.schema[key],
+        decodeURIComponent(param)
+      );
+    }
+    return void 0;
+  }).filter(Boolean);
+  const whereClauses = and(
+    searchKey && query ? ilike(
+      repository.schema[searchKey],
+      `%${query}%`
+    ) : void 0,
+    ...filterWhere,
+    ...where ?? []
+  );
+  const total = await repository.countTotal({ where: whereClauses });
+  const items = await repository.findAll({
+    orderBy,
+    direction,
+    limit,
+    offset,
+    where: whereClauses
+  });
+  const filters = Object.fromEntries(
+    await Promise.all(
+      Object.keys(options.filters ?? {}).map(async (key) => {
+        const values = await repository.select(key);
+        return [key, values.filter(Boolean)];
+      })
+    )
+  );
+  return {
+    items,
+    total,
+    limit,
+    offset,
+    orderBy,
+    direction,
+    searchKey,
+    filters
+  };
+}
+
+// src/table/loader.tsx
 function tableLoader({
   repository,
-  tableOptions
+  options
 }) {
   return async ({ request }) => {
-    const searchParams = new URL(request.url).searchParams;
-    const { where, searchKey, defaultOrderBy, defaultDirection } = tableOptions;
-    const query = searchParams.get("query") ?? void 0;
-    const limit = Number(searchParams.get("limit") ?? "10");
-    const offset = Number(searchParams.get("offset") ?? "0");
-    const orderBy = searchParams.get("orderBy") ?? defaultOrderBy;
-    const direction = searchParams.get("direction") ?? defaultDirection;
-    const whereClauses = and(
-      searchKey && query ? ilike(
-        repository.schema[searchKey],
-        `%${query}%`
-      ) : void 0,
-      ...where ?? []
-    );
-    const total = await repository.countTotal({ where: whereClauses });
-    const items = await repository.findAll({
-      orderBy,
-      direction,
-      limit,
-      offset,
-      where: whereClauses
+    const table = await loadTable({
+      request,
+      repository,
+      options
     });
     return {
-      table: {
-        items,
-        total,
-        limit,
-        offset,
-        orderBy,
-        direction,
-        searchKey
-      }
+      table
     };
   };
 }
@@ -8051,7 +8086,6 @@ import {
 import {
   and as and2
 } from "drizzle-orm";
-import "react-router";
 import { v4 } from "uuid";
 function apiHandler({
   withAuthAction,
@@ -8139,22 +8173,30 @@ function apiHandler({
 }
 
 // src/api/item_api_handler.ts
-import { UNAUTHORIZED as UNAUTHORIZED2 } from "dn-react-toolkit/http";
-import "react-router";
+import { FORBIDDEN, NOT_FOUND, UNAUTHORIZED as UNAUTHORIZED2 } from "dn-react-toolkit/http";
 function itemApiHandler({
   withAuthAction,
-  repository
+  repository,
+  isOwnedBy,
+  roles
 }) {
   const loader = async ({ request }) => {
     return {};
   };
   const action = withAuthAction((auth) => async ({ params, request }) => {
-    if (!auth || auth.role !== "admin") {
-      return UNAUTHORIZED2();
+    if (roles && roles.length > 0 && (!auth || !roles.includes(auth.role))) {
+      throw UNAUTHORIZED2();
+    }
+    const itemId = params.itemId;
+    const existing = await repository.find(itemId);
+    if (!existing) {
+      throw NOT_FOUND();
+    }
+    if (isOwnedBy && !isOwnedBy(existing, auth)) {
+      throw FORBIDDEN();
     }
     switch (request.method) {
       case "DELETE": {
-        const itemId = params.itemId;
         await repository.delete(itemId);
         return {};
       }
@@ -8232,96 +8274,20 @@ function crudHandler({
 }
 
 // src/crud/crud_page.tsx
-import { useLoaderData as useLoaderData2, useLocation as useLocation3 } from "react-router";
+import { useLoaderData as useLoaderData2, useLocation as useLocation4 } from "react-router";
 
 // src/table/page.tsx
-import {
-  Link as Link3,
-  useLoaderData,
-  useLocation as useLocation2,
-  useNavigate as useNavigate2,
-  useSearchParams as useSearchParams3
-} from "react-router";
-import { GoSearch } from "react-icons/go";
+import { Link as Link3, useLocation as useLocation3 } from "react-router";
 
-// src/table/buttons.tsx
-import { cn as cn2 } from "dn-react-toolkit/utils";
-import { Link, useLocation, useSearchParams } from "react-router";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-function TablePageButtons({
-  MAX_PAGES_TO_SHOW,
-  total,
-  limit,
-  offset
-}) {
-  const pages = Math.ceil(total / limit);
-  const { pathname } = useLocation();
-  const [searchParams] = useSearchParams();
-  const currentPage = Math.floor(offset / limit) + 1;
-  const startButton = (Math.ceil(currentPage / MAX_PAGES_TO_SHOW) - 1) * MAX_PAGES_TO_SHOW;
-  const endButton = Math.min(startButton + MAX_PAGES_TO_SHOW - 1, pages);
-  return /* @__PURE__ */ jsx7(Fragment3, { children: pages > 1 && /* @__PURE__ */ jsxs3("div", { className: "flex justify-center items-center my-8 gap-4 text-neutral-400", children: [
-    startButton > 1 && /* @__PURE__ */ jsx7(
-      Link,
-      {
-        to: (() => {
-          searchParams.set(
-            "offset",
-            String((startButton - 1) * limit)
-          );
-          return `${pathname}?${searchParams.toString()}`;
-        })(),
-        className: "w-10 block text-center transition-colors hover:text-primary",
-        children: "\uC774\uC804"
-      }
-    ),
-    Array.from({
-      length: Math.min(
-        MAX_PAGES_TO_SHOW,
-        pages - startButton
-      )
-    }).map((_, index2) => {
-      return /* @__PURE__ */ jsx7(
-        Link,
-        {
-          to: (() => {
-            searchParams.set(
-              "offset",
-              String((startButton + index2) * limit)
-            );
-            return `${pathname}?${searchParams.toString()}`;
-          })(),
-          className: cn2(
-            "w-6 block text-center transition-colors",
-            currentPage === startButton + index2 + 1 ? "font-bold text-primary" : "hover:text-primary"
-          ),
-          children: startButton + index2 + 1
-        },
-        index2
-      );
-    }),
-    endButton < pages && /* @__PURE__ */ jsx7(
-      Link,
-      {
-        to: (() => {
-          searchParams.set(
-            "offset",
-            String((endButton + 1) * limit)
-          );
-          return `${pathname}?${searchParams.toString()}`;
-        })(),
-        className: "w-10 block text-center transition-colors hover:text-primary",
-        children: "\uB2E4\uC74C"
-      }
-    )
-  ] }) });
-}
+// src/table/table_form.tsx
+import { useLocation as useLocation2, useNavigate as useNavigate2, useSearchParams as useSearchParams3 } from "react-router";
+import { GoSearch } from "react-icons/go";
 
 // src/table/table.tsx
-import { cn as cn3 } from "dn-react-toolkit/utils";
+import { cn as cn2 } from "dn-react-toolkit/utils";
 import { GoArrowDown, GoArrowUp } from "react-icons/go";
-import { Link as Link2, useSearchParams as useSearchParams2 } from "react-router";
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Link, useSearchParams } from "react-router";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function Table({
   className = "min-w-full whitespace-nowrap",
   data,
@@ -8331,17 +8297,21 @@ function Table({
   limit,
   offset,
   orderBy,
-  direction
+  direction,
+  filters
 }) {
   const keys = Object.entries(columns).filter((entry) => entry[1]).map(([key]) => key);
   const sortedArray = [...data];
-  const [_, setSearchParams] = useSearchParams2();
-  return /* @__PURE__ */ jsxs4(
+  const [_, setSearchParams] = useSearchParams();
+  return /* @__PURE__ */ jsxs3(
     "table",
     {
-      className: cn3(className, "text-[15px] border-separate border-spacing-0"),
+      className: cn2(
+        className,
+        "text-[15px] border-separate border-spacing-0"
+      ),
       children: [
-        /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsx8("tr", { children: keys.map((key) => {
+        /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsx7("tr", { children: keys.map((key) => {
           const value = columns[key];
           function getReactNode() {
             if (value && typeof value === "object" && "label" in value) {
@@ -8352,12 +8322,12 @@ function Table({
           function Head() {
             const reactNode = getReactNode();
             if (typeof reactNode === "string") {
-              return /* @__PURE__ */ jsxs4(
+              return /* @__PURE__ */ jsxs3(
                 "button",
                 {
-                  className: cn3(
-                    orderBy === key ? "text-neutral-900 font-medium" : "text-neutral-500",
-                    "px-4 h-14 flex items-center w-full"
+                  className: cn2(
+                    orderBy === key ? "text-gray-900 font-medium" : "text-gray-500 font-medium",
+                    "px-4 flex items-center w-full"
                   ),
                   onClick: () => {
                     let newDirection = "asc";
@@ -8371,25 +8341,70 @@ function Table({
                   },
                   children: [
                     reactNode,
-                    orderBy === key && /* @__PURE__ */ jsx8("div", { className: "ml-0.5", children: direction === "asc" ? /* @__PURE__ */ jsx8(GoArrowUp, {}) : /* @__PURE__ */ jsx8(GoArrowDown, {}) })
+                    orderBy === key && /* @__PURE__ */ jsx7("div", { className: "ml-0.5", children: direction === "asc" ? /* @__PURE__ */ jsx7(GoArrowUp, {}) : /* @__PURE__ */ jsx7(GoArrowDown, {}) })
                   ]
                 }
               );
             }
-            return /* @__PURE__ */ jsx8(Fragment4, { children: reactNode });
+            return /* @__PURE__ */ jsx7(Fragment3, { children: reactNode });
           }
-          return /* @__PURE__ */ jsx8("th", { className: cn3("border-y font-normal"), children: /* @__PURE__ */ jsx8(Head, {}) }, key);
+          const filter = filters[key];
+          return /* @__PURE__ */ jsxs3(
+            "th",
+            {
+              className: cn2(
+                "py-4 border-y font-normal align-top"
+              ),
+              children: [
+                /* @__PURE__ */ jsx7(Head, {}),
+                filter && /* @__PURE__ */ jsx7("div", { className: "px-3 mt-4", children: /* @__PURE__ */ jsxs3(
+                  "select",
+                  {
+                    className: "w-full h-10 px-1.5 border rounded-full outline-none",
+                    onChange: (e) => {
+                      const value2 = e.target.value;
+                      setSearchParams((prev) => {
+                        if (value2) {
+                          prev.set(
+                            key,
+                            encodeURIComponent(
+                              value2
+                            )
+                          );
+                        } else {
+                          prev.delete(key);
+                        }
+                        return prev;
+                      });
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx7("option", { value: "", children: "\uC804\uCCB4" }),
+                      filter.map((option) => /* @__PURE__ */ jsx7(
+                        "option",
+                        {
+                          value: option,
+                          children: option
+                        },
+                        option
+                      ))
+                    ]
+                  }
+                ) })
+              ]
+            },
+            key
+          );
         }) }) }),
-        /* @__PURE__ */ jsxs4("tbody", { children: [
-          sortedArray.length === 0 && /* @__PURE__ */ jsx8("tr", { children: /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsxs3("tbody", { children: [
+          sortedArray.length === 0 && /* @__PURE__ */ jsx7("tr", { children: /* @__PURE__ */ jsx7(
             "td",
             {
               colSpan: keys.length,
-              className: "px-4 h-14 text-neutral-400 text-center",
+              className: "px-4 h-20 text-gray-400 text-center",
               children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
             }
           ) }),
-          sortedArray.map((item, i) => /* @__PURE__ */ jsx8("tr", { className: "hover:bg-gray-50 transition-colors", children: keys.map((key, i2) => {
+          sortedArray.map((item, i) => /* @__PURE__ */ jsx7("tr", { className: "hover:bg-gray-50 transition-colors", children: keys.map((key, i2) => {
             const value = item[key];
             function Content() {
               if (key in columns) {
@@ -8397,22 +8412,22 @@ function Table({
                 if (column && typeof column === "object" && "mapper" in column) {
                   const mapper = column.mapper;
                   if (mapper) {
-                    return /* @__PURE__ */ jsx8(Fragment4, { children: mapper(item) });
+                    return /* @__PURE__ */ jsx7(Fragment3, { children: mapper(item) });
                   }
                 }
               }
-              return /* @__PURE__ */ jsx8(Fragment4, { children: String(value) });
+              return /* @__PURE__ */ jsx7(Fragment3, { children: String(value) });
             }
-            const linkedContent = getLink ? /* @__PURE__ */ jsx8(
-              Link2,
+            const linkedContent = getLink ? /* @__PURE__ */ jsx7(
+              Link,
               {
                 to: getLink(item),
                 className: "block content-center px-4 w-full h-full",
-                children: /* @__PURE__ */ jsx8(Content, {})
+                children: /* @__PURE__ */ jsx7(Content, {})
               }
-            ) : /* @__PURE__ */ jsx8(Content, {});
-            const cell = Mapper ? /* @__PURE__ */ jsx8(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
-            return /* @__PURE__ */ jsx8("td", { className: "px-0 h-14 border-b", children: cell }, key);
+            ) : /* @__PURE__ */ jsx7(Content, {});
+            const cell = Mapper ? /* @__PURE__ */ jsx7(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
+            return /* @__PURE__ */ jsx7("td", { className: "px-0 h-14 border-b", children: cell }, key);
           }) }, i))
         ] })
       ]
@@ -8420,8 +8435,170 @@ function Table({
   );
 }
 
-// src/table/page.tsx
+// src/table/use_table.tsx
+import { useLoaderData } from "react-router";
+function useTable() {
+  const { table } = useLoaderData();
+  return table;
+}
+
+// src/table/buttons.tsx
+import { cn as cn3 } from "dn-react-toolkit/utils";
+import { Link as Link2, useLocation, useSearchParams as useSearchParams2 } from "react-router";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function TablePageButtons({
+  MAX_PAGES_TO_SHOW,
+  total,
+  limit,
+  offset
+}) {
+  const pages = Math.ceil(total / limit);
+  const { pathname } = useLocation();
+  const [searchParams] = useSearchParams2();
+  const currentPage = Math.floor(offset / limit) + 1;
+  const startButton = (Math.ceil(currentPage / MAX_PAGES_TO_SHOW) - 1) * MAX_PAGES_TO_SHOW;
+  const endButton = Math.min(startButton + MAX_PAGES_TO_SHOW - 1, pages);
+  return /* @__PURE__ */ jsx8(Fragment4, { children: pages > 1 && /* @__PURE__ */ jsxs4("div", { className: "flex justify-center items-center my-8 gap-4 text-neutral-400", children: [
+    startButton > 1 && /* @__PURE__ */ jsx8(
+      Link2,
+      {
+        to: (() => {
+          searchParams.set(
+            "offset",
+            String((startButton - 1) * limit)
+          );
+          return `${pathname}?${searchParams.toString()}`;
+        })(),
+        className: "w-10 block text-center transition-colors hover:text-primary",
+        children: "\uC774\uC804"
+      }
+    ),
+    Array.from({
+      length: Math.min(
+        MAX_PAGES_TO_SHOW,
+        pages - startButton
+      )
+    }).map((_, index2) => {
+      return /* @__PURE__ */ jsx8(
+        Link2,
+        {
+          to: (() => {
+            searchParams.set(
+              "offset",
+              String((startButton + index2) * limit)
+            );
+            return `${pathname}?${searchParams.toString()}`;
+          })(),
+          className: cn3(
+            "w-6 block text-center transition-colors",
+            currentPage === startButton + index2 + 1 ? "font-bold text-primary" : "hover:text-primary"
+          ),
+          children: startButton + index2 + 1
+        },
+        index2
+      );
+    }),
+    endButton < pages && /* @__PURE__ */ jsx8(
+      Link2,
+      {
+        to: (() => {
+          searchParams.set(
+            "offset",
+            String((endButton + 1) * limit)
+          );
+          return `${pathname}?${searchParams.toString()}`;
+        })(),
+        className: "w-10 block text-center transition-colors hover:text-primary",
+        children: "\uB2E4\uC74C"
+      }
+    )
+  ] }) });
+}
+
+// src/table/table_form.tsx
 import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function TableForm({
+  columns,
+  primaryKey = "id"
+}) {
+  const { pathname } = useLocation2();
+  const {
+    items,
+    total,
+    limit,
+    offset,
+    orderBy,
+    direction,
+    searchKey,
+    filters
+  } = useTable();
+  const navigate = useNavigate2();
+  const search = (query) => {
+    const searchParams2 = new URLSearchParams(window.location.search);
+    searchParams2.set("query", query);
+    searchParams2.set("offset", "0");
+    navigate(`${pathname}?${searchParams2.toString()}`);
+  };
+  const [searchParams] = useSearchParams3();
+  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
+    searchKey && /* @__PURE__ */ jsxs5(
+      "form",
+      {
+        className: "h-20 px-4 flex items-center border-t",
+        onSubmit: (e) => {
+          e.preventDefault();
+          const formData = new FormData(e.currentTarget);
+          const query = formData.get("query");
+          search(query);
+        },
+        children: [
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "submit",
+              className: "w-10 h-10 flex justify-center items-center",
+              children: /* @__PURE__ */ jsx9(GoSearch, { className: "text-xl mr-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "input",
+            {
+              className: "outline-none h-full flex-1",
+              placeholder: "\uC5EC\uAE30\uC5D0 \uAC80\uC0C9\uD558\uC138\uC694...",
+              name: "query",
+              defaultValue: searchParams.get("query") ?? ""
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      Table,
+      {
+        data: items,
+        columns,
+        getLink: primaryKey ? (item) => `${pathname}/${item[primaryKey]}` : void 0,
+        limit,
+        offset,
+        orderBy,
+        direction,
+        filters
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      TablePageButtons,
+      {
+        total,
+        limit,
+        offset,
+        MAX_PAGES_TO_SHOW: 10
+      }
+    )
+  ] });
+}
+
+// src/table/page.tsx
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function createTablePage({
   name,
   columns,
@@ -8430,88 +8607,25 @@ function createTablePage({
   return function TablePage({
     header: Header
   }) {
-    const { pathname } = useLocation2();
-    const { table } = useLoaderData();
-    const { items, total, limit, offset, orderBy, direction, searchKey } = table;
-    const navigate = useNavigate2();
-    const search = (query) => {
-      const searchParams2 = new URLSearchParams(window.location.search);
-      searchParams2.set("query", query);
-      searchParams2.set("offset", "0");
-      navigate(`${pathname}?${searchParams2.toString()}`);
-    };
-    const [searchParams] = useSearchParams3();
-    return /* @__PURE__ */ jsxs5(Fragment5, { children: [
-      /* @__PURE__ */ jsx9(
+    const { pathname } = useLocation3();
+    return /* @__PURE__ */ jsxs6(Fragment6, { children: [
+      /* @__PURE__ */ jsx10(
         Header,
         {
           title: name,
-          actions: /* @__PURE__ */ jsxs5(Link3, { to: `${pathname}/new`, className: "button-primary", children: [
+          actions: /* @__PURE__ */ jsxs6(Link3, { to: `${pathname}/new`, className: "button-primary", children: [
             name,
             " \uCD94\uAC00"
           ] })
         }
       ),
-      /* @__PURE__ */ jsxs5("div", { className: "max-w-7xl mx-auto w-full overflow-auto", children: [
-        searchKey && /* @__PURE__ */ jsxs5(
-          "form",
-          {
-            className: "h-18 px-4 flex items-center border-t",
-            onSubmit: (e) => {
-              e.preventDefault();
-              const formData = new FormData(e.currentTarget);
-              const query = formData.get("query");
-              search(query);
-            },
-            children: [
-              /* @__PURE__ */ jsx9(
-                "button",
-                {
-                  type: "submit",
-                  className: "w-10 h-10 flex justify-center items-center",
-                  children: /* @__PURE__ */ jsx9(GoSearch, { className: "text-xl mr-4" })
-                }
-              ),
-              /* @__PURE__ */ jsx9(
-                "input",
-                {
-                  className: "outline-none h-full flex-1",
-                  placeholder: "\uC5EC\uAE30\uC5D0 \uAC80\uC0C9\uD558\uC138\uC694...",
-                  name: "query",
-                  defaultValue: searchParams.get("query") ?? ""
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx9(
-          Table,
-          {
-            data: items,
-            columns,
-            getLink: primaryKey ? (item) => `${pathname}/${item[primaryKey]}` : void 0,
-            limit,
-            offset,
-            orderBy,
-            direction
-          }
-        ),
-        /* @__PURE__ */ jsx9(
-          TablePageButtons,
-          {
-            total,
-            limit,
-            offset,
-            MAX_PAGES_TO_SHOW: 10
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsx10("div", { className: "max-w-7xl mx-auto w-full overflow-auto", children: /* @__PURE__ */ jsx10(TableForm, { columns, primaryKey }) })
     ] });
   };
 }
 
 // src/crud/crud_page.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function crudPage({
   name,
   primaryKey,
@@ -8522,16 +8636,16 @@ function crudPage({
   const create = (prefix2) => {
     return function Page() {
       const data = useLoaderData2();
-      const { pathname } = useLocation3();
+      const { pathname } = useLocation4();
       if (pathname === prefix2) {
         const Component = createTablePage({
           ...tablePageOptions,
           name
         });
-        return /* @__PURE__ */ jsx10(Component, { header });
+        return /* @__PURE__ */ jsx11(Component, { header });
       }
       if (pathname.startsWith(prefix2)) {
-        return /* @__PURE__ */ jsx10(
+        return /* @__PURE__ */ jsx11(
           CrudFormProvider,
           {
             item: data?.item,
@@ -8539,7 +8653,7 @@ function crudPage({
             name,
             columns: formOptions.columns,
             primaryKey,
-            children: formOptions.form ? /* @__PURE__ */ jsx10(FormDelegate, { component: formOptions.form }) : /* @__PURE__ */ jsx10(CrudForm, { AdminHeader: header })
+            children: formOptions.form ? /* @__PURE__ */ jsx11(FormDelegate, { component: formOptions.form }) : /* @__PURE__ */ jsx11(CrudForm, { AdminHeader: header })
           }
         );
       }
@@ -8554,7 +8668,7 @@ function FormDelegate({
   component: Component
 }) {
   const form = useFormContext();
-  return /* @__PURE__ */ jsx10(Component, { form });
+  return /* @__PURE__ */ jsx11(Component, { form });
 }
 
 // src/crud/generate_handlers.ts
@@ -8570,15 +8684,15 @@ var generateHandlers = (handlers) => {
 };
 
 // src/crud/generate_pages.tsx
-import { useLocation as useLocation4 } from "react-router";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { useLocation as useLocation5 } from "react-router";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var generatePages = (pages) => {
   function Page() {
-    const { pathname } = useLocation4();
+    const { pathname } = useLocation5();
     for (const route2 of Object.keys(pages)) {
       if (pathname.startsWith(route2)) {
         const Page2 = pages[route2].create(route2);
-        return /* @__PURE__ */ jsx11(Page2, {});
+        return /* @__PURE__ */ jsx12(Page2, {});
       }
     }
   }