diff --git a/src/App.js b/src/App.js
index 1c0238e..e0d3537 100644
--- a/src/App.js
+++ b/src/App.js
@@ -43,7 +43,6 @@ 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 ReactTable from "./components/ReactTable";
import ReactTable2 from "./components/ReactTable2";
function App() {
@@ -88,7 +87,6 @@ function App() {
{/* */}
{/* */}
{/* */}
- {/* */}
diff --git a/src/components/ReactTable/Table.js b/src/components/ReactTable/Table.js
deleted file mode 100644
index 0ddba7e..0000000
--- a/src/components/ReactTable/Table.js
+++ /dev/null
@@ -1,294 +0,0 @@
-import React from "react";
-
-import {
- useTable,
- useGlobalFilter,
- useAsyncDebounce,
- useSortBy,
- usePagination,
-} from "react-table"; // new
-
-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";
-
-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...`}
- />
-
- );
-}
-
-// This is a custom filter UI for selecting
-export function StatusPill({ value }) {
- // const status = value ? value.toLowerCase() : "unknown";
-
- return (
- //
- // {/* {status} */}
- // {status ? "فعال" : "غیر فعال"}
- //
-
- {value ? "فعال" : "غیر فعال"}
-
- );
- console.log(value);
-}
-
-function Table({ columns, data }) {
- // Use the state and functions returned from useTable to build your UI
- const {
- getTableProps,
- getTableBodyProps,
- headerGroups,
- rows,
- prepareRow,
- //new
- 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, // new
- preGlobalFilteredRows, // new
- setGlobalFilter,
- } = useTable(
- {
- columns,
- data,
- },
- useGlobalFilter,
- useSortBy, // new
- usePagination
- );
-
- // 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 */}
-
-
-
-
-
-
- {/* pagintaion */}
-
-
- صفحه {state.pageIndex + 1} از{" "}
- {pageOptions.length}
-
-
-
- {/* arrows */}
-
-
-
-
-
- >
- );
-}
-
-export default Table;
diff --git a/src/components/ReactTable/index.js b/src/components/ReactTable/index.js
deleted file mode 100644
index 4573be4..0000000
--- a/src/components/ReactTable/index.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from "react";
-import Table, { AvatarCell, SelectColumnFilter, StatusPill } from "./Table"; // new
-
-const getData = () => {
- const data = [
- {
- name: "مایکروویر سامسونگ مدل ",
- status: true,
- date: "1400 / 09 / 21",
- price: 20000,
- },
- {
- name: "مایکروویر سامسونگ مدل ",
- status: false,
- date: "1400 / 09 / 21",
- price: 20000,
- },
- ];
- return [...data, ...data, ...data];
-};
-
-function ReactTable() {
- const columns = React.useMemo(
- () => [
- {
- Header: "عنوان",
- accessor: "name",
- },
- {
- Header: "وضعیت",
- accessor: "status",
- },
- {
- Header: "تاریخ",
- accessor: "date",
- },
- {
- Header: "مبلغ پرداختی",
- accessor: "price",
- },
- ],
- []
- );
-
- const data = React.useMemo(() => getData(), []);
-
- return (
-
- );
-}
-
-export default ReactTable;
diff --git a/src/components/ReactTable/shared/Button.js b/src/components/ReactTable/shared/Button.js
deleted file mode 100644
index 0eb5e88..0000000
--- a/src/components/ReactTable/shared/Button.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react'
-import { classNames } from './Utils'
-
-export function Button({ children, className, ...rest }) {
- return (
-
- )
-}
-
-export function PageButton({ children, className, ...rest }) {
- return (
-
- )
-}
-
diff --git a/src/components/ReactTable/shared/Icons.js b/src/components/ReactTable/shared/Icons.js
deleted file mode 100644
index 8751e5e..0000000
--- a/src/components/ReactTable/shared/Icons.js
+++ /dev/null
@@ -1,17 +0,0 @@
-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/ReactTable/shared/Utils.js b/src/components/ReactTable/shared/Utils.js
deleted file mode 100644
index 91dcb3e..0000000
--- a/src/components/ReactTable/shared/Utils.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function classNames(...classes) {
- return classes.filter(Boolean).join(" ");
-}
\ No newline at end of file