FiletrCoumn

package.json

@@ -15,6 +15,7 @@
     "@mui/icons-material": "^5.15.6",
     "@mui/material": "^5.15.6",
     "@mui/material-nextjs": "^5.15.6",
+    "formik": "^2.4.5",
     "material-react-table": "^2.11.2",
     "next": "14.1.0",
     "react": "^18",

src/components/TextFieldWithFnBox.jsx

@@ -0,0 +1,45 @@
+import {IconButton, Paper, TextField} from '@mui/material';
+import AlignHorizontalCenterIcon from '@mui/icons-material/AlignHorizontalCenter';
+import {useState} from "react";
+// import FilterBox from "@/components/FiterBox";
+
+const TextFieldWithFnBox = ({formik, fieldName , label ,  defaultFilter , columnFilterModeOptions ,onSelectFilter}) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [open, setOpen] = useState(false);
+
+    const handleClick = (event) => {
+        setOpen((prevOpen) => !prevOpen);
+        setAnchorEl(anchorEl ? null : event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+        setAnchorEl(null);
+    };
+
+    return (
+        <>
+            <TextField
+                name={fieldName}
+                label={label}
+                value={formik.values[fieldName]}
+                onChange={formik.handleChange}
+                fullWidth
+                margin="normal"
+                InputProps={{
+                    endAdornment: (
+                        <IconButton onClick={handleClick}>
+                            <AlignHorizontalCenterIcon />
+                        </IconButton>
+                    )
+                }}
+                sx={{
+                    position: 'relative'
+                }}
+            />
+            {/*<FilterBox  anchorEl={anchorEl} open={open}  handleClose={handleClose} columnFilterModeOptions={columnFilterModeOptions} onSelectFilter={onSelectFilter}/>*/}
+        </>
+    );
+};
+
+export default TextFieldWithFnBox;