update

src/App.js

@@ -82,7 +82,7 @@ function App() {
         {/* <AdvertisementDesign3 /> */}
         {/* <CourseChapter /> */}
         {/* <SidebarMenu /> */}
-        <SidebarDesign2 />
+        {/* <SidebarDesign2 /> */}
         {/* <SimpleBarChart /> */}
         {/* <SpecifiedDomainRadarChart /> */}
         {/* <Design1 /> */}

src/components/ReactTable3/BasicTable.js

@@ -8,6 +8,7 @@ import {
   usePagination,
   useRowSelect,
   useColumnOrder,
+  useResizeColumns
 } from "react-table";
 
 import { COLUMNS } from "./columns";
@@ -48,6 +49,7 @@ const BasicTable = () => {
     selectedFlatRows,
     state,
     setGlobalFilter,
+    resetResizing,
   } = useTable(
     {
       columns,
@@ -183,7 +185,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())}
@@ -200,6 +202,7 @@ const BasicTable = () => {
                       : ""}
                   </span>
                 </th>
+                
               ))}
             </tr>
           ))}
@@ -219,7 +222,7 @@ const BasicTable = () => {
                   return (
                     <td
                       {...cell.getCellProps()}
-                      className="p-4 whitespace-nowrap text-sm"
+                      className="p-4 whitespace-nowrap text-xs"
                       role="cell"
                       style={{ color: "#00253A" }}
                     >

src/components/ReactTable3/Buttons.js

@@ -0,0 +1,16 @@
+import arrowIcon from './arrow-icon.svg';
+import more from './more.svg';
+import edit from './edit.svg';
+
+
+
+export function Buttons({  }) {
+    return (
+      <div className=" flex flex-row items-center">
+          <button className="flex flex-row items-center justify-around  p-2 rounded border">
+          جزیات
+          <img src={arrowIcon} alt="" className="w-3 cursor-pointer mr-2" />
+          </button>
+      </div>
+    );
+  }

src/components/ReactTable3/EditButtons.js

@@ -0,0 +1,9 @@
+export function EditButtons({  }) {
+    return (
+      <div className="bg-red-600 flex flex-row items-center">
+          <button>جزیات</button>
+          <button>جزیات</button>
+          <button>جزیات</button>
+      </div>
+    );
+  }

src/components/ReactTable3/arrow-icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
+  <g id="arrow-down" transform="translate(0)">
+    <path id="Vector" d="M9.9,0,5.825,4.075a1.241,1.241,0,0,1-1.75,0L0,0" transform="translate(2.55 5.594)" fill="none" stroke="rgba(0,37,58,0.32)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,0H15V15H0Z" transform="translate(15 15) rotate(180)" fill="none" opacity="0"/>
+  </g>
+</svg>

src/components/ReactTable3/columns.js

@@ -6,6 +6,8 @@ import { ColumnFilter } from "./ColumnFilter";
 
 import { OrderStatus } from "./OrderStatus";
 import { OrderLevel } from "./OrderLevel";
+import { Buttons } from "./Buttons";
+import { EditButtons } from "./EditButtons";
 
 export const COLUMNS = [
   {
@@ -50,4 +52,10 @@ export const COLUMNS = [
     accessor: "order-level",
     Cell: OrderLevel,
   },
+  {
+    Header: EditButtons,
+    Footer: "ویرایش",
+    accessor: "edit",
+    Cell: Buttons,
+  },
 ];

src/components/ReactTable3/edit.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.715" height="16.703" viewBox="0 0 16.715 16.703">
+  <g id="edit" transform="translate(-626.295 -252.999)">
+    <path id="Vector" d="M8.991,1.271l-7.88,7.88a2.712,2.712,0,0,0-.66,1.32l-.43,3.01a1.424,1.424,0,0,0,1.7,1.7l3.01-.43a2.8,2.8,0,0,0,1.32-.66l7.88-7.88c1.36-1.36,2-2.94,0-4.94S10.351-.089,8.991,1.271Z" transform="translate(627.049 253.749)" fill="none" stroke="#00253a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,0A7.144,7.144,0,0,0,4.94,4.94" transform="translate(634.91 256.15)" fill="none" stroke="#00253a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  </g>
+</svg>

src/components/ReactTable3/more.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="more" transform="translate(-556 -188)">
+    <path id="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(559 198)" fill="#6397b5"/>
+    <path id="Vector-2" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(573 198)" fill="#6397b5"/>
+    <path id="Vector-3" data-name="Vector" d="M2,0A2,2,0,1,0,4,2,2.006,2.006,0,0,0,2,0Z" transform="translate(566 198)" fill="#6397b5"/>
+    <path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(556 188)" fill="#6397b5" opacity="0"/>
+  </g>
+</svg>