add table

dist/chunks/Pagination-LRiUo8_9.js

@@ -0,0 +1,149 @@
+import { jsxs as w, jsx as t } from "react/jsx-runtime";
+import { useState as S, useRef as D, useEffect as C } from "react";
+import { HStack as I, Text as p, IconButton as N, Button as k, Input as A } from "@chakra-ui/react";
+import { IoChevronForwardOutline as E, IoChevronBackOutline as F } from "react-icons/io5";
+const O = (i) => new Intl.NumberFormat("fa-IR").format(Number(i)), e = (i) => String(i).replace(/\d/g, (o) => "۰۱۲۳۴۵۶۷۸۹"[Number(o)]), B = (i) => String(i).replace(/[۰-۹]/g, (m) => String("۰۱۲۳۴۵۶۷۸۹".indexOf(m))), R = ({
+  currentPage: i,
+  totalPages: o,
+  totalCount: m,
+  onPageChange: f
+}) => {
+  const [u, l] = S(e(i)), [h, d] = S(!1), [a, c] = S(null), x = D(null), v = Array.from(
+    /* @__PURE__ */ new Set([1, i, i + 1, o])
+  ).filter((n) => n >= 1 && n <= o).sort((n, r) => n - r);
+  C(() => {
+    if (a !== null) {
+      i === a && (c(null), d(!1), l(e(i)));
+      return;
+    }
+    h || l(e(i));
+  }, [i, h, a]), C(() => {
+    if (!h || !u || a !== null) return;
+    const n = parseInt(B(u), 10);
+    if (isNaN(n)) return;
+    const r = setTimeout(() => {
+      var b;
+      const s = Math.min(Math.max(n, 1), o);
+      s !== i ? (c(s), l(e(s)), f(s)) : (d(!1), l(e(i))), (b = x.current) == null || b.blur();
+    }, 1e3);
+    return () => clearTimeout(r);
+  }, [
+    u,
+    h,
+    a,
+    o,
+    i,
+    f
+  ]);
+  const y = () => {
+    var s, b;
+    const n = parseInt(B(u), 10);
+    if (isNaN(n)) {
+      l(e(i)), d(!1), c(null), (s = x.current) == null || s.blur();
+      return;
+    }
+    const r = Math.min(Math.max(n, 1), o);
+    r !== i ? (c(r), l(e(r)), f(r)) : (l(e(i)), d(!1), c(null)), (b = x.current) == null || b.blur();
+  };
+  return o === 0 || !m ? null : /* @__PURE__ */ w(
+    I,
+    {
+      justifyContent: "space-around",
+      backgroundColor: "white",
+      py: "10px",
+      px: "16px",
+      rounded: "lg",
+      border: "1px",
+      borderColor: "blue.200",
+      w: "100%",
+      children: [
+        /* @__PURE__ */ w(I, { spacing: 2, whiteSpace: "nowrap", children: [
+          /* @__PURE__ */ t(p, { fontWeight: "bold", children: "صفحه" }),
+          /* @__PURE__ */ t(p, { children: e(i) }),
+          /* @__PURE__ */ t(p, { fontWeight: "bold", children: "از" }),
+          /* @__PURE__ */ t(p, { children: e(o) })
+        ] }),
+        /* @__PURE__ */ w(I, { spacing: 2, alignItems: "center", justifyContent: "center", children: [
+          /* @__PURE__ */ t(
+            N,
+            {
+              size: "md",
+              bg: "#e6e6f1",
+              color: "#4B49AC",
+              _hover: { bg: "#cbcbe8" },
+              onClick: () => f(i - 1),
+              isDisabled: i === 1,
+              icon: /* @__PURE__ */ t(E, {}),
+              "aria-label": "صفحه قبلی"
+            }
+          ),
+          v.map((n) => /* @__PURE__ */ t(
+            k,
+            {
+              size: "md",
+              bg: i === n ? "#4B49AC" : "#e6e6f1",
+              color: i === n ? "#e6e6f1" : "#4B49AC",
+              _hover: { bg: i === n ? "#4B49AC" : "#cbcbe8" },
+              onClick: () => f(n),
+              variant: "soft",
+              children: e(n)
+            },
+            n
+          )),
+          /* @__PURE__ */ t(
+            N,
+            {
+              size: "md",
+              bg: "#e6e6f1",
+              color: "#4B49AC",
+              _hover: { bg: "#cbcbe8" },
+              onClick: () => f(i + 1),
+              isDisabled: i === o,
+              icon: /* @__PURE__ */ t(F, {}),
+              "aria-label": "صفحه بعدی"
+            }
+          ),
+          /* @__PURE__ */ t(
+            A,
+            {
+              ref: x,
+              type: "text",
+              inputMode: "numeric",
+              placeholder: "صفحه",
+              w: "100px",
+              value: u,
+              onFocus: () => {
+                d(!0), c(null), l("");
+              },
+              onChange: (n) => {
+                const r = n.target.value, s = B(r).replace(/\D/g, "");
+                l(e(s));
+              },
+              onBlur: () => {
+                u || (l(e(i)), d(!1), c(null));
+              },
+              onKeyDown: (n) => {
+                n.key === "Enter" && y();
+              },
+              textAlign: "center",
+              color: "#1D2939",
+              px: 1,
+              minW: 0,
+              dir: "ltr"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ w(I, { spacing: 2, whiteSpace: "nowrap", children: [
+          /* @__PURE__ */ t(p, { fontWeight: "bold", children: "تعداد کل:" }),
+          /* @__PURE__ */ t(p, { children: e(m) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  R as P,
+  B as a,
+  O as b,
+  e as t
+};

dist/table.js

@@ -0,0 +1,381 @@
+import { jsx as r, jsxs as X, Fragment as ne } from "react/jsx-runtime";
+import { VStack as oe, Box as _, Tbody as re, Tr as H, Td as F, Text as R, Thead as le, Th as ce, Table as se, Checkbox as W, HStack as Y, Spacer as ie } from "@chakra-ui/react";
+import { P as ae, t as q } from "./chunks/Pagination-LRiUo8_9.js";
+import { useReactTable as ue, getCoreRowModel as de, flexRender as J } from "@tanstack/react-table";
+import { createContext as me, useMemo as P, useCallback as p, useState as fe, useRef as ge, useEffect as he, useContext as be } from "react";
+const K = me(null);
+function C() {
+  const e = be(K);
+  if (!e)
+    throw new Error("DataTable components must be used inside <DataTable>");
+  return e;
+}
+function xe({
+  children: e,
+  data: t = [],
+  columns: o = [],
+  page: s = 1,
+  size: c = 10,
+  pagination: l,
+  onPageChange: u,
+  getRowId: g = (d) => String(d == null ? void 0 : d.id),
+  enableSelection: b = !1,
+  showIndex: S = !0,
+  defaultSelectedIds: L = [],
+  onSelectionChange: k,
+  ...O
+}) {
+  const d = Number(s) || 1, h = Number(c) || 10, y = (l == null ? void 0 : l.total) ?? (l == null ? void 0 : l.totalCount) ?? 0, v = (l == null ? void 0 : l.total_pages) ?? (l == null ? void 0 : l.totalPages) ?? (y > 0 ? Math.ceil(y / h) : 0), z = P(() => ({
+    pageIndex: Math.max(d - 1, 0),
+    pageSize: h
+  }), [d, h]), Q = p(
+    (n) => {
+      const a = (typeof n == "function" ? n(z) : n).pageIndex + 1;
+      a !== d && (u == null || u(a));
+    },
+    [z, d, u]
+  ), [A, U] = fe(L), m = p(
+    (n) => {
+      U((i) => {
+        const a = typeof n == "function" ? n(i) : n;
+        return k == null || k(a), a;
+      });
+    },
+    [k]
+  ), M = ge({
+    page: d,
+    size: h
+  });
+  he(() => {
+    if (!b)
+      return;
+    const n = M.current, i = n.page !== d || n.size !== h;
+    M.current = {
+      page: d,
+      size: h
+    }, i && m([]);
+  }, [b, d, h, m]);
+  const f = P(() => t.map((n) => g(n)).filter((n) => n != null && n !== ""), [t, g]), T = P(() => A.filter((n) => f.includes(n)), [f, A]), $ = f.length > 0 && T.length === f.length, N = T.length > 0 && T.length < f.length, V = p(() => {
+    m([]);
+  }, [m]), B = p(
+    (n) => {
+      m((i) => f.includes(n) ? i.includes(n) ? i.filter((a) => a !== n) : [...i, n] : i);
+    },
+    [f, m]
+  ), Z = B, I = p(() => {
+    m(f);
+  }, [f, m]), w = p(() => {
+    m([]);
+  }, [m]), j = p(
+    (n) => {
+      if (n) {
+        I();
+        return;
+      }
+      w();
+    },
+    [I, w]
+  ), E = P(() => {
+    const n = [];
+    return b && n.push({
+      id: "__selection",
+      header: ({ table: i }) => {
+        const a = i.options.meta;
+        return /* @__PURE__ */ r(
+          W,
+          {
+            isChecked: a.isAllSelected,
+            isIndeterminate: a.isIndeterminate,
+            onChange: (x) => a.toggleSelectAll(x.target.checked),
+            colorScheme: "purple",
+            size: "md"
+          }
+        );
+      },
+      cell: ({ row: i, table: a }) => {
+        const x = a.options.meta, D = x.getRowId(i.original);
+        return /* @__PURE__ */ r(
+          W,
+          {
+            isChecked: x.selectedIds.includes(D),
+            onChange: () => x.onSelectionChangedId(D),
+            colorScheme: "purple",
+            size: "md"
+          }
+        );
+      },
+      meta: { isCentered: !0 }
+    }), S && n.push({
+      id: "__index",
+      header: "ردیف",
+      cell: ({ row: i, table: a }) => {
+        const { pageIndex: x, pageSize: D } = a.getState().pagination, te = x * D + i.index + 1;
+        return /* @__PURE__ */ r(R, { fontWeight: "bold", sx: { fontVariantNumeric: "normal" }, children: q(te) });
+      },
+      meta: { isCentered: !0 }
+    }), [...n, ...o];
+  }, [o, b, S]), ee = {
+    table: ue({
+      data: t,
+      columns: E,
+      getCoreRowModel: de(),
+      getRowId: g,
+      manualPagination: !0,
+      pageCount: v,
+      rowCount: y,
+      state: {
+        pagination: z
+      },
+      onPaginationChange: Q,
+      meta: {
+        selectedIds: A,
+        onSelectionChangedId: B,
+        getRowId: g,
+        allPageIds: f,
+        pageSelectedIds: T,
+        isAllSelected: $,
+        isIndeterminate: N,
+        selectAll: I,
+        unselectAll: w,
+        toggleSelectAll: j,
+        clearSelection: V,
+        totalCount: y,
+        totalPages: v
+      }
+    }),
+    data: t,
+    columns: E,
+    page: d,
+    size: h,
+    pagination: l,
+    onPageChange: u,
+    paginationState: z,
+    totalCount: y,
+    totalPages: v,
+    getRowId: g,
+    enableSelection: b,
+    selectedIds: A,
+    setSelectedIds: m,
+    clearSelection: V,
+    allPageIds: f,
+    pageSelectedIds: T,
+    isAllSelected: $,
+    isIndeterminate: N,
+    selectAll: I,
+    unselectAll: w,
+    toggleSelectAll: j,
+    onSelectionChangedId: B,
+    toggleRowSelection: Z
+  };
+  return /* @__PURE__ */ r(K.Provider, { value: ee, children: /* @__PURE__ */ r(oe, { spacing: 4, w: "full", ...O, children: e }) });
+}
+function pe({ children: e, ...t }) {
+  return /* @__PURE__ */ r(Y, { w: "full", px: 2, spacing: 4, ...t, children: e });
+}
+function Ce({ children: e, ...t }) {
+  return /* @__PURE__ */ r(R, { fontSize: "lg", textAlign: "start", fontWeight: "bold", ...t, children: e });
+}
+function Se(e) {
+  return /* @__PURE__ */ r(ie, { ...e });
+}
+function ye({ children: e, ...t }) {
+  const o = C();
+  return /* @__PURE__ */ r(Y, { spacing: 4, ...t, children: typeof e == "function" ? e(o) : e });
+}
+function Te({ children: e }) {
+  const t = C();
+  return t.selectedIds.length === 0 ? null : typeof e == "function" ? e(t) : e;
+}
+function ke({ children: e = "انتخاب همه", ...t }) {
+  const {
+    data: o,
+    enableSelection: s,
+    isAllSelected: c,
+    isIndeterminate: l,
+    toggleSelectAll: u
+  } = C();
+  return !s || o.length === 0 ? null : /* @__PURE__ */ r(
+    W,
+    {
+      isChecked: c,
+      isIndeterminate: l,
+      onChange: (g) => u(g.target.checked),
+      colorScheme: "purple",
+      size: "lg",
+      ...t,
+      children: e
+    }
+  );
+}
+function ze({ children: e, ...t }) {
+  const { selectedIds: o } = C();
+  return o.length === 0 ? null : typeof e == "function" ? e({ count: o.length, selectedIds: o }) : /* @__PURE__ */ X(R, { fontSize: "sm", color: "gray.600", ...t, children: [
+    q(o.length),
+    " مورد انتخاب شده"
+  ] });
+}
+function Ae({ children: e, ...t }) {
+  return /* @__PURE__ */ r(
+    _,
+    {
+      display: "flex",
+      flexDirection: "column",
+      w: "full",
+      h: "100%",
+      minH: 0,
+      gap: 4,
+      ...t,
+      children: e
+    }
+  );
+}
+function Ie({
+  children: e,
+  minW: t = "1200px",
+  heightOffset: o = 355,
+  containerProps: s,
+  tableProps: c
+}) {
+  return /* @__PURE__ */ r(
+    _,
+    {
+      flex: "1",
+      minH: `calc(100vh - ${o}px)`,
+      maxH: `calc(100vh - ${o}px)`,
+      overflowX: "auto",
+      overflowY: "auto",
+      bg: "white",
+      borderRadius: "lg",
+      borderWidth: "1px",
+      borderColor: "gray.200",
+      sx: {
+        "::-webkit-scrollbar": {
+          width: "6px",
+          height: "6px"
+        },
+        "::-webkit-scrollbar-thumb": {
+          background: "#CBD5E0",
+          borderRadius: "8px"
+        },
+        "::-webkit-scrollbar-track": {
+          background: "transparent"
+        }
+      },
+      ...s,
+      children: /* @__PURE__ */ r(
+        se,
+        {
+          variant: "simple",
+          minW: t,
+          sx: {
+            "th, td": {
+              borderColor: "gray.200",
+              whiteSpace: "nowrap",
+              px: 2
+            },
+            "tbody tr:last-child td": {
+              borderBottom: "none"
+            }
+          },
+          ...c,
+          children: e ?? /* @__PURE__ */ X(ne, { children: [
+            /* @__PURE__ */ r(G.Head, {}),
+            /* @__PURE__ */ r(G.Body, {})
+          ] })
+        }
+      )
+    }
+  );
+}
+function we() {
+  const { table: e } = C();
+  return /* @__PURE__ */ r(le, { position: "sticky", top: 0, bg: "white", zIndex: 1, children: e.getHeaderGroups().map((t) => /* @__PURE__ */ r(H, { borderBottomWidth: "1px", borderColor: "gray.200", children: t.headers.map((o) => {
+    var s;
+    return /* @__PURE__ */ r(
+      ce,
+      {
+        py: 4,
+        borderRightWidth: "1px",
+        borderRightColor: "gray.200",
+        fontSize: "md",
+        color: "gray.600",
+        textAlign: (s = o.column.columnDef.meta) != null && s.isCentered ? "center" : "start",
+        verticalAlign: "middle",
+        textTransform: "none",
+        children: o.isPlaceholder ? null : J(
+          o.column.columnDef.header,
+          o.getContext()
+        )
+      },
+      o.id
+    );
+  }) }, t.id)) });
+}
+function De({ emptyText: e = "موردی وجود ندارد" }) {
+  const { table: t, columns: o } = C(), s = t.getRowModel().rows;
+  return /* @__PURE__ */ r(re, { children: s.length > 0 ? s.map((c) => /* @__PURE__ */ r(
+    H,
+    {
+      borderBottomWidth: "1px",
+      borderColor: "gray.200",
+      _hover: { bg: "blue.50" },
+      transition: "0.2s",
+      children: c.getVisibleCells().map((l) => {
+        var u;
+        return /* @__PURE__ */ r(
+          F,
+          {
+            py: 3,
+            fontSize: "md",
+            color: "gray.700",
+            borderRightWidth: "1px",
+            borderRightColor: "gray.200",
+            textAlign: (u = l.column.columnDef.meta) != null && u.isCentered ? "center" : "start",
+            verticalAlign: "middle",
+            children: l.column.columnDef.cell ? J(l.column.columnDef.cell, l.getContext()) : l.getValue()
+          },
+          l.id
+        );
+      })
+    },
+    c.id
+  )) : /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(F, { colSpan: o.length, py: 8, textAlign: "center", children: /* @__PURE__ */ r(R, { color: "gray.500", children: e }) }) }) });
+}
+function Pe({
+  pagination: e,
+  onPageChange: t
+}) {
+  const o = C(), { table: s } = o, c = e ?? o.pagination, l = (c == null ? void 0 : c.total) ?? (c == null ? void 0 : c.totalCount) ?? o.totalCount ?? 0, u = (c == null ? void 0 : c.total_pages) ?? (c == null ? void 0 : c.totalPages) ?? o.totalPages ?? s.getPageCount() ?? 0, g = s.getState().pagination.pageIndex + 1, b = (S) => {
+    if (t) {
+      t(S);
+      return;
+    }
+    s.setPageIndex(S - 1);
+  };
+  return !o.onPageChange && !t || u <= 0 ? null : /* @__PURE__ */ r(_, { mt: 1, flexShrink: 0, children: /* @__PURE__ */ r(
+    ae,
+    {
+      currentPage: g,
+      onPageChange: b,
+      totalCount: l,
+      totalPages: u
+    }
+  ) });
+}
+const G = Object.assign(xe, {
+  Topbar: pe,
+  Title: Ce,
+  Spacer: Se,
+  Actions: ye,
+  SelectionActions: Te,
+  SelectAll: ke,
+  SelectedCount: ze,
+  Content: Ae,
+  Table: Ie,
+  Head: we,
+  Body: De,
+  Pagination: Pe
+});
+export {
+  G as DataTable
+};

package.json

@@ -5,7 +5,8 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "exports": {
-    ".": "./dist/index.js"
+    ".": "./dist/index.js",
+    "./table": "./dist/table.js"
   },
   "files": [
     "dist"
@@ -17,6 +18,7 @@
     "@chakra-ui/react": "^2.0.0",
     "@emotion/react": "^11.0.0",
     "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-table": "^8.21.3",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-icons": "^5.0.0"
@@ -40,4 +42,4 @@
     "vite": "5.4.19"
   },
   "dependencies": {}
-}
+}

src/table/DataTable.jsx

@@ -14,8 +14,8 @@ import {
   Tr,
   VStack,
 } from "@chakra-ui/react";
-import { Pagination as UIKitPagination } from "../pagination/Pagination.jsx";
+import { Pagination as UIKitPagination } from "../components/pagination/Pagination.jsx";
-import { toFaDigits } from "../../utils/numbers.js";
+import { toFaDigits } from "../utils/numbers.js";
 import {
   flexRender,
   getCoreRowModel,

vite.config.js

@@ -2,30 +2,41 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import path from "path";
 
+const externalPackages = [
+  "react",
+  "react-dom",
+  "react/jsx-runtime",
+
+  "@chakra-ui/react",
+  "@emotion/react",
+
+  "keycloak-js",
+  "axios",
+
+  "@tanstack/react-query",
+  "@tanstack/react-table",
+
+  "react-icons",
+];
+
 export default defineConfig({
   plugins: [react()],
   build: {
     lib: {
-      entry: path.resolve(process.cwd(), "src/index.js"),
+      entry: {
+        index: path.resolve(process.cwd(), "src/index.js"),
+        table: path.resolve(process.cwd(), "src/table/index.js"),
+      },
       formats: ["es"],
-      fileName: () => "index.js",
     },
     rollupOptions: {
-      external: [
+      external: (id) => {
-        "react",
+        return externalPackages.includes(id) || id.startsWith("react-icons/");
-        "react-dom",
+      },
-        "react/jsx-runtime",
+      output: {
-        "@chakra-ui/react",
+        entryFileNames: "[name].js",
-        "keycloak-js",
+        chunkFileNames: "chunks/[name]-[hash].js",
-        "axios",
+      },
-        "@tanstack/react-query",
-        "react-icons",
-        "react-icons/fa",
-        "react-icons/fa6",
-        "react-icons/io",
-        "react-icons/io5",
-        "react-icons/md",
-      ],
     },
   },
 });