diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index 3670238..432f203 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/src/components/ReactTable4/BasicTable.js @@ -1,7 +1,8 @@ -import React, { useMemo } from "react"; +import React, { useMemo, useState } from "react"; import "./index.scss"; import { ColumnSearch } from "./ColumnSearch.js"; +import { Tabbar } from "./index"; import { useTable, @@ -28,6 +29,9 @@ const BasicTable = ({ settingsIcon }) => { const columns = React.useMemo(() => COLUMNS, []); const data = useMemo(() => MOCK_DATA, []); + //selected row + // const [selectedFilterRow, setSelectedFilterRow] = useState(null); + const defaultColumn = useMemo(() => { return { Filter: ColumnSearch, @@ -103,9 +107,14 @@ const BasicTable = ({ settingsIcon }) => { // }; const { globalFilter, pageIndex, pageSize } = state; - // const firstPageRows = rows.slice(0, 10); return ( <> + {/* */} {/* toggle columns */} {/*
@@ -122,7 +131,11 @@ const BasicTable = ({ settingsIcon }) => {
*/} {/* Change Column Order */} {/* */} -
+
+ {/* right box */} +
+ +
{/* left box */}
{ ))} {/* filter row */} + {/* {selectedFilterRow === !null && ( )} */} {headerGroups.map((headerGroup) => ( {headerGroup.headers.map((column) => ( - + {column.canFilter ? column.render("Filter") : null} ))} @@ -207,7 +221,6 @@ const BasicTable = ({ settingsIcon }) => { prepareRow(row); return ( - { {row.isExpanded ? ( - {renderRowSubComponent({ rows: row.original })} + {renderRowSubComponent({ row: row.original })} {/* {renderRowSubComponent({ row: row.values })} */} @@ -322,7 +335,8 @@ const BasicTable = ({ settingsIcon }) => { ); }; -function renderRowSubComponent({ rows }) { +function renderRowSubComponent({ row }) { + console.log(row); const persian = { weight: "وزن", pageNumber: "تعداد صفحات", @@ -334,7 +348,10 @@ function renderRowSubComponent({ rows }) { publishedYear: "سال انتشار", }; return ( -
+
{/* right */}
نام و نام خانوادگی: - {rows.name} + {row.name}

{/* 2 */} @@ -365,7 +382,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > تاریخ سفارش: - {rows.order_date} + {row.order_date}

{/* 3 */} @@ -379,7 +396,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > مبلغ سفارش: - {rows.order_price} + {row.order_price}

{/* 4 */} @@ -393,7 +410,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > شماره سفارش: - {rows.order_number} + {row.order_number}

{/* 5 */} @@ -407,7 +424,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > شغل کاربر: - {rows.user_job} + {row.user_job}

{/* 6 */} @@ -421,7 +438,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > وضعیت سفارش: - {rows.order_status} + {row.order_status}

{/* 7 */} @@ -435,7 +452,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > سطح اهمیت: - {rows.order_level} + {row.order_level}

{/* 8 */} @@ -449,7 +466,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > محل تولد: - {rows.birth_place} + {row.birth_place}

{/* 9 */} @@ -463,7 +480,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > تلفن محل کار: - {rows.office_phone} + {row.office_phone}

{/* 10 */} @@ -477,7 +494,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > تحصیلات: - {rows.education} + {row.education}

{/* 11 */} @@ -491,7 +508,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > تاریخ تولد: - {rows.birth_day} + {row.birth_day}

{/* 12 */} @@ -505,7 +522,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > شغل: - {rows.job} + {row.job}

{/* 13 */} @@ -519,7 +536,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > دانشگاه: - {rows.uni} + {row.uni}

{/* 14 */} @@ -533,7 +550,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > رشته تحصیلی: - {rows.field_study} + {row.field_study}

{/* 15 */} @@ -547,7 +564,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > اخلاق: - {rows.behaviour} + {row.behaviour}

{/* 16 */} @@ -561,7 +578,7 @@ function renderRowSubComponent({ rows }) { style={{ borderColor: "#65A9FF" }} > نشانی: - {rows.address} + {row.address}

@@ -571,12 +588,15 @@ function renderRowSubComponent({ rows }) { style={{ width: "10%" }} > - diff --git a/src/components/ReactTable4/Buttons.js b/src/components/ReactTable4/Buttons.js index 075c0e7..24db09d 100644 --- a/src/components/ReactTable4/Buttons.js +++ b/src/components/ReactTable4/Buttons.js @@ -7,13 +7,11 @@ import { useState } from "react"; export function Buttons({ row }) { const [activeDetails, setActiveDetails] = useState(null); return ( -
+
*/}
); diff --git a/src/components/ReactTable4/index.js b/src/components/ReactTable4/index.js index 49b95f7..28c6101 100644 --- a/src/components/ReactTable4/index.js +++ b/src/components/ReactTable4/index.js @@ -48,7 +48,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => { window.isDown = false; export default ReactTable4; -function Tabbar({}) { +export function Tabbar({}) { const ref = useRef(null); // const { onMouseDown } = useDraggableScroll(ref); diff --git a/src/components/ReactTable4/zarbedar-icon.svg b/src/components/ReactTable4/zarbedar-icon.svg new file mode 100644 index 0000000..57c3638 --- /dev/null +++ b/src/components/ReactTable4/zarbedar-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + +