Responsivenes Stacked not working

[bloodykheeng]

"mui-datatables": "^4.3.0", "@mui/icons-material": "^5.14.7", "@mui/material": "^5.14.7","react": "^17.0.1", "react-dom": "^17.0.1",

Thats my enviroment ive noted stacked isnt working unless i have to put a FormControl component in my return even though am not using it if i remove it stacked stops rendering well in the ui

here is my whole component

import React from "react"; import MUIDataTable from "mui-datatables"; import { IconButton } from "@mui/material"; import VisibilityIcon from "@mui/icons-material/Visibility"; import EditIcon from "@mui/icons-material/Edit"; import DeleteIcon from "@mui/icons-material/Delete"; import FormControl from "@mui/material/FormControl";

// bk always remenber the stacked only works if there is a form control in the return <FormControl></FormControl>

const MuiDataTable = ({ tableData, tableColumns, handleViewPage, handleShowEditForm, handleDelete }) => { // Dynamically adding the Actions column const columns = tableColumns.concat({ name: "Actions", label: "Actions", options: { filter: false, sort: false, empty: true, customBodyRenderLite: (dataIndex) => { const dataRow = tableData[dataIndex]; return (

<IconButton onClick={() => handleViewPage(dataRow)}> <VisibilityIcon /> </IconButton> <IconButton onClick={() => handleShowEditForm(dataRow)}> <EditIcon /> </IconButton> <IconButton onClick={() => handleDelete(dataRow)}> <DeleteIcon /> </IconButton>

); }, }, });

const options = {
    filterType: "checkbox",
    responsive: "simple",
    selectableRows: "none", // set to 'multiple' if selection is needed
};

return (
    <>
        <FormControl></FormControl>
        <MUIDataTable title={"User List"} data={tableData} columns={columns} options={options} />
    </>
);

};

export default MuiDataTable;

this realy needs to be fixed