[Table] Fix TablePagination duplicate key error

[afzalsayed96]

• I have followed (at least) the PR section of the contributing guide.

Refer: #17885 (comment)

[mui-pr-bot]

Details of bundle changes.

Comparing: ae837c9...f601639

bundle	Size Change	Size	Gzip Change	Gzip
@material-ui/core	▲ +16 B (0.00% )	358 kB	▲ +1 B (0.00% )	97.6 kB
@material-ui/core[umd]	▲ +16 B (+0.01% )	314 kB	▲ +1 B (0.00% )	90.5 kB
TablePagination	▲ +16 B (+0.01% )	141 kB	▲ +1 B (0.00% )	41.3 kB
@material-ui/lab	--	176 kB	--	53.1 kB
@material-ui/styles	--	50.8 kB	--	15.3 kB
@material-ui/system	--	14.5 kB	--	4.04 kB
AppBar	--	63.6 kB	--	20 kB
Autocomplete	--	129 kB	--	40.4 kB
Avatar	--	64.9 kB	--	20.5 kB
AvatarGroup	--	62 kB	--	19.5 kB
Backdrop	--	67.4 kB	--	20.9 kB
Badge	--	65 kB	--	20.3 kB
BottomNavigation	--	62.1 kB	--	19.5 kB
BottomNavigationAction	--	75.2 kB	--	23.8 kB
Box	--	70.4 kB	--	21.5 kB
Breadcrumbs	--	67.7 kB	--	21.3 kB
Button	--	79.4 kB	--	24.4 kB
ButtonBase	--	73.6 kB	--	23.2 kB
ButtonGroup	--	82.8 kB	--	25.4 kB
Card	--	62.5 kB	--	19.6 kB
CardActionArea	--	74.7 kB	--	23.6 kB
CardActions	--	61.7 kB	--	19.4 kB
CardContent	--	61.7 kB	--	19.4 kB
CardHeader	--	64.8 kB	--	20.4 kB
CardMedia	--	62 kB	--	19.6 kB
Checkbox	--	81.6 kB	--	25.9 kB
Chip	--	82.2 kB	--	25.2 kB
CircularProgress	--	63.8 kB	--	20.2 kB
ClickAwayListener	--	3.85 kB	--	1.55 kB
Collapse	--	67.6 kB	--	21 kB
colorManipulator	--	3.85 kB	--	1.52 kB
Container	--	62.9 kB	--	19.7 kB
CssBaseline	--	57.3 kB	--	18 kB
Dialog	--	82.4 kB	--	25.8 kB
DialogActions	--	61.8 kB	--	19.4 kB
DialogContent	--	61.9 kB	--	19.5 kB
DialogContentText	--	63.7 kB	--	20.1 kB
DialogTitle	--	64 kB	--	20.1 kB
Divider	--	62.3 kB	--	19.6 kB
docs.landing	--	50.7 kB	--	13.4 kB
docs.main	--	613 kB	--	196 kB
Drawer	--	84.2 kB	--	25.7 kB
ExpansionPanel	--	71.1 kB	--	22.3 kB
ExpansionPanelActions	--	61.8 kB	--	19.4 kB
ExpansionPanelDetails	--	61.6 kB	--	19.4 kB
ExpansionPanelSummary	--	77.8 kB	--	24.6 kB
Fab	--	76.5 kB	--	23.9 kB
Fade	--	23.2 kB	--	7.98 kB
FilledInput	--	73.2 kB	--	22.8 kB
FormControl	--	64.1 kB	--	20 kB
FormControlLabel	--	65.2 kB	--	20.5 kB
FormGroup	--	61.7 kB	--	19.4 kB
FormHelperText	--	63 kB	--	19.8 kB
FormLabel	--	63.1 kB	--	19.6 kB
Grid	--	64.8 kB	--	20.4 kB
GridList	--	62.2 kB	--	19.6 kB
GridListTile	--	63.4 kB	--	19.9 kB
GridListTileBar	--	62.9 kB	--	19.8 kB
Grow	--	23.8 kB	--	8.19 kB
Hidden	--	65.6 kB	--	20.7 kB
Icon	--	62.5 kB	--	19.6 kB
IconButton	--	75.8 kB	--	23.7 kB
Input	--	72.2 kB	--	22.6 kB
InputAdornment	--	64.8 kB	--	20.4 kB
InputBase	--	70.3 kB	--	22.1 kB
InputLabel	--	65 kB	--	20.1 kB
LinearProgress	--	65 kB	--	20.4 kB
Link	--	66.3 kB	--	21.1 kB
List	--	62 kB	--	19.4 kB
ListItem	--	76.8 kB	--	24.1 kB
ListItemAvatar	--	61.8 kB	--	19.4 kB
ListItemIcon	--	61.9 kB	--	19.4 kB
ListItemSecondaryAction	--	61.7 kB	--	19.4 kB
ListItemText	--	64.6 kB	--	20.4 kB
ListSubheader	--	62.4 kB	--	19.7 kB
Menu	--	88.1 kB	--	27.2 kB
MenuItem	--	77.8 kB	--	24.4 kB
MenuList	--	65.7 kB	--	20.6 kB
MobileStepper	--	67.5 kB	--	21.2 kB
Modal	--	14.3 kB	--	5.01 kB
NativeSelect	--	76.5 kB	--	24.2 kB
NoSsr	--	2.19 kB	--	1.04 kB
OutlinedInput	--	73.7 kB	--	23 kB
Paper	--	62 kB	--	19.4 kB
Popover	--	82.5 kB	--	25.6 kB
Popper	--	28.7 kB	--	10.3 kB
Portal	--	2.9 kB	--	1.3 kB
Radio	--	82.5 kB	--	26.1 kB
RadioGroup	--	62.9 kB	--	19.8 kB
Rating	--	69.7 kB	--	22.5 kB
RootRef	--	4.21 kB	--	1.64 kB
Select	--	114 kB	--	34 kB
Skeleton	--	62.3 kB	--	19.7 kB
Slide	--	25.3 kB	--	8.71 kB
Slider	--	75.3 kB	--	23.9 kB
Snackbar	--	74.8 kB	--	23.4 kB
SnackbarContent	--	63.2 kB	--	20 kB
SpeedDial	--	85.7 kB	--	27.1 kB
SpeedDialAction	--	117 kB	--	37 kB
SpeedDialIcon	--	64.3 kB	--	20.2 kB
Step	--	62.3 kB	--	19.6 kB
StepButton	--	82 kB	--	26 kB
StepConnector	--	62.4 kB	--	19.7 kB
StepContent	--	68.7 kB	--	21.6 kB
StepIcon	--	64.3 kB	--	20.1 kB
StepLabel	--	68.3 kB	--	21.2 kB
Stepper	--	64.6 kB	--	20.4 kB
styles/createMuiTheme	--	16.4 kB	--	5.83 kB
SvgIcon	--	62.7 kB	--	19.6 kB
SwipeableDrawer	--	91.6 kB	--	28.7 kB
Switch	--	80.8 kB	--	25.5 kB
Tab	--	76 kB	--	24.1 kB
Table	--	62.2 kB	--	19.6 kB
TableBody	--	61.8 kB	--	19.4 kB
TableCell	--	63.7 kB	--	20.1 kB
TableContainer	--	61.7 kB	--	19.4 kB
TableFooter	--	61.8 kB	--	19.4 kB
TableHead	--	61.8 kB	--	19.4 kB
TableRow	--	62.2 kB	--	19.6 kB
TableSortLabel	--	77 kB	--	24.3 kB
Tabs	--	85.1 kB	--	27.1 kB
TextareaAutosize	--	5.09 kB	--	2.14 kB
TextField	--	123 kB	--	36.1 kB
ToggleButton	--	75.8 kB	--	24.1 kB
ToggleButtonGroup	--	62.9 kB	--	19.8 kB
Toolbar	--	62 kB	--	19.6 kB
Tooltip	--	101 kB	--	31.9 kB
TreeItem	--	73.4 kB	--	23.3 kB
TreeView	--	66.1 kB	--	20.8 kB
Typography	--	63.3 kB	--	19.9 kB
useAutocomplete	--	12.6 kB	--	4.7 kB
useMediaQuery	--	2.5 kB	--	1.05 kB
Zoom	--	23.3 kB	--	8.1 kB

Generated by 🚫 dangerJS against f601639

[oliviertassinari]

Nice finding :). I'm curious, what's your use case for a different label?

[oliviertassinari]

@afzalsayed96 It's a great first pull request on Material-UI 👌🏻. Thank you for working on it!

[afzalsayed96]

@oliviertassinari That was fast! Thank you for merging in. My use case was same as #17885 i.e. wanted to show all rows and provide an option for it.

I don't think this feature is documented in docs. So I had to go through the PR to find about it's usage.

[oliviertassinari]

@afzalsayed96 Oh ok, I wasn't expecting a warning in this configuration.
The feature is somewhat documented in https://material-ui.com/components/tables/#custom-pagination-options.

[afzalsayed96]

Oh that's perfect! I somehow missed that.

This could be further cleaned up by the following syntax if you choose to upgrade to Typescript 3.7

{rowsPerPageOptions.map(rowsPerPageOption => (
              <MenuItemComponent
                className={classes.menuItem}
-                key={rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption}
+                key={rowsPerPageOption.value ?? rowsPerPageOption} 
-                value={rowsPerPageOption.value ? rowsPerPageOption.value : rowsPerPageOption}
+                value={rowsPerPageOption.value ?? rowsPerPageOption}
              >
-                {rowsPerPageOption.label ? rowsPerPageOption.label : rowsPerPageOption}
+                {rowsPerPageOption.value ?? rowsPerPageOption}
              </MenuItemComponent>
            ))}

[oliviertassinari]

We will probably wait for the syntax to lands in the ECMA-262, thanks for sharing.