diff --git a/build.zip b/build.zip
index 5883942..69a0ee2 100644
Binary files a/build.zip and b/build.zip differ
diff --git a/package-lock.json b/package-lock.json
index 5693942..ad52b11 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
+ "@heroicons/react": "^1.0.5",
"@reduxjs/toolkit": "^1.7.1",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
@@ -21,6 +22,7 @@
"react-icons": "^4.3.1",
"react-redux": "^7.2.6",
"react-scripts": "5.0.0",
+ "react-table": "^7.7.0",
"react-tooltip": "^4.2.21",
"recharts": "^2.1.8",
"redux": "^4.1.2",
@@ -2147,6 +2149,14 @@
"react": ">=16.x"
}
},
+ "node_modules/@heroicons/react": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.5.tgz",
+ "integrity": "sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg==",
+ "peerDependencies": {
+ "react": ">= 16"
+ }
+ },
"node_modules/@humanwhocodes/config-array": {
"version": "0.9.2",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz",
@@ -13892,6 +13902,18 @@
"react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0"
}
},
+ "node_modules/react-table": {
+ "version": "7.7.0",
+ "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz",
+ "integrity": "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "peerDependencies": {
+ "react": "^16.8.3 || ^17.0.0-0"
+ }
+ },
"node_modules/react-tooltip": {
"version": "4.2.21",
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
@@ -18314,6 +18336,12 @@
"prop-types": "^15.7.2"
}
},
+ "@heroicons/react": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.5.tgz",
+ "integrity": "sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg==",
+ "requires": {}
+ },
"@humanwhocodes/config-array": {
"version": "0.9.2",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz",
@@ -26768,6 +26796,12 @@
"react-transition-group": "2.9.0"
}
},
+ "react-table": {
+ "version": "7.7.0",
+ "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz",
+ "integrity": "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==",
+ "requires": {}
+ },
"react-tooltip": {
"version": "4.2.21",
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
diff --git a/package.json b/package.json
index bdbde7c..a2057b3 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
+ "@heroicons/react": "^1.0.5",
"@reduxjs/toolkit": "^1.7.1",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
@@ -16,6 +17,7 @@
"react-icons": "^4.3.1",
"react-redux": "^7.2.6",
"react-scripts": "5.0.0",
+ "react-table": "^7.7.0",
"react-tooltip": "^4.2.21",
"recharts": "^2.1.8",
"redux": "^4.1.2",
diff --git a/src/App.js b/src/App.js
index 8b55ede..878ce9e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -42,6 +42,7 @@ import SpecifiedDomainRadarChart from "./components/Chart/SpecifiedDomainRadarCh
import Design1 from "./components/ProductSalesAmount/Design1";
import Design2 from "./components/ProductSalesAmount/Design2";
import TableDesign1 from "./components/Table/Design1";
+import ReactTable2 from "./components/ReactTable2";
import Switch from "./components/Switch";
@@ -49,45 +50,45 @@ function App() {
return (
- {/*
*/}
- {/*
*/}
+
+
{/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
- {/*
*/}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
diff --git a/src/components/ReactTable2/Table.js b/src/components/ReactTable2/Table.js
new file mode 100644
index 0000000..2b683fd
--- /dev/null
+++ b/src/components/ReactTable2/Table.js
@@ -0,0 +1,306 @@
+import React from "react";
+import {
+ useTable,
+ useFilters,
+ useGlobalFilter,
+ useAsyncDebounce,
+ useSortBy,
+ usePagination,
+} from "react-table";
+import {
+ ChevronDoubleLeftIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ ChevronDoubleRightIcon,
+} from "@heroicons/react/solid";
+import { Button, PageButton } from "./shared/Button";
+import { classNames } from "./shared/Utils";
+import { SortIcon, SortUpIcon, SortDownIcon } from "./shared/Icons";
+
+// Define a default UI for filtering
+function GlobalFilter({
+ preGlobalFilteredRows,
+ globalFilter,
+ setGlobalFilter,
+}) {
+ const count = preGlobalFilteredRows.length;
+ const [value, setValue] = React.useState(globalFilter);
+ const onChange = useAsyncDebounce((value) => {
+ setGlobalFilter(value || undefined);
+ }, 200);
+
+ return (
+
+ Search:
+ {
+ setValue(e.target.value);
+ onChange(e.target.value);
+ }}
+ placeholder={`${count} records...`}
+ />
+
+ );
+}
+
+export function StatusPill({ value }) {
+ // const status = value ? value.toLowerCase() : "unknown";
+
+ return (
+
+ {value ? "فعال" : "غیر فعال"}
+
+ );
+}
+
+// export function AvatarCell({ value, column, row }) {
+// return (
+//
+// {/* برای عکس */}
+// {/*
+//
+//
*/}
+// {/* اگر بخواهیم در کنار عنوان یک محتوا دیگه ای بنویسیم */}
+// {/*
+//
{value}
+//
+// {row.original[column.emailAccessor]}
+//
+//
*/}
+//
+// );
+// }
+
+function Table({ columns, data }) {
+ // Use the state and functions returned from useTable to build your UI
+ const {
+ getTableProps,
+ getTableBodyProps,
+ headerGroups,
+ prepareRow,
+ page, // Instead of using 'rows', we'll use page,
+ // which has only the rows for the active page
+
+ // The rest of these things are super handy, too ;)
+ canPreviousPage,
+ canNextPage,
+ pageOptions,
+ pageCount,
+ gotoPage,
+ nextPage,
+ previousPage,
+ setPageSize,
+
+ state,
+ preGlobalFilteredRows,
+ setGlobalFilter,
+ } = useTable(
+ {
+ columns,
+ data,
+ },
+ useFilters, // useFilters!
+ useGlobalFilter,
+ useSortBy,
+ usePagination // new
+ );
+
+ // Render the UI for your table
+ return (
+ <>
+
+
+ {headerGroups.map((headerGroup) =>
+ headerGroup.headers.map((column) =>
+ column.Filter ? (
+
+ {column.render("Filter")}
+
+ ) : null
+ )
+ )}
+
+ {/* table */}
+
+
+
+
+
+
+ {headerGroups.map((headerGroup) => (
+
+ {headerGroup.headers.map((column) => (
+ // Add the sorting props to control sorting. For this example
+ // we can add them into the header props
+
+
+ {column.render("Header")}
+ {/* Add a sort direction indicator */}
+
+ {column.isSorted ? (
+ column.isSortedDesc ? (
+
+ ) : (
+
+ )
+ ) : (
+
+ )}
+
+
+
+ ))}
+
+ ))}
+
+
+ {page.map((row, i) => {
+ // new
+ prepareRow(row);
+ return (
+
+ {row.cells.map((cell) => {
+ return (
+
+ {cell.column.Cell.name === "defaultRenderer" ? (
+
+ {cell.render("Cell")}
+
+ ) : (
+ cell.render("Cell")
+ )}
+
+ );
+ })}
+
+ );
+ })}
+
+
+
+
+
+
+ {/* Pagination */}
+
+
+ previousPage()} disabled={!canPreviousPage}>
+ Previous
+
+ nextPage()} disabled={!canNextPage}>
+ Next
+
+
+
+ {/* numbers */}
+
+
+ صفحه {state.pageIndex + 1}
+ از
+ {pageOptions.length}
+
+
+ ایتم های موجود در هر صفحه
+ {
+ setPageSize(Number(e.target.value));
+ }}
+ >
+ {[5, 10, 20].map((pageSize) => (
+
+ نمایش {pageSize}
+
+ ))}
+
+
+
+ {/* arrows */}
+
+
+ gotoPage(0)}
+ disabled={!canPreviousPage}
+ >
+ First
+
+
+
+ previousPage()}
+ disabled={!canPreviousPage}
+ >
+ Previous
+
+
+
+ nextPage()} disabled={!canNextPage}>
+ Next
+
+
+
+ gotoPage(pageCount - 1)}
+ disabled={!canNextPage}
+ >
+ Last
+
+
+
+
+
+
+ >
+ );
+}
+
+export default Table;
diff --git a/src/components/ReactTable2/index.js b/src/components/ReactTable2/index.js
new file mode 100644
index 0000000..b451d3d
--- /dev/null
+++ b/src/components/ReactTable2/index.js
@@ -0,0 +1,90 @@
+import React from "react";
+import Table, { AvatarCell, SelectColumnFilter, StatusPill } from "./Table"; // new
+
+const getData = () => {
+ const data = [
+ {
+ name: "مایکروویر سامسونگ مدل ",
+ // email: "jane.cooper@example.com",
+ status: true,
+ date: "1399/09/21",
+ price: 20000,
+ // imgUrl:
+ // "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60",
+ },
+ {
+ name: "آزمون آنلاین درس علوم تجربی ",
+ status: false,
+ date: "1399/09/23",
+ price: 18000,
+ },
+ {
+ name: "مایکروویر سامسونگ مدل ",
+ status: true,
+ date: "1392/09/21",
+ price: 20000,
+ },
+ {
+ name: "آزمون آنلاین درس علوم تجربی ",
+ status: false,
+ date: "1375/09/21",
+ price: 18000,
+ },
+ {
+ name: "مایکروویر سامسونگ مدل ",
+ status: true,
+ date: "1360/09/21",
+ price: 27000000,
+ },
+ {
+ name: "آزمون آنلاین درس علوم تجربی ",
+ status: false,
+ date: "1404/09/21",
+ price: 1000,
+ },
+ ];
+ return [...data, ...data, ...data];
+};
+
+const ReactTable2 = () => {
+ const columns = React.useMemo(
+ () => [
+ {
+ Header: "عنوان",
+ accessor: "name",
+ // اگر بخواهیم عکسی در جدول نشان بدیم یا یک محتوایی در کنار عنوان داشته باشیم اول باید اواتار سل رو در فایل تیبل جی اس ان کامنت کنیم و بعد ...
+ // Cell: AvatarCell,
+ // imgAccessor: "imgUrl",
+ // emailAccessor: "email",
+ },
+ {
+ Header: "وضعیت",
+ accessor: "status",
+ Cell: StatusPill,
+ },
+ {
+ Header: "تاریخ",
+ accessor: "date",
+ },
+ {
+ Header: "مبلغ پرداختی",
+ accessor: "price",
+ },
+ ],
+ []
+ );
+
+ const data = React.useMemo(() => getData(), []);
+
+ return (
+
+ );
+};
+
+export default ReactTable2;
diff --git a/src/components/ReactTable2/shared/Button.js b/src/components/ReactTable2/shared/Button.js
new file mode 100644
index 0000000..0eb5e88
--- /dev/null
+++ b/src/components/ReactTable2/shared/Button.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import { classNames } from './Utils'
+
+export function Button({ children, className, ...rest }) {
+ return (
+
+ {children}
+
+ )
+}
+
+export function PageButton({ children, className, ...rest }) {
+ return (
+
+ {children}
+
+ )
+}
+
diff --git a/src/components/ReactTable2/shared/Icons.js b/src/components/ReactTable2/shared/Icons.js
new file mode 100644
index 0000000..8751e5e
--- /dev/null
+++ b/src/components/ReactTable2/shared/Icons.js
@@ -0,0 +1,17 @@
+export function SortIcon({ className }) {
+ return (
+
+ )
+}
+
+export function SortUpIcon({ className }) {
+ return (
+
+ )
+}
+
+export function SortDownIcon({ className }) {
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/ReactTable2/shared/Utils.js b/src/components/ReactTable2/shared/Utils.js
new file mode 100644
index 0000000..91dcb3e
--- /dev/null
+++ b/src/components/ReactTable2/shared/Utils.js
@@ -0,0 +1,3 @@
+export function classNames(...classes) {
+ return classes.filter(Boolean).join(" ");
+}
\ No newline at end of file
diff --git a/src/components/testtttt/Testttt.js b/src/components/testtttt/Testttt.js
index 39a4a31..999f0c5 100644
--- a/src/components/testtttt/Testttt.js
+++ b/src/components/testtttt/Testttt.js
@@ -19,12 +19,12 @@ export const Testttt = ({ bookBackCoverBg }) => {
// maxHeight: "300px",
}}
>
-
-
+ /> */}
+
diff --git a/yarn.lock b/yarn.lock
index fa49394..b7237fc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1258,6 +1258,11 @@
dependencies:
"prop-types" "^15.7.2"
+"@heroicons/react@^1.0.5":
+ "integrity" "sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg=="
+ "resolved" "https://registry.npmjs.org/@heroicons/react/-/react-1.0.5.tgz"
+ "version" "1.0.5"
+
"@humanwhocodes/config-array@^0.9.2":
"integrity" "sha512-UXOuFCGcwciWckOpmfKDq/GyhlTf9pN/BzG//x8p8zTOFEcGuA68ANXheFS0AGvy3qgZqLBUkMs7hqzqCKOVwA=="
"resolved" "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz"
@@ -7615,6 +7620,11 @@
"raf" "^3.4.0"
"react-transition-group" "2.9.0"
+"react-table@^7.7.0":
+ "integrity" "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA=="
+ "resolved" "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz"
+ "version" "7.7.0"
+
"react-tooltip@^4.2.21":
"integrity" "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig=="
"resolved" "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz"
@@ -7633,7 +7643,7 @@
"prop-types" "^15.6.2"
"react-lifecycles-compat" "^3.0.4"
-"react@*", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.0.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^16.9.0 || ^17.0.0 || 18.0.0-beta", "react@^17.0.2", "react@>= 16", "react@>= 16.8.0 < 18.0.0", "react@>=15.0.0", "react@>=16.0.0", "react@>=16.x", "react@17.0.2":
+"react@*", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.0.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^16.8.3 || ^17.0.0-0", "react@^16.9.0 || ^17.0.0 || 18.0.0-beta", "react@^17.0.2", "react@>= 16", "react@>= 16.8.0 < 18.0.0", "react@>=15.0.0", "react@>=16.0.0", "react@>=16.x", "react@17.0.2":
"integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
"resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
"version" "17.0.2"