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 (
+
+
+
+
+
+
+ );
+};