Use TableContainer to be more explicit

mui · Dec 9, 2019 · 187d884 · 187d884
1 parent 15b1d97
commit 187d884
Show file tree

Hide file tree

Showing 32 changed files with 338 additions and 233 deletions.
diff --git a/docs/pages/api/table-container.js b/docs/pages/api/table-container.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from './table-container.md';
+
+export default function Page() {
+ return <MarkdownDocs markdown={markdown} />;
+}
diff --git a/docs/pages/api/table-container.md b/docs/pages/api/table-container.md
@@ -0,0 +1,55 @@
+---
+filename: /packages/material-ui/src/TableContainer/TableContainer.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# TableContainer API
+
+<p class="description">The API documentation of the TableContainer React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import TableContainer from '@material-ui/core/TableContainer';
+// or
+import { TableContainer } from '@material-ui/core';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name required">children&nbsp;*</span> | <span class="prop-type">node</span> | | The content of the table, normally `TableHead` and `TableBody`. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+- Style sheet name: `MuiTableContainer`.
+- Style sheet details:
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiTableContainer-root</span> | Styles applied to the root element.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/TableContainer/TableContainer.js) for more detail.
+
+## Demos
+
+- [Tables](/components/tables/)
+
diff --git a/docs/pages/api/table.md b/docs/pages/api/table.md
@@ -28,7 +28,6 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'table'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 | <span class="prop-name">padding</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'checkbox'<br>&#124;&nbsp;'none'</span> | <span class="prop-default">'default'</span> | Allows TableCells to inherit padding of the Table. |
-| <span class="prop-name">responsive</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Allow table to overflow horizontally, making it responsive. |
 | <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'</span> | <span class="prop-default">'medium'</span> | Allows TableCells to inherit size of the Table. |
 | <span class="prop-name">stickyHeader</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Set the header sticky.<br>⚠️ It doesn't work with IE 11. |
 
@@ -45,7 +44,6 @@ Any other props supplied will be provided to the root element (native element).
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiTable-root</span> | Styles applied to the root element.
 | <span class="prop-name">stickyHeader</span> | <span class="prop-name">.MuiTable-stickyHeader</span> | Styles applied to the root element if `stickyHeader={true}`.
-| <span class="prop-name">responsive</span> | <span class="prop-name">.MuiTable-responsive</span> | Styles applied to the root element if `responsive={true}`.
 
 You can override the style of the component thanks to one of these customization points:
 

diff --git a/docs/src/pages/components/tables/AcccessibleTable.js b/docs/src/pages/components/tables/AcccessibleTable.js
@@ -3,14 +3,12 @@ import { makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 
 const useStyles = makeStyles({
- root: {
- width: '100%',
- },
  table: {
  minWidth: 650,
  },
@@ -30,8 +28,8 @@ export default function AcccessibleTable() {
  const classes = useStyles();
 
  return (
- <Paper className={classes.root}>
- <Table responsive className={classes.table} aria-label="caption table">
+ <TableContainer component={Paper}>
+ <Table className={classes.table} aria-label="caption table">
  <caption>A barbone structure table example with a caption</caption>
  <TableHead>
  <TableRow>
@@ -56,6 +54,6 @@ export default function AcccessibleTable() {
  ))}
  </TableBody>
  </Table>
- </Paper>
+ </TableContainer>
  );
 }
diff --git a/docs/src/pages/components/tables/AcccessibleTable.tsx b/docs/src/pages/components/tables/AcccessibleTable.tsx
@@ -3,14 +3,12 @@ import { makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 
 const useStyles = makeStyles({
- root: {
- width: '100%',
- },
  table: {
  minWidth: 650,
  },
@@ -30,8 +28,8 @@ export default function AcccessibleTable() {
  const classes = useStyles();
 
  return (
- <Paper className={classes.root}>
- <Table responsive className={classes.table} aria-label="caption table">
+ <TableContainer component={Paper}>
+ <Table className={classes.table} aria-label="caption table">
  <caption>A barbone structure table example with a caption</caption>
  <TableHead>
  <TableRow>
@@ -56,6 +54,6 @@ export default function AcccessibleTable() {
  ))}
  </TableBody>
  </Table>
- </Paper>
+ </TableContainer>
  );
 }
diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.js b/docs/src/pages/components/tables/CustomPaginationActionsTable.js
@@ -4,6 +4,7 @@ import { makeStyles, useTheme } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
 import TableFooter from '@material-ui/core/TableFooter';
 import TablePagination from '@material-ui/core/TablePagination';
 import TableRow from '@material-ui/core/TableRow';
@@ -100,9 +101,6 @@ const rows = [
 ].sort((a, b) => (a.calories < b.calories ? -1 : 1));
 
 const useStyles2 = makeStyles({
- root: {
- width: '100%',
- },
  table: {
  minWidth: 500,
  },
@@ -125,8 +123,8 @@ export default function CustomPaginationActionsTable() {
  };
 
  return (
- <Paper className={classes.root}>
- <Table responsive className={classes.table} aria-label="custom pagination table">
+ <TableContainer component={Paper}>
+ <Table className={classes.table} aria-label="custom pagination table">
  <TableBody>
  {(rowsPerPage > 0
  ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
@@ -166,6 +164,6 @@ export default function CustomPaginationActionsTable() {
  </TableRow>
  </TableFooter>
  </Table>
- </Paper>
+ </TableContainer>
  );
 }
diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx
@@ -3,6 +3,7 @@ import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/sty
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
 import TableFooter from '@material-ui/core/TableFooter';
 import TablePagination from '@material-ui/core/TablePagination';
 import TableRow from '@material-ui/core/TableRow';
@@ -101,9 +102,6 @@ const rows = [
 ].sort((a, b) => (a.calories < b.calories ? -1 : 1));
 
 const useStyles2 = makeStyles({
- root: {
- width: '100%',
- },
  table: {
  minWidth: 500,
  },
@@ -128,8 +126,8 @@ export default function CustomPaginationActionsTable() {
  };
 
  return (
- <Paper className={classes.root}>
- <Table responsive className={classes.table} aria-label="custom pagination table">
+ <TableContainer component={Paper}>
+ <Table className={classes.table} aria-label="custom pagination table">
  <TableBody>
  {(rowsPerPage > 0
  ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
@@ -168,6 +166,6 @@ export default function CustomPaginationActionsTable() {
  </TableRow>
  </TableFooter>
  </Table>
- </Paper>
+ </TableContainer>
  );
 }
diff --git a/docs/src/pages/components/tables/CustomizedTables.js b/docs/src/pages/components/tables/CustomizedTables.js
@@ -3,6 +3,7 @@ import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
@@ -38,9 +39,6 @@ const rows = [
 ];
 
 const useStyles = makeStyles({
- root: {
- width: '100%',
- },
  table: {
  minWidth: 700,
  },
@@ -50,8 +48,8 @@ export default function CustomizedTables() {
  const classes = useStyles();
 
  return (
- <Paper className={classes.root}>
- <Table responsive className={classes.table} aria-label="customized table">
+ <TableContainer component={Paper}>
+ <Table className={classes.table} aria-label="customized table">
  <TableHead>
  <TableRow>
  <StyledTableCell>Dessert (100g serving)</StyledTableCell>
@@ -75,6 +73,6 @@ export default function CustomizedTables() {
  ))}
  </TableBody>
  </Table>
- </Paper>
+ </TableContainer>
  );
 }
diff --git a/docs/src/pages/components/tables/CustomizedTables.tsx b/docs/src/pages/components/tables/CustomizedTables.tsx
@@ -3,6 +3,7 @@ import { withStyles, Theme, createStyles, makeStyles } from '@material-ui/core/s
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
@@ -42,9 +43,6 @@ const rows = [
 ];
 
 const useStyles = makeStyles({
- root: {
- width: '100%',
- },
  table: {
  minWidth: 700,
  },
@@ -54,8 +52,8 @@ export default function CustomizedTables() {
  const classes = useStyles();
 
  return (
- <Paper className={classes.root}>
- <Table responsive className={classes.table} aria-label="customized table">
+ <TableContainer component={Paper}>
+ <Table className={classes.table} aria-label="customized table">
  <TableHead>
  <TableRow>
  <StyledTableCell>Dessert (100g serving)</StyledTableCell>
@@ -79,6 +77,6 @@ export default function CustomizedTables() {
  ))}
  </TableBody>
  </Table>
- </Paper>
+ </TableContainer>
  );
 }
diff --git a/docs/src/pages/components/tables/DenseTable.js b/docs/src/pages/components/tables/DenseTable.js
@@ -3,14 +3,12 @@ import { makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 
 const useStyles = makeStyles({
- root: {
- width: '100%',
- },
  table: {
  minWidth: 650,
  },
@@ -32,8 +30,8 @@ export default function DenseTable() {
  const classes = useStyles();
 
  return (
- <Paper className={classes.root}>
- <Table responsive className={classes.table} size="small" aria-label="a dense table">
+ <TableContainer component={Paper}>
+ <Table className={classes.table} size="small" aria-label="a dense table">
  <TableHead>
  <TableRow>
  <TableCell>Dessert (100g serving)</TableCell>
@@ -57,6 +55,6 @@ export default function DenseTable() {
  ))}
  </TableBody>
  </Table>
- </Paper>
+ </TableContainer>
  );
 }
diff --git a/docs/src/pages/components/tables/DenseTable.tsx b/docs/src/pages/components/tables/DenseTable.tsx
@@ -3,14 +3,12 @@ import { makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 
 const useStyles = makeStyles({
- root: {
- width: '100%',
- },
  table: {
  minWidth: 650,
  },
@@ -32,8 +30,8 @@ export default function DenseTable() {
  const classes = useStyles();
 
  return (
- <Paper className={classes.root}>
- <Table responsive className={classes.table} size="small" aria-label="a dense table">
+ <TableContainer component={Paper}>
+ <Table className={classes.table} size="small" aria-label="a dense table">
  <TableHead>
  <TableRow>
  <TableCell>Dessert (100g serving)</TableCell>
@@ -57,6 +55,6 @@ export default function DenseTable() {
  ))}
  </TableBody>
  </Table>
- </Paper>
+ </TableContainer>
  );
 }