update 7 files

package.json

@@ -25,6 +25,7 @@
     "sass": "^1.45.0",
     "sweetalert2": "^11.3.4",
     "tw-elements": "^1.0.0-alpha8",
+    "use-draggable-scroll": "^0.1.0",
     "web-vitals": "^2.1.2"
   },
   "scripts": {

src/components/ReactTable3/BasicTable.js

@@ -11,7 +11,7 @@ import {
   useRowSelect,
   useColumnOrder,
   useExpanded,
-  useResizeColumns
+  useResizeColumns,
 } from "react-table";
 
 import { COLUMNS } from "./columns";
@@ -24,14 +24,13 @@ import MOCK_DATA from "./MOCK_DATA.json";
 export function SelectColumnFilter({
   column: { filterValue, setFilter, preFilteredRows, id, render },
 }) {
-
   const options = React.useMemo(() => {
-  const options = new Set()
-    preFilteredRows.forEach(row => {
-      options.add(row.values[id])
-    })
-    return [...options.values()]
-  }, [id, preFilteredRows])
+    const options = new Set();
+    preFilteredRows.forEach((row) => {
+      options.add(row.values[id]);
+    });
+    return [...options.values()];
+  }, [id, preFilteredRows]);
 
   // Render a multi-select box
   return (
@@ -42,50 +41,40 @@ export function SelectColumnFilter({
         name={id}
         id={id}
         value={filterValue}
-        onChange={e => {
-          setFilter(e.target.value || undefined)
+        onChange={(e) => {
+          setFilter(e.target.value || undefined);
         }}
       >
-        <option className="text-xs" value="">همه</option>
+        <option className="text-xs" value="">
+          همه
+        </option>
         {options.map((option, i) => (
           <option key={i} value={option} className="text-xs">
             {(() => {
               if (option === 1) {
-              return (
-                 "وضعیت عادی"
-              );
+                return "وضعیت عادی";
               } else if (option === 2) {
-              return (
-                "اعلان سطح هشدار"
-             );
+                return "اعلان سطح هشدار";
               } else if (option === 3) {
-              return (
-                "بررسی و پیگیری"
-             );
+                return "بررسی و پیگیری";
               } else if (option === 4) {
-              return (
-                "وضعیت بحرانی"
-             );
+                return "وضعیت بحرانی";
               } else {
-              return (
-                " وضعیت پایدار"
-              );
+                return " وضعیت پایدار";
               }
             })()}{" "}
-
           </option>
         ))}
-        
       </select>
     </label>
-  )
+  );
 }
 
 const BasicTable = () => {
   const columns = React.useMemo(() => COLUMNS, []);
   const data = useMemo(() => MOCK_DATA, []);
 
-//   اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
+  //   اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
   const isEven = (idx) => idx % 2 === 0;
 
   const {
@@ -232,7 +221,6 @@ const BasicTable = () => {
             {">>"}
           </button>
         </div>
-
       </div>
       {/*  */}
       {/* toggle columns */}
@@ -257,7 +245,7 @@ const BasicTable = () => {
       >
         <thead className="" style={{ backgroundColor: "#F3F8FF" }}>
           {headerGroups.map((headerGroup) => (
-            <tr {...headerGroup.getHeaderGroupProps()} >
+            <tr {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map((column) => (
                 <th
                   {...column.getHeaderProps(column.getSortByToggleProps())}
@@ -286,7 +274,9 @@ const BasicTable = () => {
           {page.map((row, idx) => {
             prepareRow(row);
             return (
-              <tr {...row.getRowProps()} 
+              <React.Fragment>
+                <tr
+                  {...row.getRowProps()}
                   //   className={isEven(idx) ? "bg-gray-600" : "bg-white"}
                 >
                   {row.cells.map((cell) => {
@@ -302,6 +292,14 @@ const BasicTable = () => {
                     );
                   })}
                 </tr>
+                {row.isExpanded ? (
+                  <tr>
+                    <td colSpan={headerGroups[0].headers.length}>
+                      {renderRowSubComponent({ row: row.values })}
+                    </td>
+                  </tr>
+                ) : null}
+              </React.Fragment>
             );
           })}
         </tbody>
@@ -372,5 +370,13 @@ const BasicTable = () => {
     </>
   );
 };
-
+function renderRowSubComponent({ row }) {
+  return (
+    <div className="pl-2 pr-5 bg-blue-200">
+      نام‌: {row.name}
+      <br />
+      <button className="bg-blue-400">ویرایش</button>
+    </div>
+  );
+}
 export default BasicTable;

src/components/ReactTable3/Buttons.js

@@ -1,20 +1,26 @@
-import arrowIcon from './arrow-icon.svg';
-import more from './more.svg';
-import edit from './edit.svg';
+import arrowIcon from "./arrow-icon.svg";
+import more from "./more.svg";
+import edit from "./edit.svg";
 
-import { useState } from 'react';
+import { useState } from "react";
 
-
-
-export function Buttons({  }) {
+export function Buttons({ row }) {
   const [activeDetails, setActiveDetails] = useState(null);
   return (
     <div className="flex flex-row items-center justify-end">
       <button
         className="flex flex-row items-center justify-around  p-2 rounded border border-gray-300 mx-1"
-            onClick={ () => setActiveDetails(!activeDetails) }>
+        onClick={() => setActiveDetails(!activeDetails)}
+        {...row.getToggleRowExpandedProps()}
+      >
         جزیات
-          <img src={arrowIcon} alt="" className={`w-3 cursor-pointer mr-2 ${activeDetails ? "rotate-60" : "rotate-90"}`} />
+        <img
+          src={arrowIcon}
+          alt=""
+          className={`w-3 cursor-pointer mr-2 ${
+            activeDetails ? "rotate-60" : "rotate-90"
+          }`}
+        />
       </button>
       <div className="p-2 rounded border border-gray-300 cursor-pointer mx-1">
         <img src={edit} alt="" className="w-4" />
@@ -22,4 +28,4 @@ export function Buttons({  }) {
       <img src={more} alt="" className="w-5 cursor-pointer rotate-90 mx-1" />
     </div>
   );
-  }
+}

src/components/ReactTable3/columns.js

@@ -7,10 +7,9 @@ import { ColumnFilter } from "./ColumnFilter";
 import { OrderStatus } from "./OrderStatus";
 import { OrderLevel } from "./OrderLevel";
 import { Buttons } from "./Buttons";
-import  {EditButtons}  from "./EditButtons";
+import { EditButtons } from "./EditButtons";
 
 export const COLUMNS = [
-  
   {
     Header: "نام و نام خانوادگی",
     Footer: "نام و نام خانوادگی",
@@ -52,7 +51,7 @@ export const COLUMNS = [
     Footer: "سطح اهمیت",
     accessor: "order-level",
     Cell: OrderLevel,
-    Filter: SelectColumnFilter, 
+    // Filter: SelectColumnFilter,
     // new
   },
   {

src/components/ReactTable3/index.js

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useRef } from "react";
 import BasicTable from "./BasicTable";
+// import useDraggableScroll from "use-draggable-scroll";
 
 const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
   return (
@@ -40,13 +41,82 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
           <h2 className="text-sm">{subTitle}</h2>
         </div>
       </div>
-
+      <Tabbar />
       <BasicTable />
     </div>
   );
 };
-
+window.isDown = false;
 export default ReactTable3;
+function Tabbar({}) {
+  const ref = useRef(null);
+
+  // const { onMouseDown } = useDraggableScroll(ref);
+  const tabs = [
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+  ];
+  return (
+    <ul
+      className="tabbar flex no-scrollbar  border-b border-gray-200 dark:border-gray-700 overflow-x-scroll scrolling-touch"
+      onMouseDown={(e) => {
+        const slider = window.document.querySelector(".tabbar");
+        window.isDown = true;
+        window.startX = e.pageX - slider.offsetLeft;
+        window.scrollLeft = slider.scrollLeft;
+      }}
+      onMouseLeave={(e) => {
+        window.isDown = false;
+      }}
+      onMouseUp={(e) => {
+        window.isDown = false;
+      }}
+      onMouseMove={(e) => {
+        const slider = window.document.querySelector(".tabbar");
+        if (!window.isDown) return;
+        e.preventDefault();
+        const x = e.pageX - slider.offsetLeft;
+        const walk = (x - window.startX) * 1;
+        slider.scrollLeft = window.scrollLeft - walk;
+      }}
+    >
+      {tabs.map((el) => (
+        <li className="mr-2 ">
+          <span
+            onClick={(e) => {
+              if (window.isDown) return e.preventDefault();
+              ///do here
+            }}
+            aria-current="page"
+            className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500"
+          >
+            <span className="p-2">
+              {el} <span className="p-2">x</span>
+            </span>
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+}
 
 ReactTable3.defaultProps = {
   breadCrumbs: [

src/components/ReactTable3/index.scss

@@ -4,3 +4,13 @@
 .customeClass1 .customeClass2 span {
   display: none !important;
 }
+.no-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+.tabbar{
+  cursor: pointer;
+}
+.active2 ,.active2 li a{
+  cursor: move !important;
+}