[data grid] Custom footer component to display two pagination components

[ShadiBlitz]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

components={{
     Footer: CustomPagination,
}}

Unable to add extra left footer. The current method overrides default footer.

Expected behavior 🤔

I would like to achieve the following result, having the custom pagination on the left and the default pagination on the right.

I tried to do the following but it is not the correct way to do it (needs to select a row) https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-p6ctf9?file=/demo.tsx

Any idea how can I achieve this?

Steps to reproduce 🕹

Steps:

check sandbox

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Order ID 💳 (optional)

No response

[flaviendelangle]

You can override the Pagination slot, in which case it will replace the pagination on the right (https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-obgvs5?file=/demo.tsx)

But if you want to override the whole footer, you have to use the Footer slot and handle both paginations yourself (https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-f014gk?file=/demo.tsx)

[alexfauquette]

@flaviendelangle What do you think about splitting the components page with the following structure:

• overview (which explains the concept of the slot with the simple example of icons)
• grid
  • row
  • cell
  • overlay
• toolbar
  • remove/add a button
  • rewrite menu options
  • customizing panel
• column menu
• Footer
  • row count
  • selected row count
  • pagination
• Filter the content from the filtering page

[flaviendelangle]

I'd like the feedbacks of @samuelsycamore concerning this page

I would more be in favor of moving the example about each feature in the feature page For instance move the Pagination examples in the /pagination page. And have this page focus on the generic usage of component slots.

Edit: Similar to what we do for the inialState The /state page explains the principle but each product page shows how to initialize its own sub-state.

[ShadiBlitz]

You can override the Pagination slot, in which case it will replace the pagination on the right (https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-obgvs5?file=/demo.tsx)

But if you want to override the whole footer, you have to use the Footer slot and handle both paginations yourself (https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-f014gk?file=/demo.tsx)

Thank you! That will do it! :)

[TamirCode]

@flaviendelangle What do you think about splitting the components page with the following structure:

• overview (which explains the concept of the slot with the simple example of icons)

• grid

  • row
  • cell
  • overlay

• toolbar

  • remove/add a button
  • rewrite menu options
  • customizing panel
• column menu

• Footer

  • row count
  • selected row count
  • pagination
• Filter the content from the filtering page

yes pls the footer section in docs lacks a lot of information because there is no example on how to use the default items but only to override them completely

[Kris-D]

You can override the Pagination slot, in which case it will replace the pagination on the right (https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-obgvs5?file=/demo.tsx)

But if you want to override the whole footer, you have to use the Footer slot and handle both paginations yourself (https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-f014gk?file=/demo.tsx)

The solution has an error of Cannot read properties of undefined (reading 'row')

[AshhadUllah]

You can override the Pagination slot, in which case it will replace the pagination on the right (https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-obgvs5?file=/demo.tsx) But if you want to override the whole footer, you have to use the Footer slot and handle both paginations yourself (https://codesandbox.io/s/datagriddemo-demo-mui-x-forked-f014gk?file=/demo.tsx)

The solution has an error of Cannot read properties of undefined (reading 'row')

Exactly I am facing the same issue can anyone please look into this? or guide us to updated solution.