update

src/App.js

@@ -101,7 +101,7 @@ function App() {
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
         {/* <ReactTable3 /> */}
-        <ReactTable4 />
+        {/* <ReactTable4 /> */}
         <ReactTable5 />
         {/* <Digikala /> */}
         {/* <HeaderDesign1 />

src/components/ReactTable5/BasicTable.js

@@ -34,10 +34,6 @@ import {
 } from "react-table";
 import ButtonNewDesign from "../ButtonNewDesign";
 
-export function CheckBox({}) {
-  return <input type="checkbox" className="cursor-pointer" />;
-}
-
 export const SelectColumnFilter = ({
   column: { filterValue, setFilter, preFilteredRows, id, render },
 }) => {
@@ -109,33 +105,6 @@ const BasicTable = ({
 }) => {
   const data = useMemo(() => MOCK_DATA2, []);
   // console.log(data);
-  // console.log(MOCK_DATA2);
-
-  const EditableCell = ({
-    value: initialValue,
-    row: { index },
-    column: { id },
-    updateMyData, // This is a custom function that we supplied to our table instance
-  }) => {
-    // We need to keep and update the state of the cell normally
-    const [value, setValue] = React.useState(initialValue);
-
-    const onChange = (e) => {
-      setValue(e.target.value);
-    };
-
-    // We'll only update the external data when the input is blurred
-    const onBlur = () => {
-      updateMyData(index, id, value);
-    };
-
-    // If the initialValue is changed external, sync it up with our state
-    React.useEffect(() => {
-      setValue(initialValue);
-    }, [initialValue]);
-
-    return <input value={value} onChange={onChange} onBlur={onBlur} />;
-  };
 
   const [filtering, setFiltering] = useState(false);
 
@@ -187,23 +156,6 @@ const BasicTable = ({
     useExpanded,
     usePagination,
     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;
@@ -212,6 +164,7 @@ const BasicTable = ({
 
   return (
     <div className="bg-white p-4 rounded">
+      {/* {filtering && <section>TANNAZ</section>} */}
       {/* <div className="flex flex-row items-center">
         {listView.map((list, i) => (
           <img
@@ -329,7 +282,7 @@ const BasicTable = ({
       {/* table LIST */}
       {activeTab == 0 ? (
         <>
-          {activeList === true && (
+          {activeList === false && (
             // table
             <table
               {...getTableProps()}
@@ -362,23 +315,6 @@ const BasicTable = ({
                   ))}
                 </thead>
               )}
-              {/* filter row */}
-              {filtering && (
-                <thead style={{ backgroundColor: "#F1F5FE" }}>
-                  {headerGroups.map((headerGroup, index) => (
-                    <tr key={index} {...headerGroup.getHeaderGroupProps()}>
-                      {headerGroup.headers.map((column) => (
-                        <th
-                          {...column.getHeaderProps()}
-                          className="py-2 px-4 text-sm"
-                        >
-                          {column.canFilter ? column.render("Filter") : null}
-                        </th>
-                      ))}
-                    </tr>
-                  ))}
-                </thead>
-              )}
               <tbody
                 {...getTableBodyProps()}
                 className="divide-y divide-gray-200"
@@ -445,7 +381,7 @@ const BasicTable = ({
             </table>
           )}
           {/* GRID LIST */}
-          {activeList === false && (
+          {activeList === true && (
             <div
               {...getTableBodyProps()}
               className="flex flex-row flex-wrap gap-4 items-center justify-center"

src/components/ReactTable5/COLUMNS.js

@@ -1,16 +1,14 @@
 import { format } from "date-fns";
 
-import BasicTable, {
-  CheckBox,
-  SelectColumnFilter,
-} from "../ReactTable5/BasicTable";
+import BasicTable, { SelectColumnFilter } from "../ReactTable5/BasicTable";
+import { Checkbox } from "./Checkbox";
 
 import { FileType } from "./FileType";
 
 export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
   {
     Header: "چک باکس",
-    accessor: CheckBox,
+    accessor: () => Checkbox({ setFiltering, filtering, addTab }),
     className: "w-7",
   },
   {

src/components/ReactTable5/Checkbox.js

@@ -1,21 +1,20 @@
-import React from "react";
+import React, { useState } from "react";
 
-export const Checkbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
-  const defaultRef = React.useRef();
-  const resolvedRef = ref || defaultRef;
-
-  React.useEffect(() => {
-    resolvedRef.current.indeterminate = indeterminate;
-  }, [resolvedRef, indeterminate]);
+export function Checkbox({ setFiltering, filtering, addTab }) {
+  // const [selectedFilterRow, setSelectedFilterRow] = useState(filtering);
 
   return (
-    <>
-      <input
-        type="checkbox"
-        className="rounded-sm "
-        ref={resolvedRef}
-        {...rest}
-      />
-    </>
+    <input
+      // onClick={() => {
+      //   console.log("mahdi");
+      //   setFiltering(!selectedFilterRow);
+      //   setSelectedFilterRow(!selectedFilterRow);
+      // }}
+      type="checkbox"
+      // className={`cursor-pointer ${selectedFilterRow ? "p-72" : "p-5"}`}
+      className={`cursor-pointer`}
+    />
   );
-});
+}
+
+Checkbox.defaultProps = {};