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} />;
                    },
                }}
            />
        );
    }

https://codesandbox.io/s/quiet-forest-nq6ph7?file=/src/App.js Here is the codesandbox link. Thank you for reaching out. I saw that you also commented with a potential answer on another of my questions [here](https://stackoverflow.com/questions/72646732/how-to-hide-rows-in-material-table-based-on-a-value-in-data?noredirect=1#comment128432540_72646732). I am not sure how to implement something like this. Could you provide an example in the codesandbox I sent? Thank you. — Ciaran Crowley, Jun 22 '22 at 10:26

Shakya Karunathilake · Accepted Answer · 2022-06-24T15:23:34.027

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

Custom Pagination in Material-Table

1 Answers1