Table Pagination : Header and Rows shift with pagination click

[ankitasingh170190]

• [x ] The issue is present in the latest release.
• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When we click on the Table Pagination the headers and rows element shift horizontally with page click.

Expected Behavior 🤔

The table elements should not shift their positioning with page switch.

Steps to Reproduce 🕹

https://material-ui.com/components/tables/#custom-pagination-actions Switch between pages in the example provided to notice the behavior. Thank you.

[oliviertassinari]

@ankitasingh170190 Thanks for the report. What do you think of this diff? Do you want to submit a pull request? :)

diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx
index 601be11f8..005000007 100644
--- a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx
+++ b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx
@@ -137,8 +137,8 @@ export default function CustomPaginationActionsTable() {
               <TableCell component="th" scope="row">
                 {row.name}
               </TableCell>
-              <TableCell align="right">{row.calories}</TableCell>
-              <TableCell align="right">{row.fat}</TableCell>
+              <TableCell style={{ width: 160 }} align="right">{row.calories}</TableCell>
+              <TableCell style={{ width: 160 }} align="right">{row.fat}</TableCell>
             </TableRow>
           ))}
           {emptyRows > 0 && (

[ankitasingh170190]

I am trying to see if there is a way we can dynamically change the width incase we are not aware of the data we will be showing ? I will keep you updated if I find a solution for the same. Thank you.

[oliviertassinari]

@ankitasingh170190 Auto layout is likely something we will support in the upcoming DataGrid component @dtassone is working on.

[ankitasingh170190]

@ankitasingh170190 Auto layout is likely something we will support in the upcoming DataGrid component @dtassone is working on.

wow that is awesome. Cannot wait for the release. I will submit a PR for this issue. Thank you.

[uneet7]

Can I work on this?

[marcosvega91]

@ankitasingh170190 are you working on this ?

[ankitasingh170190]

@ankitasingh170190 are you working on this ?

yup. #20873