Use TableContainer to be more explicit

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

Hide file tree

Showing 32 changed files with 331 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">children</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>
   );
 }