Responsive Table with Pagination and Entries Selector

const TableWithOutDropDown = ({ buttonText, buttonHref, tableHeaders, tableData }) => { const [entriesPerPage, setEntriesPerPage] = useState(5); const [currentPage, setCurrentPage] = useState(1); // Handle entries per page change const handleEntriesChange = (event) => { setEntriesPerPage(parseInt(event.target.value, 10)); setCurrentPage(1); }; // Calculate total pages based on tableData length and selected entriesPerPage const totalPages = Math.ceil(tableData.length / entriesPerPage); return ( <> <Grid container sx={{ marginTop: "30px", boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)", width: "91%", padding: "10px", marginLeft: "100px", }} justifyContent="space-between" alignItems="center" spacing={2} > {/* Entries Per Page Selector */} <Grid item xs={12} sm={6} md={6} sx={{ display: "flex", alignItems: "center", gap: "10px" }}> <Typography>Show</Typography> <Select value={entriesPerPage} onChange={handleEntriesChange} sx={{ borderRadius: '12px', height: '45px', backgroundColor: '#E0E0E0' }}> {[5,10, 20, 30, 50].map((option, index) => ( <MenuItem key={index} value={option}> {option} </MenuItem> ))} </Select> <Typography>entries</Typography> </Grid> {/* Add Button */} <Grid item xs={12} sm={6} md={6} sx={{ display: "flex", justifyContent: "flex-end", gap: "10px" }}> <Buttons text={buttonText} href={buttonHref} bgclr="#007bff" color="#fff" borderRadius="12px" /> </Grid> </Grid> {/* Table */} <Grid xs={12} container sx={{ marginTop: "10px", width: "93%", padding: "10px", marginLeft: "90px" }}> <TableContainer sx={{ flexGrow: 1, maxWidth: "100%", boxShadow: "0px 4px 4px 0px rgba(0, 0, 0, 0.25)", overflowX: "auto", width: "93%" }}> <Table> {/* Table Headers */} <TableHead> <TableRow> {tableHeaders.map((header, index) => ( <TableCell key={index} align="center" sx={{ textAlign: "center", fontWeight: "bold" }}> {header} </TableCell> ))} </TableRow> </TableHead> {/* Table Body */} <TableBody> {tableData .slice((currentPage - 1) * entriesPerPage, currentPage * entriesPerPage) .map((row, rowIndex) => ( <TableRow key={rowIndex} sx={{ backgroundColor: rowIndex % 2 === 0 ? "#F0FBFF" : "#FFFFFF" }}> {tableHeaders.map((header, index) => ( <TableCell key={index} align="center" sx={{ border: "none", textAlign: "center" }}> {row[header]} </TableCell> ))} </TableRow> ))} </TableBody> </Table> {/* Pagination */} <Grid item xs={12} sx={{ display: "flex", justifyContent: "flex-end", width: "100%" }}> <Stack spacing={2} sx={{ marginTop: "10px", display: "flex", justifyContent: "center", alignItems: "flex-end" }}> <Pagination count={totalPages} page={currentPage} onChange={(event, value) => setCurrentPage(value)} size="small" sx={{ marginBottom: "20px", display: "inline-block" }} /> </Stack> </Grid> </TableContainer> </Grid> </> ); }; make this code responsive