[Table] Add TableContainer component (#18699)

mui · Dec 10, 2019 · 0ba4900 · 0ba4900
1 parent d30e5ae
commit 0ba4900
Show file tree

Hide file tree

Showing 28 changed files with 328 additions and 232 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 table itself, normally `<Table />` |
+| <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/src/pages/components/tables/AcccessibleTable.js b/docs/src/pages/components/tables/AcccessibleTable.js
@@ -3,15 +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%',
- overflowX: 'auto',
- },
  table: {
  minWidth: 650,
  },
@@ -31,7 +28,7 @@ export default function AcccessibleTable() {
  const classes = useStyles();
 
  return (
- <Paper className={classes.root}>
+ <TableContainer component={Paper}>
  <Table className={classes.table} aria-label="caption table">
  <caption>A barbone structure table example with a caption</caption>
  <TableHead>
@@ -57,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,15 +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%',
- overflowX: 'auto',
- },
  table: {
  minWidth: 650,
  },
@@ -31,7 +28,7 @@ export default function AcccessibleTable() {
  const classes = useStyles();
 
  return (
- <Paper className={classes.root}>
+ <TableContainer component={Paper}>
  <Table className={classes.table} aria-label="caption table">
  <caption>A barbone structure table example with a caption</caption>
  <TableHead>
@@ -57,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,15 +101,9 @@ const rows = [
 ].sort((a, b) => (a.calories < b.calories ? -1 : 1));
 
 const useStyles2 = makeStyles({
- root: {
- width: '100%',
- },
  table: {
  minWidth: 500,
  },
- tableWrapper: {
- overflowX: 'auto',
- },
 });
 
 export default function CustomPaginationActionsTable() {
@@ -128,49 +123,47 @@ 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}
- />
+ <TableContainer component={Paper}>
+ <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>
- </TableFooter>
- </Table>
- </div>
- </Paper>
+ )}
+ </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>
+ </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,15 +102,9 @@ const rows = [
 ].sort((a, b) => (a.calories < b.calories ? -1 : 1));
 
 const useStyles2 = makeStyles({
- root: {
- width: '100%',
- },
  table: {
  minWidth: 500,
  },
- tableWrapper: {
- overflowX: 'auto',
- },
 });
 
 export default function CustomPaginationActionsTable() {
@@ -131,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}
- />
+ <TableContainer component={Paper}>
+ <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>
- </TableFooter>
- </Table>
- </div>
- </Paper>
+ )}
+ </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>
+ </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,10 +39,6 @@ const rows = [
 ];
 
 const useStyles = makeStyles({
- root: {
- width: '100%',
- overflowX: 'auto',
- },
  table: {
  minWidth: 700,
  },
@@ -51,7 +48,7 @@ export default function CustomizedTables() {
  const classes = useStyles();
 
  return (
- <Paper className={classes.root}>
+ <TableContainer component={Paper}>
  <Table className={classes.table} aria-label="customized table">
  <TableHead>
  <TableRow>
@@ -76,6 +73,6 @@ export default function CustomizedTables() {
  ))}
  </TableBody>
  </Table>
- </Paper>
+ </TableContainer>
  );
 }