From 88c0fd870faa8e907da39a7b9e1fd1a16433a490 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Tue, 15 Feb 2022 13:20:55 +0330 Subject: [PATCH] pagination component added --- src/components/ReactTable4/BasicTable.js | 105 +++++++++------------ src/components/ReactTable4/GlobalFilter.js | 43 +++++++-- src/components/ReactTable4/GoToPage.js | 20 ++++ src/components/ReactTable4/MOCK_DATA.json | 2 +- src/components/ReactTable4/Pagination.js | 50 ++++++++++ 5 files changed, 147 insertions(+), 73 deletions(-) create mode 100644 src/components/ReactTable4/GoToPage.js create mode 100644 src/components/ReactTable4/Pagination.js diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index 87f9d63..253fc49 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/src/components/ReactTable4/BasicTable.js @@ -16,12 +16,12 @@ import { import { COLUMNS } from "./columns"; import { GlobalFilter } from "./GlobalFilter"; +import { Pagination } from "./Pagination"; +import { GoToPage } from "./GoToPage"; 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"; +import settings from "./settings.svg"; // This is a custom filter UI for selecting // a unique option from a list @@ -74,7 +74,7 @@ export function SelectColumnFilter({ ); } -const BasicTable = () => { +const BasicTable = ({ settingsIcon }) => { const columns = React.useMemo(() => COLUMNS, []); const data = useMemo(() => MOCK_DATA, []); @@ -162,7 +162,6 @@ const BasicTable = () => { ) )} */} - {/* */} {/* toggle columns */} {/*
@@ -179,73 +178,51 @@ const BasicTable = () => {
*/} {/* Change Column Order */} {/* */} -
- {/* search box */} +
+ {/* left box */}
- {/* */} + {/* search box */} + {/* pagination */} -
+
{/* go to page */}
- { - const pageNumber = e.target.value - ? Number(e.target.value) - 1 - : 0; - gotoPage(pageNumber); - }} - style={{ width: "50px" }} + - - {" "} - برو به صفحه{" "} -
- {/* */} -
+ {/* vertical line */} +
{/* arrows */} - - - - - {/* dobleLeftArrow -leftArrow -import rightArrow from "./right-arrow.svg"; */} +
+ {/* settings icon */} + {settingsIcon && ( +
+ +
+ )}
{ }, 400); return ( - { - setValue(e.target.value); - onChange(e.target.value); - }} - type="text" - placeholder="نام کالا را جستجو کنید..." - className="text-xs rounded-sm pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor placeholder-gray-400 focus:outline-none" - /> +
+ + { + setValue(e.target.value); + onChange(e.target.value); + }} + type="text" + // placeholder="نام کالا را جستجو کنید..." + className="text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border" + style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} + /> +
); }; + +{ + /*
+ + +
*/ +} diff --git a/src/components/ReactTable4/GoToPage.js b/src/components/ReactTable4/GoToPage.js new file mode 100644 index 0000000..ccae79b --- /dev/null +++ b/src/components/ReactTable4/GoToPage.js @@ -0,0 +1,20 @@ +import React from "react"; + +export const GoToPage = ({ pageIndex, gotoPage, pageOptions }) => { + return ( + + صفحه{" "} + { + const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0; + gotoPage(pageNumber); + }} + style={{ width: "50px" }} + /> + از {pageOptions.length} + + ); +}; diff --git a/src/components/ReactTable4/MOCK_DATA.json b/src/components/ReactTable4/MOCK_DATA.json index e54ea65..dbc3c2f 100644 --- a/src/components/ReactTable4/MOCK_DATA.json +++ b/src/components/ReactTable4/MOCK_DATA.json @@ -10,7 +10,7 @@ "history": "مهدی" }, { - "name": "mahdimahdi", + "name": "مهدی", "order-date": "1399/09/27", "order-price": 27, "order-number": "09120023100", diff --git a/src/components/ReactTable4/Pagination.js b/src/components/ReactTable4/Pagination.js new file mode 100644 index 0000000..a5d9f52 --- /dev/null +++ b/src/components/ReactTable4/Pagination.js @@ -0,0 +1,50 @@ +import React from "react"; +import dobleLeftArrow from "./double-left-arrow.svg"; +import leftArrow from "./left-arrow.svg"; +import rightArrow from "./right-arrow.svg"; + +export const Pagination = ({ + gotoPage, + canPreviousPage, + previousPage, + canNextPage, + pageCount, + nextPage, +}) => { + return ( +
+ + + + +
+ ); +};