- {column.canFilter ? column.render('Filter') : null }
-
*/}
))}
@@ -143,18 +179,6 @@ const BasicTable = () => {
{...getTableBodyProps()}
className="bg-white divide-y divide-gray-200"
>
- {/* {rows.map((row) => {
- prepareRow(row)
- return(
- {
))}
-
-
-
-
-
-
-
>
);
diff --git a/src/components/ReactTable3/NOTUSINGBasicTableDefaultCode.js b/src/components/ReactTable3/NOTUSINGBasicTableDefaultCode.js
new file mode 100644
index 0000000..968b271
--- /dev/null
+++ b/src/components/ReactTable3/NOTUSINGBasicTableDefaultCode.js
@@ -0,0 +1,302 @@
+import React, { useMemo } from "react";
+
+import {
+ useTable,
+ useSortBy,
+ useGlobalFilter,
+ useFilters,
+ usePagination,
+ useRowSelect,
+ useColumnOrder,
+} from "react-table";
+
+import { COLUMNS } from "./columns";
+
+import { GlobalFilter } from "./GlobalFilter";
+
+import { Checkbox } from "./Checkbox";
+
+import MOCK_DATA from "./MOCK_DATA.json";
+
+const BasicTable = () => {
+ const columns = React.useMemo(() => COLUMNS, []);
+ const data = useMemo(() => MOCK_DATA, []);
+
+ const {
+ getTableProps,
+ getTableBodyProps,
+ headerGroups,
+ footerGroups,
+ rows,
+ page,
+ nextPage,
+ previousPage,
+ canNextPage,
+ canPreviousPage,
+ pageOptions,
+ gotoPage,
+ pageCount,
+ setPageSize,
+ prepareRow,
+ allColumns,
+ getToggleHideAllColumnsProps,
+ setColumnOrder,
+ selectedFlatRows,
+ state,
+ setGlobalFilter,
+ } = useTable(
+ {
+ columns,
+ data,
+ // initialState: { pageIndex: 2 }
+ },
+ useColumnOrder,
+ useFilters,
+ useGlobalFilter,
+ useSortBy,
+ usePagination,
+ useRowSelect,
+ (hooks) => {
+ hooks.visibleColumns.push((columns) => {
+ return [
+ {
+ id: "selection",
+ Header: ({ getToggleAllRowsSelectedProps }) => (
+
+ ),
+ Cell: ({ row }) => (
+
+ ),
+ },
+ ...columns,
+ ];
+ });
+ }
+ );
+
+ const changeOrder = () => {
+ setColumnOrder([
+ "name",
+ "order-number",
+ "user-job",
+ "order-level",
+ "order-status",
+ "order-price",
+ ]);
+ };
+
+ const { globalFilter, pageIndex, pageSize } = state;
+ // const firstPageRows = rows.slice(0, 10);
+
+ return (
+ <>
+
+ {/* search box */}
+
+ {/* pagination */}
+
+ {/* toggle columns */}
+ {/*
+
+ Toggle All
+
+ {allColumns.map((column) => (
+
+
+
+ ))}
+
*/}
+
+ {/* Change Column Order */}
+ {/* */}
+
+
+
+ {headerGroups.map((headerGroup) => (
+
+ {headerGroup.headers.map((column) => (
+
+ {column.render("Header")}
+
+ {column.isSorted
+ ? column.isSortedDesc
+ ? " 🔽"
+ : " 🔼"
+ : ""}
+
+ {/* not using */}
+ {/*
+ {column.canFilter ? column.render('Filter') : null }
+ */}
+ |
+ ))}
+
+ ))}
+
+
+
+ {/* not using */}
+ {/* {rows.map((row) => {
+ prepareRow(row)
+ return(
+
+ {row.cells.map((cell) => {
+ return
+ {cell.render('Cell')}
+ |
+ })}
+
+ )
+ })} */}
+ {page.map((row) => {
+ prepareRow(row);
+ return (
+
+ {row.cells.map((cell) => {
+ return (
+
+ {cell.render("Cell")}
+ |
+ );
+ })}
+
+ );
+ })}
+
+ {/* not using */}
+ {/* {firstPageRows.map((row) => {
+ prepareRow(row);
+ return (
+
+ {row.cells.map((cell) => {
+ return (
+
+ {cell.render("Cell")}
+ |
+ );
+ })}
+
+ );
+ })} */}
+
+
+ 10 ? "w-full" : "hidden"}`}
+ >
+ {footerGroups.map((footerGroup) => (
+
+ {footerGroup.headers.map((column) => (
+
+ {column.render("Footer")}
+ |
+ ))}
+
+ ))}
+
+
+
+
+
+ {JSON.stringify(
+ {
+ selectedFlatRows: selectedFlatRows.map((row) => row.original),
+ },
+ null,
+ 2
+ )}
+
+
+
+
+
+ Page{" "}
+
+ {pageIndex + 1} of {pageOptions.length}
+
+ {""}
+
+
+
+ | Go to Page:{" "}
+ {
+ const pageNumber = e.target.value
+ ? Number(e.target.value) - 1
+ : 0;
+ gotoPage(pageNumber);
+ }}
+ style={{ width: "50px" }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ >
+ );
+};
+
+export default BasicTable;
diff --git a/src/components/ReactTable3/index.js b/src/components/ReactTable3/index.js
index 1de6ba5..21c5d08 100644
--- a/src/components/ReactTable3/index.js
+++ b/src/components/ReactTable3/index.js
@@ -1,13 +1,73 @@
import React from "react";
import BasicTable from "./BasicTable";
-const ReactTable3 = () => {
+const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
return (
-
+
+ {/* breadCrumb */}
+
+ {breadCrumbs.map((breadCrumb, index) => (
+
+
+ {breadCrumb.name}
+
+ {Number(index) !== breadCrumbs.length - 1 && (
+
+ {" > "}
+
+ )}
+
+ ))}
+
+
+
+ {/* page Title */}
+
+ {/* page Title */}
+
+
+
- mahdi
);
};
export default ReactTable3;
+
+ReactTable3.defaultProps = {
+ breadCrumbs: [
+ {
+ name: "صفحه اصلی",
+ active: false,
+ },
+ {
+ name: "آمار و گزارشات",
+ active: false,
+ },
+ {
+ name: "فروش محصولات",
+ active: false,
+ },
+ {
+ name: "سال 1400",
+ active: true,
+ },
+ ],
+
+ title: "میزان فروش محصولات",
+ subTitle: "اطلاعات جداول مشخصاتی کارکنان مجموعه ایران تایر",
+};