How to customise datagrid footer by adding a new field next to the pagination

user_15129151 0
Viewed 3577

In my application I'm using a DataGrid component to show the results I get after querying a database. I was using the default pagination provided by the component and it worked perfectly. Nonetheless, now I would like to add a new field next to the pagination with extra information. The next figure show how the pagination is shown, remarking in red what I would like to add: enter image description here

I tried to use a custom component as described here. First, I tried to include a custom footer component, but it replaced the entire default pagination component. Then, I've been trying to use a custom pagination component by including the new field I would like to add, together with the pagination. The problem is that I don't know how to connect the TablePagination component, which is supposed to be the pagination used by default according to the documentation, with the DataGrid component.

The documentation provides an example of how to use a Pagination component with the DataGrid:

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}
        components={{
          Pagination: CustomPagination,
        }}
        {...data}
      />
    </div>
  );
}

However, the TablePagination has different props to fill:

<TablePagination
  component="div"
  count={100}
  page={page}
  onPageChange={handleChangePage}
  rowsPerPage={rowsPerPage}
  onRowsPerPageChange={handleChangeRowsPerPage}
/>

I was able to get the state, options and apiRef from the DataGrid by using useGridSlotComponentProps(). I would like to know how to fill the TablePagination props in order to make it work with the DataGrid. My best shot was the following one:

<TablePagination
    component="div"
    count={state.pagination.pageCount}
    page={state.pagination.page + 1}
    onPageChange={(event, value) => apiRef.current.setPage(value - 1)}
    rowsPerPage={options.pageSize}
    onRowsPerPageChange={null}
/>

On the one hand, I've no idea about what to write in the onRowsPerPageChange. On the other hand, this does not work very well.

I hope this question is clear enough. Thanks beforehand.

material-ui reactjs pagination datagrid
2 Answers

The question has already solved, but I want to share my interesting solution.

CustomFooter () {
  return (
    <GridFooterContainer>
      {/* Add what you want here */}
      <GridFooter sx={{
        border: 'none', // To delete double border.
        }} />
    </GridFooterContainer>
  );
}

GridFooterContainer is a pre-defined componenet that provides border-top and display: flex css properties for footer But be carefull that justify-content is space-between. You may need to override that css property.

GridFooter is the default Footer componenet that includes TablePagination. I didn't use it directly as a Footer. Instead, I used it in a different componenet. For more information

Here is my DataGrid:

<DataGrid
          rows={rows}
          columns={columns}
          components={{Footer: CustomFooter}}
        />

It is possible to specify props rowsPerPageOptions, pageSize, and others like using default Footer.

I hope it will useful.

Thanks for reading.

user_154301940

After several hours of trying different options, I figured out the following about how to connect the TablePagination with the DataGrid:

  • It seems that the indexes used by the TablePagination component are zero-based. Then, It is not necessary to add or substract 1; this provokes errors.
  • The property count from the TablePagination component refers to the row count, not to the page count.
  • I was not able to find the function relative to onRowsPerPageChange; however, I was not very interested in this functionality, so I hide it by setting the prop rowsPerPageOptions as an empty array.

Thus, my custom pagination component, which only reuses the default pagination, is returned by the following function, which uses useGridSlotComponentProps () to obtain the state, the api and the options setted in the DataGrid component:

CustomPagination () {
    const { state, apiRef, options } = useGridSlotComponentProps();
    return (
        <TablePagination
            count={state.pagination.rowCount}
            page={state.pagination.page}
            onPageChange={(event, value) => apiRef.current.setPage(value)}
            rowsPerPage={options.pageSize}
            rowsPerPageOptions={[]}
        />
    );
}

Then, I specify this custom pagination in the DataGrid as follows:

<DataGrid   rows={rows}
            columns={colsDefinition} 
            pageSize={10} 
            pagination
            components={{Pagination: this.CustomPagination}}
/>

With this, the pagination is working with the default behaviour, but now, I am able to modify the CustomPagination function in order to customise it.

user_151291510
Related