Skip to content

[Table] Add TableContainer component - #18699

Merged
oliviertassinari merged 7 commits into
mui:masterfrom
r3dm1ke:9221-add-responsive-prop-to-table
Dec 10, 2019
Merged

[Table] Add TableContainer component#18699
oliviertassinari merged 7 commits into
mui:masterfrom
r3dm1ke:9221-add-responsive-prop-to-table

Conversation

@r3dm1ke

@r3dm1ke r3dm1ke commented Dec 5, 2019

Copy link
Copy Markdown
Contributor

Fixes #9221

@mui-pr-bot

mui-pr-bot commented Dec 5, 2019 •
edited
Loading

Copy link
Copy Markdown

@material-ui/core: parsed: +0.13% , gzip: +0.06%

Details of bundle changes.

Comparing: d30e5ae...07ada28

bundle Size Change Size Gzip Change Gzip
TableContainer ▲ +60.6 kB (+Infinity% ) 60.6 kB ▲ +18.9 kB (+Infinity% ) 18.9 kB
@material-ui/core ▲ +464 B (+0.13% ) 356 kB ▲ +57 B (+0.06% ) 97.2 kB
@material-ui/core[umd] ▲ +299 B (+0.10% ) 312 kB ▲ +40 B (+0.04% ) 90.2 kB
TablePagination ▲ +2 B (0.00% ) 139 kB ▲ +5 B (+0.01% ) 40.7 kB
TextField ▲ +2 B (0.00% ) 122 kB ▲ +3 B (+0.01% ) 35.5 kB
@material-ui/lab ▲ +2 B (0.00% ) 175 kB ▲ +2 B (0.00% ) 52.4 kB
MobileStepper -- 66.4 kB ▼ -7 B (-0.03% ) 20.7 kB
TableSortLabel -- 76 kB ▼ -4 B (-0.02% ) 23.8 kB
useAutocomplete -- 12.3 kB ▼ -4 B (-0.09% ) 4.6 kB
CardActions -- 60.7 kB ▼ -3 B (-0.02% ) 19 kB
Container -- 61.9 kB ▼ -3 B (-0.02% ) 19.3 kB
ExpansionPanelActions -- 60.8 kB ▲ +3 B (+0.02% ) 19 kB
ExpansionPanelDetails -- 60.6 kB ▼ -3 B (-0.02% ) 18.9 kB
FilledInput -- 72.1 kB ▲ +3 B (+0.01% ) 22.3 kB
Grid -- 63.8 kB ▼ -3 B (-0.02% ) 19.9 kB
Grow -- 22.8 kB ▼ -3 B (-0.04% ) 7.8 kB
InputBase -- 69.2 kB ▲ +3 B (+0.01% ) 21.6 kB
Menu -- 86.9 kB ▲ +3 B (+0.01% ) 26.7 kB
OutlinedInput -- 72.6 kB ▲ +3 B (+0.01% ) 22.5 kB
Popover -- 81.3 kB ▲ +3 B (+0.01% ) 25.1 kB
Select -- 113 kB ▲ +3 B (+0.01% ) 33.5 kB
StepContent -- 67.7 kB ▲ +3 B (+0.01% ) 21.1 kB
TableBody -- 60.8 kB ▼ -3 B (-0.02% ) 19 kB
TableHead -- 60.8 kB ▼ -3 B (-0.02% ) 19 kB
@material-ui/system -- 14.5 kB ▲ +2 B (+0.05% ) 4.04 kB
Autocomplete -- 127 kB ▲ +2 B (+0.01% ) 39.8 kB
AvatarGroup -- 60.9 kB ▼ -2 B (-0.01% ) 19.1 kB
Backdrop -- 66.4 kB ▲ +2 B (+0.01% ) 20.5 kB
Button -- 78.3 kB ▲ +2 B (+0.01% ) 23.9 kB
ButtonBase -- 72.6 kB ▲ +2 B (+0.01% ) 22.7 kB
ButtonGroup -- 80.9 kB ▼ -2 B (-0.01% ) 24.8 kB
Card -- 61.4 kB ▲ +2 B (+0.01% ) 19.1 kB
CardHeader -- 63.7 kB ▼ -2 B (-0.01% ) 20 kB
Chip -- 81.2 kB ▲ +2 B (+0.01% ) 24.8 kB
Divider -- 61.3 kB ▼ -2 B (-0.01% ) 19.2 kB
Drawer -- 83 kB ▲ +2 B (+0.01% ) 25.2 kB
Fab -- 75.4 kB ▲ +2 B (+0.01% ) 23.4 kB
GridList -- 61.2 kB ▼ -2 B (-0.01% ) 19.2 kB
GridListTileBar -- 61.9 kB ▼ -2 B (-0.01% ) 19.3 kB
Input -- 71.1 kB ▲ +2 B (+0.01% ) 22.1 kB
List -- 61 kB ▲ +2 B (+0.01% ) 19 kB
ListItem -- 75.7 kB ▲ +2 B (+0.01% ) 23.6 kB
ListItemAvatar -- 60.8 kB ▼ -2 B (-0.01% ) 19 kB
ListItemSecondaryAction -- 60.7 kB ▼ -2 B (-0.01% ) 19 kB
MenuList -- 64.6 kB ▲ +2 B (+0.01% ) 20.2 kB
Popper -- 28.7 kB ▲ +2 B (+0.02% ) 10.3 kB
StepIcon -- 63.3 kB ▲ +2 B (+0.01% ) 19.7 kB
Stepper -- 63.4 kB ▼ -2 B (-0.01% ) 19.9 kB
SvgIcon -- 61.7 kB ▲ +2 B (+0.01% ) 19.2 kB
TableFooter -- 60.8 kB ▲ +2 B (+0.01% ) 19 kB
TreeView -- 65 kB ▼ -2 B (-0.01% ) 20.4 kB
Typography -- 62.3 kB ▲ +2 B (+0.01% ) 19.4 kB
@material-ui/styles -- 50.8 kB ▼ -1 B (-0.01% ) 15.3 kB
AppBar -- 62.4 kB ▲ +1 B (+0.01% ) 19.5 kB
Avatar -- 63.9 kB ▼ -1 B (-0.00% ) 20.1 kB
Badge -- 64 kB ▼ -1 B (-0.01% ) 19.8 kB
BottomNavigation -- 61.1 kB ▼ -1 B (-0.01% ) 19.1 kB
CardActionArea -- 73.7 kB ▲ +1 B (0.00% ) 23.1 kB
CardContent -- 60.7 kB ▲ +1 B (+0.01% ) 18.9 kB
Checkbox -- 80.6 kB ▼ -1 B (-0.00% ) 25.4 kB
Collapse -- 66.6 kB ▲ +1 B (0.00% ) 20.6 kB
CssBaseline -- 56.2 kB ▼ -1 B (-0.01% ) 17.6 kB
Dialog -- 81.3 kB ▲ +1 B (0.00% ) 25.4 kB
DialogActions -- 60.8 kB ▼ -1 B (-0.01% ) 19 kB
DialogContentText -- 62.7 kB ▼ -1 B (-0.01% ) 19.7 kB
DialogTitle -- 63 kB ▼ -1 B (-0.01% ) 19.7 kB
docs.main -- 610 kB ▼ -1 B (-0.00% ) 194 kB
ExpansionPanel -- 69.9 kB ▼ -1 B (-0.00% ) 21.8 kB
ExpansionPanelSummary -- 76.7 kB ▼ -1 B (-0.00% ) 24.2 kB
Fade -- 22.2 kB ▼ -1 B (-0.01% ) 7.68 kB
FormControl -- 63.1 kB ▲ +1 B (+0.01% ) 19.6 kB
FormGroup -- 60.7 kB ▼ -1 B (-0.01% ) 19 kB
FormHelperText -- 61.9 kB ▼ -1 B (-0.01% ) 19.4 kB
GridListTile -- 62.4 kB ▼ -1 B (-0.01% ) 19.5 kB
Icon -- 61.5 kB ▼ -1 B (-0.01% ) 19.2 kB
IconButton -- 74.8 kB ▲ +1 B (0.00% ) 23.3 kB
InputAdornment -- 63.8 kB ▼ -1 B (-0.01% ) 20 kB
InputLabel -- 64 kB ▼ -1 B (-0.01% ) 19.9 kB
LinearProgress -- 64 kB ▼ -1 B (-0.01% ) 19.9 kB
ListItemIcon -- 60.9 kB ▼ -1 B (-0.01% ) 19 kB
ListItemText -- 63.6 kB ▲ +1 B (+0.01% ) 19.9 kB
ListSubheader -- 61.4 kB ▼ -1 B (-0.01% ) 19.3 kB
MenuItem -- 76.8 kB ▲ +1 B (0.00% ) 23.9 kB
Modal -- 14.3 kB ▲ +1 B (+0.02% ) 5 kB
NativeSelect -- 75.4 kB ▼ -1 B (-0.00% ) 23.7 kB
Paper -- 60.9 kB ▲ +1 B (+0.01% ) 18.9 kB
Radio -- 81.5 kB ▼ -1 B (-0.00% ) 25.6 kB
Rating -- 68.7 kB ▼ -1 B (-0.00% ) 22 kB
Slide -- 24.3 kB ▼ -1 B (-0.01% ) 8.3 kB
Snackbar -- 75.8 kB ▲ +1 B (0.00% ) 23.7 kB
SnackbarContent -- 64.3 kB ▼ -1 B (-0.00% ) 20.2 kB
StepButton -- 80.9 kB ▲ +1 B (0.00% ) 25.5 kB
StepConnector -- 61.4 kB ▼ -1 B (-0.01% ) 19.3 kB
StepLabel -- 67.3 kB ▼ -1 B (-0.00% ) 21.1 kB
styles/createMuiTheme -- 15.4 kB ▼ -1 B (-0.02% ) 5.44 kB
SwipeableDrawer -- 90.4 kB ▲ +1 B (0.00% ) 27.9 kB
Tab -- 75 kB ▲ +1 B (0.00% ) 23.6 kB
Table -- 61.2 kB ▼ -1 B (-0.01% ) 19.2 kB
TableCell -- 62.7 kB ▼ -1 B (-0.01% ) 19.7 kB
TableRow -- 61.2 kB ▼ -1 B (-0.01% ) 19.1 kB
ToggleButtonGroup -- 61.9 kB ▲ +1 B (+0.01% ) 19.4 kB
Toolbar -- 61 kB ▼ -1 B (-0.01% ) 19.1 kB
Tooltip -- 99.5 kB ▲ +1 B (0.00% ) 31.4 kB
BottomNavigationAction -- 74.1 kB -- 23.4 kB
Box -- 69.4 kB -- 21 kB
Breadcrumbs -- 66.7 kB -- 20.8 kB
CardMedia -- 61 kB -- 19.1 kB
CircularProgress -- 62.8 kB -- 19.7 kB
ClickAwayListener -- 3.87 kB -- 1.56 kB
colorManipulator -- 3.85 kB -- 1.52 kB
DialogContent -- 60.9 kB -- 19 kB
docs.landing -- 52.4 kB -- 11.5 kB
FormControlLabel -- 64.2 kB -- 20.1 kB
FormLabel -- 62.1 kB -- 19.2 kB
Hidden -- 64.6 kB -- 20.2 kB
Link -- 65.3 kB -- 20.5 kB
NoSsr -- 2.19 kB -- 1.03 kB
Portal -- 2.9 kB -- 1.3 kB
RadioGroup -- 61.9 kB -- 19.3 kB
RootRef -- 4.21 kB -- 1.64 kB
Skeleton -- 61.2 kB -- 19.3 kB
Slider -- 74.3 kB -- 23.3 kB
SpeedDial -- 84.7 kB -- 26.7 kB
SpeedDialAction -- 116 kB -- 36.5 kB
SpeedDialIcon -- 63.2 kB -- 19.8 kB
Step -- 61.3 kB -- 19.2 kB
Switch -- 79.8 kB -- 25 kB
Tabs -- 84.1 kB -- 26.5 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
ToggleButton -- 74.8 kB -- 23.6 kB
TreeItem -- 72.3 kB -- 22.8 kB
useMediaQuery -- 2.5 kB -- 1.06 kB
Zoom -- 22.3 kB -- 7.68 kB

Generated by 🚫 dangerJS against 07ada28

@oliviertassinari oliviertassinari added scope: table Changes related to the table. type: new feature Expand the scope of the product to solve a new problem. labels Dec 5, 2019
@oliviertassinari

oliviertassinari commented Dec 5, 2019

Copy link
Copy Markdown
Member

I have some concerns with the change in the DOM structure and the option to go with a TableResponsive component 🤔.

@r3dm1ke

r3dm1ke commented Dec 5, 2019 •
edited by mbrookes
Loading

Copy link
Copy Markdown
Contributor Author

What if instead of wrapping the table with a div and applying overflowX: auto to it, we just applied it to the table itself? I can put together a sandbox to check it out

oliviertassinari
oliviertassinari reviewed Dec 9, 2019
View reviewed changes

@oliviertassinari oliviertassinari left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

After further reflection, I'm no longer sure this prop is the best approach. The fact that it changes the DOM structure for a single CSS property makes me uncomfortable.

@oliviertassinari

oliviertassinari commented Dec 9, 2019

Copy link
Copy Markdown
Member

I haven't realized that we had a very close effort in #9268.

@oliviertassinari
oliviertassinari force-pushed the 9221-add-responsive-prop-to-table branch 2 times, most recently from 7d2ce98 to 187d884 Compare December 9, 2019 21:52
@oliviertassinari oliviertassinari changed the title [Table] Add responsive prop to allow it to overflow [Table] Add TableContainer component Dec 9, 2019
@oliviertassinari

oliviertassinari commented Dec 9, 2019

Copy link
Copy Markdown
Member

It seems that we can be more explicit with this approach, looking at the demo changes, it seems to play out well:

<TableContainer>
  <Table aria-label="caption table">

@oliviertassinari
oliviertassinari force-pushed the 9221-add-responsive-prop-to-table branch from 187d884 to 5a065a0 Compare December 9, 2019 22:01
@oliviertassinari
oliviertassinari force-pushed the 9221-add-responsive-prop-to-table branch from 5a065a0 to d0755cf Compare December 9, 2019 22:16
mbrookes
mbrookes previously requested changes Dec 9, 2019
View reviewed changes
Comment thread packages/material-ui/src/TableContainer/TableContainer.js Outdated
@oliviertassinari
oliviertassinari merged commit 0ba4900 into mui:master Dec 10, 2019
@oliviertassinari

oliviertassinari commented Dec 10, 2019

Copy link
Copy Markdown
Member

@r3dm1ke Thanks

@snyk-bot snyk-bot mentioned this pull request Jan 7, 2020
Open
@snyk-bot snyk-bot mentioned this pull request Feb 15, 2020
Open
@snyk-bot snyk-bot mentioned this pull request Feb 25, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@oliviertassinari oliviertassinari oliviertassinari approved these changes
@mbrookes mbrookes mbrookes left review comments

Assignees

No one assigned

Labels

scope: table Changes related to the table. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Table] Responsive option

4 participants

@r3dm1ke @mui-pr-bot @oliviertassinari @mbrookes