update 8 files

src/components/ReactTable4/BasicTable.js

@@ -26,9 +26,20 @@ import { Settings } from "./Settings";
 import { Checkbox } from "./Checkbox";
 import MOCK_DATA from "./MOCK_DATA.json";
 
-const BasicTable = ({ settingsIcon }) => {
+const BasicTable = ({
-  const columns = React.useMemo(() => COLUMNS, []);
+  settingsIcon,
+  addTab,
+  tabs,
+  delTab,
+  setActivateTab,
+  activeTab,
+}) => {
   const data = useMemo(() => MOCK_DATA, []);
+  const [filtering, setFiltering] = useState(false);
+  const columns = React.useMemo(
+    () => COLUMNS({ filtering, setFiltering, addTab }),
+    []
+  );
 
   const defaultColumn = useMemo(() => {
     return {
@@ -104,141 +115,212 @@ const BasicTable = ({ settingsIcon }) => {
       <div className="flex flex-row items-center justify-between">
         {/* right box */}
         <div className="" style={{ width: "70%" }}>
-          <Tabbar />
+          <Tabbar
+            tabs={tabs}
+            delTab={delTab}
+            setActivateTab={setActivateTab}
+            activeTab={activeTab}
+          />
         </div>
         {/* left box */}
-        <div
+        {activeTab == 0 ? (
-          className="rounded-md p-2 flex flex-row items-center justify-end"
+          <div
-          style={{ backgroundColor: "#F1F6FF" }}
+            className="rounded-md p-2 flex flex-row items-center justify-end"
-        >
+            style={{ backgroundColor: "#F1F6FF" }}
-          {/* search box */}
+          >
-          <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
+            {/* search box */}
-          {/* pagination */}
+            <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
-          <div
+            {/* pagination */}
-            className="flex flex-row items-center p-1 rounded"
-            style={{ backgroundColor: "#F9FBFF" }}
-          >
-            {/* go to page */}
-            <GoToPage
-              pageIndex={pageIndex}
-              gotoPage={gotoPage}
-              pageOptions={pageOptions}
-            />
-            {/* vertical line */}
             <div
-              className={`w-0.5 h-4 mr-2`}
+              className="flex flex-row items-center p-1 rounded"
-              style={{ backgroundColor: "#65A9FF" }}
+              style={{ backgroundColor: "#F9FBFF" }}
-            ></div>
+            >
-            {/* arrows */}
+              {/* go to page */}
-            <Pagination
+              <GoToPage
-              gotoPage={gotoPage}
+                pageIndex={pageIndex}
-              canPreviousPage={canPreviousPage}
+                gotoPage={gotoPage}
-              previousPage={previousPage}
+                pageOptions={pageOptions}
-              canNextPage={canNextPage}
+              />
-              pageCount={pageCount}
+              {/* vertical line */}
-              nextPage={nextPage}
+              <div
-            />
+                className={`w-0.5 h-4 mr-2`}
+                style={{ backgroundColor: "#65A9FF" }}
+              ></div>
+              {/* arrows */}
+              <Pagination
+                gotoPage={gotoPage}
+                canPreviousPage={canPreviousPage}
+                previousPage={previousPage}
+                canNextPage={canNextPage}
+                pageCount={pageCount}
+                nextPage={nextPage}
+              />
+            </div>
+            {/* settings icon */}
+            {settingsIcon && <Settings />}
           </div>
-          {/* settings icon */}
+        ) : null}
-          {settingsIcon && <Settings />}
-        </div>
       </div>
-      <table
+      {activeTab == 0 ? (
-        {...getTableProps()}
+        <>
-        className="min-w-full divide-y divide-gray-200"
+          <table
-      >
+            {...getTableProps()}
-        <thead className="" style={{ backgroundColor: "#F3F8FF" }}>
+            className="min-w-full divide-y divide-gray-200"
-          {headerGroups.map((headerGroup) => (
+          >
-            <tr {...headerGroup.getHeaderGroupProps()}>
+            <thead className="" style={{ backgroundColor: "#F3F8FF" }}>
-              {headerGroup.headers.map((column) => (
+              {headerGroups.map((headerGroup, index) => (
-                <th
+                <tr key={index} {...headerGroup.getHeaderGroupProps()}>
-                  {...column.getHeaderProps(column.getSortByToggleProps())}
+                  {headerGroup.headers.map((column) => (
-                  scope="col"
+                    <th
-                  className="cursor-pointer p-4 text-right text-sm font-medium"
+                      {...column.getHeaderProps(column.getSortByToggleProps())}
-                  style={{ color: "#3287B9" }}
+                      scope="col"
-                >
+                      className="cursor-pointer p-4 text-right text-sm font-medium"
-                  {column.render("Header")}
+                      style={{ color: "#3287B9" }}
-                  <span>
+                    >
-                    {column.isSorted
+                      {column.render("Header")}
-                      ? column.isSortedDesc
+                      <span>
-                        ? " 🔽"
+                        {column.isSorted
-                        : " 🔼"
+                          ? column.isSortedDesc
-                      : ""}
+                            ? " 🔽"
-                  </span>
+                            : " 🔼"
-                </th>
+                          : ""}
-              ))}
+                      </span>
-            </tr>
+                    </th>
-          ))}
+                  ))}
-        </thead>
-        {/* filter row */}
-        {/* {selectedFilterRow === !null && (        )} */}
-        <thead style={{ backgroundColor: "#FAFBFF" }}>
-          {headerGroups.map((headerGroup) => (
-            <tr {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map((column) => (
-                <th {...column.getHeaderProps()} className="py-2 text-sm">
-                  {column.canFilter ? column.render("Filter") : null}
-                </th>
-              ))}
-            </tr>
-          ))}
-        </thead>
-        <tbody
-          {...getTableBodyProps()}
-          className="divide-y divide-gray-200 bg-white"
-        >
-          {page.map((row, idx) => {
-            prepareRow(row);
-            return (
-              <React.Fragment>
-                <tr
-                  {...row.getRowProps()}
-                  //   className={isEven(idx) ? "bg-gray-600" : "bg-white"}
-                >
-                  {row.cells.map((cell) => {
-                    return (
-                      <td
-                        {...cell.getCellProps()}
-                        className="p-4 whitespace-nowrap text-xs"
-                        role="cell"
-                        style={{ color: "#00253A" }}
-                      >
-                        {cell.render("Cell")}
-                      </td>
-                    );
-                  })}
                 </tr>
-                {row.isExpanded ? (
+              ))}
-                  <tr>
+            </thead>
-                    <td colSpan={headerGroups[0].headers.length}>
+            {/* filter row */}
-                      {renderRowSubComponent({ row: row.original })}
+            {filtering && (
-                      {/* {renderRowSubComponent({ row: row.values })} */}
+              <thead style={{ backgroundColor: "#FAFBFF" }}>
-                    </td>
+                {headerGroups.map((headerGroup, index) => (
+                  <tr key={index} {...headerGroup.getHeaderGroupProps()}>
+                    {headerGroup.headers.map((column) => (
+                      <th {...column.getHeaderProps()} className="py-2 text-sm">
+                        {column.canFilter ? column.render("Filter") : null}
+                      </th>
+                    ))}
                   </tr>
-                ) : null}
+                ))}
-              </React.Fragment>
+              </thead>
-            );
+            )}
-          })}
+            <tbody
-        </tbody>
+              {...getTableBodyProps()}
-        <tfoot
+              className="divide-y divide-gray-200 bg-white"
-          className={`bg-blue-900 ${rows.length > 10 ? "w-full" : "hidden"}`}
+            >
-        >
+              {page.map((row, idx) => {
-          {footerGroups.map((footerGroup) => (
+                prepareRow(row);
-            <tr {...footerGroup.getFooterGroupProps()}>
+                return (
-              {footerGroup.headers.map((column) => (
+                  <React.Fragment key={idx}>
-                <td
+                    <tr
-                  {...column.getFooterProps}
+                      {...row.getRowProps()}
-                  className="px-4 py-2 text-right text-xs"
+                      //   className={isEven(idx) ? "bg-gray-600" : "bg-white"}
-                  style={{ color: "#fff" }}
+                    >
+                      {row.cells.map((cell, index) => {
+                        return (
+                          <td
+                            key={index}
+                            {...cell.getCellProps()}
+                            className="p-4 whitespace-nowrap text-xs"
+                            role="cell"
+                            style={{ color: "#00253A" }}
+                          >
+                            {cell.render("Cell")}
+                          </td>
+                        );
+                      })}
+                    </tr>
+                    {row.isExpanded ? (
+                      <tr>
+                        <td colSpan={headerGroups[0].headers.length}>
+                          {RenderRowSubComponent({
+                            row: row.original,
+                            columns,
+                          })}
+                          {/* {RenderRowSubComponent({ row: row.values })} */}
+                        </td>
+                      </tr>
+                    ) : null}
+                  </React.Fragment>
+                );
+              })}
+            </tbody>
+            <tfoot
+              className={`bg-blue-900 ${
+                rows.length > 10 ? "w-full" : "hidden"
+              }`}
+            >
+              {footerGroups.map((footerGroup, index) => (
+                <tr key={index} {...footerGroup.getFooterGroupProps()}>
+                  {footerGroup.headers.map((column, index) => (
+                    <td
+                      key={index}
+                      {...column.getFooterProps}
+                      className="px-4 py-2 text-right text-xs"
+                      style={{ color: "#fff" }}
+                    >
+                      {column.render("Footer")}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tfoot>
+          </table>
+          <div className="mt-3 ">
+            <span className="text-sm ml-4">
+              صفحه{" "}
+              <strong className="text-indigo-500">
+                <input
+                  className="ml-1 text-xs p-1 rounded border-blue-400"
+                  type="number"
+                  defaultValue={pageIndex + 1}
+                  onChange={(e) => {
+                    const pageNumber = e.target.value
+                      ? Number(e.target.value) - 1
+                      : 0;
+                    gotoPage(pageNumber);
+                  }}
+                  style={{ width: "50px" }}
+                />{" "}
+                از {pageOptions.length}
+              </strong>
+              {""}
+            </span>
+            <select
+              className="text-white text-sm rounded cursor-pointer"
+              style={{
+                backgroundColor: "#65A9FF",
+                borderColor: "#65A9FF",
+              }}
+              value={pageSize}
+              onChange={(e) => setPageSize(Number(e.target.value))}
+            >
+              {[7, 10, 25, 50].map((pageSize) => (
+                <option
+                  key={pageSize}
+                  value={pageSize}
+                  className=" text-sm"
+                  style={{
+                    direction: "ltr",
+                    textAlign: "right",
+                  }}
                 >
-                  {column.render("Footer")}
+                  نمایش {pageSize}
-                </td>
+                </option>
               ))}
-            </tr>
+            </select>
-          ))}
+          </div>
-        </tfoot>
+        </>
-      </table>
+      ) : (
-      <pre>
+        <EditRow
+          row={
+            rows.find((e) => e.original && +e.original.id === activeTab)
+              ?.original || {}
+          }
+          columns={columns}
+        />
+      )}
+      {/* <pre>
         <code>
           {JSON.stringify(
             {
@@ -248,56 +330,283 @@ const BasicTable = ({ settingsIcon }) => {
             2
           )}
         </code>
-      </pre>
+      </pre> */}
-      <div className="mt-3 ">
-        <span className="text-sm ml-4">
-          صفحه{" "}
-          <strong className="text-indigo-500">
-            <input
-              className="ml-1 text-xs p-1 rounded border-blue-400"
-              type="number"
-              defaultValue={pageIndex + 1}
-              onChange={(e) => {
-                const pageNumber = e.target.value
-                  ? Number(e.target.value) - 1
-                  : 0;
-                gotoPage(pageNumber);
-              }}
-              style={{ width: "50px" }}
-            />{" "}
-            از {pageOptions.length}
-          </strong>
-          {""}
-        </span>
-        <select
-          className="text-white text-sm rounded cursor-pointer"
-          style={{
-            backgroundColor: "#65A9FF",
-            borderColor: "#65A9FF",
-          }}
-          value={pageSize}
-          onChange={(e) => setPageSize(Number(e.target.value))}
-        >
-          {[7, 10, 25, 50].map((pageSize) => (
-            <option
-              key={pageSize}
-              value={pageSize}
-              className=" text-sm"
-              style={{
-                direction: "ltr",
-                textAlign: "right",
-              }}
-            >
-              نمایش {pageSize}
-            </option>
-          ))}
-        </select>
-      </div>
     </>
   );
 };
-
+function EditRow({ row, columns }) {
-function renderRowSubComponent({ row }) {
+  console.log(row);
+  const persian = {
+    weight: "وزن",
+    pageNumber: "تعداد صفحات",
+    pageType: "نوع کاغذ",
+    bookNumber: "شماره شابک",
+    publisher: "انتشارات",
+    author: "نویسنده",
+    bookType: "قطع",
+    publishedYear: "سال انتشار",
+  };
+  return (
+    <div
+      className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
+      style={{ backgroundColor: "#FAFBFF" }}
+    >
+      {/* right */}
+      <div
+        className="flex flex-row  flex-wrap items-center"
+        style={{ width: "90%" }}
+      >
+        {/* 1 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            نام و نام خانوادگی:
+            <input type="text" className="mr-1 text-black" value={row.name} />
+          </p>
+        </div>
+        {/* 2 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تاریخ سفارش:
+            <span className="mr-1 text-black">{row.order_date}</span>
+          </p>
+        </div>
+        {/* 3 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            مبلغ سفارش:
+            <span className="mr-1 text-black">{row.order_price}</span>
+          </p>
+        </div>
+        {/* 4 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            شماره سفارش:
+            <span className="mr-1 text-black">{row.order_number}</span>
+          </p>
+        </div>
+        {/* 5 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            شغل کاربر:
+            <span className="mr-1 text-black">{row.user_job}</span>
+          </p>
+        </div>
+        {/* 6 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            وضعیت سفارش:
+            <span className="mr-1 text-black">
+              {columns[5].Cell({ value: row.order_status })}
+            </span>
+          </p>
+        </div>
+        {/* 7 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            سطح اهمیت:
+            <span className="mr-1 text-black">
+              {columns[6].Cell({ value: row.order_level })}
+            </span>
+          </p>
+        </div>
+        {/* 8 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            محل تولد:
+            <span className="mr-1 text-black">{row.birth_place}</span>
+          </p>
+        </div>
+        {/* 9 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تلفن محل کار:
+            <span className="mr-1 text-black">{row.office_phone}</span>
+          </p>
+        </div>
+        {/* 10 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تحصیلات:
+            <span className="mr-1 text-black">{row.education}</span>
+          </p>
+        </div>
+        {/* 11 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            تاریخ تولد:
+            <span className="mr-1 text-black">{row.birth_day}</span>
+          </p>
+        </div>
+        {/* 12 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            شغل:
+            <span className="mr-1 text-black">{row.job}</span>
+          </p>
+        </div>
+        {/* 13 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            دانشگاه:
+            <span className="mr-1 text-black">{row.uni}</span>
+          </p>
+        </div>
+        {/* 14 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            رشته تحصیلی:
+            <span className="mr-1 text-black">{row.field_study}</span>
+          </p>
+        </div>
+        {/* 15 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            اخلاق:
+            <span className="mr-1 text-black">{row.behaviour}</span>
+          </p>
+        </div>
+        {/* 16 */}
+        <div className="flex flex-row items-center mr-2 my-2">
+          <div
+            className="w-1 h-4 ml-1 rounded"
+            style={{ backgroundColor: "#EDF2FB" }}
+          ></div>
+          <p
+            className="text-xs text-blue-400"
+            style={{ borderColor: "#65A9FF" }}
+          >
+            نشانی:
+            <span className="mr-1 text-black">{row.address}</span>
+          </p>
+        </div>
+      </div>
+      {/* left */}
+      <div
+        className="flex flex-col items-end justify-end"
+        style={{ width: "10%" }}
+      >
+        <button
+          className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
+          style={{ borderColor: "#D53921", color: "#D53921" }}
+        >
+          حذف
+        </button>
+        <button
+          className="border rounded w-8/12 text-xs py-2 bg-white"
+          style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
+        >
+          جزیات بیشتر
+        </button>
+      </div>
+    </div>
+  );
+}
+function RenderRowSubComponent({ row, columns }) {
   console.log(row);
   const persian = {
     weight: "وزن",
@@ -400,7 +709,9 @@ function renderRowSubComponent({ row }) {
             style={{ borderColor: "#65A9FF" }}
           >
             وضعیت سفارش:
-            <span className="mr-1 text-black">{row.order_status}</span>
+            <span className="mr-1 text-black">
+              {columns[5].Cell({ value: row.order_status })}
+            </span>
           </p>
         </div>
         {/* 7 */}
@@ -414,7 +725,9 @@ function renderRowSubComponent({ row }) {
             style={{ borderColor: "#65A9FF" }}
           >
             سطح اهمیت:
-            <span className="mr-1 text-black">{row.order_level}</span>
+            <span className="mr-1 text-black">
+              {columns[6].Cell({ value: row.order_level })}
+            </span>
           </p>
         </div>
         {/* 8 */}

src/components/ReactTable4/Buttons.js

@@ -4,7 +4,7 @@ import edit from "./edit.svg";
 
 import { useState } from "react";
 
-export function Buttons({ row }) {
+export const Buttons = ({ row, addTab }) => {
   const [activeDetails, setActiveDetails] = useState(null);
   return (
     <div className="flex flex-row items-center justify-end">
@@ -13,7 +13,7 @@ export function Buttons({ row }) {
         onClick={() => setActiveDetails(!activeDetails)}
         {...row.getToggleRowExpandedProps()}
       >
-        جزیات
+        جزپیات
         <img
           src={arrowIcon}
           alt=""
@@ -22,10 +22,15 @@ export function Buttons({ row }) {
           }`}
         />
       </button>
-      <div className="mx-1 p-2 rounded border border-gray-300 cursor-pointer ">
+      <div
+        className="mx-1 p-2 rounded border border-gray-300 cursor-pointer"
+        onClick={() => {
+          addTab({ name: row.original.name, id: row.original.id });
+        }}
+      >
         <img src={edit} alt="" className="w-4" />
       </div>
       <img src={more} alt="" className="w-5 cursor-pointer " />
     </div>
   );
-}
+};

src/components/ReactTable4/EditButtons.js

@@ -6,9 +6,9 @@ import DropDown from "./DropDown";
 import filter from "./filter.svg";
 import plus from "./plus.svg";
 
-export function EditButtons({}) {
+export function EditButtons({ setFiltering, filtering, addTab }) {
-  const [activeFilter, setActiveFilter] = useState(null);
+  const [selectedFilterRow, setSelectedFilterRow] = useState(filtering);
-  // const [selectedFilterRow, setSelectedFilterRow] = useState(null);
+  // setFiltering(selectedFilterRow);
 
   return (
     <div className="flex flex-row items-center justify-end">
@@ -16,6 +16,10 @@ export function EditButtons({}) {
       <button
         className="mx-1  flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
         style={{ backgroundColor: "#65A9FF" }}
+        onClick={() => {
+          console.log("new!!!");
+          addTab({ id: "new", name: "ردیف جدید" });
+        }}
       >
         ثبت جدید
         <img src={plus} alt="" className={`cursor-pointer w-2 mr-1 `} />
@@ -26,8 +30,11 @@ export function EditButtons({}) {
         // onClick={() => setSelectedFilterRow(!selectedFilterRow)}
         alt=""
         className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8 
-        ${activeFilter ? "border" : "border-0"}`}
+        ${selectedFilterRow ? "border" : "border-0"}`}
-        onClick={() => setActiveFilter(!activeFilter)}
+        onClick={() => {
+          setFiltering(!selectedFilterRow);
+          setSelectedFilterRow(!selectedFilterRow);
+        }}
       />
       {/* dropDown */}
       <DropDown />

src/components/ReactTable4/MOCK_DATA.json

@@ -1,5 +1,6 @@
 [
   {
+    "id": 1,
     "name": "خسرو سهرابی",
     "order_date": "1400/11/09",
     "order_price": 1,
@@ -18,6 +19,7 @@
     "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
   },
   {
+    "id": 2,
     "name": "خسرو شکیبایی",
     "order_date": "1340/04/13",
     "order_price": 2,
@@ -36,6 +38,7 @@
     "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
   },
   {
+    "id": 3,
     "name": "علی علوی",
     "order_date": "1330/12/05",
     "order_price": 3,
@@ -54,6 +57,7 @@
     "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
   },
   {
+    "id": 4,
     "name": "پارسا ایرانی",
     "order_date": "1372/01/08",
     "order_price": 4,
@@ -72,6 +76,7 @@
     "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
   },
   {
+    "id": 5,
     "name": "محمد محمدی",
     "order_date": "1389/01/26",
     "order_price": 5,
@@ -89,4 +94,4 @@
     "address": "خیابان  شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
     "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
   }
-]
+]

src/components/ReactTable4/OrderStatus.js

@@ -1,55 +1,56 @@
 export function OrderStatus({ value }) {
-    return (
+  value = +value;
-      <div className="">
+
-        {(() => {
+  return (
-          if (value === 1) {
+    <div className="">
-            return (
+      {(() => {
-              <span
+        if (value === 1) {
-                style={{ backgroundColor: "#E2FFE377", color: "#00613D" }}
+          return (
-                className="p-2 rounded"
+            <span
-              >
+              style={{ backgroundColor: "#E2FFE377", color: "#00613D" }}
-                ارسال شده
+              className="p-2 rounded"
-              </span>
+            >
-            );
+              ارسال شده
-          } else if (value === 2) {
+            </span>
-            return (
+          );
-              <span
+        } else if (value === 2) {
-                style={{ backgroundColor: "#FFF78733", color: "#ECF150" }}
+          return (
-                className="p-2 rounded"
+            <span
-              >
+              style={{ backgroundColor: "#FFF78733", color: "#ECF150" }}
-                رسیدگی
+              className="p-2 rounded"
-              </span>
+            >
-            );
+              رسیدگی
-          } else if (value === 3) {
+            </span>
-            return (
+          );
-              <span
+        } else if (value === 3) {
-                style={{ backgroundColor: "#FFD8CC33", color: "#611100" }}
+          return (
-                className="p-2 rounded"
+            <span
-              >
+              style={{ backgroundColor: "#FFD8CC33", color: "#611100" }}
-                لغو شده
+              className="p-2 rounded"
-              </span>
+            >
-            );
+              لغو شده
-          } else if (value === 4) {
+            </span>
-            return (
+          );
-              <span
+        } else if (value === 4) {
-                style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }}
+          return (
-                className="p-2 rounded"
+            <span
-              >
+              style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }}
-                پیگیری
+              className="p-2 rounded"
-              </span>
+            >
-            );
+              پیگیری
-          } else {
+            </span>
-            return (
+          );
-              <span
+        } else {
-                style={{ backgroundColor: "#DBCCFF33", color: "#440061" }}
+          return (
-                className="p-2 rounded"
+            <span
-              >
+              style={{ backgroundColor: "#DBCCFF33", color: "#440061" }}
-                خطری
+              className="p-2 rounded"
-              </span>
+            >
-            );
+              خطری
-          }
+            </span>
-        })()}{" "}
+          );
-      </div>
+        }
-    );
+      })()}{" "}
-  }
+    </div>
-  
+  );
+}

src/components/ReactTable4/ToggleColumns.js

@@ -6,14 +6,16 @@ export const ToggleColumns = ({ allColumns, getToggleHideAllColumnsProps }) => {
       <div>
         <input type="checkbox" {...getToggleHideAllColumnsProps()} /> Toggle All
       </div>
-      {allColumns.map((column) => (
+      {allColumns
-        <div key={column.id}>
+        .filter((column) => column.Header === "string")
-          <label>
+        .map((column, index) => (
-            <input type="checkbox" {...column.getToggleHiddenProps()} />
+          <div key={index}>
-            {column.Header}
+            <label>
-          </label>
+              <input type="checkbox" {...column.getToggleHiddenProps()} />
-        </div>
+              {column.Header}
-      ))}
+            </label>
+          </div>
+        ))}
     </div>
   );
 };

src/components/ReactTable4/columns.js

@@ -10,7 +10,7 @@ import { SelectColumnFilter } from "./SelectColumnFilter.js";
 import { SelectColumnFilter2 } from "./SelectColumnFilter2.js";
 import { SliderColumnFilter } from "./SliderColumnFilter.js";
 
-export const COLUMNS = [
+export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
   {
     Header: "نام و نام خانوادگی",
     Footer: "نام و نام خانوادگی",
@@ -57,10 +57,10 @@ export const COLUMNS = [
     Filter: SelectColumnFilter,
   },
   {
-    Header: EditButtons,
+    Header: () => EditButtons({ setFiltering, filtering, addTab }),
     Footer: "ویرایش",
     accessor: "edit",
-    Cell: Buttons,
+    Cell: ({ row }) => Buttons({ row, addTab }),
     disableSortBy: true,
     disableFilters: true,
   },

src/components/ReactTable4/index.js

@@ -1,16 +1,35 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import BasicTable from "./BasicTable";
 // import useDraggableScroll from "use-draggable-scroll";
 
 import cancleIcon from "./zarbedar-icon.svg";
 
 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;
+
+  const addTab = (newTab) => {
+    setActivateTab(newTab.id);
+    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);
+  };
+
   return (
     <div className="my-10 w-11/12 mx-auto">
       {/* breadCrumb */}
       <div className="flex flex-row items-center">
         {breadCrumbs.map((breadCrumb, index) => (
-          <div className="flex flex-row items-center">
+          <div className="flex flex-row items-center" key={index}>
             <span
               className={`cursor-pointer text-xs hover:text-blue-900  ${
                 breadCrumb.active ? "text-blue-900" : "text-blue-400"
@@ -42,19 +61,23 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
           <h2 className="text-xs">{subTitle}</h2>
         </div>
       </div>
-      <Tabbar />
+      {/* <Tabbar tabs={tabs} /> */}
-      <BasicTable />
+      <BasicTable
+        addTab={addTab}
+        tabs={tabs}
+        delTab={delTab}
+        setActivateTab={setActivateTab}
+        activeTab={activeTab}
+      />
     </div>
   );
 };
 window.isDown = false;
 export default ReactTable4;
 
-export function Tabbar({}) {
+export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
-  const ref = useRef(null);
-
   // const { onMouseDown } = useDraggableScroll(ref);
-  const tabs = ["فروشگاه دانوین", "مهدی عندلیب"];
+
   return (
     <ul
       className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
@@ -79,17 +102,34 @@ export function Tabbar({}) {
         slider.scrollLeft = window.scrollLeft - walk;
       }}
     >
-      {tabs.map((el) => (
+      {tabs.map((el, index) => (
         <li
+          key={index}
           onClick={(e) => {
             if (window.isDown) return e.preventDefault();
           }}
           aria-current="page"
-          className="flex flex-row items-center text-sm text-center active px-4 py-4 rounded-sm mx-1"
+          className="flex flex-row items-center text-sm text-center active px-4  rounded-sm mx-1"
-          style={{ backgroundColor: "#F1F6FF" }}
+          style={{
+            backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
+
+            color: activeTab === el.id ? "#fff" : "#000",
+          }}
         >
-          <span className="">{el}</span>
+          <div className="h-full py-4" onClick={(e) => setActivateTab(el.id)}>
-          <img src={cancleIcon} className="w-2 h-2 mr-2" />
+            {el.name}
+          </div>
+          {el.id ? (
+            <img
+              src={cancleIcon}
+              className="w-2 h-2 mr-2"
+              alt=""
+              onClick={(e) => {
+                e.preventDefault();
+                delTab(el.id);
+              }}
+            />
+          ) : null}
         </li>
       ))}
     </ul>