update

src/App.js

@@ -43,7 +43,6 @@ import Design2 from "./components/ProductSalesAmount/Design2";
 import TableDesign1 from "./components/Table/Design1";
 import ReactTable2 from "./components/ReactTable2";
 import ReactTable3 from "./components/ReactTable3";
-// import Pagintaion from "./components/ReactTable3/Pagintaion.js";
 
 import Switch from "./components/Switch";
 
@@ -71,7 +70,7 @@ function App() {
         {/* <Testttt /> */}
         {/* <Design2D /> */}
         {/* <Features /> */}
-        <Feedback />
+        {/* <Feedback /> */}
         {/* <Alert /> */}
         {/* <Toast /> */}
         {/* <ProductSuggestion /> */}
@@ -91,7 +90,6 @@ function App() {
         {/* <TableDesign1 /> */}
         {/* <ReactTable2 /> */}
         <ReactTable3 />
-        {/* <Pagintaion /> */}
       </div>
     </Provider>
   );

src/components/ReactTable3/BasicTable.js

@@ -1,5 +1,7 @@
 import React, { useMemo } from "react";
 
+import "./index.scss";
+
 import {
   useTable,
   useSortBy,
@@ -36,7 +38,7 @@ export function SelectColumnFilter({
     <label className="flex gap-x-2 items-baseline">
       <span className="text-gray-700">{render("Header")}: </span>
       <select
-        className="rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+        className="rounded-md border-gray-300 shadow-sm text-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
         name={id}
         id={id}
         value={filterValue}
@@ -44,7 +46,7 @@ export function SelectColumnFilter({
           setFilter(e.target.value || undefined)
         }}
       >
-        <option value="">همه</option>
+        <option className="text-xs" value="">همه</option>
         {options.map((option, i) => (
           <option key={i} value={option} className="text-xs">
             {(() => {
@@ -156,15 +158,17 @@ const BasicTable = () => {
   console.log(rows.length);
   return (
     <>
-    {headerGroups.map((headerGroup) =>
+      <div className="customeClass1">
+      {headerGroups.map((headerGroup) =>
           headerGroup.headers.map((column) =>
             column.Filter ? (
-              <div className="mt-2 sm:mt-0" key={column.id}>
+              <div className="mt-2 sm:mt-0 customeClass2" key={column.id}>
                 {column.render("Filter")}
               </div>
             ) : null
           )
         )}
+      </div>
       <div className="flex flex-row items-center justify-between mb-3 mx-4">
       {/*  search box */}
       <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />

src/components/ReactTable3/index.scss

@@ -0,0 +1,6 @@
+.customeClass1 .customeClass2 input {
+  display: none !important;
+}
+.customeClass1 .customeClass2 span {
+  display: none !important;
+}