From c4ccca28d03105b5becb7e76bedda351ae9ed4fa Mon Sep 17 00:00:00 2001 From: mahdi Date: Mon, 14 Feb 2022 14:46:10 +0330 Subject: [PATCH] edited version --- src/components/ReactTable4/BasicTable.js | 163 +++++++++++------- src/components/ReactTable4/EditButtons.js | 33 +--- .../ReactTable4/double-left-arrow.svg | 12 ++ src/components/ReactTable4/index.js | 2 +- src/components/ReactTable4/left-arrow.svg | 8 + src/components/ReactTable4/right-arrow.svg | 6 + .../Sidebar/SidebarDesign2/index.js | 12 +- 7 files changed, 132 insertions(+), 104 deletions(-) create mode 100644 src/components/ReactTable4/double-left-arrow.svg create mode 100644 src/components/ReactTable4/left-arrow.svg create mode 100644 src/components/ReactTable4/right-arrow.svg diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index 9ea7140..b9f46e1 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/src/components/ReactTable4/BasicTable.js @@ -19,6 +19,10 @@ import { GlobalFilter } from "./GlobalFilter"; import { Checkbox } from "./Checkbox"; import MOCK_DATA from "./MOCK_DATA.json"; +import dobleLeftArrow from "./double-left-arrow.svg"; +import leftArrow from "./left-arrow.svg"; +import rightArrow from "./right-arrow.svg"; + // This is a custom filter UI for selecting // a unique option from a list export function SelectColumnFilter({ @@ -146,7 +150,8 @@ const BasicTable = () => { // const firstPageRows = rows.slice(0, 10); return ( <> -
+ {/* filter */} + {/*
{headerGroups.map((headerGroup) => headerGroup.headers.map((column) => column.Filter ? ( @@ -156,71 +161,7 @@ const BasicTable = () => { ) : null ) )} -
-
- {/* search box */} - {/* */} - {/* pagination */} -
- {/* go to page */} -
- { - const pageNumber = e.target.value - ? Number(e.target.value) - 1 - : 0; - gotoPage(pageNumber); - }} - style={{ width: "50px" }} - /> - - {" "} - برو به صفحه{" "} - -
- {/* */} -
- {/* arrows */} - - - - -
-
+
*/} {/* */} {/* toggle columns */} {/*
@@ -238,6 +179,75 @@ const BasicTable = () => {
*/} {/* Change Column Order */} {/* */} +
+ {/* search box */} +
+ {/* */} + {/* pagination */} +
+ {/* go to page */} +
+ { + const pageNumber = e.target.value + ? Number(e.target.value) - 1 + : 0; + gotoPage(pageNumber); + }} + style={{ width: "50px" }} + /> + + {" "} + برو به صفحه{" "} + +
+ {/* */} +
+ {/* arrows */} + + + + + {/* dobleLeftArrow +leftArrow +import rightArrow from "./right-arrow.svg"; */} +
+
+
{
- + {/* صفحه{" "} {pageIndex + 1} از {pageOptions.length} {""} + */} + + صفحه{" "} + + { + const pageNumber = e.target.value + ? Number(e.target.value) - 1 + : 0; + gotoPage(pageNumber); + }} + style={{ width: "50px" }} + />{" "} + از {pageOptions.length} + + {""}