[Table] Support TablePagination display of all rows #17885

SarthakC · 2019-10-15T11:23:31Z

mui-pr-bot · 2019-10-15T11:33:33Z

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

docs/src/pages/components/tables/CustomPaginationActionsTable.js

packages/material-ui/src/TablePagination/TablePagination.js

oliviertassinari · 2019-10-15T12:24:31Z

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

SarthakC · 2019-10-15T12:26:40Z

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

Sure thing

oliviertassinari

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.

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

might need revision

oliviertassinari · 2019-10-19T08:41:56Z

Well done

afzalsayed96 · 2019-12-26T13:43:03Z

packages/material-ui/src/TablePagination/TablePagination.js

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


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 · 2021-04-22T19:47:42Z

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

oliviertassinari · 2021-04-22T21:06:07Z

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

kevinlul · 2021-04-22T21:20:57Z

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

oliviertassinari · 2021-04-22T21:28:46Z

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

kevinlul · 2021-04-23T21:42:41Z

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

oliviertassinari · 2021-04-23T21:57:12Z

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

oliviertassinari reviewed Oct 15, 2019

View reviewed changes

docs/src/pages/components/tables/CustomPaginationActionsTable.js Outdated Show resolved Hide resolved

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

SarthakC requested a review from oliviertassinari October 15, 2019 12:22

oliviertassinari reviewed Oct 15, 2019

View reviewed changes

packages/material-ui/src/TablePagination/TablePagination.js Outdated Show resolved Hide resolved

SarthakC force-pushed the table-pagination branch from e7f9d55 to 78bcda7 Compare October 15, 2019 12:35

SarthakC requested a review from oliviertassinari October 15, 2019 13:39

oliviertassinari reviewed Oct 15, 2019

View reviewed changes

mui deleted a comment from codesandbox-ci bot Oct 15, 2019

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

Added: "All" option to "rows per page" in TablePagination API

4bc35bf

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

SarthakC force-pushed the table-pagination branch from 57a6d59 to 4bc35bf Compare October 17, 2019 21:19

added documentation for custom pagination menu

b002e82

might need revision

SarthakC requested a review from oliviertassinari October 17, 2019 21:44

oliviertassinari changed the title ~~[TablePagination] Show all rows on a single page.~~ [TablePagination] Support display of all rows Oct 18, 2019

oliviertassinari approved these changes Oct 18, 2019

View reviewed changes

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 force-pushed the table-pagination branch from 9630eea to 0ecc761 Compare October 18, 2019 16:03

handle TypeScript side

c7d1129

oliviertassinari force-pushed the table-pagination branch from 0ecc761 to c7d1129 Compare October 18, 2019 16:04

oliviertassinari merged commit 7bd8216 into mui:master Oct 19, 2019

afzalsayed96 reviewed Dec 26, 2019

View reviewed changes

afzalsayed96 mentioned this pull request Dec 26, 2019

[Table] Fix TablePagination duplicate key error #18988

Merged

1 task

snyk-bot mentioned this pull request Jan 7, 2020

[Snyk] Upgrade @material-ui/core from 4.4.0 to 4.8.2 srdjan-19/rent-a-car-service#3

Open

kevinlul mentioned this pull request Apr 22, 2021

How should I properly show "all" records on a paginated table? mbrn/material-table#1685

Closed

oliviertassinari changed the title ~~[TablePagination] Support display of all rows~~ [Table] Support TablePagination display of all rows Apr 22, 2021

kevinlul mentioned this pull request Apr 26, 2021

[Table] Improve description of TablePagination.rowsPerPageOptions #25982

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Table] Support TablePagination display of all rows #17885

[Table] Support TablePagination display of all rows #17885

SarthakC commented Oct 15, 2019 •

edited by oliviertassinari

mui-pr-bot commented Oct 15, 2019 •

edited

oliviertassinari commented Oct 15, 2019

SarthakC commented Oct 15, 2019

oliviertassinari left a comment •

edited

oliviertassinari commented Oct 19, 2019

afzalsayed96 Dec 26, 2019

kevinlul commented Apr 22, 2021

oliviertassinari commented Apr 22, 2021

kevinlul commented Apr 22, 2021

oliviertassinari commented Apr 22, 2021 •

edited

kevinlul commented Apr 23, 2021

oliviertassinari commented Apr 23, 2021

[Table] Support TablePagination display of all rows #17885

[Table] Support TablePagination display of all rows #17885

Conversation

SarthakC commented Oct 15, 2019 • edited by oliviertassinari

mui-pr-bot commented Oct 15, 2019 • edited

oliviertassinari commented Oct 15, 2019

SarthakC commented Oct 15, 2019

oliviertassinari left a comment • edited

Choose a reason for hiding this comment

oliviertassinari commented Oct 19, 2019

afzalsayed96 Dec 26, 2019

Choose a reason for hiding this comment

kevinlul commented Apr 22, 2021

oliviertassinari commented Apr 22, 2021

kevinlul commented Apr 22, 2021

oliviertassinari commented Apr 22, 2021 • edited

kevinlul commented Apr 23, 2021

oliviertassinari commented Apr 23, 2021

SarthakC commented Oct 15, 2019 •

edited by oliviertassinari

mui-pr-bot commented Oct 15, 2019 •

edited

oliviertassinari left a comment •

edited

oliviertassinari commented Apr 22, 2021 •

edited