From 290eef8bb9ecd711b2cf1b73ba2ebb63f2ceb725 Mon Sep 17 00:00:00 2001 From: mahdi Date: Mon, 7 Feb 2022 13:10:02 +0330 Subject: [PATCH] styels added --- src/components/ReactTable3/BasicTable.js | 109 +++---- .../NOTUSINGBasicTableDefaultCode.js | 302 ++++++++++++++++++ src/components/ReactTable3/index.js | 66 +++- 3 files changed, 409 insertions(+), 68 deletions(-) create mode 100644 src/components/ReactTable3/NOTUSINGBasicTableDefaultCode.js diff --git a/src/components/ReactTable3/BasicTable.js b/src/components/ReactTable3/BasicTable.js index 4285040..1d01671 100644 --- a/src/components/ReactTable3/BasicTable.js +++ b/src/components/ReactTable3/BasicTable.js @@ -90,7 +90,47 @@ const BasicTable = () => { return ( <> -
+
+ {/* search box */} + + {/* pagination */} +
+ + + + +
+
+ {/* toggle columns */} + {/*
Toggle All
@@ -102,11 +142,10 @@ const BasicTable = () => {
))} -
+ */} - - - + {/* Change Column Order */} + {/* */} { : " 🔼" : ""} - {/*
- {column.canFilter ? column.render('Filter') : null } -
*/} ))} @@ -143,18 +179,6 @@ const BasicTable = () => { {...getTableBodyProps()} className="bg-white divide-y divide-gray-200" > - {/* {rows.map((row) => { - prepareRow(row) - return( - - {row.cells.map((cell) => { - return - })} - - ) - })} */} {page.map((row) => { prepareRow(row); return ( @@ -174,26 +198,6 @@ const BasicTable = () => { ); })} - - {/* {firstPageRows.map((row) => { - prepareRow(row); - return ( - - {row.cells.map((cell) => { - return ( - - ); - })} - - ); - })} */} { ))} - - - - - - - ); diff --git a/src/components/ReactTable3/NOTUSINGBasicTableDefaultCode.js b/src/components/ReactTable3/NOTUSINGBasicTableDefaultCode.js new file mode 100644 index 0000000..968b271 --- /dev/null +++ b/src/components/ReactTable3/NOTUSINGBasicTableDefaultCode.js @@ -0,0 +1,302 @@ +import React, { useMemo } from "react"; + +import { + useTable, + useSortBy, + useGlobalFilter, + useFilters, + usePagination, + useRowSelect, + useColumnOrder, +} from "react-table"; + +import { COLUMNS } from "./columns"; + +import { GlobalFilter } from "./GlobalFilter"; + +import { Checkbox } from "./Checkbox"; + +import MOCK_DATA from "./MOCK_DATA.json"; + +const BasicTable = () => { + const columns = React.useMemo(() => COLUMNS, []); + const data = useMemo(() => MOCK_DATA, []); + + const { + getTableProps, + getTableBodyProps, + headerGroups, + footerGroups, + rows, + page, + nextPage, + previousPage, + canNextPage, + canPreviousPage, + pageOptions, + gotoPage, + pageCount, + setPageSize, + prepareRow, + allColumns, + getToggleHideAllColumnsProps, + setColumnOrder, + selectedFlatRows, + state, + setGlobalFilter, + } = useTable( + { + columns, + data, + // initialState: { pageIndex: 2 } + }, + useColumnOrder, + useFilters, + useGlobalFilter, + useSortBy, + usePagination, + useRowSelect, + (hooks) => { + hooks.visibleColumns.push((columns) => { + return [ + { + id: "selection", + Header: ({ getToggleAllRowsSelectedProps }) => ( + + ), + Cell: ({ row }) => ( + + ), + }, + ...columns, + ]; + }); + } + ); + + const changeOrder = () => { + setColumnOrder([ + "name", + "order-number", + "user-job", + "order-level", + "order-status", + "order-price", + ]); + }; + + const { globalFilter, pageIndex, pageSize } = state; + // const firstPageRows = rows.slice(0, 10); + + return ( + <> +
+ {/* search box */} + + {/* pagination */} +
+ {/* toggle columns */} + {/*
+
+ Toggle All +
+ {allColumns.map((column) => ( +
+ +
+ ))} +
*/} + + {/* Change Column Order */} + {/* */} + +
- {cell.render('Cell')} -
- {cell.render("Cell")} -
+ + {headerGroups.map((headerGroup) => ( + + {headerGroup.headers.map((column) => ( + + ))} + + ))} + + + + {/* not using */} + {/* {rows.map((row) => { + prepareRow(row) + return( + + {row.cells.map((cell) => { + return + })} + + ) + })} */} + {page.map((row) => { + prepareRow(row); + return ( + + {row.cells.map((cell) => { + return ( + + ); + })} + + ); + })} + + {/* not using */} + {/* {firstPageRows.map((row) => { + prepareRow(row); + return ( + + {row.cells.map((cell) => { + return ( + + ); + })} + + ); + })} */} + + + 10 ? "w-full" : "hidden"}`} + > + {footerGroups.map((footerGroup) => ( + + {footerGroup.headers.map((column) => ( + + ))} + + ))} + +
+ {column.render("Header")} + + {column.isSorted + ? column.isSortedDesc + ? " 🔽" + : " 🔼" + : ""} + + {/* not using */} + {/*
+ {column.canFilter ? column.render('Filter') : null } +
*/} +
+ {cell.render('Cell')} +
+ {cell.render("Cell")} +
+ {cell.render("Cell")} +
+ {column.render("Footer")} +
+ + 
+        
+          {JSON.stringify(
+            {
+              selectedFlatRows: selectedFlatRows.map((row) => row.original),
+            },
+            null,
+            2
+          )}
+        
+
+ +
+ + Page{" "} + + {pageIndex + 1} of {pageOptions.length} + + {""} + + + + | Go to Page:{" "} + { + const pageNumber = e.target.value + ? Number(e.target.value) - 1 + : 0; + gotoPage(pageNumber); + }} + style={{ width: "50px" }} + /> + + + + + + + + + + +
+ + ); +}; + +export default BasicTable; diff --git a/src/components/ReactTable3/index.js b/src/components/ReactTable3/index.js index 1de6ba5..21c5d08 100644 --- a/src/components/ReactTable3/index.js +++ b/src/components/ReactTable3/index.js @@ -1,13 +1,73 @@ import React from "react"; import BasicTable from "./BasicTable"; -const ReactTable3 = () => { +const ReactTable3 = ({ breadCrumbs, subTitle, title }) => { return ( -
+
+ {/* breadCrumb */} +
+ {breadCrumbs.map((breadCrumb, index) => ( +
+ + {breadCrumb.name} + + {Number(index) !== breadCrumbs.length - 1 && ( +
+ {" > "} +
+ )} +
+ ))} +
+ +
+ {/* page Title */} +
+
+

{title}

+
+ {/* page Title */} +
+
+

{subTitle}

+
+
+ - mahdi
); }; export default ReactTable3; + +ReactTable3.defaultProps = { + breadCrumbs: [ + { + name: "صفحه اصلی", + active: false, + }, + { + name: "آمار و گزارشات", + active: false, + }, + { + name: "فروش محصولات", + active: false, + }, + { + name: "سال 1400", + active: true, + }, + ], + + title: "میزان فروش محصولات", + subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر", +};