update

src/components/ReactTable5/BasicTable.js

@@ -33,6 +33,10 @@ import {
   useExpanded,
 } from "react-table";
 
+export function CheckBox({}) {
+  return <input type="checkbox" />;
+}
+
 const BasicTable = ({
   settingsIcon,
   thead,
@@ -129,24 +133,24 @@ const BasicTable = ({
     useSortBy,
     useExpanded,
     usePagination,
-    useRowSelect,
-    (hooks) => {
-      hooks.visibleColumns.push((columns) => {
-        return [
-          {
-            id: "selection",
-            className: "w-7",
-            Header: ({ getToggleAllRowsSelectedProps }) => (
-              <Checkbox {...getToggleAllRowsSelectedProps()} />
-            ),
-            Cell: ({ row }) => (
-              <Checkbox {...row.getToggleRowSelectedProps()} />
-            ),
-          },
-          ...columns,
-        ];
-      });
-    }
+    useRowSelect
+    // (hooks) => {
+    //   hooks.visibleColumns.push((columns) => {
+    //     return [
+    //       {
+    //         id: "selection",
+    //         className: "w-7",
+    //         Header: ({ getToggleAllRowsSelectedProps }) => (
+    //           <Checkbox {...getToggleAllRowsSelectedProps()} />
+    //         ),
+    //         Cell: ({ row }) => (
+    //           <Checkbox {...row.getToggleRowSelectedProps()} />
+    //         ),
+    //       },
+    //       ...columns,
+    //     ];
+    //   });
+    // }
   );
 
   const { globalFilter, pageIndex, pageSize } = state;
@@ -154,7 +158,7 @@ const BasicTable = ({
   const [activeList, setActiveList] = useState(false);
 
   return (
-    <>
+    <div className="bg-white p-4 rounded">
       {/* <div className="flex flex-row items-center">
         {listView.map((list, i) => (
           <img
@@ -165,16 +169,21 @@ const BasicTable = ({
           />
         ))}
       </div>{" "} */}
-      <img
-        src={list}
-        className="cursor-pointer my-5"
-        onClick={() => setActiveList(false)}
-      />
-      <img
-        src={grid}
-        className="cursor-pointer my-5"
-        onClick={() => setActiveList(true)}
-      />
+      <div>
+        {/* select View list */}
+        <div className="flex flex-row items-center gap-x-2">
+          <img
+            src={list}
+            className="cursor-pointer"
+            onClick={() => setActiveList(false)}
+          />
+          <img
+            src={grid}
+            className="cursor-pointer"
+            onClick={() => setActiveList(true)}
+          />
+        </div>
+      </div>
       <div className="flex flex-row items-center justify-between">
         {/* right box */}
         <di className="bg-red-400">
@@ -244,6 +253,7 @@ const BasicTable = ({
       {activeTab == 0 ? (
         <>
           {activeList === false && (
+            // table
             <table
               {...getTableProps()}
               className="min-w-full divide-y divide-gray-200 mb-5"
@@ -364,7 +374,7 @@ const BasicTable = ({
                 <div
                   className="flex flex-col px-4 py-5 rounded-md"
                   key={index}
-                  style={{ backgroundColor: "#fff" }}
+                  style={{ backgroundColor: "#F3F3F3" }}
                 >
                   <img src={image1} className="w-52" />
                   <p className="text-sm my-3">{item.fileName}</p>
@@ -396,7 +406,7 @@ const BasicTable = ({
           columns={defaultColumn}
         />
       )}
-    </>
+    </div>
   );
 };
 
@@ -408,4 +418,9 @@ BasicTable.defaultProps = {
   thead: false,
   goToPage: false,
   showMore: false,
+
+  // listView: [
+  //   { icon: grid, click: () => setActiveList(false) },
+  //   { icon: list, click: () => setActiveList(true) },
+  // ],
 };

src/components/ReactTable5/COLUMNS.js

@@ -1,5 +1,7 @@
 import { format } from "date-fns";
 
+import BasicTable, { CheckBox } from "../ReactTable5/BasicTable";
+
 import { OrderStatus } from "./OrderStatus";
 import { OrderLevel } from "./OrderLevel";
 import { Buttons } from "./Buttons";
@@ -9,6 +11,11 @@ import { SelectColumnFilter2 } from "./SelectColumnFilter2.js";
 import { SliderColumnFilter } from "./SliderColumnFilter.js";
 
 export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
+  {
+    Header: "چک باکس",
+    accessor: CheckBox,
+    className: "bg-red-100 w-7",
+  },
   {
     Header: "ایکن فایل",
     accessor: "filePic",