pagination component added

master
mahdi andalib 3 years ago
parent 5be0852080
commit 88c0fd870f
  1. 105
      src/components/ReactTable4/BasicTable.js
  2. 43
      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 { 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 = () => {
)
)}
</div> */}
{/* */}
{/* toggle columns */}
{/* <div>
<div>
@ -179,73 +178,51 @@ const BasicTable = () => {
</div> */}
{/* Change Column Order */}
{/* <button onClick={changeOrder}> Change Column Order </button> */}
<div className="flex flex-row items-center justify-end mb-3 mx-4">
{/* search box */}
<div className="flex flex-row items-center justify-end">
{/* left box */}
<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" }}
>
{/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
{/* search box */}
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
{/* 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 */}
<div>
<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" }}
<GoToPage
pageIndex={pageIndex}
gotoPage={gotoPage}
pageOptions={pageOptions}
/>
<span className={`text-xs`} style={{ color: "#65A9FF" }}>
{" "}
برو به صفحه{" "}
</span>
</div>
{/* */}
<div className={`bg-gray-400 w-0.5 my-2 mx-1`}></div>
{/* vertical line */}
<div
className={`w-0.5 my-1 mx-2`}
style={{ backgroundColor: "#65A9FF" }}
></div>
{/* arrows */}
<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} />
</button>
<button
className="rounded py-1 px-2 mx-1 text-xs font-bold"
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }}
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
{"<"}
</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}
>
{">>"}
</button>
{/* dobleLeftArrow
leftArrow
import rightArrow from "./right-arrow.svg"; */}
<Pagination
gotoPage={gotoPage}
canPreviousPage={canPreviousPage}
previousPage={previousPage}
canNextPage={canNextPage}
pageCount={pageCount}
nextPage={nextPage}
/>
</div>
{/* settings icon */}
{settingsIcon && (
<div
style={{ backgroundColor: "#F9FBFF" }}
className="mr-2 flex flex-col items-center justify-center p-1 rounded"
>
<img src={settings} className="w-5 h-5 cursor-pointer" />
</div>
)}
</div>
</div>
<table
@ -408,3 +385,7 @@ function renderRowSubComponent({ row }) {
);
}
export default BasicTable;
BasicTable.defaultProps = {
settingsIcon: false,
};

@ -13,15 +13,38 @@ export const GlobalFilter = ({ filter, setFilter }) => {
}, 400);
return (
<input
value={value || ""}
onChange={(e) => {
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"
/>
<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
value={value || ""}
onChange={(e) => {
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" }}
/>
</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": "مهدی"
},
{
"name": "mahdimahdi",
"name": "مهدی",
"order-date": "1399/09/27",
"order-price": 27,
"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