update types and demos

mui · Dec 5, 2019 · 15b1d97 · 15b1d97
1 parent b16d845
commit 15b1d97
Show file tree

Hide file tree

Showing 15 changed files with 247 additions and 284 deletions.
diff --git a/docs/src/pages/components/tables/AcccessibleTable.js b/docs/src/pages/components/tables/AcccessibleTable.js
@@ -10,7 +10,6 @@ import Paper from '@material-ui/core/Paper';
 const useStyles = makeStyles({
  root: {
  width: '100%',
- overflowX: 'auto',
  },
  table: {
  minWidth: 650,
@@ -32,7 +31,7 @@ export default function AcccessibleTable() {
 
  return (
  <Paper className={classes.root}>
- <Table className={classes.table} aria-label="caption table">
+ <Table responsive className={classes.table} aria-label="caption table">
  <caption>A barbone structure table example with a caption</caption>
  <TableHead>
  <TableRow>

diff --git a/docs/src/pages/components/tables/AcccessibleTable.tsx b/docs/src/pages/components/tables/AcccessibleTable.tsx
@@ -10,7 +10,6 @@ import Paper from '@material-ui/core/Paper';
 const useStyles = makeStyles({
  root: {
  width: '100%',
- overflowX: 'auto',
  },
  table: {
  minWidth: 650,
@@ -32,7 +31,7 @@ export default function AcccessibleTable() {
 
  return (
  <Paper className={classes.root}>
- <Table className={classes.table} aria-label="caption table">
+ <Table responsive className={classes.table} aria-label="caption table">
  <caption>A barbone structure table example with a caption</caption>
  <TableHead>
  <TableRow>

diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.js b/docs/src/pages/components/tables/CustomPaginationActionsTable.js
@@ -106,9 +106,6 @@ const useStyles2 = makeStyles({
  table: {
  minWidth: 500,
  },
- tableWrapper: {
- overflowX: 'auto',
- },
 });
 
 export default function CustomPaginationActionsTable() {
@@ -129,48 +126,46 @@ export default function CustomPaginationActionsTable() {
 
  return (
  <Paper className={classes.root}>
- <div className={classes.tableWrapper}>
- <Table className={classes.table} aria-label="custom pagination table">
- <TableBody>
- {(rowsPerPage > 0
- ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
- : rows
- ).map(row => (
- <TableRow key={row.name}>
- <TableCell component="th" scope="row">
- {row.name}
- </TableCell>
- <TableCell align="right">{row.calories}</TableCell>
- <TableCell align="right">{row.fat}</TableCell>
- </TableRow>
- ))}
-
- {emptyRows > 0 && (
- <TableRow style={{ height: 53 * emptyRows }}>
- <TableCell colSpan={6} />
- </TableRow>
- )}
- </TableBody>
- <TableFooter>
- <TableRow>
- <TablePagination
- rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
- colSpan={3}
- count={rows.length}
- rowsPerPage={rowsPerPage}
- page={page}
- SelectProps={{
- inputProps: { 'aria-label': 'rows per page' },
- native: true,
- }}
- onChangePage={handleChangePage}
- onChangeRowsPerPage={handleChangeRowsPerPage}
- ActionsComponent={TablePaginationActions}
- />
+ <Table responsive className={classes.table} aria-label="custom pagination table">
+ <TableBody>
+ {(rowsPerPage > 0
+ ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+ : rows
+ ).map(row => (
+ <TableRow key={row.name}>
+ <TableCell component="th" scope="row">
+ {row.name}
+ </TableCell>
+ <TableCell align="right">{row.calories}</TableCell>
+ <TableCell align="right">{row.fat}</TableCell>
+ </TableRow>
+ ))}
+
+ {emptyRows > 0 && (
+ <TableRow style={{ height: 53 * emptyRows }}>
+ <TableCell colSpan={6} />
  </TableRow>
- </TableFooter>
- </Table>
- </div>
+ )}
+ </TableBody>
+ <TableFooter>
+ <TableRow>
+ <TablePagination
+ rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+ colSpan={3}
+ count={rows.length}
+ rowsPerPage={rowsPerPage}
+ page={page}
+ SelectProps={{
+ inputProps: { 'aria-label': 'rows per page' },
+ native: true,
+ }}
+ onChangePage={handleChangePage}
+ onChangeRowsPerPage={handleChangeRowsPerPage}
+ ActionsComponent={TablePaginationActions}
+ />
+ </TableRow>
+ </TableFooter>
+ </Table>
  </Paper>
  );
 }
diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx
@@ -107,9 +107,6 @@ const useStyles2 = makeStyles({
  table: {
  minWidth: 500,
  },
- tableWrapper: {
- overflowX: 'auto',
- },
 });
 
 export default function CustomPaginationActionsTable() {
@@ -132,47 +129,45 @@ export default function CustomPaginationActionsTable() {
 
  return (
  <Paper className={classes.root}>
- <div className={classes.tableWrapper}>
- <Table className={classes.table} aria-label="custom pagination table">
- <TableBody>
- {(rowsPerPage > 0
- ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
- : rows
- ).map(row => (
- <TableRow key={row.name}>
- <TableCell component="th" scope="row">
- {row.name}
- </TableCell>
- <TableCell align="right">{row.calories}</TableCell>
- <TableCell align="right">{row.fat}</TableCell>
- </TableRow>
- ))}
- {emptyRows > 0 && (
- <TableRow style={{ height: 53 * emptyRows }}>
- <TableCell colSpan={6} />
- </TableRow>
- )}
- </TableBody>
- <TableFooter>
- <TableRow>
- <TablePagination
- rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
- colSpan={3}
- count={rows.length}
- rowsPerPage={rowsPerPage}
- page={page}
- SelectProps={{
- inputProps: { 'aria-label': 'rows per page' },
- native: true,
- }}
- onChangePage={handleChangePage}
- onChangeRowsPerPage={handleChangeRowsPerPage}
- ActionsComponent={TablePaginationActions}
- />
+ <Table responsive className={classes.table} aria-label="custom pagination table">
+ <TableBody>
+ {(rowsPerPage > 0
+ ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+ : rows
+ ).map(row => (
+ <TableRow key={row.name}>
+ <TableCell component="th" scope="row">
+ {row.name}
+ </TableCell>
+ <TableCell align="right">{row.calories}</TableCell>
+ <TableCell align="right">{row.fat}</TableCell>
+ </TableRow>
+ ))}
+ {emptyRows > 0 && (
+ <TableRow style={{ height: 53 * emptyRows }}>
+ <TableCell colSpan={6} />
  </TableRow>
- </TableFooter>
- </Table>
- </div>
+ )}
+ </TableBody>
+ <TableFooter>
+ <TableRow>
+ <TablePagination
+ rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+ colSpan={3}
+ count={rows.length}
+ rowsPerPage={rowsPerPage}
+ page={page}
+ SelectProps={{
+ inputProps: { 'aria-label': 'rows per page' },
+ native: true,
+ }}
+ onChangePage={handleChangePage}
+ onChangeRowsPerPage={handleChangeRowsPerPage}
+ ActionsComponent={TablePaginationActions}
+ />
+ </TableRow>
+ </TableFooter>
+ </Table>
  </Paper>
  );
 }
diff --git a/docs/src/pages/components/tables/CustomizedTables.js b/docs/src/pages/components/tables/CustomizedTables.js
@@ -40,7 +40,6 @@ const rows = [
 const useStyles = makeStyles({
  root: {
  width: '100%',
- overflowX: 'auto',
  },
  table: {
  minWidth: 700,
@@ -52,7 +51,7 @@ export default function CustomizedTables() {
 
  return (
  <Paper className={classes.root}>
- <Table className={classes.table} aria-label="customized table">
+ <Table responsive className={classes.table} aria-label="customized table">
  <TableHead>
  <TableRow>
  <StyledTableCell>Dessert (100g serving)</StyledTableCell>

diff --git a/docs/src/pages/components/tables/CustomizedTables.tsx b/docs/src/pages/components/tables/CustomizedTables.tsx
@@ -44,7 +44,6 @@ const rows = [
 const useStyles = makeStyles({
  root: {
  width: '100%',
- overflowX: 'auto',
  },
  table: {
  minWidth: 700,
@@ -56,7 +55,7 @@ export default function CustomizedTables() {
 
  return (
  <Paper className={classes.root}>
- <Table className={classes.table} aria-label="customized table">
+ <Table responsive className={classes.table} aria-label="customized table">
  <TableHead>
  <TableRow>
  <StyledTableCell>Dessert (100g serving)</StyledTableCell>

diff --git a/docs/src/pages/components/tables/DenseTable.js b/docs/src/pages/components/tables/DenseTable.js
@@ -11,10 +11,6 @@ const useStyles = makeStyles({
  root: {
  width: '100%',
  },
- paper: {
- width: '100%',
- overflowX: 'auto',
- },
  table: {
  minWidth: 650,
  },
@@ -36,33 +32,31 @@ export default function DenseTable() {
  const classes = useStyles();
 
  return (
- <div className={classes.root}>
- <Paper className={classes.paper}>
- <Table className={classes.table} size="small" aria-label="a dense table">
- <TableHead>
- <TableRow>
- <TableCell>Dessert (100g serving)</TableCell>
- <TableCell align="right">Calories</TableCell>
- <TableCell align="right">Fat&nbsp;(g)</TableCell>
- <TableCell align="right">Carbs&nbsp;(g)</TableCell>
- <TableCell align="right">Protein&nbsp;(g)</TableCell>
+ <Paper className={classes.root}>
+ <Table responsive className={classes.table} size="small" aria-label="a dense table">
+ <TableHead>
+ <TableRow>
+ <TableCell>Dessert (100g serving)</TableCell>
+ <TableCell align="right">Calories</TableCell>
+ <TableCell align="right">Fat&nbsp;(g)</TableCell>
+ <TableCell align="right">Carbs&nbsp;(g)</TableCell>
+ <TableCell align="right">Protein&nbsp;(g)</TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {rows.map(row => (
+ <TableRow key={row.name}>
+ <TableCell component="th" scope="row">
+ {row.name}
+ </TableCell>
+ <TableCell align="right">{row.calories}</TableCell>
+ <TableCell align="right">{row.fat}</TableCell>
+ <TableCell align="right">{row.carbs}</TableCell>
+ <TableCell align="right">{row.protein}</TableCell>
  </TableRow>
- </TableHead>
- <TableBody>
- {rows.map(row => (
- <TableRow key={row.name}>
- <TableCell component="th" scope="row">
- {row.name}
- </TableCell>
- <TableCell align="right">{row.calories}</TableCell>
- <TableCell align="right">{row.fat}</TableCell>
- <TableCell align="right">{row.carbs}</TableCell>
- <TableCell align="right">{row.protein}</TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </Paper>
- </div>
+ ))}
+ </TableBody>
+ </Table>
+ </Paper>
  );
 }