From fef4ef1654fa36f944a667109708a642cfb4b481 Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Thu, 5 Dec 2019 14:29:01 -0500 Subject: [PATCH 1/7] Added a responsive prop to Table component --- packages/material-ui/src/Table/Table.js | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js index 9e791bb3da9ba8..dcb22bef651509 100644 --- a/packages/material-ui/src/Table/Table.js +++ b/packages/material-ui/src/Table/Table.js @@ -23,6 +23,10 @@ export const styles = theme => ({ stickyHeader: { borderCollapse: 'separate', }, + /* Styles applied to the root element if `responsive={true}`. */ + responsive: { + overflowX: 'auto', + }, }); const Table = React.forwardRef(function Table(props, ref) { @@ -33,21 +37,27 @@ const Table = React.forwardRef(function Table(props, ref) { padding = 'default', size = 'medium', stickyHeader = false, + responsive = false, ...other } = props; + const table = React.useMemo(() => ({ padding, size, stickyHeader }), [ padding, size, stickyHeader, ]); + const tableComponent = ( + + ); + return ( - + {responsive ?
{tableComponent}
: tableComponent} ); }); @@ -75,6 +85,10 @@ Table.propTypes = { * Allows TableCells to inherit padding of the Table. */ padding: PropTypes.oneOf(['default', 'checkbox', 'none']), + /* + * Allow table to overflow horizontally, making it responsive. + */ + responsive: PropTypes.bool, /** * Allows TableCells to inherit size of the Table. */ From 4b42d1f963af74c3ed5d880e8bcaef2877ced995 Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Thu, 5 Dec 2019 14:29:19 -0500 Subject: [PATCH 2/7] Added tests for responsive prop on Table component --- packages/material-ui/src/Table/Table.test.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/material-ui/src/Table/Table.test.js b/packages/material-ui/src/Table/Table.test.js index 4de7a957469e0e..995574e5cdc157 100644 --- a/packages/material-ui/src/Table/Table.test.js +++ b/packages/material-ui/src/Table/Table.test.js @@ -69,4 +69,23 @@ describe('', () => { stickyHeader: false, }); }); + + it('should wrap the table with a styled div when responsive=true', () => { + const { container } = render( +
+ +
, + ); + expect(container.firstChild).to.have.property('nodeName', 'DIV'); + expect(container.firstChild).to.have.class(classes.responsive); + }); + + it('should have table as a child when responsive=true', () => { + const { container } = render( + + +
, + ); + expect(container.firstChild.firstChild).to.have.property('nodeName', 'TABLE'); + }); }); From 9aa2f028ca59f6b02d54451d1bad20d63ec610d7 Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Thu, 5 Dec 2019 14:31:35 -0500 Subject: [PATCH 3/7] Rebuild docs to include responsive prop for Table component --- docs/pages/api/table.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/pages/api/table.md b/docs/pages/api/table.md index 3af03b309dd7a4..107e473ba4efbf 100644 --- a/docs/pages/api/table.md +++ b/docs/pages/api/table.md @@ -28,6 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | component | elementType | 'table' | The component used for the root node. Either a string to use a DOM element or a component. | | padding | 'default'
| 'checkbox'
| 'none' | 'default' | Allows TableCells to inherit padding of the Table. | +| responsive | bool | false | | | size | 'small'
| 'medium' | 'medium' | Allows TableCells to inherit size of the Table. | | stickyHeader | bool | false | Set the header sticky.
⚠️ It doesn't work with IE 11. | @@ -44,6 +45,7 @@ Any other props supplied will be provided to the root element (native element). |:-----|:-------------|:------------| | root | .MuiTable-root | Styles applied to the root element. | stickyHeader | .MuiTable-stickyHeader | Styles applied to the root element if `stickyHeader={true}`. +| responsive | .MuiTable-responsive | Styles applied to the root element if `responsive={true}`. You can override the style of the component thanks to one of these customization points: From b16d845c095cf05213c0c2e8253eb4b7e48a955d Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Thu, 5 Dec 2019 14:37:06 -0500 Subject: [PATCH 4/7] Fixed docs picking up the wrong comment --- docs/pages/api/table.md | 2 +- packages/material-ui/src/Table/Table.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/api/table.md b/docs/pages/api/table.md index 107e473ba4efbf..2346f296f187a9 100644 --- a/docs/pages/api/table.md +++ b/docs/pages/api/table.md @@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | component | elementType | 'table' | The component used for the root node. Either a string to use a DOM element or a component. | | padding | 'default'
| 'checkbox'
| 'none' | 'default' | Allows TableCells to inherit padding of the Table. | -| responsive | bool | false | | +| responsive | bool | false | Allow table to overflow horizontally, making it responsive. | | size | 'small'
| 'medium' | 'medium' | Allows TableCells to inherit size of the Table. | | stickyHeader | bool | false | Set the header sticky.
⚠️ It doesn't work with IE 11. | diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js index dcb22bef651509..565b19eebc12fa 100644 --- a/packages/material-ui/src/Table/Table.js +++ b/packages/material-ui/src/Table/Table.js @@ -85,7 +85,7 @@ Table.propTypes = { * Allows TableCells to inherit padding of the Table. */ padding: PropTypes.oneOf(['default', 'checkbox', 'none']), - /* + /** * Allow table to overflow horizontally, making it responsive. */ responsive: PropTypes.bool, From 15b1d97fec5b0e50e829aa16e8c1f869417fdb22 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 5 Dec 2019 23:24:35 +0100 Subject: [PATCH 5/7] update types and demos --- .../components/tables/AcccessibleTable.js | 3 +- .../components/tables/AcccessibleTable.tsx | 3 +- .../tables/CustomPaginationActionsTable.js | 83 ++++++------- .../tables/CustomPaginationActionsTable.tsx | 81 ++++++------- .../components/tables/CustomizedTables.js | 3 +- .../components/tables/CustomizedTables.tsx | 3 +- .../src/pages/components/tables/DenseTable.js | 56 ++++----- .../pages/components/tables/DenseTable.tsx | 56 ++++----- .../pages/components/tables/EnhancedTable.js | 114 +++++++++--------- .../pages/components/tables/EnhancedTable.tsx | 114 +++++++++--------- .../pages/components/tables/SimpleTable.js | 3 +- .../pages/components/tables/SimpleTable.tsx | 3 +- .../pages/components/tables/SpanningTable.js | 3 +- .../pages/components/tables/SpanningTable.tsx | 3 +- packages/material-ui/src/Table/Table.d.ts | 3 +- 15 files changed, 247 insertions(+), 284 deletions(-) diff --git a/docs/src/pages/components/tables/AcccessibleTable.js b/docs/src/pages/components/tables/AcccessibleTable.js index d510eb8c72a78d..72abf01c43deae 100644 --- 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 ( - +
diff --git a/docs/src/pages/components/tables/AcccessibleTable.tsx b/docs/src/pages/components/tables/AcccessibleTable.tsx index 766d6a8368ce6a..b551978c3665de 100644 --- 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 ( -
A barbone structure table example with a caption
+
diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.js b/docs/src/pages/components/tables/CustomPaginationActionsTable.js index 10660b1f4043c0..cf4e884017da46 100644 --- 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 ( -
-
A barbone structure table example with a caption
- - {(rowsPerPage > 0 - ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - : rows - ).map(row => ( - - - {row.name} - - {row.calories} - {row.fat} - - ))} - - {emptyRows > 0 && ( - - - - )} - - - - +
+ + {(rowsPerPage > 0 + ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + : rows + ).map(row => ( + + + {row.name} + + {row.calories} + {row.fat} + + ))} + + {emptyRows > 0 && ( + + - -
- + )} + + + + + + + ); } diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx index 26073a190b41d1..b7c9b9db040e65 100644 --- 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 ( -
- - - {(rowsPerPage > 0 - ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - : rows - ).map(row => ( - - - {row.name} - - {row.calories} - {row.fat} - - ))} - {emptyRows > 0 && ( - - - - )} - - - - +
+ + {(rowsPerPage > 0 + ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + : rows + ).map(row => ( + + + {row.name} + + {row.calories} + {row.fat} + + ))} + {emptyRows > 0 && ( + + - -
-
+ )} + + + + + + + ); } diff --git a/docs/src/pages/components/tables/CustomizedTables.js b/docs/src/pages/components/tables/CustomizedTables.js index 4cdad77b165f90..52333b8124deea 100644 --- 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 ( - +
Dessert (100g serving) diff --git a/docs/src/pages/components/tables/CustomizedTables.tsx b/docs/src/pages/components/tables/CustomizedTables.tsx index 205ad3d4e61696..7e633f7f56874a 100644 --- 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 ( -
+
Dessert (100g serving) diff --git a/docs/src/pages/components/tables/DenseTable.js b/docs/src/pages/components/tables/DenseTable.js index 12e73fa8742478..ab71bbc0bdd050 100644 --- 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 ( -
- -
- - - Dessert (100g serving) - Calories - Fat (g) - Carbs (g) - Protein (g) + +
+ + + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) + + + + {rows.map(row => ( + + + {row.name} + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} - - - {rows.map(row => ( - - - {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - - ))} - -
- - + ))} + + + ); } diff --git a/docs/src/pages/components/tables/DenseTable.tsx b/docs/src/pages/components/tables/DenseTable.tsx index f7672c46b11bc5..98b216ed46e530 100644 --- a/docs/src/pages/components/tables/DenseTable.tsx +++ b/docs/src/pages/components/tables/DenseTable.tsx @@ -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 ( -
- - - - - Dessert (100g serving) - Calories - Fat (g) - Carbs (g) - Protein (g) + +
+ + + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) + + + + {rows.map(row => ( + + + {row.name} + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} - - - {rows.map(row => ( - - - {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - - ))} - -
- -
+ ))} + + + ); } diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js index 1f5cd11f91cd81..7b69f6cfdd1df3 100644 --- a/docs/src/pages/components/tables/EnhancedTable.js +++ b/docs/src/pages/components/tables/EnhancedTable.js @@ -197,9 +197,6 @@ const useStyles = makeStyles(theme => ({ table: { minWidth: 750, }, - tableWrapper: { - overflowX: 'auto', - }, visuallyHidden: { border: 0, clip: 'rect(0 0 0 0)', @@ -278,63 +275,62 @@ export default function EnhancedTable() {
-
- - - - {stableSort(rows, getSorting(order, orderBy)) - .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - .map((row, index) => { - const isItemSelected = isSelected(row.name); - const labelId = `enhanced-table-checkbox-${index}`; +
+ + + {stableSort(rows, getSorting(order, orderBy)) + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .map((row, index) => { + const isItemSelected = isSelected(row.name); + const labelId = `enhanced-table-checkbox-${index}`; - return ( - handleClick(event, row.name)} - role="checkbox" - aria-checked={isItemSelected} - tabIndex={-1} - key={row.name} - selected={isItemSelected} - > - - - - - {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - - ); - })} - {emptyRows > 0 && ( - - - - )} - -
-
+ return ( + handleClick(event, row.name)} + role="checkbox" + aria-checked={isItemSelected} + tabIndex={-1} + key={row.name} + selected={isItemSelected} + > + + + + + {row.name} + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + + ); + })} + {emptyRows > 0 && ( + + + + )} + + table: { minWidth: 750, }, - tableWrapper: { - overflowX: 'auto', - }, visuallyHidden: { border: 0, clip: 'rect(0 0 0 0)', @@ -306,63 +303,62 @@ export default function EnhancedTable() {
-
- - - - {stableSort(rows, getSorting(order, orderBy)) - .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - .map((row, index) => { - const isItemSelected = isSelected(row.name); - const labelId = `enhanced-table-checkbox-${index}`; +
+ + + {stableSort(rows, getSorting(order, orderBy)) + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .map((row, index) => { + const isItemSelected = isSelected(row.name); + const labelId = `enhanced-table-checkbox-${index}`; - return ( - handleClick(event, row.name)} - role="checkbox" - aria-checked={isItemSelected} - tabIndex={-1} - key={row.name} - selected={isItemSelected} - > - - - - - {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - - ); - })} - {emptyRows > 0 && ( - - - - )} - -
-
+ return ( + handleClick(event, row.name)} + role="checkbox" + aria-checked={isItemSelected} + tabIndex={-1} + key={row.name} + selected={isItemSelected} + > + + + + + {row.name} + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + + ); + })} + {emptyRows > 0 && ( + + + + )} + + - +
Dessert (100g serving) diff --git a/docs/src/pages/components/tables/SimpleTable.tsx b/docs/src/pages/components/tables/SimpleTable.tsx index 372dd709621e70..79cb1e1bc461db 100644 --- a/docs/src/pages/components/tables/SimpleTable.tsx +++ b/docs/src/pages/components/tables/SimpleTable.tsx @@ -10,7 +10,6 @@ import Paper from '@material-ui/core/Paper'; const useStyles = makeStyles({ root: { width: '100%', - overflowX: 'auto', }, table: { minWidth: 650, @@ -34,7 +33,7 @@ export default function SimpleTable() { return ( -
+
Dessert (100g serving) diff --git a/docs/src/pages/components/tables/SpanningTable.js b/docs/src/pages/components/tables/SpanningTable.js index 5151e7829b9d1f..d97f27108ce23c 100644 --- a/docs/src/pages/components/tables/SpanningTable.js +++ b/docs/src/pages/components/tables/SpanningTable.js @@ -12,7 +12,6 @@ const TAX_RATE = 0.07; const useStyles = makeStyles({ root: { width: '100%', - overflowX: 'auto', }, table: { minWidth: 700, @@ -51,7 +50,7 @@ export default function SpanningTable() { return ( -
+
diff --git a/docs/src/pages/components/tables/SpanningTable.tsx b/docs/src/pages/components/tables/SpanningTable.tsx index 28a86dd358b628..2b9e979367a590 100644 --- a/docs/src/pages/components/tables/SpanningTable.tsx +++ b/docs/src/pages/components/tables/SpanningTable.tsx @@ -12,7 +12,6 @@ const TAX_RATE = 0.07; const useStyles = makeStyles({ root: { width: '100%', - overflowX: 'auto', }, table: { minWidth: 700, @@ -58,7 +57,7 @@ export default function SpanningTable() { return ( -
+
diff --git a/packages/material-ui/src/Table/Table.d.ts b/packages/material-ui/src/Table/Table.d.ts index 03a4aaac745f03..580a1c739a22da 100644 --- a/packages/material-ui/src/Table/Table.d.ts +++ b/packages/material-ui/src/Table/Table.d.ts @@ -4,6 +4,7 @@ import { StandardProps } from '..'; export interface TableProps extends StandardProps { component?: React.ElementType; padding?: Padding; + responsive?: boolean; size?: Size; stickyHeader?: boolean; } @@ -14,7 +15,7 @@ export type Padding = 'default' | 'checkbox' | 'none'; export type Size = 'small' | 'medium'; -export type TableClassKey = 'root' | 'stickyHeader'; +export type TableClassKey = 'root' | 'stickyHeader' | 'responsive'; declare const Table: React.ComponentType; From d0755cfd6d2c715c06661a6febe5c36e32a928ce Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 9 Dec 2019 20:55:50 +0100 Subject: [PATCH 6/7] Use TableContainer to be more explicit --- docs/pages/api/table-container.js | 7 ++ docs/pages/api/table-container.md | 55 +++++++++ docs/pages/api/table.md | 2 - .../components/tables/AcccessibleTable.js | 10 +- .../components/tables/AcccessibleTable.tsx | 10 +- .../tables/CustomPaginationActionsTable.js | 10 +- .../tables/CustomPaginationActionsTable.tsx | 10 +- .../components/tables/CustomizedTables.js | 10 +- .../components/tables/CustomizedTables.tsx | 10 +- .../src/pages/components/tables/DenseTable.js | 10 +- .../pages/components/tables/DenseTable.tsx | 10 +- .../pages/components/tables/EnhancedTable.js | 112 +++++++++--------- .../pages/components/tables/EnhancedTable.tsx | 112 +++++++++--------- .../pages/components/tables/SimpleTable.js | 10 +- .../pages/components/tables/SimpleTable.tsx | 10 +- .../pages/components/tables/SpanningTable.js | 10 +- .../pages/components/tables/SpanningTable.tsx | 10 +- .../components/tables/StickyHeadTable.js | 8 +- .../components/tables/StickyHeadTable.tsx | 8 +- docs/src/pages/components/tables/tables.md | 2 +- packages/material-ui/src/Table/Table.d.ts | 3 +- packages/material-ui/src/Table/Table.js | 24 +--- packages/material-ui/src/Table/Table.test.js | 19 --- .../src/TableContainer/TableContainer.d.ts | 15 +++ .../src/TableContainer/TableContainer.js | 41 +++++++ .../src/TableContainer/TableContainer.test.js | 23 ++++ .../material-ui/src/TableContainer/index.d.ts | 2 + .../material-ui/src/TableContainer/index.js | 1 + packages/material-ui/src/index.d.ts | 3 + packages/material-ui/src/index.js | 3 + .../material-ui/src/styles/overrides.d.ts | 2 + packages/material-ui/src/styles/props.d.ts | 2 + 32 files changed, 331 insertions(+), 233 deletions(-) create mode 100644 docs/pages/api/table-container.js create mode 100644 docs/pages/api/table-container.md create mode 100644 packages/material-ui/src/TableContainer/TableContainer.d.ts create mode 100644 packages/material-ui/src/TableContainer/TableContainer.js create mode 100644 packages/material-ui/src/TableContainer/TableContainer.test.js create mode 100644 packages/material-ui/src/TableContainer/index.d.ts create mode 100644 packages/material-ui/src/TableContainer/index.js diff --git a/docs/pages/api/table-container.js b/docs/pages/api/table-container.js new file mode 100644 index 00000000000000..b7a5fe925a6699 --- /dev/null +++ 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 ; +} diff --git a/docs/pages/api/table-container.md b/docs/pages/api/table-container.md new file mode 100644 index 00000000000000..d33a26fda7210a --- /dev/null +++ b/docs/pages/api/table-container.md @@ -0,0 +1,55 @@ +--- +filename: /packages/material-ui/src/TableContainer/TableContainer.js +--- + + + +# TableContainer API + +

The API documentation of the TableContainer React component. Learn more about the props and the CSS customization points.

+ +## 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 | +|:-----|:-----|:--------|:------------| +| children | node | | The content of the table, normally `TableHead` and `TableBody`. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| component | elementType | 'div' | 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 | +|:-----|:-------------|:------------| +| root | .MuiTableContainer-root | 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 index 2346f296f187a9..3af03b309dd7a4 100644 --- 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 | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | component | elementType | 'table' | The component used for the root node. Either a string to use a DOM element or a component. | | padding | 'default'
| 'checkbox'
| 'none' | 'default' | Allows TableCells to inherit padding of the Table. | -| responsive | bool | false | Allow table to overflow horizontally, making it responsive. | | size | 'small'
| 'medium' | 'medium' | Allows TableCells to inherit size of the Table. | | stickyHeader | bool | false | Set the header sticky.
⚠️ It doesn't work with IE 11. | @@ -45,7 +44,6 @@ Any other props supplied will be provided to the root element (native element). |:-----|:-------------|:------------| | root | .MuiTable-root | Styles applied to the root element. | stickyHeader | .MuiTable-stickyHeader | Styles applied to the root element if `stickyHeader={true}`. -| responsive | .MuiTable-responsive | 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 index 72abf01c43deae..6c0807628415c5 100644 --- 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 ( - -
+ +
@@ -56,6 +54,6 @@ export default function AcccessibleTable() { ))}
A barbone structure table example with a caption
- + ); } diff --git a/docs/src/pages/components/tables/AcccessibleTable.tsx b/docs/src/pages/components/tables/AcccessibleTable.tsx index b551978c3665de..ad50ea1a9f8e9b 100644 --- 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 ( - - + +
@@ -56,6 +54,6 @@ export default function AcccessibleTable() { ))}
A barbone structure table example with a caption
- + ); } diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.js b/docs/src/pages/components/tables/CustomPaginationActionsTable.js index cf4e884017da46..a6b4fc8335f297 100644 --- 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 ( - - + +
{(rowsPerPage > 0 ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) @@ -166,6 +164,6 @@ export default function CustomPaginationActionsTable() {
- + ); } diff --git a/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx b/docs/src/pages/components/tables/CustomPaginationActionsTable.tsx index b7c9b9db040e65..3df50b2c10939e 100644 --- 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 ( - - + +
{(rowsPerPage > 0 ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) @@ -168,6 +166,6 @@ export default function CustomPaginationActionsTable() {
- + ); } diff --git a/docs/src/pages/components/tables/CustomizedTables.js b/docs/src/pages/components/tables/CustomizedTables.js index 52333b8124deea..0228fd245a514b 100644 --- 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 ( - - + +
Dessert (100g serving) @@ -75,6 +73,6 @@ export default function CustomizedTables() { ))}
- + ); } diff --git a/docs/src/pages/components/tables/CustomizedTables.tsx b/docs/src/pages/components/tables/CustomizedTables.tsx index 7e633f7f56874a..d830b80785a62b 100644 --- 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 ( - - + +
Dessert (100g serving) @@ -79,6 +77,6 @@ export default function CustomizedTables() { ))}
- + ); } diff --git a/docs/src/pages/components/tables/DenseTable.js b/docs/src/pages/components/tables/DenseTable.js index ab71bbc0bdd050..abe728c371572d 100644 --- 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 ( - - + +
Dessert (100g serving) @@ -57,6 +55,6 @@ export default function DenseTable() { ))}
- + ); } diff --git a/docs/src/pages/components/tables/DenseTable.tsx b/docs/src/pages/components/tables/DenseTable.tsx index 98b216ed46e530..c198063decf2c9 100644 --- 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 ( - - + +
Dessert (100g serving) @@ -57,6 +55,6 @@ export default function DenseTable() { ))}
- + ); } diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js index 7b69f6cfdd1df3..5edb0b1ee43bf0 100644 --- a/docs/src/pages/components/tables/EnhancedTable.js +++ b/docs/src/pages/components/tables/EnhancedTable.js @@ -5,6 +5,7 @@ import { lighten, 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 TablePagination from '@material-ui/core/TablePagination'; import TableRow from '@material-ui/core/TableRow'; @@ -275,62 +276,63 @@ export default function EnhancedTable() {
- - - - {stableSort(rows, getSorting(order, orderBy)) - .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - .map((row, index) => { - const isItemSelected = isSelected(row.name); - const labelId = `enhanced-table-checkbox-${index}`; + +
+ + + {stableSort(rows, getSorting(order, orderBy)) + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .map((row, index) => { + const isItemSelected = isSelected(row.name); + const labelId = `enhanced-table-checkbox-${index}`; - return ( - handleClick(event, row.name)} - role="checkbox" - aria-checked={isItemSelected} - tabIndex={-1} - key={row.name} - selected={isItemSelected} - > - - - - - {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - - ); - })} - {emptyRows > 0 && ( - - - - )} - -
+ return ( + handleClick(event, row.name)} + role="checkbox" + aria-checked={isItemSelected} + tabIndex={-1} + key={row.name} + selected={isItemSelected} + > + + + + + {row.name} + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + + ); + })} + {emptyRows > 0 && ( + + + + )} + + + - - - - {stableSort(rows, getSorting(order, orderBy)) - .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - .map((row, index) => { - const isItemSelected = isSelected(row.name); - const labelId = `enhanced-table-checkbox-${index}`; + +
+ + + {stableSort(rows, getSorting(order, orderBy)) + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .map((row, index) => { + const isItemSelected = isSelected(row.name); + const labelId = `enhanced-table-checkbox-${index}`; - return ( - handleClick(event, row.name)} - role="checkbox" - aria-checked={isItemSelected} - tabIndex={-1} - key={row.name} - selected={isItemSelected} - > - - - - - {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - - ); - })} - {emptyRows > 0 && ( - - - - )} - -
+ return ( + handleClick(event, row.name)} + role="checkbox" + aria-checked={isItemSelected} + tabIndex={-1} + key={row.name} + selected={isItemSelected} + > + + + + + {row.name} + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + + ); + })} + {emptyRows > 0 && ( + + + + )} + + + - + +
Dessert (100g serving) @@ -57,6 +55,6 @@ export default function SimpleTable() { ))}
- + ); } diff --git a/docs/src/pages/components/tables/SimpleTable.tsx b/docs/src/pages/components/tables/SimpleTable.tsx index 79cb1e1bc461db..f182b843ad4f53 100644 --- a/docs/src/pages/components/tables/SimpleTable.tsx +++ b/docs/src/pages/components/tables/SimpleTable.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 SimpleTable() { const classes = useStyles(); return ( - - + +
Dessert (100g serving) @@ -57,6 +55,6 @@ export default function SimpleTable() { ))}
- + ); } diff --git a/docs/src/pages/components/tables/SpanningTable.js b/docs/src/pages/components/tables/SpanningTable.js index d97f27108ce23c..7dc1b226758d5b 100644 --- a/docs/src/pages/components/tables/SpanningTable.js +++ b/docs/src/pages/components/tables/SpanningTable.js @@ -3,6 +3,7 @@ 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'; @@ -10,9 +11,6 @@ import Paper from '@material-ui/core/Paper'; const TAX_RATE = 0.07; const useStyles = makeStyles({ - root: { - width: '100%', - }, table: { minWidth: 700, }, @@ -49,8 +47,8 @@ export default function SpanningTable() { const classes = useStyles(); return ( - - + +
@@ -91,6 +89,6 @@ export default function SpanningTable() {
- + ); } diff --git a/docs/src/pages/components/tables/SpanningTable.tsx b/docs/src/pages/components/tables/SpanningTable.tsx index 2b9e979367a590..b3b82c0fe5f0eb 100644 --- a/docs/src/pages/components/tables/SpanningTable.tsx +++ b/docs/src/pages/components/tables/SpanningTable.tsx @@ -3,6 +3,7 @@ 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'; @@ -10,9 +11,6 @@ import Paper from '@material-ui/core/Paper'; const TAX_RATE = 0.07; const useStyles = makeStyles({ - root: { - width: '100%', - }, table: { minWidth: 700, }, @@ -56,8 +54,8 @@ export default function SpanningTable() { const classes = useStyles(); return ( - - + +
@@ -97,6 +95,6 @@ export default function SpanningTable() {
- + ); } diff --git a/docs/src/pages/components/tables/StickyHeadTable.js b/docs/src/pages/components/tables/StickyHeadTable.js index 3c53bc6fa4e06d..697d3e3fc8c9f6 100644 --- a/docs/src/pages/components/tables/StickyHeadTable.js +++ b/docs/src/pages/components/tables/StickyHeadTable.js @@ -4,6 +4,7 @@ import Paper from '@material-ui/core/Paper'; 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 TablePagination from '@material-ui/core/TablePagination'; import TableRow from '@material-ui/core/TableRow'; @@ -61,9 +62,8 @@ const useStyles = makeStyles({ root: { width: '100%', }, - tableWrapper: { + container: { maxHeight: 440, - overflow: 'auto', }, }); @@ -83,7 +83,7 @@ export default function StickyHeadTable() { return ( -
+ @@ -115,7 +115,7 @@ export default function StickyHeadTable() { })}
-
+ -
+ @@ -131,7 +131,7 @@ export default function StickyHeadTable() { })}
-
+ { component?: React.ElementType; padding?: Padding; - responsive?: boolean; size?: Size; stickyHeader?: boolean; } @@ -15,7 +14,7 @@ export type Padding = 'default' | 'checkbox' | 'none'; export type Size = 'small' | 'medium'; -export type TableClassKey = 'root' | 'stickyHeader' | 'responsive'; +export type TableClassKey = 'root' | 'stickyHeader'; declare const Table: React.ComponentType; diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js index 565b19eebc12fa..9e791bb3da9ba8 100644 --- a/packages/material-ui/src/Table/Table.js +++ b/packages/material-ui/src/Table/Table.js @@ -23,10 +23,6 @@ export const styles = theme => ({ stickyHeader: { borderCollapse: 'separate', }, - /* Styles applied to the root element if `responsive={true}`. */ - responsive: { - overflowX: 'auto', - }, }); const Table = React.forwardRef(function Table(props, ref) { @@ -37,27 +33,21 @@ const Table = React.forwardRef(function Table(props, ref) { padding = 'default', size = 'medium', stickyHeader = false, - responsive = false, ...other } = props; - const table = React.useMemo(() => ({ padding, size, stickyHeader }), [ padding, size, stickyHeader, ]); - const tableComponent = ( - - ); - return ( - {responsive ?
{tableComponent}
: tableComponent} + ); }); @@ -85,10 +75,6 @@ Table.propTypes = { * Allows TableCells to inherit padding of the Table. */ padding: PropTypes.oneOf(['default', 'checkbox', 'none']), - /** - * Allow table to overflow horizontally, making it responsive. - */ - responsive: PropTypes.bool, /** * Allows TableCells to inherit size of the Table. */ diff --git a/packages/material-ui/src/Table/Table.test.js b/packages/material-ui/src/Table/Table.test.js index 995574e5cdc157..4de7a957469e0e 100644 --- a/packages/material-ui/src/Table/Table.test.js +++ b/packages/material-ui/src/Table/Table.test.js @@ -69,23 +69,4 @@ describe('', () => { stickyHeader: false, }); }); - - it('should wrap the table with a styled div when responsive=true', () => { - const { container } = render( -
- -
, - ); - expect(container.firstChild).to.have.property('nodeName', 'DIV'); - expect(container.firstChild).to.have.class(classes.responsive); - }); - - it('should have table as a child when responsive=true', () => { - const { container } = render( - - -
, - ); - expect(container.firstChild.firstChild).to.have.property('nodeName', 'TABLE'); - }); }); diff --git a/packages/material-ui/src/TableContainer/TableContainer.d.ts b/packages/material-ui/src/TableContainer/TableContainer.d.ts new file mode 100644 index 00000000000000..331c4ea85c6b6c --- /dev/null +++ b/packages/material-ui/src/TableContainer/TableContainer.d.ts @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { StandardProps } from '..'; + +export interface TableContainerProps + extends StandardProps { + component?: React.ElementType; +} + +export type TableContainerBaseProps = React.HTMLAttributes; + +export type TableContainerClassKey = 'root'; + +declare const TableContainer: React.ComponentType; + +export default TableContainer; diff --git a/packages/material-ui/src/TableContainer/TableContainer.js b/packages/material-ui/src/TableContainer/TableContainer.js new file mode 100644 index 00000000000000..14d9a1606e4478 --- /dev/null +++ b/packages/material-ui/src/TableContainer/TableContainer.js @@ -0,0 +1,41 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import withStyles from '../styles/withStyles'; + +export const styles = { + /* Styles applied to the root element. */ + root: { + width: '100%', + overflowX: 'auto', + }, +}; + +const TableContainer = React.forwardRef(function TableContainer(props, ref) { + const { classes, className, component: Component = 'div', ...other } = props; + + return ; +}); + +TableContainer.propTypes = { + /** + * The content of the table, normally `TableHead` and `TableBody`. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css) below for more details. + */ + classes: PropTypes.object.isRequired, + /** + * @ignore + */ + className: PropTypes.string, + /** + * The component used for the root node. + * Either a string to use a DOM element or a component. + */ + component: PropTypes.elementType, +}; + +export default withStyles(styles, { name: 'MuiTableContainer' })(TableContainer); diff --git a/packages/material-ui/src/TableContainer/TableContainer.test.js b/packages/material-ui/src/TableContainer/TableContainer.test.js new file mode 100644 index 00000000000000..3d50d34fdd4adc --- /dev/null +++ b/packages/material-ui/src/TableContainer/TableContainer.test.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { createMount, getClasses } from '@material-ui/core/test-utils'; +import describeConformance from '../test-utils/describeConformance'; +import TableContainer from './TableContainer'; + +describe('', () => { + let mount; + let classes; + + before(() => { + mount = createMount({ strict: true }); + classes = getClasses(); + }); + + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: 'span', + after: () => mount.cleanUp(), + })); +}); diff --git a/packages/material-ui/src/TableContainer/index.d.ts b/packages/material-ui/src/TableContainer/index.d.ts new file mode 100644 index 00000000000000..16d9e906fa092b --- /dev/null +++ b/packages/material-ui/src/TableContainer/index.d.ts @@ -0,0 +1,2 @@ +export { default } from './TableContainer'; +export * from './TableContainer'; diff --git a/packages/material-ui/src/TableContainer/index.js b/packages/material-ui/src/TableContainer/index.js new file mode 100644 index 00000000000000..891964a7c8afa3 --- /dev/null +++ b/packages/material-ui/src/TableContainer/index.js @@ -0,0 +1 @@ +export { default } from './TableContainer'; diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts index a11cf436726f6a..62c46df0b06fb3 100644 --- a/packages/material-ui/src/index.d.ts +++ b/packages/material-ui/src/index.d.ts @@ -350,6 +350,9 @@ export * from './TableBody'; export { default as TableCell } from './TableCell'; export * from './TableCell'; +export { default as TableContainer } from './TableContainer'; +export * from './TableContainer'; + export { default as TableFooter } from './TableFooter'; export * from './TableFooter'; diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js index 1d8e32a4b52af4..763e94632cefe6 100644 --- a/packages/material-ui/src/index.js +++ b/packages/material-ui/src/index.js @@ -298,6 +298,9 @@ export * from './TableBody'; export { default as TableCell } from './TableCell'; export * from './TableCell'; +export { default as TableContainer } from './TableContainer'; +export * from './TableContainer'; + export { default as TableFooter } from './TableFooter'; export * from './TableFooter'; diff --git a/packages/material-ui/src/styles/overrides.d.ts b/packages/material-ui/src/styles/overrides.d.ts index bdd0472b06306d..12f6625d785434 100644 --- a/packages/material-ui/src/styles/overrides.d.ts +++ b/packages/material-ui/src/styles/overrides.d.ts @@ -83,6 +83,7 @@ import { SwitchClassKey } from '../Switch'; import { TabClassKey } from '../Tab'; import { TableBodyClassKey } from '../TableBody'; import { TableCellClassKey } from '../TableCell'; +import { TableContainerClassKey } from '../TableContainer'; import { TableClassKey } from '../Table'; import { TableFooterClassKey } from '../TableFooter'; import { TableHeadClassKey } from '../TableHead'; @@ -185,6 +186,7 @@ export interface ComponentNameToClassKey { MuiTable: TableClassKey; MuiTableBody: TableBodyClassKey; MuiTableCell: TableCellClassKey; + MuiTableContainer: TableContainerClassKey; MuiTableFooter: TableFooterClassKey; MuiTableHead: TableHeadClassKey; MuiTablePagination: TablePaginationClassKey; diff --git a/packages/material-ui/src/styles/props.d.ts b/packages/material-ui/src/styles/props.d.ts index 607c7e951a52da..1ea5598e0222af 100644 --- a/packages/material-ui/src/styles/props.d.ts +++ b/packages/material-ui/src/styles/props.d.ts @@ -84,6 +84,7 @@ import { SvgIconProps } from '../SvgIcon'; import { SwitchProps } from '../Switch'; import { TableBodyProps } from '../TableBody'; import { TableCellProps } from '../TableCell'; +import { TableContainerProps } from '../TableContainer'; import { TableHeadProps } from '../TableHead'; import { TablePaginationProps } from '../TablePagination'; import { TableProps } from '../Table'; @@ -190,6 +191,7 @@ export interface ComponentsPropsList { MuiTable: TableProps; MuiTableBody: TableBodyProps; MuiTableCell: TableCellProps; + MuiTableContainer: TableContainerProps; MuiTableHead: TableHeadProps; MuiTablePagination: TablePaginationProps; MuiTableRow: TableRowProps; From 07ada28219afcccfe8b1980d9f7b498fb4eb24d9 Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Mon, 9 Dec 2019 19:27:15 -0500 Subject: [PATCH 7/7] Corrected docs for children prop --- docs/pages/api/table-container.md | 2 +- packages/material-ui/src/TableContainer/TableContainer.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/api/table-container.md b/docs/pages/api/table-container.md index d33a26fda7210a..c9a66c88af3c63 100644 --- a/docs/pages/api/table-container.md +++ b/docs/pages/api/table-container.md @@ -24,7 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children | node | | The content of the table, normally `TableHead` and `TableBody`. | +| children | node | | The table itself, normally `` | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | diff --git a/packages/material-ui/src/TableContainer/TableContainer.js b/packages/material-ui/src/TableContainer/TableContainer.js index 14d9a1606e4478..c8f55aa8f47ac2 100644 --- a/packages/material-ui/src/TableContainer/TableContainer.js +++ b/packages/material-ui/src/TableContainer/TableContainer.js @@ -19,7 +19,7 @@ const TableContainer = React.forwardRef(function TableContainer(props, ref) { TableContainer.propTypes = { /** - * The content of the table, normally `TableHead` and `TableBody`. + * The table itself, normally `
` */ children: PropTypes.node, /**