pagination component added

master
mahdi andalib 3 years ago
parent 5be0852080
commit 88c0fd870f
  1. 103
      src/components/ReactTable4/BasicTable.js
  2. 27
      src/components/ReactTable4/GlobalFilter.js
  3. 20
      src/components/ReactTable4/GoToPage.js
  4. 2
      src/components/ReactTable4/MOCK_DATA.json
  5. 50
      src/components/ReactTable4/Pagination.js

@ -16,12 +16,12 @@ import {
import { COLUMNS } from "./columns"; import { COLUMNS } from "./columns";
import { GlobalFilter } from "./GlobalFilter"; import { GlobalFilter } from "./GlobalFilter";
import { Pagination } from "./Pagination";
import { GoToPage } from "./GoToPage";
import { Checkbox } from "./Checkbox"; import { Checkbox } from "./Checkbox";
import MOCK_DATA from "./MOCK_DATA.json"; import MOCK_DATA from "./MOCK_DATA.json";
import dobleLeftArrow from "./double-left-arrow.svg"; import settings from "./settings.svg";
import leftArrow from "./left-arrow.svg";
import rightArrow from "./right-arrow.svg";
// This is a custom filter UI for selecting // This is a custom filter UI for selecting
// a unique option from a list // a unique option from a list
@ -74,7 +74,7 @@ export function SelectColumnFilter({
); );
} }
const BasicTable = () => { const BasicTable = ({ settingsIcon }) => {
const columns = React.useMemo(() => COLUMNS, []); const columns = React.useMemo(() => COLUMNS, []);
const data = useMemo(() => MOCK_DATA, []); const data = useMemo(() => MOCK_DATA, []);
@ -162,7 +162,6 @@ const BasicTable = () => {
) )
)} )}
</div> */} </div> */}
{/* */}
{/* toggle columns */} {/* toggle columns */}
{/* <div> {/* <div>
<div> <div>
@ -179,73 +178,51 @@ const BasicTable = () => {
</div> */} </div> */}
{/* Change Column Order */} {/* Change Column Order */}
{/* <button onClick={changeOrder}> Change Column Order </button> */} {/* <button onClick={changeOrder}> Change Column Order </button> */}
<div className="flex flex-row items-center justify-end mb-3 mx-4"> <div className="flex flex-row items-center justify-end">
{/* search box */} {/* left box */}
<div <div
className="rounded-md py-2 px-4 flex flex-row flex-items-center" className="rounded-md p-2 flex flex-row flex-items-center"
style={{ backgroundColor: "#F1F6FF" }} style={{ backgroundColor: "#F1F6FF" }}
> >
{/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */} {/* search box */}
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
{/* pagination */} {/* pagination */}
<div className="flex flex-row flex-items-center bg-white p-1"> <div
className="flex flex-row flex-items-center p-1 rounded"
style={{ backgroundColor: "#F9FBFF" }}
>
{/* go to page */} {/* go to page */}
<div> <div>
<input <GoToPage
className="ml-1 text-xs p-1 rounded border-blue-400" pageIndex={pageIndex}
type="number" gotoPage={gotoPage}
defaultValue={pageIndex + 1} pageOptions={pageOptions}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/> />
<span className={`text-xs`} style={{ color: "#65A9FF" }}>
{" "}
برو به صفحه{" "}
</span>
</div> </div>
{/* */} {/* vertical line */}
<div className={`bg-gray-400 w-0.5 my-2 mx-1`}></div> <div
className={`w-0.5 my-1 mx-2`}
style={{ backgroundColor: "#65A9FF" }}
></div>
{/* arrows */} {/* arrows */}
<button <Pagination
className="rounded py-1 px-2 mx-1 text-xs font-bold" gotoPage={gotoPage}
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} canPreviousPage={canPreviousPage}
onClick={() => gotoPage(0)} previousPage={previousPage}
disabled={!canPreviousPage} canNextPage={canNextPage}
> pageCount={pageCount}
<img src={dobleLeftArrow} /> nextPage={nextPage}
</button> />
<button </div>
className="rounded py-1 px-2 mx-1 text-xs font-bold" {/* settings icon */}
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} {settingsIcon && (
onClick={() => previousPage()} <div
disabled={!canPreviousPage} style={{ backgroundColor: "#F9FBFF" }}
> className="mr-2 flex flex-col items-center justify-center p-1 rounded"
{"<"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => nextPage()}
disabled={!canNextPage}
>
{">"}
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
> >
{">>"} <img src={settings} className="w-5 h-5 cursor-pointer" />
</button>
{/* dobleLeftArrow
leftArrow
import rightArrow from "./right-arrow.svg"; */}
</div> </div>
)}
</div> </div>
</div> </div>
<table <table
@ -408,3 +385,7 @@ function renderRowSubComponent({ row }) {
); );
} }
export default BasicTable; export default BasicTable;
BasicTable.defaultProps = {
settingsIcon: false,
};

@ -13,6 +13,12 @@ export const GlobalFilter = ({ filter, setFilter }) => {
}, 400); }, 400);
return ( return (
<div className="flex flex-row-reverse items-center relative ml-2">
<img
src={search}
alt=""
className="w-4 h-4 absolute left-2 cursor-pointer"
/>
<input <input
value={value || ""} value={value || ""}
onChange={(e) => { onChange={(e) => {
@ -20,8 +26,25 @@ export const GlobalFilter = ({ filter, setFilter }) => {
onChange(e.target.value); onChange(e.target.value);
}} }}
type="text" type="text"
placeholder="نام کالا را جستجو کنید..." // 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" className="text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
/> />
</div>
); );
}; };
{
/* <div className="flex flex-row-reverse items-center relative w-full">
<img
src={lightGraySearchIcon}
alt=""
className="w-4 h-4 absolute left-3"
/>
<input
type="text"
placeholder="نام کالا را جستجو کنید..."
className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor placeholder-gray-400 focus:outline-none"
/>
</div> */
}

@ -0,0 +1,20 @@
import React from "react";
export const GoToPage = ({ pageIndex, gotoPage, pageOptions }) => {
return (
<span className="text-xs text-blue-400">
صفحه{" "}
<input
className="ml-1 text-xs p-1 rounded border-blue-400"
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>
از {pageOptions.length}
</span>
);
};

@ -10,7 +10,7 @@
"history": "مهدی" "history": "مهدی"
}, },
{ {
"name": "mahdimahdi", "name": "مهدی",
"order-date": "1399/09/27", "order-date": "1399/09/27",
"order-price": 27, "order-price": 27,
"order-number": "09120023100", "order-number": "09120023100",

@ -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 (
<div className="flex flex-row items-center">
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
<img src={dobleLeftArrow} className="rotate-180 w-4 h-4" />
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
<img src={rightArrow} className="w-3 h-3" />
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => nextPage()}
disabled={!canNextPage}
>
<img src={leftArrow} className="w-3 h-3" />
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
<img src={dobleLeftArrow} className="w-4 h-4" />
</button>
</div>
);
};
Loading…
Cancel
Save