Material-ui: Table Pagination : Header and Rows shift with pagination click

Created on 27 Apr 2020 · 7Comments · Source: mui-org/material-ui

[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.

Table docs good first issue

Source

ankitasingh170190

All 7 comments

@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 && (

oliviertassinari on 27 Apr 2020

👍1

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.

ankitasingh170190 on 27 Apr 2020

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

oliviertassinari on 27 Apr 2020