Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Table] Support TablePagination display of all rows #17885

Merged
merged 3 commits into from
Oct 19, 2019

Conversation

SarthakC
Copy link
Contributor

@SarthakC SarthakC commented Oct 15, 2019

fix #9136

Screenshot 2021-04-22 at 23 04 10

@mui-pr-bot
Copy link

mui-pr-bot commented Oct 15, 2019

Details of bundle changes.

Comparing: 0a6d9a5...c7d1129

bundle Size Change Size Gzip Change Gzip
@material-ui/core[umd] ▲ +41 B (+0.01% ) 307 kB ▲ +28 B (+0.03% ) 88.3 kB
@material-ui/core ▲ +41 B (+0.01% ) 348 kB ▲ +20 B (+0.02% ) 95.2 kB
TablePagination ▲ +41 B (+0.03% ) 140 kB ▲ +19 B (+0.05% ) 40.7 kB
@material-ui/lab -- 145 kB -- 45 kB
@material-ui/styles -- 51.8 kB -- 15.6 kB
@material-ui/system -- 15.7 kB -- 4.37 kB
AppBar -- 63.9 kB -- 19.9 kB
Avatar -- 62.7 kB -- 19.6 kB
Backdrop -- 67.7 kB -- 20.9 kB
Badge -- 65.4 kB -- 20.2 kB
BottomNavigation -- 62.4 kB -- 19.5 kB
BottomNavigationAction -- 75.3 kB -- 23.8 kB
Box -- 70.8 kB -- 21.4 kB
Breadcrumbs -- 68 kB -- 21.3 kB
Button -- 79.3 kB -- 24.5 kB
ButtonBase -- 73.8 kB -- 23.1 kB
ButtonGroup -- 64.2 kB -- 20 kB
Card -- 62.9 kB -- 19.6 kB
CardActionArea -- 74.9 kB -- 23.6 kB
CardActions -- 62 kB -- 19.3 kB
CardContent -- 62 kB -- 19.3 kB
CardHeader -- 65.1 kB -- 20.4 kB
CardMedia -- 62.4 kB -- 19.5 kB
Checkbox -- 81.6 kB -- 25.6 kB
Chip -- 70.6 kB -- 21.8 kB
CircularProgress -- 64.1 kB -- 20.1 kB
ClickAwayListener -- 3.85 kB -- 1.55 kB
Collapse -- 67.8 kB -- 20.9 kB
colorManipulator -- 3.83 kB -- 1.52 kB
Container -- 63.1 kB -- 19.6 kB
CssBaseline -- 57.6 kB -- 18 kB
Dialog -- 82.5 kB -- 25.6 kB
DialogActions -- 62.1 kB -- 19.4 kB
DialogContent -- 62.2 kB -- 19.4 kB
DialogContentText -- 64 kB -- 20 kB
DialogTitle -- 64.3 kB -- 20.1 kB
Divider -- 62.6 kB -- 19.6 kB
docs.landing -- 54.8 kB -- 14.5 kB
docs.main -- 599 kB -- 191 kB
Drawer -- 84.3 kB -- 26 kB
ExpansionPanel -- 71.1 kB -- 22.1 kB
ExpansionPanelActions -- 62.1 kB -- 19.4 kB
ExpansionPanelDetails -- 61.9 kB -- 19.3 kB
ExpansionPanelSummary -- 77.9 kB -- 24.5 kB
Fab -- 76.7 kB -- 23.8 kB
Fade -- 23.1 kB -- 8.05 kB
FilledInput -- 73.1 kB -- 22.6 kB
FormControl -- 64.3 kB -- 19.9 kB
FormControlLabel -- 65.5 kB -- 20.5 kB
FormGroup -- 62 kB -- 19.3 kB
FormHelperText -- 63.3 kB -- 19.7 kB
FormLabel -- 63.3 kB -- 19.5 kB
Grid -- 65.1 kB -- 20.3 kB
GridList -- 62.5 kB -- 19.5 kB
GridListTile -- 63.7 kB -- 19.9 kB
GridListTileBar -- 63.2 kB -- 19.7 kB
Grow -- 23.7 kB -- 8.17 kB
Hidden -- 66.1 kB -- 20.6 kB
Icon -- 62.8 kB -- 19.6 kB
IconButton -- 76 kB -- 23.7 kB
Input -- 72 kB -- 22.4 kB
InputAdornment -- 65.1 kB -- 20.4 kB
InputBase -- 70.2 kB -- 22 kB
InputLabel -- 65.1 kB -- 20.2 kB
LinearProgress -- 65.3 kB -- 20.3 kB
Link -- 66.6 kB -- 21 kB
List -- 62.4 kB -- 19.3 kB
ListItem -- 77 kB -- 24 kB
ListItemAvatar -- 62.1 kB -- 19.4 kB
ListItemIcon -- 62.2 kB -- 19.4 kB
ListItemSecondaryAction -- 62 kB -- 19.3 kB
ListItemText -- 65 kB -- 20.4 kB
ListSubheader -- 62.8 kB -- 19.6 kB
Menu -- 88.3 kB -- 27.6 kB
MenuItem -- 78 kB -- 24.3 kB
MenuList -- 66 kB -- 20.6 kB
MobileStepper -- 67.7 kB -- 21.1 kB
Modal -- 14.3 kB -- 4.96 kB
NativeSelect -- 76.4 kB -- 24 kB
NoSsr -- 2.19 kB -- 1.04 kB
OutlinedInput -- 73.7 kB -- 22.9 kB
Paper -- 62.4 kB -- 19.3 kB
Popover -- 82.6 kB -- 25.4 kB
Popper -- 28.3 kB -- 10.2 kB
Portal -- 2.87 kB -- 1.29 kB
Radio -- 82.5 kB -- 25.9 kB
RadioGroup -- 63.2 kB -- 19.7 kB
Rating -- 69.9 kB -- 22.3 kB
RootRef -- 4.43 kB -- 1.67 kB
Select -- 113 kB -- 33.6 kB
Skeleton -- 62.5 kB -- 19.6 kB
Slide -- 25.1 kB -- 8.68 kB
Slider -- 75.4 kB -- 23.7 kB
Snackbar -- 77.1 kB -- 24 kB
SnackbarContent -- 65.8 kB -- 20.6 kB
SpeedDial -- 85.9 kB -- 27 kB
SpeedDialAction -- 115 kB -- 36.4 kB
SpeedDialIcon -- 64.6 kB -- 20.2 kB
Step -- 62.6 kB -- 19.6 kB
StepButton -- 82.2 kB -- 25.8 kB
StepConnector -- 62.7 kB -- 19.6 kB
StepContent -- 69 kB -- 21.4 kB
StepIcon -- 64.7 kB -- 20.1 kB
StepLabel -- 68.6 kB -- 21.4 kB
Stepper -- 64.9 kB -- 20.3 kB
styles/createMuiTheme -- 16.3 kB -- 5.79 kB
SvgIcon -- 63 kB -- 19.6 kB
SwipeableDrawer -- 90.7 kB -- 28 kB
Switch -- 80.8 kB -- 25.1 kB
Tab -- 76.2 kB -- 24.1 kB
Table -- 62.6 kB -- 19.5 kB
TableBody -- 62.1 kB -- 19.3 kB
TableCell -- 64.1 kB -- 20.1 kB
TableFooter -- 62.1 kB -- 19.3 kB
TableHead -- 62.1 kB -- 19.3 kB
TableRow -- 62.5 kB -- 19.5 kB
TableSortLabel -- 77.2 kB -- 24.4 kB
Tabs -- 85.3 kB -- 27.1 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
TextField -- 121 kB -- 35.5 kB
ToggleButton -- 76 kB -- 24 kB
ToggleButtonGroup -- 63.2 kB -- 19.8 kB
Toolbar -- 62.3 kB -- 19.5 kB
Tooltip -- 99.1 kB -- 31.4 kB
TreeItem -- 73.4 kB -- 23.1 kB
TreeView -- 66 kB -- 20.6 kB
Typography -- 63.7 kB -- 19.8 kB
useMediaQuery -- 2.49 kB -- 1.05 kB
Zoom -- 23.1 kB -- 8.06 kB

Generated by 🚫 dangerJS against c7d1129

@oliviertassinari oliviertassinari added component: table This is the name of the generic UI component, not the React module! new feature New feature or request labels Oct 15, 2019
@oliviertassinari
Copy link
Member

@SarthakC In order to fix the codesandbox build fail, you will need to rebase on master.

@SarthakC
Copy link
Contributor Author

@SarthakC In order to fix the codesandbox build fail, you will need to rebase on master.

Sure thing

Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a great start. A couple of feedback:

  • The page range display looks wrong 1--1 of 15 when the option to display all the rows is chosen.
  • The build fails you should edit the TypeScript version of the demos and run the script that generates the JavaScript version.
  • We should update the TypeScript definition for the prop.
  • We might want to document this feature but I'm not sure how.

@mui mui deleted a comment from codesandbox-ci bot Oct 15, 2019
@oliviertassinari oliviertassinari added the PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI label Oct 15, 2019
[fixed] page range display for 'all' option

[fixed]The page range display showed 1--1 of {totalRows} when the option to display all the rows was chosen.
@oliviertassinari oliviertassinari changed the title [TablePagination] Show all rows on a single page. [TablePagination] Support display of all rows Oct 18, 2019
@oliviertassinari oliviertassinari added PR: ready to ship and removed PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI labels Oct 18, 2019
@oliviertassinari
Copy link
Member

Well done

@@ -125,9 +126,9 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
<MenuItemComponent
className={classes.menuItem}
key={rowsPerPageOption}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey,
This line is causing following issue:

index.js:1 Warning: Encountered two children with the same key, `.$.$.$[object Object]`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version

@kevinlul
Copy link
Contributor

Sorry for necroing here but while the typings were updated, the API documentation here was missed.

@oliviertassinari oliviertassinari changed the title [TablePagination] Support display of all rows [Table] Support TablePagination display of all rows Apr 22, 2021
@oliviertassinari
Copy link
Member

@kevinlul It's documented in https://material-ui.com/components/tables/#custom-pagination-options. It would likely not fit inside the API page 🤔

@kevinlul
Copy link
Contributor

image

Couldn't one of the examples here be replaced? And then the description can link to the documented section too.

@oliviertassinari
Copy link
Member

oliviertassinari commented Apr 22, 2021

It's not an example, it's the default value.

@kevinlul
Copy link
Contributor

Oops, I misread. I guess hyperlinking in the description cell is the only solution?

@oliviertassinari
Copy link
Member

@kevinlul Yes, if you want to open a pull request, I think that it could make sense

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: table This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[TablePagination] How to show all rows on a single page?
6 participants