CODEWITHSUNDEEP
cssreactjsmaterial-ui
Shweta Kale
Shweta Kale

Reputation: 176

How to change style in material-ui table pagination

I want to change the way material-ui displays table pagination. Currently what material-ui shows is like this

enter image description here

I want to change it like this

enter image description here

Is it possible to style it this way?

Upvotes: 1

Views: 4569

Answers (1)

Ahmed fouad
Ahmed fouad

Reputation: 109

You can do it by override the pagination component By default, pagination uses the TablePagination component that is optimized for handling tabular data. This demo replaces it with the Pagination component.


import * as React from 'react';
import { makeStyles } from '@material-ui/styles';
import { DataGrid, useGridSlotComponentProps } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import Pagination from '@material-ui/lab/Pagination';

const useStyles = makeStyles({
  root: {
    display: 'flex',
  },
});

function CustomPagination() {
  const { state, apiRef } = useGridSlotComponentProps();
  const classes = useStyles();

  return (
    <Pagination
      className={classes.root}
      color="primary"
      count={state.pagination.pageCount}
      page={state.pagination.page + 1}
      onChange={(event, value) => apiRef.current.setPage(value - 1)}
    />
  );
}

export default function CustomPaginationGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        pagination
        pageSize={5}
        rowsPerPageOptions={[5]}
        components={{
          Pagination: CustomPagination,
        }}
        {...data}
      />
    </div>
  );
}

Upvotes: 1

Related Questions