- {data.map((item, index) => (
-
-
-
{item.fileName}
-
- {item.fileSize}
-
-
- ))}
+ {activeList === false && (
+
+ {rows.map((row, index) => {
+ prepareRow(row);
+ return (
+
+
+
{row.original.fileName}
+
+ {row.original.fileSize}
+
+
+ );
+ })}
)}
{/* bottom table */}
@@ -418,6 +506,7 @@ BasicTable.defaultProps = {
thead: false,
goToPage: false,
showMore: false,
+ filterBarDefault: false,
// listView: [
// { icon: grid, click: () => setActiveList(false) },
diff --git a/src/components/ReactTable5/COLUMNS.js b/src/components/ReactTable5/COLUMNS.js
index 54e254c..d8e51d7 100644
--- a/src/components/ReactTable5/COLUMNS.js
+++ b/src/components/ReactTable5/COLUMNS.js
@@ -1,20 +1,17 @@
import { format } from "date-fns";
-import BasicTable, { CheckBox } from "../ReactTable5/BasicTable";
+import BasicTable, {
+ CheckBox,
+ SelectColumnFilter,
+} from "../ReactTable5/BasicTable";
-import { OrderStatus } from "./OrderStatus";
-import { OrderLevel } from "./OrderLevel";
-import { Buttons } from "./Buttons";
-import { EditButtons } from "./EditButtons";
-import { SelectColumnFilter } from "./SelectColumnFilter.js";
-import { SelectColumnFilter2 } from "./SelectColumnFilter2.js";
-import { SliderColumnFilter } from "./SliderColumnFilter.js";
+import { FileType } from "./FileType";
export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
{
Header: "چک باکس",
accessor: CheckBox,
- className: "bg-red-100 w-7",
+ className: "w-7",
},
{
Header: "ایکن فایل",
@@ -30,6 +27,8 @@ export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
{
Header: "نوع فایل",
accessor: "fileType",
+ Cell: FileType,
+ Filter: SelectColumnFilter, // new
// className: "bg-red-500 ",
},
{
diff --git a/src/components/ReactTable5/FileType.js b/src/components/ReactTable5/FileType.js
new file mode 100644
index 0000000..98d2374
--- /dev/null
+++ b/src/components/ReactTable5/FileType.js
@@ -0,0 +1,26 @@
+export function FileType({ value }) {
+ return (
+
+ {(() => {
+ switch (value) {
+ case 1:
+ return JPG;
+ case 2:
+ return PNG;
+
+ case 3:
+ return PDF;
+
+ case 4:
+ return CSV;
+
+ case 5:
+ return PPT;
+
+ default:
+ return MP4;
+ }
+ })()}
+
+ );
+}
diff --git a/src/components/ReactTable5/FilterFileType.js b/src/components/ReactTable5/FilterFileType.js
new file mode 100644
index 0000000..17f1da3
--- /dev/null
+++ b/src/components/ReactTable5/FilterFileType.js
@@ -0,0 +1,58 @@
+import React from "react";
+
+export const FilterFileType = ({
+ column: { filterValue, setFilter, preFilteredRows, id, render },
+}) => {
+ const options = React.useMemo(() => {
+ const options = new Set();
+ preFilteredRows.forEach((row) => {
+ options.add(row.values[id]);
+ });
+ return [...options.values()];
+ }, [id, preFilteredRows]);
+
+ return (
+
+ );
+};
diff --git a/src/components/ReactTable5/GlobalFilter.js b/src/components/ReactTable5/GlobalFilter.js
index 5932ea8..a6309e2 100644
--- a/src/components/ReactTable5/GlobalFilter.js
+++ b/src/components/ReactTable5/GlobalFilter.js
@@ -14,7 +14,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
}, 400);
return (
-
+
{activeSearchBox && (
{
onFocus={() => setActiveSearchBox(true)}
// onBlur={() => setActiveSearchBox(false)}
type="text"
- className={`text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
+ className={`w-full text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
/>
diff --git a/src/components/ReactTable5/MOCK_DATA2.json b/src/components/ReactTable5/MOCK_DATA2.json
index ed2871f..522829d 100644
--- a/src/components/ReactTable5/MOCK_DATA2.json
+++ b/src/components/ReactTable5/MOCK_DATA2.json
@@ -2,55 +2,81 @@
{
"id": 1,
"filePic": "picture",
- "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "تهران شهری برای آیندگان",
- "fileType": "JPG",
+ "fileType": 1,
"fileSize": "23.5KB",
"fileDate": "1400/02/12"
},
{
"id": 2,
"filePic": "picture",
- "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "عکس سال 99 نوروز",
- "fileType": "JPG",
+ "fileType": 2,
"fileSize": "69.5KB",
"fileDate": "1400/02/10"
},
{
"id": 3,
"filePic": "picture",
- "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "دری به سوی بی نهایت",
- "fileType": "JPG",
+ "fileType": 3,
"fileSize": "1.5MB",
"fileDate": "1400/04/24"
},
{
"id": 4,
"filePic": "picture",
- "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "فایل اکسل دانش آموزان",
- "fileType": "JPG",
+ "fileType": 4,
"fileSize": "20MB",
"fileDate": "1397/04/20"
},
{
"id": 5,
"filePic": "picture",
- "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "صحرای بدون شن",
- "fileType": "JPG",
+ "fileType": 5,
"fileSize": "150MB",
"fileDate": "1399/04/20"
},
{
"id": 6,
"filePic": "picture",
- "url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "فایل ایلاستریتور موارد اصلاحی طرح",
- "fileType": "JPG",
+ "fileType": 6,
"fileSize": "150MB",
"fileDate": "1393/10/20"
+ },
+ {
+ "id": 7,
+ "filePic": "picture",
+ "fileName": "تهران شهری برای آیندگان",
+ "fileType": 1,
+ "fileSize": "23.5KB",
+ "fileDate": "1400/02/12"
+ },
+ {
+ "id": 8,
+ "filePic": "picture",
+ "fileName": "عکس سال 99 نوروز",
+ "fileType": 2,
+ "fileSize": "69.5KB",
+ "fileDate": "1400/02/10"
+ },
+ {
+ "id": 9,
+ "filePic": "picture",
+ "fileName": "دری به سوی بی نهایت",
+ "fileType": 3,
+ "fileSize": "1.5MB",
+ "fileDate": "1400/04/24"
+ },
+ {
+ "id": 10,
+ "filePic": "picture",
+ "fileName": "فایل اکسل دانش آموزان",
+ "fileType": 4,
+ "fileSize": "20MB",
+ "fileDate": "1397/04/20"
}
]