Custom Pagination in Material-Table

Question

I want to override the default pagination in Material-Table to look different, but keep the same default elements there. My override allows me to move between pages in the table, but I cannot change how many rows appear in the table. I cannot skip to the last or first page either. I want to keep the exact same options as what is there by default, but change how they look.

All of my Icon, Grid, Typography, etc, imports are @material-ui/core/ or @material-ui/icons/

    function IntakeList() {
        const CustomPaginationComponent = (props) => {
            const { page, rowsPerPage, count, onChangePage } = props;
            let from = rowsPerPage * page + 1;
            let to = rowsPerPage * (page + 1);
            if (to > count) {
                to = count;
            }
            return (
                <td>
                    <Grid container alignItems="center" style={{ paddingTop: 8 }}>
                        <Grid item>
                            <IconButton disabled={page === 0} onClick={(e) => onChangePage(e, page - 1)}>
                                <SkipPreviousIcon fontSize="small" color={page === 0 ? "disabled" : "primary"} />
                                <Typography>Prev</Typography>
                            </IconButton>
                        </Grid>
                        <Grid item>
                            <Typography variant="caption" style={{ color: "black" }}>
                                {from}-{to} of {count}
                            </Typography>
                        </Grid>
                        <Grid item>
                            <IconButton disabled={to >= count} onClick={(e) => onChangePage(e, page + 1)}>
                                <Typography>Next</Typography>
                                <SkipNextIcon fontSize="small" color={to < count ? "primary" : "disabled"} />
                            </IconButton>
                        </Grid>
                    </Grid>
                </td>
            );
        };

        return (
            <MaterialTable
                title="Title"
                data={data}
                columns={columns}
                options={{
                    pageSize: 10,
                    pageSizeOptions: [10, 15, 25, 50, 100],
    
                }}
                components={{
                    Pagination: (props) => {
                       return <CustomPaginationComponent {...props} />;
                    },
                }}
            />
        );
    }

Answer 1

What you have done so far is right. You just simply have to code for the "skip to last page", "skip to first page" and "select row options" just like you did for "next" and "previous" page.

https://codesandbox.io/s/solution-q1cmer?file=/src/App.js

When you console log the props of pagination you will get this

Using the rowsPerPageOptions , onChangeRowsPerPage and some of the code you have coded I was able to code the number of rows per page.

To be honest I don't think you have to code to next page and previous page functionality. It's already in props. You simply has to declare them in the right place.

Happy Coding