From cd25e1e4eee187f7c702a7007039360332a20f79 Mon Sep 17 00:00:00 2001 From: mahdi Date: Sat, 5 Feb 2022 16:47:27 +0330 Subject: [PATCH] added table --- src/App.js | 2 - src/components/ReactTable/Table.js | 294 --------------------- src/components/ReactTable/index.js | 58 ---- src/components/ReactTable/shared/Button.js | 35 --- src/components/ReactTable/shared/Icons.js | 17 -- src/components/ReactTable/shared/Utils.js | 3 - 6 files changed, 409 deletions(-) delete mode 100644 src/components/ReactTable/Table.js delete mode 100644 src/components/ReactTable/index.js delete mode 100644 src/components/ReactTable/shared/Button.js delete mode 100644 src/components/ReactTable/shared/Icons.js delete mode 100644 src/components/ReactTable/shared/Utils.js 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 - - ))} - - ))} - - - {page.map((row, i) => { - // new - prepareRow(row); - return ( - - {row.cells.map((cell) => { - return ( - - ); - })} - - ); - })} - -
-
- {column.render("Header")} - {/* Add a sort direction indicator */} - - {column.isSorted ? ( - column.isSortedDesc ? ( - - ) : ( - - ) - ) : ( - - )} - -
-
- {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