diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js index ced51dd..38f7b2e 100644 --- a/src/components/ReactTable4/BasicTable.js +++ b/src/components/ReactTable4/BasicTable.js @@ -1,9 +1,19 @@ import React, { useMemo, useState } from "react"; import "./index.scss"; -import { ColumnSearch } from "./ColumnSearch.js"; -import { ToggleColumns } from "./ToggleColumns.js"; + import { Tabbar } from "./index"; +import MOCK_DATA from "./MOCK_DATA.json"; + +import { ColumnSearch } from "./ColumnSearch"; +import { GlobalFilter } from "./GlobalFilter"; + +import { ToggleColumns } from "./ToggleColumns"; +import { COLUMNS } from "./columns"; +import { Pagination } from "./Pagination"; +import { GoToPage } from "./GoToPage"; +import { Settings } from "./Settings"; +import { Checkbox } from "./Checkbox"; import { useTable, @@ -16,16 +26,6 @@ import { useExpanded, } from "react-table"; -import { COLUMNS } from "./columns"; -import { GlobalFilter } from "./GlobalFilter"; - -import { Pagination } from "./Pagination"; -import { GoToPage } from "./GoToPage"; -import { Settings } from "./Settings"; - -import { Checkbox } from "./Checkbox"; -import MOCK_DATA from "./MOCK_DATA.json"; - const BasicTable = ({ settingsIcon, addTab, @@ -114,7 +114,7 @@ const BasicTable = ({ />
{/* right box */} -
+
{/* search box */} @@ -192,7 +192,7 @@ const BasicTable = ({ {/* filter row */} {filtering && ( - + {headerGroups.map((headerGroup, index) => ( {headerGroup.headers.map((column) => ( @@ -621,7 +621,7 @@ function RenderRowSubComponent({ row, columns }) { return (
{/* right */}
{ const [tabs, setTabs] = useState([ { name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 }, ]); + let [activeTab, setActivateTab] = useState(0); + const stateRef = useRef(); const stateActiveRef = useRef(); + stateRef.current = tabs; stateActiveRef.current = activeTab; @@ -19,6 +22,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => { if (stateRef.current.find((e) => e.id === newTab.id)) return; setTabs([...stateRef.current, newTab]); }; + const delTab = (id) => { setTabs(stateRef.current.filter((e) => e.id != id)); if (stateActiveRef.current == id) setActivateTab(0); @@ -55,7 +59,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {

{title}

- {/* page Title */} + {/* page subTitle */}

{subTitle}

@@ -72,7 +76,9 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
); }; + window.isDown = false; + export default ReactTable4; export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) { @@ -109,14 +115,13 @@ export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) { if (window.isDown) return e.preventDefault(); }} aria-current="page" - className="flex flex-row items-center text-sm text-center active px-4 rounded-sm mx-1" + className="flex flex-row items-center text-sm text-center active rounded-sm px-4" style={{ backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF", - color: activeTab === el.id ? "#fff" : "#000", }} > -
setActivateTab(el.id)}> +
setActivateTab(el.id)}> {el.name}
{el.id ? (