update

src/App.js

@@ -90,17 +90,17 @@ function App() {
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
         {/* <ReactTable3 /> */}
-        {/* <ReactTable4 /> */}
+        <ReactTable4 />
         {/* <Digikala /> */}
         {/* <DigikalaShop /> */}
-        <HeaderDesign1 />
+        {/* <HeaderDesign1 />
         <div className="flex">
           <SidebarDesign2 className="w-1/5" />
           <span className="w-4/5 ">
             <ReactTable4 />
             <FooterDesign1 />
           </span>
-        </div>
+        </div> */}
       </div>
     </Provider>
   );

src/components/ReactTable4/Settings.js

@@ -19,12 +19,12 @@ export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
       </div>
       {/* modal */}
       <div
-        className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
-      ${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}`}
+        className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg bg-opacity-90 bg-gray-600 flex items-center justify-center fixed left-0 top-0
+      ${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}`}
         onClick={() => setOpenModal(false)}
       >
         <div
-          className="absolute bg-white"
+          className="absolute bg-white w-8/12 p-4 rounded"
           style={{ top: "10%" }}
           onClick={(e) => e.stopPropagation()}
           onClick={() => setOpenModal(false)}

src/components/ReactTable4/ToggleColumns.js

@@ -5,13 +5,26 @@ export const ToggleColumns = ({ allColumns, getToggleHideAllColumnsProps }) => {
 
   return (
     <div>
-      <div>
-        <input type="checkbox" {...getToggleHideAllColumnsProps()} /> Toggle All
+      <h2 className="text-base">
+        با زدن بر روی هر یک از چک باکس ها میتوانید نمایش ستون هارو خاموش روشن
+        کنید{" "}
+      </h2>
+      <div className="text-sm mt-5">
+        <input
+          className="ml-2"
+          type="checkbox"
+          {...getToggleHideAllColumnsProps()}
+        />{" "}
+        تاگل کردن همه
       </div>
       {allColumns.map((column, index) => (
         <div key={index}>
-          <label>
-            <input type="checkbox" {...column.getToggleHiddenProps()} />
+          <label className="text-sm">
+            <input
+              type="checkbox"
+              className="ml-2 "
+              {...column.getToggleHiddenProps()}
+            />
             {column.Header}
           </label>
         </div>