@tipp/ui 1.3.2 → 1.4.0

package/dist/index.js

@@ -1,3 +1,6 @@
+import {
+  useThemeContext
+} from "./chunk-MMGP4GEQ.js";
 import {
   uiProps
 } from "./chunk-NVKNDAIN.js";
@@ -11,34 +14,46 @@ import {
 import "./chunk-6ZAP2Q6K.js";
 import {
   DatePicker
-} from "./chunk-4AACT3BJ.js";
+} from "./chunk-C3YMRWG2.js";
 import {
   ExpandTable,
   createColumnHelper
-} from "./chunk-DYKEZ7NH.js";
+} from "./chunk-YQJGVOUT.js";
 import "./chunk-X5FVSTHW.js";
 import {
   DotNavigation
 } from "./chunk-EDTEVEJW.js";
 import {
   LearningPost
-} from "./chunk-GTRSAGDQ.js";
+} from "./chunk-XGPMAJED.js";
 import {
   Navigation
-} from "./chunk-PPO64OK7.js";
+} from "./chunk-VSGK4POC.js";
 import {
   Stepper
-} from "./chunk-PF5CPG6R.js";
+} from "./chunk-Y3L7BYDF.js";
 import {
   TagSelector
-} from "./chunk-MKYNSWMI.js";
+} from "./chunk-P7633BEQ.js";
 import {
   ThemeProvider
 } from "./chunk-BVNXAZ4W.js";
+import "./chunk-PSINRHYW.js";
 import {
-  useThemeContext
-} from "./chunk-MMGP4GEQ.js";
+  EchartDefaultProps
+} from "./chunk-2QFSCWES.js";
+import {
+  HorizontalBarChart
+} from "./chunk-SGMO4KBC.js";
+import "./chunk-BSTJBBEX.js";
+import "./chunk-NDUKDKGB.js";
 import "./chunk-76JGDATZ.js";
+import {
+  Spinner
+} from "./chunk-FR2GDOU2.js";
+import {
+  Strong
+} from "./chunk-74DX4CU7.js";
 import {
   Switch
 } from "./chunk-OYM4XCHQ.js";
@@ -58,6 +73,12 @@ import {
   ToastContainer,
   toast
 } from "./chunk-CYYWMYE7.js";
+import {
+  RadioGroup
+} from "./chunk-6DJOIRMF.js";
+import {
+  Radio
+} from "./chunk-FPD73OHW.js";
 import {
   ScrollArea
 } from "./chunk-ZKZDVS7G.js";
@@ -77,17 +98,17 @@ import {
   Skeleton
 } from "./chunk-5H3YPCZK.js";
 import {
-  Spinner
-} from "./chunk-FR2GDOU2.js";
+  Inset
+} from "./chunk-XQOL7UBI.js";
 import {
-  Strong
-} from "./chunk-74DX4CU7.js";
+  Kbd
+} from "./chunk-TULWX7D6.js";
 import {
   Link
 } from "./chunk-SIM6HKVI.js";
 import {
   Pagination
-} from "./chunk-RJMSUTBQ.js";
+} from "./chunk-5X3BCQPR.js";
 import {
   Popover
 } from "./chunk-5AVBYDPB.js";
@@ -101,11 +122,11 @@ import {
   RadioCards
 } from "./chunk-6IVCARWS.js";
 import {
-  RadioGroup
-} from "./chunk-6DJOIRMF.js";
+  FieldErrorWrapper
+} from "./chunk-DJN2IEY6.js";
 import {
-  Radio
-} from "./chunk-FPD73OHW.js";
+  Flex
+} from "./chunk-25HMMI7R.js";
 import {
   Form
 } from "./chunk-2CVXGGI5.js";
@@ -122,11 +143,11 @@ import {
   IconButton
 } from "./chunk-O3DNDMV3.js";
 import {
-  Inset
-} from "./chunk-XQOL7UBI.js";
+  Collapse
+} from "./chunk-LZJR77Q2.js";
 import {
-  Kbd
-} from "./chunk-TULWX7D6.js";
+  Container
+} from "./chunk-Q37G2GS6.js";
 import {
   DataList
 } from "./chunk-VTJZMOSP.js";
@@ -148,18 +169,18 @@ import {
 import {
   Tooltip
 } from "./chunk-ACVANQJ4.js";
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
 import {
   Em
 } from "./chunk-2DZ2Y3JI.js";
 import {
-  FieldErrorWrapper
-} from "./chunk-QDZS4B6A.js";
-import {
-  Typo
-} from "./chunk-52MVZ6AN.js";
+  Box
+} from "./chunk-4Y5BEXVN.js";
 import {
-  Flex
-} from "./chunk-25HMMI7R.js";
+  Button
+} from "./chunk-P3YCIJUP.js";
 import {
   Callout
 } from "./chunk-B6XJN6EC.js";
@@ -178,36 +199,6 @@ import {
 import {
   Code
 } from "./chunk-OHMOP5PV.js";
-import {
-  Collapse
-} from "./chunk-LZJR77Q2.js";
-import {
-  Container
-} from "./chunk-Q37G2GS6.js";
-import {
-  AlertDialog
-} from "./chunk-J242TTFH.js";
-import {
-  AspectRatio
-} from "./chunk-EAXUQEO5.js";
-import {
-  AutoSizingInput
-} from "./chunk-YJCCE5WP.js";
-import {
-  Avatar
-} from "./chunk-3SSSCLJ5.js";
-import {
-  Badge
-} from "./chunk-EWD4AO5N.js";
-import {
-  Blockquote
-} from "./chunk-YGL6SWKN.js";
-import {
-  Box
-} from "./chunk-4Y5BEXVN.js";
-import {
-  Button
-} from "./chunk-P3YCIJUP.js";
 import {
   ArchiveIcon,
   BackpackIcon,
@@ -244,15 +235,24 @@ import {
   Share1Icon,
   TrashIcon
 } from "./chunk-66C4U3BG.js";
-import "./chunk-PSINRHYW.js";
 import {
-  EchartDefaultProps
-} from "./chunk-2QFSCWES.js";
+  AlertDialog
+} from "./chunk-J242TTFH.js";
 import {
-  HorizontalBarChart
-} from "./chunk-SGMO4KBC.js";
-import "./chunk-BSTJBBEX.js";
-import "./chunk-NDUKDKGB.js";
+  AspectRatio
+} from "./chunk-EAXUQEO5.js";
+import {
+  AutoSizingInput
+} from "./chunk-YJCCE5WP.js";
+import {
+  Avatar
+} from "./chunk-3SSSCLJ5.js";
+import {
+  Badge
+} from "./chunk-EWD4AO5N.js";
+import {
+  Blockquote
+} from "./chunk-YGL6SWKN.js";
 import "./chunk-N552FDTV.js";
 export {
   AlertDialog,

package/dist/molecules/date-picker/index.js

@@ -1,9 +1,9 @@
 import {
   DatePicker
-} from "../../chunk-4AACT3BJ.js";
+} from "../../chunk-C3YMRWG2.js";
+import "../../chunk-25HMMI7R.js";
 import "../../chunk-HK224ADT.js";
 import "../../chunk-O3DNDMV3.js";
-import "../../chunk-25HMMI7R.js";
 import "../../chunk-66C4U3BG.js";
 import "../../chunk-N552FDTV.js";
 export {

package/dist/molecules/expand-table/index.cjs

@@ -64,13 +64,16 @@ __export(expand_table_exports, {
 });
 module.exports = __toCommonJS(expand_table_exports);
 var import_react_table2 = require("@tanstack/react-table");
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/atoms/flex.tsx
 var import_themes = require("@radix-ui/themes");
 
-// src/atoms/typo.tsx
+// src/atoms/icon-button.tsx
 var import_themes2 = require("@radix-ui/themes");
+
+// src/atoms/typo.tsx
+var import_themes3 = require("@radix-ui/themes");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Typo = (0, import_react.forwardRef)(
@@ -89,7 +92,7 @@ var Typo = (0, import_react.forwardRef)(
           return "2";
       }
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes2.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
   }
 );
 Typo.displayName = "Typo";
@@ -116,13 +119,125 @@ function Collapse(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tipp-collapse", ref, children });
 }
 
-// src/icons/down.tsx
-var React3 = __toESM(require("react"), 1);
+// src/atoms/spinner.tsx
+var import_themes4 = require("@radix-ui/themes");
+
+// src/atoms/pagination.tsx
+var import_react3 = require("react");
+
+// src/icon.ts
+var import_react_icons = require("@radix-ui/react-icons");
+
+// src/atoms/pagination.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var TriangleArrowDownIcon = React3.forwardRef(
+function Pagination(props) {
+  const { onChange, count = 0, siblingCount = 2 } = props;
+  const [page, setPage] = (0, import_react3.useState)(() => props.page || props.defaultPage || 1);
+  const visibleItems = (0, import_react3.useMemo)(() => {
+    let start = Math.max(1, page - siblingCount);
+    let end = Math.min(count, page + siblingCount);
+    if (page - siblingCount <= 0 && end < count) {
+      end = Math.min(count, end + Math.abs(page - siblingCount) + 1);
+    } else if (page + siblingCount > count && start > 1) {
+      start = Math.max(1, start - (page + siblingCount - count));
+    }
+    return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+  }, [count, page, siblingCount]);
+  (0, import_react3.useEffect)(() => {
+    onChange == null ? void 0 : onChange(page);
+  }, [onChange, page]);
+  (0, import_react3.useEffect)(() => {
+    if (props.page) {
+      setPage(props.page);
+    }
+  }, [props.page]);
+  const prev = (0, import_react3.useMemo)(() => {
+    const p = page - 1;
+    return p < 1 ? void 0 : p;
+  }, [page]);
+  const next = (0, import_react3.useMemo)(() => {
+    const n = page + 1;
+    return n > count ? void 0 : n;
+  }, [count, page]);
+  const onClickPrev = (0, import_react3.useCallback)(() => {
+    prev && setPage(prev);
+  }, [prev]);
+  const onClickNext = (0, import_react3.useCallback)(() => {
+    next && setPage(next);
+  }, [next]);
+  const doublePrev = (0, import_react3.useMemo)(() => {
+    if (!visibleItems.length)
+      return;
+    return Math.max(0, visibleItems[0] - 1);
+  }, [visibleItems]);
+  const onClickDoublePrev = (0, import_react3.useCallback)(() => {
+    doublePrev && setPage(doublePrev);
+  }, [doublePrev]);
+  const doubleNext = (0, import_react3.useMemo)(() => {
+    if (!visibleItems.length)
+      return;
+    const n = visibleItems[visibleItems.length - 1] + 1;
+    if (n > count)
+      return;
+    return Math.min(count, n);
+  }, [count, visibleItems]);
+  const onClickDoubleNext = (0, import_react3.useCallback)(() => {
+    doubleNext && setPage(doubleNext);
+  }, [doubleNext]);
+  const iconSize = {
+    height: 24,
+    width: 24
+  };
+  const moveButtonProps = {
+    variant: "ghost",
+    size: "3",
+    style: { borderRadius: "50%" }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_themes.Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_themes2.IconButton,
+      __spreadProps(__spreadValues({
+        disabled: !doublePrev,
+        onClick: onClickDoublePrev
+      }, moveButtonProps), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icons.DoubleArrowLeftIcon, __spreadValues({}, iconSize))
+      })
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes2.IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icons.ChevronLeftIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes.Flex, { gap: "1", children: visibleItems.map((item) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          className: `page-button ${item === page ? "active" : ""}`,
+          onClick: () => {
+            setPage(item);
+          },
+          type: "button",
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Typo, { variant: "body", children: item })
+        },
+        item
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes2.IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icons.ChevronRightIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_themes2.IconButton,
+      __spreadProps(__spreadValues({
+        disabled: !doubleNext,
+        onClick: onClickDoubleNext
+      }, moveButtonProps), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icons.DoubleArrowRightIcon, __spreadValues({}, iconSize))
+      })
+    )
+  ] });
+}
+
+// src/icons/down.tsx
+var React4 = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TriangleArrowDownIcon = React4.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "svg",
       __spreadProps(__spreadValues({
         fill: "none",
@@ -132,7 +247,7 @@ var TriangleArrowDownIcon = React3.forwardRef(
         xmlns: "http://www.w3.org/2000/svg"
       }, props), {
         ref: forwardedRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "path",
           {
             d: "M7.10844 0.8125H0.891554C0.197392 0.8125 -0.177096 1.62672 0.274659 2.15377L3.3831 5.78029C3.70737 6.1586 4.29263 6.1586 4.6169 5.78029L7.72534 2.15377C8.1771 1.62672 7.80261 0.8125 7.10844 0.8125Z",
@@ -146,12 +261,12 @@ var TriangleArrowDownIcon = React3.forwardRef(
 TriangleArrowDownIcon.displayName = "ArrowDownIcon";
 
 // src/icons/up.tsx
-var React4 = __toESM(require("react"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var TriangleArrowUpIcon = React4.forwardRef(
+var React5 = __toESM(require("react"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TriangleArrowUpIcon = React5.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "svg",
       __spreadProps(__spreadValues({
         fill: "none",
@@ -161,7 +276,7 @@ var TriangleArrowUpIcon = React4.forwardRef(
         xmlns: "http://www.w3.org/2000/svg"
       }, props), {
         ref: forwardedRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "path",
           {
             d: "M0.891555 6.1875L7.10845 6.1875C7.80261 6.1875 8.1771 5.37328 7.72534 4.84623L4.6169 1.21971C4.29263 0.841403 3.70737 0.841403 3.3831 1.21971L0.274659 4.84623C-0.177095 5.37328 0.197393 6.1875 0.891555 6.1875Z",
@@ -176,17 +291,17 @@ TriangleArrowUpIcon.displayName = "ArrowUpIcon";
 
 // src/molecules/expand-table/row.tsx
 var import_react_table = require("@tanstack/react-table");
-var import_react3 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Row(props) {
   const { row, ExpandComp, gridColTemp } = props;
-  const [open, setOpen] = (0, import_react3.useState)(false);
-  const onClickRow = (0, import_react3.useCallback)(() => {
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const onClickRow = (0, import_react4.useCallback)(() => {
     var _a;
     (_a = props.onRowClick) == null ? void 0 : _a.call(props, row.original);
     setOpen((prev) => !prev);
   }, [props, row.original]);
-  const rowClassName = (0, import_react3.useMemo)(() => {
+  const rowClassName = (0, import_react4.useMemo)(() => {
     const baseCls = ["tr-wrapper"];
     if (ExpandComp) {
       baseCls.push("expandable");
@@ -196,8 +311,8 @@ function Row(props) {
     }
     return baseCls.join(" ");
   }, [ExpandComp, props.onRowClick]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: rowClassName, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: rowClassName, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         className: "tr",
@@ -208,7 +323,7 @@ function Row(props) {
           var _a, _b, _c;
           const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
           const justifyContent = ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.align) || props.defaultAlign;
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "div",
             {
               className: "td",
@@ -219,7 +334,7 @@ function Row(props) {
               },
               children: [
                 (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
-                ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   cell.column.columnDef.meta.OpenBtn,
                   {
                     data: row.original,
@@ -235,27 +350,46 @@ function Row(props) {
       },
       `tr_${row.id}`
     ),
-    ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpandComp, { row }) }) }) : null
+    ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExpandComp, { row }) }) }) : null
   ] }, `tr-wrapper_${row.id}`);
 }
 
 // src/molecules/expand-table/index.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function ExpandTable(props) {
-  const { data, columns, ExpandComp, placeholder, onRowClick, tableStyle } = props;
+  const {
+    data,
+    columns,
+    ExpandComp,
+    placeholder,
+    onRowClick,
+    tableStyle,
+    showPagination,
+    isLoading,
+    pageIndex = 0,
+    pageSize = 10,
+    siblingCount = 2
+  } = props;
   const defaultAlign = "left";
-  const [sorting, setSorting] = (0, import_react4.useState)([]);
-  const { getRowModel, getHeaderGroups } = (0, import_react_table2.useReactTable)({
+  const [pagination, setPagination] = (0, import_react5.useState)({
+    pageIndex: pageIndex || 0,
+    pageSize: pageSize || 9999
+  });
+  const [sorting, setSorting] = (0, import_react5.useState)([]);
+  const { getRowModel, getHeaderGroups, setPageIndex } = (0, import_react_table2.useReactTable)({
     data: data || [],
     columns,
     getCoreRowModel: (0, import_react_table2.getCoreRowModel)(),
     getSortedRowModel: (0, import_react_table2.getSortedRowModel)(),
     state: {
-      sorting
+      sorting,
+      pagination
     },
-    onSortingChange: setSorting
+    onSortingChange: setSorting,
+    getPaginationRowModel: (0, import_react_table2.getPaginationRowModel)(),
+    onPaginationChange: setPagination
   });
-  const gridColTemp = (0, import_react4.useMemo)(() => {
+  const gridColTemp = (0, import_react5.useMemo)(() => {
     return columns.map((col) => {
       var _a;
       if ((_a = col.meta) == null ? void 0 : _a.autoSize)
@@ -264,8 +398,41 @@ function ExpandTable(props) {
     }).join(" ");
   }, [columns]);
   const rowModels = getRowModel();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "expand-table", style: tableStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const onChangePagination = (0, import_react5.useCallback)(
+    (page) => {
+      setPageIndex(page - 1);
+    },
+    [setPageIndex]
+  );
+  const helpCompRender = (0, import_react5.useCallback)(
+    (rowLength) => {
+      if (isLoading) {
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_themes.Flex,
+          {
+            align: "center",
+            height: "100%",
+            justify: "center",
+            p: "5",
+            width: "100%",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes4.Spinner, {})
+          }
+        );
+      }
+      if (rowLength === 0) {
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder");
+      }
+      return null;
+    },
+    [isLoading, placeholder]
+  );
+  const pageCount = (0, import_react5.useMemo)(() => {
+    if (!data)
+      return 0;
+    return Math.ceil(data.length / pageSize);
+  }, [data, pageSize]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "expand-table", style: tableStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         className: "tr",
@@ -275,30 +442,30 @@ function ExpandTable(props) {
           const sortable = header.column.getCanSort();
           const sortedState = header.column.getIsSorted();
           const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
-          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "button",
             {
               onClick: header.column.getToggleSortingHandler(),
               style: sortable ? { cursor: "pointer" } : void 0,
               type: "button",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Typo, { variant: "body", children: (0, import_react_table2.flexRender)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Typo, { variant: "body", children: (0, import_react_table2.flexRender)(
                   header.column.columnDef.header,
                   header.getContext()
                 ) }),
-                sortable ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                sortable ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                   import_themes.Flex,
                   {
                     direction: "column",
                     style: { marginLeft: "var(--space-2)" },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         TriangleArrowUpIcon,
                         {
                           color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         TriangleArrowDownIcon,
                         {
                           color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
@@ -314,22 +481,28 @@ function ExpandTable(props) {
       },
       headerGroup.id
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "tbody", children: [
-      rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_themes.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
-      rowModels.rows.map((row) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          Row,
-          {
-            ExpandComp,
-            defaultAlign,
-            gridColTemp,
-            onRowClick,
-            row
-          },
-          `row_${row.id}`
-        );
-      })
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "tbody", children: helpCompRender(rowModels.rows.length) || rowModels.rows.map((row) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        Row,
+        {
+          ExpandComp,
+          defaultAlign,
+          gridColTemp,
+          onRowClick,
+          row
+        },
+        `row_${row.id}`
+      );
+    }) }),
+    showPagination ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes.Flex, { justify: "end", pt: "3", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Pagination,
+      {
+        count: pageCount,
+        onChange: onChangePagination,
+        page: pagination.pageIndex + 1,
+        siblingCount
+      }
+    ) }) : null
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node: