master
mahdi andalib 3 years ago
parent 02a9502f64
commit 17200c9c47
  1. 32
      src/components/ReactTable4/BasicTable.js
  2. 95
      src/components/ReactTable4/MOCK_DATA.json
  3. 15
      src/components/ReactTable4/index.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 = ({
/>
<div className="flex flex-row items-center justify-between">
{/* right box */}
<div className="" style={{ width: "70%" }}>
<div className="flex-1">
<Tabbar
tabs={tabs}
delTab={delTab}
@ -125,7 +125,7 @@ const BasicTable = ({
{/* left box */}
{activeTab == 0 ? (
<div
className="rounded-md p-2 flex flex-row items-center justify-end"
className="p-2 flex flex-row items-center justify-end rounded-tl rounded-tr"
style={{ backgroundColor: "#F1F6FF" }}
>
{/* search box */}
@ -192,7 +192,7 @@ const BasicTable = ({
</thead>
{/* filter row */}
{filtering && (
<thead style={{ backgroundColor: "#FAFBFF" }}>
<thead style={{ backgroundColor: "##F1F5FE" }}>
{headerGroups.map((headerGroup, index) => (
<tr key={index} {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
@ -621,7 +621,7 @@ function RenderRowSubComponent({ row, columns }) {
return (
<div
className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
style={{ backgroundColor: "#FAFBFF" }}
style={{ backgroundColor: "#FBFCFE" }}
>
{/* right */}
<div

@ -93,5 +93,100 @@
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 6,
"name": "خسرو سهرابی",
"order_date": "1400/11/09",
"order_price": 1,
"order_number": "09120023100",
"user_job": "مهندس ساختمان",
"order_status": 1,
"order_level": 1,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 7,
"name": "خسرو شکیبایی",
"order_date": "1340/04/13",
"order_price": 2,
"order_number": "09390646589",
"user_job": "بازیگر",
"order_status": 2,
"order_level": 2,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 8,
"name": "علی علوی",
"order_date": "1330/12/05",
"order_price": 3,
"order_number": "09120403285",
"user_job": "تاجر",
"order_status": 3,
"order_level": 3,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 9,
"name": "پارسا ایرانی",
"order_date": "1372/01/08",
"order_price": 4,
"order_number": "09120336508",
"user_job": "حسابدار",
"order_status": 4,
"order_level": 4,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 10,
"name": "محمد محمدی",
"order_date": "1389/01/26",
"order_price": 5,
"order_number": "0913698574",
"user_job": "دکتر",
"order_status": 5,
"order_level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
}
]

@ -1,6 +1,6 @@
import React, { useRef, useState } from "react";
import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll";
import cancleIcon from "./zarbedar-icon.svg";
@ -8,9 +8,12 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
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 }) => {
<div className="w-1 h-5 bg-blue-500 rounded ml-1"></div>
<h2 className="text-base text-blue-900">{title}</h2>
</div>
{/* page Title */}
{/* page subTitle */}
<div className="flex flex-row items-center mt-4">
<div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
<h2 className="text-xs">{subTitle}</h2>
@ -72,7 +76,9 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
</div>
);
};
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",
}}
>
<div className="h-full py-4" onClick={(e) => setActivateTab(el.id)}>
<div className="h-full py-2" onClick={(e) => setActivateTab(el.id)}>
{el.name}
</div>
{el.id ? (

Loading…
Cancel
Save