@dgshahr/ui-kit 1.9.5 → 1.9.8

package/dist/Table/index.mjs

@@ -1,15 +1,16 @@
 "use client";
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import { c as u } from "../clsx-OuTLNxxd.js";
-import j, { useState as H, useEffect as R, createContext as z, useContext as D, useRef as P } from "react";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { c } from "../clsx-OuTLNxxd.js";
+import j, { useState as R, useEffect as P, createContext as z, useContext as H, useRef as D } from "react";
 import { i as q } from "../isBrowser-Bkqg1t1y.js";
 import M from "../Badge/index.mjs";
-import $ from "../Form/Checkbox/index.mjs";
+import $ from "../Form/Select/index.mjs";
+import F from "../Form/Checkbox/index.mjs";
 import E from "../Tooltip/index.mjs";
-import { I as F } from "../IconArrowDown2-7ddwV5IE.js";
-import { I as U } from "../IconInfoCircleOutline-aO1F3qnG.js";
-import x from "../Divider/index.mjs";
-import W from "../Pagination/index.mjs";
+import { I as U } from "../IconArrowDown2-7ddwV5IE.js";
+import { I as W } from "../FieldBottomInfo-IvQmalZA.js";
+import v from "../Divider/index.mjs";
+import Y from "../Pagination/index.mjs";
 import '../assets/styles.css';/* empty css                 */
 const O = z({
   observer: null,
@@ -17,50 +18,83 @@ const O = z({
   data: [],
   rowKey: ""
 }), _ = "dgsuikit:after:!shadow-[rgba(0,0,0,0.06)]";
-function C(t) {
+function x(t) {
   t.classList.add(_);
 }
-function Y(t) {
+function Z(t) {
   t.classList.remove(_);
 }
-function Z(t) {
-  const { children: i, ...n } = t, { columns: l, rowSelection: s } = n, [a, c] = H(null);
-  return R(() => {
+function G(t) {
+  const { children: i, ...n } = t, { columns: o, rowSelection: s } = n, [l, a] = R(null);
+  return P(() => {
     if (!q()) return;
-    let r = l.some((g) => !!g.sticky);
-    return r || (r = !!s?.sticky), r && c(
+    let r = o.some((g) => !!g.sticky);
+    return r || (r = !!s?.sticky), r && a(
       new IntersectionObserver(
         (g) => {
-          let d = !1;
-          for (const k of g)
-            if (k.boundingClientRect.right > k.intersectionRect.right) {
-              document?.querySelectorAll("#sticky-cell-right").forEach(C), d = !0;
+          let u = !1;
+          for (const f of g)
+            if (f.boundingClientRect.right > f.intersectionRect.right) {
+              document?.querySelectorAll("#sticky-cell-right").forEach(x), u = !0;
               break;
-            } else if (k.boundingClientRect.left < k.intersectionRect.left) {
-              document?.querySelectorAll("#sticky-cell-left").forEach(C), d = !0;
+            } else if (f.boundingClientRect.left < f.intersectionRect.left) {
+              document?.querySelectorAll("#sticky-cell-left").forEach(x), u = !0;
               break;
             }
-          d || document?.querySelectorAll('[id^="sticky-cell-"]').forEach(Y);
+          u || document?.querySelectorAll('[id^="sticky-cell-"]').forEach(Z);
         },
         { threshold: 1, rootMargin: "0% 100% 0% 100%" }
       )
     ), () => {
-      a && a.disconnect();
+      l && l.disconnect();
     };
-  }, [l, s]), /* @__PURE__ */ e(O.Provider, { value: { observer: a, ...n }, children: i });
+  }, [o, s]), /* @__PURE__ */ e(O.Provider, { value: { observer: l, ...n }, children: i });
 }
-const y = () => D(O), G = (t) => {
-  const { title: i, extraElement: n, showTotal: l, total: s, className: a } = t;
-  return /* @__PURE__ */ o(
+const h = () => H(O), J = (t) => {
+  const { title: i, extraElement: n, showTotal: o, total: s, className: l, pageCountSelector: a } = t, r = a?.defaultValue ?? a?.options?.[0]?.value ?? 0, [g, u] = R(r);
+  function f(k) {
+    u(k), a?.onPageCountChange?.(k);
+  }
+  return /* @__PURE__ */ d(
     "div",
     {
-      className: u(
+      className: c(
         "dgsuikit:p-4 dgsuikit:flex dgsuikit:items-center dgsuikit:space-x-1 dgsuikit:border-b dgsuikit:border-solid dgsuikit:border-gray-200",
-        a
+        l
       ),
       children: [
         /* @__PURE__ */ e("div", { className: "dgsuikit:font-h4-bold dgsuikit:text-gray-700 dgsuikit:w-full", children: i }),
-        l && /* @__PURE__ */ o("div", { className: "dgsuikit:flex dgsuikit:items-center dgsuikit:shrink-0", children: [
+        a && /* @__PURE__ */ d("div", { className: "dgsuikit:flex  dgsuikit:ml-2 dgsuikit:items-center dgsuikit:gap-2 dgsuikit:shrink-0 dgsuikit:mr-2", children: [
+          /* @__PURE__ */ e("span", { className: "dgsuikit:font-p2-regular dgsuikit:text-gray-700 dgsuikit:whitespace-nowrap", children: "تعداد نمایش:" }),
+          /* @__PURE__ */ e(
+            $,
+            {
+              ...a.selectProps,
+              wrapperClassName: c(
+                "dgsuikit:w-20",
+                a.selectProps?.wrapperClassName
+              ),
+              popoverClassName: c(
+                "dgsuikit:!min-w-0",
+                a.selectProps?.popoverClassName
+              ),
+              inputProps: {
+                size: 1,
+                containerClassName: c(
+                  "dgsuikit:!p-2 dgsuikit:!gap-x-1",
+                  a.selectProps?.inputProps?.containerClassName
+                ),
+                ...a.selectProps?.inputProps
+              },
+              mode: "single",
+              options: a.options,
+              value: g,
+              searchable: !1,
+              onChange: f
+            }
+          )
+        ] }),
+        o && /* @__PURE__ */ d("div", { className: "dgsuikit:flex dgsuikit:items-center dgsuikit:shrink-0", children: [
           /* @__PURE__ */ e("span", { className: "dgsuikit:font-p2-regular dgsuikit:text-gray-700 dgsuikit:ml-1", children: "تعداد نتایج:" }),
           /* @__PURE__ */ e(
             M,
@@ -78,7 +112,7 @@ const y = () => D(O), G = (t) => {
     }
   );
 };
-function v(t) {
+function C(t) {
   switch (t) {
     case "center":
       return "dgsuikit:justify-center";
@@ -100,17 +134,17 @@ function K(t, i) {
   return /* @__PURE__ */ e(
     "div",
     {
-      className: u(
+      className: c(
         "dgsuikit:w-full dgsuikit:flex dgsuikit:items-center",
-        v(t ?? "center")
+        C(t ?? "center")
       ),
-      children: /* @__PURE__ */ e($, { ...i })
+      children: /* @__PURE__ */ e(F, { ...i })
     }
   );
 }
-function J(t, i) {
+function Q(t, i) {
   if (t)
-    return u(
+    return c(
       "dgsuikit:sticky dgsuikit:z-10",
       'dgsuikit:after:content[""] dgsuikit:after:absolute dgsuikit:after:top-0 dgsuikit:after:h-full dgsuikit:after:w-[30px] dgsuikit:after:transition-shadow',
       // sticky shadow class
@@ -121,32 +155,32 @@ function J(t, i) {
       }
     );
 }
-const p = (t) => {
-  const { children: i, className: n, type: l, sticky: s, addBorderToSticky: a, stuckToTop: c } = t, r = P(null), g = l, { observer: d } = y();
-  return R(() => {
-    if (!(!r.current || !d))
-      return s && d.observe(r.current), () => {
-        !r.current || !d || s && d.unobserve(r.current);
+const y = (t) => {
+  const { children: i, className: n, type: o, sticky: s, addBorderToSticky: l, stuckToTop: a } = t, r = D(null), g = o, { observer: u } = h();
+  return P(() => {
+    if (!(!r.current || !u))
+      return s && u.observe(r.current), () => {
+        !r.current || !u || s && u.unobserve(r.current);
       };
-  }, [r, d]), /* @__PURE__ */ e(
+  }, [r, u]), /* @__PURE__ */ e(
     g,
     {
       ref: r,
-      className: u(n, J(s, a), {
-        'dgsuikit:border-b-0 dgsuikit:before:content[""] dgsuikit:before:absolute dgsuikit:before:bottom-0 dgsuikit:before:left-0 dgsuikit:before:w-full dgsuikit:before:border-b dgsuikit:before:border-solid dgsuikit:before:border-gray-200': c,
-        "dgsuikit:top-0 dgsuikit:z-20": c && s,
-        "dgsuikit:sticky dgsuikit:top-0 dgsuikit:z-10": c && !s
+      className: c(n, Q(s, l), {
+        'dgsuikit:border-b-0 dgsuikit:before:content[""] dgsuikit:before:absolute dgsuikit:before:bottom-0 dgsuikit:before:left-0 dgsuikit:before:w-full dgsuikit:before:border-b dgsuikit:before:border-solid dgsuikit:before:border-gray-200': a,
+        "dgsuikit:top-0 dgsuikit:z-20": a && s,
+        "dgsuikit:sticky dgsuikit:top-0 dgsuikit:z-10": a && !s
       }),
       id: s && `sticky-cell-${s}`,
       children: i
     }
   );
-}, Q = () => {
-  const { columns: t, emptyContent: i } = y();
+}, V = () => {
+  const { columns: t, emptyContent: i } = h();
   return /* @__PURE__ */ e("tbody", { children: /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: t.length, children: i }) }) });
 }, X = (t) => {
   const { className: i, ...n } = t;
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ d(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -154,13 +188,13 @@ const p = (t) => {
       height: "200px",
       viewBox: "0 0 100 100",
       preserveAspectRatio: "xMidYMid",
-      className: u(
+      className: c(
         "dgsuikit:m-auto dgsuikit:bg-none dgsuikit:block dgsuikit:text-primary-500",
         i
       ),
       ...n,
       children: [
-        /* @__PURE__ */ e("g", { transform: "translate(79,50)", children: /* @__PURE__ */ e("g", { transform: "rotate(0)", children: /* @__PURE__ */ o(
+        /* @__PURE__ */ e("g", { transform: "translate(79,50)", children: /* @__PURE__ */ e("g", { transform: "rotate(0)", children: /* @__PURE__ */ d(
           "circle",
           {
             cx: "0",
@@ -195,7 +229,7 @@ const p = (t) => {
             ]
           }
         ) }) }),
-        /* @__PURE__ */ e("g", { transform: "translate(70.50609665440987,70.50609665440987)", children: /* @__PURE__ */ e("g", { transform: "rotate(45)", children: /* @__PURE__ */ o(
+        /* @__PURE__ */ e("g", { transform: "translate(70.50609665440987,70.50609665440987)", children: /* @__PURE__ */ e("g", { transform: "rotate(45)", children: /* @__PURE__ */ d(
           "circle",
           {
             cx: "0",
@@ -230,7 +264,7 @@ const p = (t) => {
             ]
           }
         ) }) }),
-        /* @__PURE__ */ e("g", { transform: "translate(50,79)", children: /* @__PURE__ */ e("g", { transform: "rotate(90)", children: /* @__PURE__ */ o(
+        /* @__PURE__ */ e("g", { transform: "translate(50,79)", children: /* @__PURE__ */ e("g", { transform: "rotate(90)", children: /* @__PURE__ */ d(
           "circle",
           {
             cx: "0",
@@ -265,7 +299,7 @@ const p = (t) => {
             ]
           }
         ) }) }),
-        /* @__PURE__ */ e("g", { transform: "translate(29.493903345590123,70.50609665440987)", children: /* @__PURE__ */ e("g", { transform: "rotate(135)", children: /* @__PURE__ */ o(
+        /* @__PURE__ */ e("g", { transform: "translate(29.493903345590123,70.50609665440987)", children: /* @__PURE__ */ e("g", { transform: "rotate(135)", children: /* @__PURE__ */ d(
           "circle",
           {
             cx: "0",
@@ -300,7 +334,7 @@ const p = (t) => {
             ]
           }
         ) }) }),
-        /* @__PURE__ */ e("g", { transform: "translate(21,50)", children: /* @__PURE__ */ e("g", { transform: "rotate(180)", children: /* @__PURE__ */ o(
+        /* @__PURE__ */ e("g", { transform: "translate(21,50)", children: /* @__PURE__ */ e("g", { transform: "rotate(180)", children: /* @__PURE__ */ d(
           "circle",
           {
             cx: "0",
@@ -335,7 +369,7 @@ const p = (t) => {
             ]
           }
         ) }) }),
-        /* @__PURE__ */ e("g", { transform: "translate(29.493903345590116,29.493903345590123)", children: /* @__PURE__ */ e("g", { transform: "rotate(225)", children: /* @__PURE__ */ o(
+        /* @__PURE__ */ e("g", { transform: "translate(29.493903345590116,29.493903345590123)", children: /* @__PURE__ */ e("g", { transform: "rotate(225)", children: /* @__PURE__ */ d(
           "circle",
           {
             cx: "0",
@@ -370,7 +404,7 @@ const p = (t) => {
             ]
           }
         ) }) }),
-        /* @__PURE__ */ e("g", { transform: "translate(49.99999999999999,21)", children: /* @__PURE__ */ e("g", { transform: "rotate(270)", children: /* @__PURE__ */ o(
+        /* @__PURE__ */ e("g", { transform: "translate(49.99999999999999,21)", children: /* @__PURE__ */ e("g", { transform: "rotate(270)", children: /* @__PURE__ */ d(
           "circle",
           {
             cx: "0",
@@ -405,7 +439,7 @@ const p = (t) => {
             ]
           }
         ) }) }),
-        /* @__PURE__ */ e("g", { transform: "translate(70.50609665440987,29.493903345590116)", children: /* @__PURE__ */ e("g", { transform: "rotate(315)", children: /* @__PURE__ */ o(
+        /* @__PURE__ */ e("g", { transform: "translate(70.50609665440987,29.493903345590116)", children: /* @__PURE__ */ e("g", { transform: "rotate(315)", children: /* @__PURE__ */ d(
           "circle",
           {
             cx: "0",
@@ -443,8 +477,8 @@ const p = (t) => {
       ]
     }
   );
-}, V = () => {
-  const { columns: t, loading: i } = y();
+}, ee = () => {
+  const { columns: t, loading: i } = h();
   return /* @__PURE__ */ e("tbody", { children: /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
     "td",
     {
@@ -460,91 +494,91 @@ const p = (t) => {
     }
   ) }) });
 }, N = "dgsuikit:p-4 dgsuikit:pl-0 dgsuikit:bg-white dgsuikit:border-b dgsuikit:border-solid dgsuikit:border-gray-200";
-function ee(t, i) {
-  return t ? Array.isArray(t) ? t.reduce((n, l) => n?.[l] ?? null, i) : i[t] : null;
+function te(t, i) {
+  return t ? Array.isArray(t) ? t.reduce((n, o) => n?.[o] ?? null, i) : i[t] : null;
 }
-function te(t, i, n) {
+function ie(t, i, n) {
   if (typeof t.render == "function") return t.render(i, n);
-  const l = ee(t.dataIndex, i);
+  const o = te(t.dataIndex, i);
   if (t.ellipsis) {
-    const s = /* @__PURE__ */ e("div", { className: "dgsuikit:!truncate", children: l });
+    const s = /* @__PURE__ */ e("div", { className: "dgsuikit:!truncate", children: o });
     return typeof t.ellipsis != "boolean" && t.ellipsis.hideTooltip ? s : /* @__PURE__ */ e(
       E,
       {
         wrapperClassName: "dgsuikit:w-full",
-        content: l,
+        content: o,
         attachToBody: !0,
         children: s
       }
     );
   }
-  return l;
+  return o;
 }
-const ie = (t) => {
+const re = (t) => {
   const { havePagination: i } = t, {
     columns: n,
-    data: l,
+    data: o,
     rowKey: s,
-    rowSelection: a,
-    stickyTableHeader: c,
+    rowSelection: l,
+    stickyTableHeader: a,
     loading: r,
     emptyContent: g,
-    getRowClassName: d
-  } = y();
-  if (r) return /* @__PURE__ */ e(V, {});
-  if (l.length < 1 && g) return /* @__PURE__ */ e(Q, {});
-  const k = typeof d == "function";
-  return /* @__PURE__ */ e("tbody", { children: l.map((m, h) => /* @__PURE__ */ o("tr", { children: [
-    I(a) && /* @__PURE__ */ e(
-      p,
+    getRowClassName: u
+  } = h();
+  if (r) return /* @__PURE__ */ e(ee, {});
+  if (o.length < 1 && g) return /* @__PURE__ */ e(V, {});
+  const f = typeof u == "function";
+  return /* @__PURE__ */ e("tbody", { children: o.map((k, p) => /* @__PURE__ */ d("tr", { children: [
+    I(l) && /* @__PURE__ */ e(
+      y,
       {
         type: "td",
-        className: u(
+        className: c(
           N,
-          a?.className,
+          l?.className,
           {
-            "dgsuikit:border-b-0 dgsuikit:rounded-br-2xl": !i && h === l.length - 1
+            "dgsuikit:border-b-0 dgsuikit:rounded-br-2xl": !i && p === o.length - 1
           },
-          a?.className,
-          k ? d(m) : ""
+          l?.className,
+          f ? u(k) : ""
         ),
-        sticky: a?.sticky,
-        addBorderToSticky: c ? h !== 0 : !0,
-        children: K(a?.align, {
-          onChange: (f) => a?.onSelectRow(f, m[s]),
-          checked: !!a?.selectedRowKeys.find((f) => f === m[s])
+        sticky: l?.sticky,
+        addBorderToSticky: a ? p !== 0 : !0,
+        children: K(l?.align, {
+          onChange: (m) => l?.onSelectRow(m, k[s]),
+          checked: !!l?.selectedRowKeys.find((m) => m === k[s])
         })
       }
     ),
-    n.map((f) => /* @__PURE__ */ e(
-      p,
+    n.map((m) => /* @__PURE__ */ e(
+      y,
       {
         type: "td",
-        className: u(
+        className: c(
           N,
           {
-            "dgsuikit:border-b-0 dgsuikit:first:rounded-br-2xl dgsuikit:last:rounded-bl-2xl": !i && h === l.length - 1
+            "dgsuikit:border-b-0 dgsuikit:first:rounded-br-2xl dgsuikit:last:rounded-bl-2xl": !i && p === o.length - 1
           },
-          f.className,
-          k ? d(m) : ""
+          m.className,
+          f ? u(k) : ""
         ),
-        sticky: f.sticky,
-        addBorderToSticky: c ? h !== 0 : !0,
+        sticky: m.sticky,
+        addBorderToSticky: a ? p !== 0 : !0,
         children: /* @__PURE__ */ e(
           "div",
           {
-            className: u(
+            className: c(
               "dgsuikit:flex dgsuikit:items-center dgsuikit:ml-2",
-              v(f.align)
+              C(m.align)
             ),
-            children: te(f, m, h)
+            children: ie(m, k, p)
           }
         )
       },
-      `${m[s]}-${L(f.key, f.dataIndex)}`
+      `${k[s]}-${L(m.key, m.dataIndex)}`
     ))
-  ] }, m[s])) });
-}, re = (t) => /* @__PURE__ */ e(
+  ] }, k[s])) });
+}, se = (t) => /* @__PURE__ */ e(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -562,7 +596,7 @@ const ie = (t) => {
     )
   }
 );
-function se(t, i) {
+function ne(t, i) {
   if (t.length !== i.length) return !1;
   t.sort(), i.sort();
   for (let n = 0; n < t.length; n++) if (t[n] !== i[n]) return !1;
@@ -571,7 +605,7 @@ function se(t, i) {
 const b = 16, w = "dgsuikit:p-4 dgsuikit:pl-0 dgsuikit:text-gray-500 dgsuikit:bg-gray-50 dgsuikit:border-b dgsuikit:border-solid dgsuikit:border-gray-200", T = "dgsuikit:!h-8 dgsuikit:shrink-0 dgsuikit:mr-2";
 function S(t, i) {
   return /* @__PURE__ */ e("button", { onClick: () => i.onSort(t), children: /* @__PURE__ */ e(
-    t === "ascend" ? re : F,
+    t === "ascend" ? se : U,
     {
       width: b,
       height: b,
@@ -580,10 +614,10 @@ function S(t, i) {
   ) });
 }
 function A(t, i) {
-  return /* @__PURE__ */ o("div", { className: "dgsuikit:font-p1-medium dgsuikit:flex dgsuikit:items-center dgsuikit:space-x-1", children: [
+  return /* @__PURE__ */ d("div", { className: "dgsuikit:font-p1-medium dgsuikit:flex dgsuikit:items-center dgsuikit:space-x-1", children: [
     /* @__PURE__ */ e("span", { children: t }),
     i && (i.anchorIcon ?? /* @__PURE__ */ e(
-      U,
+      W,
       {
         width: b,
         height: b
@@ -594,31 +628,31 @@ function A(t, i) {
 function B(t, i) {
   return t.map((n) => n[i]);
 }
-const ne = (t) => {
-  const { haveHeader: i } = t, { columns: n, rowKey: l, rowSelection: s, data: a, stickyTableHeader: c } = y();
-  return /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ o("tr", { children: [
+const ae = (t) => {
+  const { haveHeader: i } = t, { columns: n, rowKey: o, rowSelection: s, data: l, stickyTableHeader: a } = h();
+  return /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { children: [
     I(s) && /* @__PURE__ */ e(
-      p,
+      y,
       {
         type: "th",
-        className: u(
+        className: c(
           w,
           { "dgsuikit:rounded-tr-2xl": !i },
           s?.className
         ),
         sticky: s?.sticky,
-        stuckToTop: c,
-        children: /* @__PURE__ */ o("div", { className: "dgsuikit:flex dgsuikit:items-center dgsuikit:justify-between", children: [
+        stuckToTop: a,
+        children: /* @__PURE__ */ d("div", { className: "dgsuikit:flex dgsuikit:items-center dgsuikit:justify-between", children: [
           K(s?.align, {
             checked: s.selectedRowKeys.length > 0,
-            isIndeterminate: !se(
-              B(a, l),
+            isIndeterminate: !ne(
+              B(l, o),
               s.selectedRowKeys
             ),
-            onChange: (r) => s?.onSelectRow(r, r.target.checked ? B(a, l) : [])
+            onChange: (r) => s?.onSelectRow(r, r.target.checked ? B(l, o) : [])
           }),
           /* @__PURE__ */ e(
-            x,
+            v,
             {
               type: "vertical",
               className: T
@@ -628,25 +662,25 @@ const ne = (t) => {
       }
     ),
     n.map((r, g) => /* @__PURE__ */ e(
-      p,
+      y,
       {
         type: "th",
         sticky: r.sticky,
-        className: u(
+        className: c(
           w,
           {
             "dgsuikit:first:rounded-tr-2xl dgsuikit:last:rounded-tl-2xl": !i
           },
           r.className
         ),
-        stuckToTop: c,
-        children: /* @__PURE__ */ o("div", { className: "dgsuikit:flex dgsuikit:justify-between dgsuikit:items-center", children: [
-          /* @__PURE__ */ o(
+        stuckToTop: a,
+        children: /* @__PURE__ */ d("div", { className: "dgsuikit:flex dgsuikit:justify-between dgsuikit:items-center", children: [
+          /* @__PURE__ */ d(
             "div",
             {
-              className: u(
+              className: c(
                 "dgsuikit:flex dgsuikit:items-center dgsuikit:space-x-2 dgsuikit:w-full",
-                v(r.align)
+                C(r.align)
               ),
               children: [
                 r.tooltip?.content ? /* @__PURE__ */ e(
@@ -657,7 +691,7 @@ const ne = (t) => {
                     children: A(r.title, r.tooltip)
                   }
                 ) : A(r.title),
-                typeof r.sort?.onSort == "function" && /* @__PURE__ */ o("div", { className: "dgsuikit:flex dgsuikit:flex-col", children: [
+                typeof r.sort?.onSort == "function" && /* @__PURE__ */ d("div", { className: "dgsuikit:flex dgsuikit:flex-col", children: [
                   S("ascend", r.sort),
                   S("descend", r.sort)
                 ] })
@@ -665,7 +699,7 @@ const ne = (t) => {
             }
           ),
           g !== n.length - 1 && /* @__PURE__ */ e(
-            x,
+            v,
             {
               type: "vertical",
               className: T
@@ -677,53 +711,53 @@ const ne = (t) => {
     ))
   ] }) });
 };
-function pe(t) {
+function Ce(t) {
   const {
     header: i,
     wrapperClassName: n,
-    className: l,
+    className: o,
     data: s,
-    pagination: a,
-    layout: c = "auto",
+    pagination: l,
+    layout: a = "auto",
     containerClassName: r
-  } = t, g = (i && Object.values(i).length > 0) ?? !1, d = !!(a?.totalCount && a?.pageSize), k = c !== "fixed" ? "div" : j.Fragment;
-  return /* @__PURE__ */ o(
+  } = t, g = (i && Object.values(i).length > 0) ?? !1, u = !!(l?.totalCount && l?.pageSize), f = a !== "fixed" ? "div" : j.Fragment;
+  return /* @__PURE__ */ d(
     "div",
     {
-      className: u(
+      className: c(
         "dgsuikit:relative dgsuikit:bg-white dgsuikit:border dgsuikit:border-gray-200 dgsuikit:border-solid dgsuikit:rounded-2xl",
         n
       ),
       children: [
         g && /* @__PURE__ */ e(
-          G,
+          J,
           {
             ...i,
-            total: a?.totalCount ?? s.length
+            total: l?.totalCount ?? s.length
           }
         ),
         /* @__PURE__ */ e(
-          k,
+          f,
           {
-            ...c !== "fixed" ? { className: u("dgsuikit:overflow-x-auto dgsuikit:h-full", r) } : {},
-            children: /* @__PURE__ */ e(Z, { ...t, children: /* @__PURE__ */ o(
+            ...a !== "fixed" ? { className: c("dgsuikit:overflow-x-auto dgsuikit:h-full", r) } : {},
+            children: /* @__PURE__ */ e(G, { ...t, children: /* @__PURE__ */ d(
               "table",
               {
-                className: l,
-                style: { tableLayout: c },
+                className: o,
+                style: { tableLayout: a },
                 children: [
-                  /* @__PURE__ */ e(ne, { haveHeader: g }),
-                  /* @__PURE__ */ e(ie, { havePagination: d })
+                  /* @__PURE__ */ e(ae, { haveHeader: g }),
+                  /* @__PURE__ */ e(re, { havePagination: u })
                 ]
               }
             ) })
           }
         ),
-        d && /* @__PURE__ */ e(
-          W,
+        u && /* @__PURE__ */ e(
+          Y,
           {
-            className: u("dgsuikit:py-4 dgsuikit:!px-0", a?.className),
-            ...a
+            className: c("dgsuikit:py-4 dgsuikit:!px-0", l?.className),
+            ...l
           }
         )
       ]
@@ -731,5 +765,5 @@ function pe(t) {
   );
 }
 export {
-  pe as default
+  Ce as default
 };

package/dist/Table/types.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { DeepNamePath } from '../../utils/types/deepNamePath';
+import { SelectProps } from '../Form/Select/types';
 import { PaginationProps } from '../Pagination';
 import { TooltipProps } from '../Tooltip';
 type NonTypeSafeDataIndex = string | string[];
@@ -33,11 +34,18 @@ interface ColumnsTypeWithDataIndex<T> {
     dataIndex: DataIndexPath<T>;
 }
 export type ColumnsType<T extends UnknownRecord = UnknownRecord> = ColumnsTypeBase<T> & (ColumnsTypeWithKey<T> | ColumnsTypeWithDataIndex<T>);
+export interface PageCountSelectorProps {
+    options: SelectProps<number>['options'];
+    defaultValue?: number;
+    onPageCountChange?: (value: number) => void;
+    selectProps?: Omit<SelectProps<number>, 'options' | 'value' | 'onChange' | 'mode' | 'customInput' | 'dropdownType' | 'drawerProps' | 'optionsTitle' | 'separateSelectedOptions'>;
+}
 export interface TableHeaderProps {
     title?: string;
     showTotal?: boolean;
     extraElement?: ReactNode;
     className?: string;
+    pageCountSelector?: PageCountSelectorProps;
 }
 export interface RowSelectionProps<T> extends Pick<ColumnsType, 'align' | 'sticky' | 'className'> {
     onSelectRow: (e: React.ChangeEvent<HTMLInputElement>, key: string | string[], record?: T) => void;