dn-react-router-toolkit 0.8.1 → 0.9.0

package/dist/table/index.d.mts

@@ -1,8 +1,6 @@
 export { BaseTableRepository, ColumnOf, FindAllOptions, InsertModelOf, SchemaOf, SelectModelOf, TableRepository } from './repository.mjs';
 export { TablePageButtons } from './buttons.mjs';
-export { TableItemLoaderOptions, tableItemloader } from './item_loader.mjs';
 export { tableLoader } from './loader.mjs';
-export { createTablePage } from './page.mjs';
 export { OrderedTableProps, Table, TableColumnOptions, TableColumnProps } from './table.mjs';
 export { TableLoaderOptions, loadTable } from './load_table.mjs';
 export { LoadedModel, TableForm, TablePageOptions } from './table_form.mjs';

package/dist/table/index.d.ts

@@ -1,8 +1,6 @@
 export { BaseTableRepository, ColumnOf, FindAllOptions, InsertModelOf, SchemaOf, SelectModelOf, TableRepository } from './repository.js';
 export { TablePageButtons } from './buttons.js';
-export { TableItemLoaderOptions, tableItemloader } from './item_loader.js';
 export { tableLoader } from './loader.js';
-export { createTablePage } from './page.js';
 export { OrderedTableProps, Table, TableColumnOptions, TableColumnProps } from './table.js';
 export { TableLoaderOptions, loadTable } from './load_table.js';
 export { LoadedModel, TableForm, TablePageOptions } from './table_form.js';

package/dist/table/index.js

@@ -24,9 +24,7 @@ __export(table_exports, {
   Table: () => Table,
   TableForm: () => TableForm,
   TablePageButtons: () => TablePageButtons,
-  createTablePage: () => createTablePage,
   loadTable: () => loadTable,
-  tableItemloader: () => tableItemloader,
   tableLoader: () => tableLoader,
   useTable: () => useTable
 });
@@ -158,22 +156,6 @@ function TablePageButtons({
   ] }) });
 }
 
-// src/table/item_loader.tsx
-var tableItemloader = ({
-  repository
-}) => {
-  return async (args) => {
-    const { params } = args;
-    if (params["itemId"] === "new") {
-      return { item: void 0 };
-    }
-    const item = params["itemId"] ? await repository.find(params["itemId"]) : void 0;
-    return {
-      item
-    };
-  };
-};
-
 // src/table/load_table.tsx
 var import_drizzle_orm2 = require("drizzle-orm");
 async function loadTable({
@@ -184,7 +166,7 @@ async function loadTable({
   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 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;
@@ -204,7 +186,7 @@ async function loadTable({
       `%${query}%`
     ) : void 0,
     ...filterWhere,
-    ...where ?? []
+    where
   );
   const total = await repository.countTotal({ where: whereClauses });
   const items = await repository.findAll({
@@ -251,13 +233,6 @@ function tableLoader({
   };
 }
 
-// src/table/page.tsx
-var import_react_router5 = require("react-router");
-
-// src/table/table_form.tsx
-var import_react_router4 = require("react-router");
-var import_go2 = require("react-icons/go");
-
 // src/table/table.tsx
 var import_utils2 = require("dn-react-toolkit/utils");
 var import_go = require("react-icons/go");
@@ -281,10 +256,7 @@ function Table({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "table",
     {
-      className: (0, import_utils2.cn)(
-        className,
-        "text-[15px] border-separate border-spacing-0"
-      ),
+      className: (0, import_utils2.cn)(className, "text-[15px] border-separate border-spacing-0"),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tr", { children: keys.map((key) => {
           const value = columns[key];
@@ -323,13 +295,11 @@ function Table({
             }
             return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: reactNode });
           }
-          const filter = filters[key];
+          const filter = filters?.[key];
           return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
             "th",
             {
-              className: (0, import_utils2.cn)(
-                "py-4 border-y font-normal align-top"
-              ),
+              className: (0, import_utils2.cn)("py-4 border-y font-normal align-top"),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Head, {}),
                 filter && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "px-3 mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -340,12 +310,7 @@ function Table({
                       const value2 = e.target.value;
                       setSearchParams((prev) => {
                         if (value2) {
-                          prev.set(
-                            key,
-                            encodeURIComponent(
-                              value2
-                            )
-                          );
+                          prev.set(key, encodeURIComponent(value2));
                         } else {
                           prev.delete(key);
                         }
@@ -354,14 +319,7 @@ function Table({
                     },
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: "\uC804\uCCB4" }),
-                      filter.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                        "option",
-                        {
-                          value: option,
-                          children: option
-                        },
-                        option
-                      ))
+                      filter.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: option, children: option }, option))
                     ]
                   }
                 ) })
@@ -400,7 +358,7 @@ function Table({
                 className: "block content-center px-4 w-full h-full",
                 children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, {})
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, {});
+            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "px-4 w-full h-full content-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Content, {}) });
             const cell = Mapper ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
             return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("td", { className: "px-0 h-14 border-b", children: cell }, key);
           }) }, i))
@@ -410,6 +368,10 @@ function Table({
   );
 }
 
+// src/table/table_form.tsx
+var import_react_router4 = require("react-router");
+var import_go2 = require("react-icons/go");
+
 // src/table/use_table.tsx
 var import_react_router3 = require("react-router");
 function useTable() {
@@ -498,42 +460,13 @@ function TableForm({
     )
   ] });
 }
-
-// src/table/page.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function createTablePage({
-  name,
-  columns,
-  primaryKey = "id"
-}) {
-  return function TablePage({
-    header: Header
-  }) {
-    const { pathname } = (0, import_react_router5.useLocation)();
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        Header,
-        {
-          title: name,
-          actions: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_router5.Link, { to: `${pathname}/new`, className: "button-primary", children: [
-            name,
-            " \uCD94\uAC00"
-          ] })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "max-w-7xl mx-auto w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TableForm, { columns, primaryKey }) })
-    ] });
-  };
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BaseTableRepository,
   Table,
   TableForm,
   TablePageButtons,
-  createTablePage,
   loadTable,
-  tableItemloader,
   tableLoader,
   useTable
 });

package/dist/table/index.mjs

@@ -129,22 +129,6 @@ function TablePageButtons({
   ] }) });
 }
 
-// src/table/item_loader.tsx
-var tableItemloader = ({
-  repository
-}) => {
-  return async (args) => {
-    const { params } = args;
-    if (params["itemId"] === "new") {
-      return { item: void 0 };
-    }
-    const item = params["itemId"] ? await repository.find(params["itemId"]) : void 0;
-    return {
-      item
-    };
-  };
-};
-
 // src/table/load_table.tsx
 import {
   and,
@@ -159,7 +143,7 @@ async function loadTable({
   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 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;
@@ -179,7 +163,7 @@ async function loadTable({
       `%${query}%`
     ) : void 0,
     ...filterWhere,
-    ...where ?? []
+    where
   );
   const total = await repository.countTotal({ where: whereClauses });
   const items = await repository.findAll({
@@ -226,13 +210,6 @@ function tableLoader({
   };
 }
 
-// src/table/page.tsx
-import { Link as Link3, useLocation as useLocation3 } from "react-router";
-
-// src/table/table_form.tsx
-import { useLocation as useLocation2, useNavigate, useSearchParams as useSearchParams3 } from "react-router";
-import { GoSearch } from "react-icons/go";
-
 // src/table/table.tsx
 import { cn as cn2 } from "dn-react-toolkit/utils";
 import { GoArrowDown, GoArrowUp } from "react-icons/go";
@@ -256,10 +233,7 @@ function Table({
   return /* @__PURE__ */ jsxs2(
     "table",
     {
-      className: cn2(
-        className,
-        "text-[15px] border-separate border-spacing-0"
-      ),
+      className: cn2(className, "text-[15px] border-separate border-spacing-0"),
       children: [
         /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: keys.map((key) => {
           const value = columns[key];
@@ -298,13 +272,11 @@ function Table({
             }
             return /* @__PURE__ */ jsx2(Fragment2, { children: reactNode });
           }
-          const filter = filters[key];
+          const filter = filters?.[key];
           return /* @__PURE__ */ jsxs2(
             "th",
             {
-              className: cn2(
-                "py-4 border-y font-normal align-top"
-              ),
+              className: cn2("py-4 border-y font-normal align-top"),
               children: [
                 /* @__PURE__ */ jsx2(Head, {}),
                 filter && /* @__PURE__ */ jsx2("div", { className: "px-3 mt-4", children: /* @__PURE__ */ jsxs2(
@@ -315,12 +287,7 @@ function Table({
                       const value2 = e.target.value;
                       setSearchParams((prev) => {
                         if (value2) {
-                          prev.set(
-                            key,
-                            encodeURIComponent(
-                              value2
-                            )
-                          );
+                          prev.set(key, encodeURIComponent(value2));
                         } else {
                           prev.delete(key);
                         }
@@ -329,14 +296,7 @@ function Table({
                     },
                     children: [
                       /* @__PURE__ */ jsx2("option", { value: "", children: "\uC804\uCCB4" }),
-                      filter.map((option) => /* @__PURE__ */ jsx2(
-                        "option",
-                        {
-                          value: option,
-                          children: option
-                        },
-                        option
-                      ))
+                      filter.map((option) => /* @__PURE__ */ jsx2("option", { value: option, children: option }, option))
                     ]
                   }
                 ) })
@@ -375,7 +335,7 @@ function Table({
                 className: "block content-center px-4 w-full h-full",
                 children: /* @__PURE__ */ jsx2(Content, {})
               }
-            ) : /* @__PURE__ */ jsx2(Content, {});
+            ) : /* @__PURE__ */ jsx2("div", { className: "px-4 w-full h-full content-center", children: /* @__PURE__ */ jsx2(Content, {}) });
             const cell = Mapper ? /* @__PURE__ */ jsx2(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
             return /* @__PURE__ */ jsx2("td", { className: "px-0 h-14 border-b", children: cell }, key);
           }) }, i))
@@ -385,6 +345,10 @@ function Table({
   );
 }
 
+// src/table/table_form.tsx
+import { useLocation as useLocation2, useNavigate, useSearchParams as useSearchParams3 } from "react-router";
+import { GoSearch } from "react-icons/go";
+
 // src/table/use_table.tsx
 import { useLoaderData } from "react-router";
 function useTable() {
@@ -473,41 +437,12 @@ function TableForm({
     )
   ] });
 }
-
-// src/table/page.tsx
-import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function createTablePage({
-  name,
-  columns,
-  primaryKey = "id"
-}) {
-  return function TablePage({
-    header: Header
-  }) {
-    const { pathname } = useLocation3();
-    return /* @__PURE__ */ jsxs4(Fragment4, { children: [
-      /* @__PURE__ */ jsx4(
-        Header,
-        {
-          title: name,
-          actions: /* @__PURE__ */ jsxs4(Link3, { to: `${pathname}/new`, className: "button-primary", children: [
-            name,
-            " \uCD94\uAC00"
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx4("div", { className: "max-w-7xl mx-auto w-full overflow-auto", children: /* @__PURE__ */ jsx4(TableForm, { columns, primaryKey }) })
-    ] });
-  };
-}
 export {
   BaseTableRepository,
   Table,
   TableForm,
   TablePageButtons,
-  createTablePage,
   loadTable,
-  tableItemloader,
   tableLoader,
   useTable
 };

package/dist/table/load_table.d.mts

@@ -4,7 +4,7 @@ import { TableRepository, ColumnOf } from './repository.mjs';
 import 'drizzle-orm/node-postgres';
 
 type TableOptions<T extends PgTableWithColumns<any>> = {
-    where?: SQLWrapper[];
+    where?: SQLWrapper;
     searchKey?: ColumnOf<T>;
     defaultOrderBy: keyof InferSelectModel<T>;
     defaultDirection: "asc" | "desc";

package/dist/table/load_table.d.ts

@@ -4,7 +4,7 @@ import { TableRepository, ColumnOf } from './repository.js';
 import 'drizzle-orm/node-postgres';
 
 type TableOptions<T extends PgTableWithColumns<any>> = {
-    where?: SQLWrapper[];
+    where?: SQLWrapper;
     searchKey?: ColumnOf<T>;
     defaultOrderBy: keyof InferSelectModel<T>;
     defaultDirection: "asc" | "desc";

package/dist/table/load_table.js

@@ -32,7 +32,7 @@ async function loadTable({
   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 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;
@@ -52,7 +52,7 @@ async function loadTable({
       `%${query}%`
     ) : void 0,
     ...filterWhere,
-    ...where ?? []
+    where
   );
   const total = await repository.countTotal({ where: whereClauses });
   const items = await repository.findAll({

package/dist/table/load_table.mjs

@@ -12,7 +12,7 @@ async function loadTable({
   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 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;
@@ -32,7 +32,7 @@ async function loadTable({
       `%${query}%`
     ) : void 0,
     ...filterWhere,
-    ...where ?? []
+    where
   );
   const total = await repository.countTotal({ where: whereClauses });
   const items = await repository.findAll({

package/dist/table/loader.js

@@ -34,7 +34,7 @@ async function loadTable({
   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 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;
@@ -54,7 +54,7 @@ async function loadTable({
       `%${query}%`
     ) : void 0,
     ...filterWhere,
-    ...where ?? []
+    where
   );
   const total = await repository.countTotal({ where: whereClauses });
   const items = await repository.findAll({

package/dist/table/loader.mjs

@@ -12,7 +12,7 @@ async function loadTable({
   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 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;
@@ -32,7 +32,7 @@ async function loadTable({
       `%${query}%`
     ) : void 0,
     ...filterWhere,
-    ...where ?? []
+    where
   );
   const total = await repository.countTotal({ where: whereClauses });
   const items = await repository.findAll({

package/dist/table/table.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, DetailedHTMLProps, TableHTMLAttributes, FC } from 'react';
+import { DetailedHTMLProps, TableHTMLAttributes, ReactNode, FC } from 'react';
 
 type TableColumnProps<T> = ReactNode | {
     label: ReactNode;
@@ -22,7 +22,7 @@ type OrderedTableProps<T> = DetailedHTMLProps<TableHTMLAttributes<HTMLTableEleme
     offset?: number;
     orderBy?: string;
     direction?: string;
-    filters: {
+    filters?: {
         [key: string]: unknown[];
     };
 };

package/dist/table/table.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, DetailedHTMLProps, TableHTMLAttributes, FC } from 'react';
+import { DetailedHTMLProps, TableHTMLAttributes, ReactNode, FC } from 'react';
 
 type TableColumnProps<T> = ReactNode | {
     label: ReactNode;
@@ -22,7 +22,7 @@ type OrderedTableProps<T> = DetailedHTMLProps<TableHTMLAttributes<HTMLTableEleme
     offset?: number;
     orderBy?: string;
     direction?: string;
-    filters: {
+    filters?: {
         [key: string]: unknown[];
     };
 };

package/dist/table/table.js

@@ -45,10 +45,7 @@ function Table({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "table",
     {
-      className: (0, import_utils.cn)(
-        className,
-        "text-[15px] border-separate border-spacing-0"
-      ),
+      className: (0, import_utils.cn)(className, "text-[15px] border-separate border-spacing-0"),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: keys.map((key) => {
           const value = columns[key];
@@ -87,13 +84,11 @@ function Table({
             }
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: reactNode });
           }
-          const filter = filters[key];
+          const filter = filters?.[key];
           return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "th",
             {
-              className: (0, import_utils.cn)(
-                "py-4 border-y font-normal align-top"
-              ),
+              className: (0, import_utils.cn)("py-4 border-y font-normal align-top"),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Head, {}),
                 filter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -104,12 +99,7 @@ function Table({
                       const value2 = e.target.value;
                       setSearchParams((prev) => {
                         if (value2) {
-                          prev.set(
-                            key,
-                            encodeURIComponent(
-                              value2
-                            )
-                          );
+                          prev.set(key, encodeURIComponent(value2));
                         } else {
                           prev.delete(key);
                         }
@@ -118,14 +108,7 @@ function Table({
                     },
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "\uC804\uCCB4" }),
-                      filter.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "option",
-                        {
-                          value: option,
-                          children: option
-                        },
-                        option
-                      ))
+                      filter.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option, children: option }, option))
                     ]
                   }
                 ) })
@@ -164,7 +147,7 @@ function Table({
                 className: "block content-center px-4 w-full h-full",
                 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {})
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {});
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 w-full h-full content-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {}) });
             const cell = Mapper ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-0 h-14 border-b", children: cell }, key);
           }) }, i))

package/dist/table/table.mjs

@@ -21,10 +21,7 @@ function Table({
   return /* @__PURE__ */ jsxs(
     "table",
     {
-      className: cn(
-        className,
-        "text-[15px] border-separate border-spacing-0"
-      ),
+      className: cn(className, "text-[15px] border-separate border-spacing-0"),
       children: [
         /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: keys.map((key) => {
           const value = columns[key];
@@ -63,13 +60,11 @@ function Table({
             }
             return /* @__PURE__ */ jsx(Fragment, { children: reactNode });
           }
-          const filter = filters[key];
+          const filter = filters?.[key];
           return /* @__PURE__ */ jsxs(
             "th",
             {
-              className: cn(
-                "py-4 border-y font-normal align-top"
-              ),
+              className: cn("py-4 border-y font-normal align-top"),
               children: [
                 /* @__PURE__ */ jsx(Head, {}),
                 filter && /* @__PURE__ */ jsx("div", { className: "px-3 mt-4", children: /* @__PURE__ */ jsxs(
@@ -80,12 +75,7 @@ function Table({
                       const value2 = e.target.value;
                       setSearchParams((prev) => {
                         if (value2) {
-                          prev.set(
-                            key,
-                            encodeURIComponent(
-                              value2
-                            )
-                          );
+                          prev.set(key, encodeURIComponent(value2));
                         } else {
                           prev.delete(key);
                         }
@@ -94,14 +84,7 @@ function Table({
                     },
                     children: [
                       /* @__PURE__ */ jsx("option", { value: "", children: "\uC804\uCCB4" }),
-                      filter.map((option) => /* @__PURE__ */ jsx(
-                        "option",
-                        {
-                          value: option,
-                          children: option
-                        },
-                        option
-                      ))
+                      filter.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
                     ]
                   }
                 ) })
@@ -140,7 +123,7 @@ function Table({
                 className: "block content-center px-4 w-full h-full",
                 children: /* @__PURE__ */ jsx(Content, {})
               }
-            ) : /* @__PURE__ */ jsx(Content, {});
+            ) : /* @__PURE__ */ jsx("div", { className: "px-4 w-full h-full content-center", children: /* @__PURE__ */ jsx(Content, {}) });
             const cell = Mapper ? /* @__PURE__ */ jsx(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
             return /* @__PURE__ */ jsx("td", { className: "px-0 h-14 border-b", children: cell }, key);
           }) }, i))