如何在 MUI v5 表格组件上将分页居中以及如何制作粘性列？

Question

I'm working with MUI table components. I have made the below table example with pagination.

const MuiTable = () => {
    const [page, setPage] = useState(0);
    const [rowsPerPage, setRowsPerPage] = useState(5);

    const [data, setData] = useState([]);

    useEffect(() => {
        setData(tableData);
    }, []);

    const emptyRows =
        page > 0 ? Math.max(0, (1 + page) * rowsPerPage - data.length) : 0;

    const handleChangePage = (event, newPage) => {
        setPage(newPage);
    };

    const handleChangeRowsPerPage = (event) => {
        setRowsPerPage(parseInt(event.target.value, 10));
        setPage(0);
    };

    return (
        <TableContainer sx={{ maxHeight: "300px" }} component={Paper}>
            <Table stickyHeader aria-label="simple table">
                <TableHead>
                    <TableRow>
                        <TableCell>Id</TableCell>
                        <TableCell>First Name</TableCell>
                        <TableCell>Last Name</TableCell>
                        <TableCell align="center">Email</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {(rowsPerPage > 0
                        ? data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                        : data
                    ).map((row) => (
                        <TableRow
                            key={row.id}
                            sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
                        >
                            <TableCell>{row.id}</TableCell>
                            <TableCell>{row.first_name}</TableCell>
                            <TableCell>{row.last_name}</TableCell>
                            <TableCell align="center">{row.email}</TableCell>
                        </TableRow>
                    ))}

                    {emptyRows > 0 && (
                        <TableRow style={{ height: 53 * emptyRows }}>
                            <TableCell colSpan={6} />
                        </TableRow>
                    )}
                </TableBody>

                <TableFooter>
                    <TableRow>
                        <TablePagination
                            rowsPerPageOptions={[5, 10, 25]}
                            count={data.length}
                            rowsPerPage={rowsPerPage}
                            page={page}
                            onPageChange={handleChangePage}
                            onRowsPerPageChange={handleChangeRowsPerPage}
                            SelectProps={{
                                inputProps: {
                                    "aria-label": "rows per page",
                                },
                            }}
                            labelDisplayedRows={({ page }) => {
                                return `Page: ${page}`;
                            }}
                            backIconButtonProps={{
                                color: "secondary",
                            }}
                            nextIconButtonProps={{ color: "secondary" }}
                            showFirstButton={true}
                            showLastButton={true}
                            labelRowsPerPage={<span>Rows:</span>}
                            sx={{
                                ".MuiTablePagination-toolbar": {
                                    backgroundColor: "rgba(100,100,100,0.5)",
                                },
                                ".MuiTablePagination-selectLabel, .MuiTablePagination-input": {
                                    fontWeight: "bold",
                                    color: "blue",
                                },
                            }}
                        />
                    </TableRow>
                </TableFooter>
            </Table>
        </TableContainer>
    );
};

I would like to know how I can make a sticky column (I would like to have the same effect as stickyHeader ). On the other hand, I have tried to center out the pagination component by adding this on the TablePagination component but it is not centering the component:

sx={{
'.MuiTablePagination-root': {
    display: 'flex',
    justifyContent: 'center',
 },
}}

I would appreciate any help on the regard.

Answer 1

sx={{ display: 'flex', justifyContent: 'center' }} 对我有用