filter

src/components/FilterBox.jsx

@@ -0,0 +1,30 @@
+import { Popper, Paper, List, ListItem, ListItemText, ClickAwayListener } from '@mui/material';
+
+function FilterBox({anchorEl , open = false, handleClose = () => {} , columnFilterModeOptions , onSelectFilter , defaultFilter}) {
+
+    const id = open ? 'simple-popper' : undefined;
+    const handleSelectFilter = (filterFn) => {
+        onSelectFilter(filterFn);
+        handleClose();
+    };
+
+    return (
+        <div>
+            <Popper id={id} open={open} anchorEl={anchorEl} placement="bottom" style={{ zIndex: 1301 }}>
+                <ClickAwayListener onClickAway={handleClose}>
+                    <Paper>
+                        <List>
+                            {columnFilterModeOptions.map((option, index) => (
+                                <ListItem key={index}  onClick={() => handleSelectFilter(option)} selected={option === defaultFilter}  sx={{ cursor: 'pointer' }}>
+                                    <ListItemText primary={option} />
+                                </ListItem>
+                            ))}
+                        </List>
+                    </Paper>
+                </ClickAwayListener>
+            </Popper>
+        </div>
+    );
+}
+
+export default FilterBox;