From 0ba49003297bed42bb937f4302b14ee6092fd967 Mon Sep 17 00:00:00 2001 From: Michael Krasnov Date: Tue, 10 Dec 2019 01:41:28 -0500 Subject: [PATCH] [Table] Add TableContainer component (#18699) --- docs/pages/api/table-container.js | 7 ++ docs/pages/api/table-container.md | 55 +++++++++++ .../components/tables/AcccessibleTable.js | 9 +- .../components/tables/AcccessibleTable.tsx | 9 +- .../tables/CustomPaginationActionsTable.js | 91 +++++++++---------- .../tables/CustomPaginationActionsTable.tsx | 89 +++++++++--------- .../components/tables/CustomizedTables.js | 9 +- .../components/tables/CustomizedTables.tsx | 9 +- .../src/pages/components/tables/DenseTable.js | 60 ++++++------ .../pages/components/tables/DenseTable.tsx | 60 ++++++------ .../pages/components/tables/EnhancedTable.js | 8 +- .../pages/components/tables/EnhancedTable.tsx | 8 +- .../pages/components/tables/SimpleTable.js | 9 +- .../pages/components/tables/SimpleTable.tsx | 9 +- .../pages/components/tables/SpanningTable.js | 9 +- .../pages/components/tables/SpanningTable.tsx | 9 +- .../components/tables/StickyHeadTable.js | 8 +- .../components/tables/StickyHeadTable.tsx | 8 +- docs/src/pages/components/tables/tables.md | 2 +- .../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 + 28 files changed, 328 insertions(+), 232 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..c9a66c88af3c63 --- /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 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. | + +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/src/pages/components/tables/AcccessibleTable.js b/docs/src/pages/components/tables/AcccessibleTable.js index d510eb8c72a78d..6c0807628415c5 100644 --- 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 ( - +
@@ -57,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 766d6a8368ce6a..ad50ea1a9f8e9b 100644 --- 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 ( - + @@ -57,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 10660b1f4043c0..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,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 ( - -
- - - {(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..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,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 ( - -
- - - {(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..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,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 ( - + @@ -76,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 205ad3d4e61696..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,10 +43,6 @@ const rows = [ ]; const useStyles = makeStyles({ - root: { - width: '100%', - overflowX: 'auto', - }, table: { minWidth: 700, }, @@ -55,7 +52,7 @@ export default function CustomizedTables() { const classes = useStyles(); return ( - + @@ -80,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 12e73fa8742478..abe728c371572d 100644 --- a/docs/src/pages/components/tables/DenseTable.js +++ b/docs/src/pages/components/tables/DenseTable.js @@ -3,18 +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%', - }, - paper: { - width: '100%', - overflowX: 'auto', - }, table: { minWidth: 650, }, @@ -36,33 +30,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..c198063decf2c9 100644 --- a/docs/src/pages/components/tables/DenseTable.tsx +++ b/docs/src/pages/components/tables/DenseTable.tsx @@ -3,18 +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%', - }, - paper: { - width: '100%', - overflowX: 'auto', - }, table: { minWidth: 650, }, @@ -36,33 +30,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..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'; @@ -197,9 +198,6 @@ const useStyles = makeStyles(theme => ({ table: { minWidth: 750, }, - tableWrapper: { - overflowX: 'auto', - }, visuallyHidden: { border: 0, clip: 'rect(0 0 0 0)', @@ -278,7 +276,7 @@ export default function EnhancedTable() {
-
+
-
+ table: { minWidth: 750, }, - tableWrapper: { - overflowX: 'auto', - }, visuallyHidden: { border: 0, clip: 'rect(0 0 0 0)', @@ -306,7 +304,7 @@ export default function EnhancedTable() {
-
+
-
+ + @@ -58,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 372dd709621e70..f182b843ad4f53 100644 --- a/docs/src/pages/components/tables/SimpleTable.tsx +++ b/docs/src/pages/components/tables/SimpleTable.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, }, @@ -33,7 +30,7 @@ export default function SimpleTable() { const classes = useStyles(); return ( - + @@ -58,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 5151e7829b9d1f..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,10 +11,6 @@ import Paper from '@material-ui/core/Paper'; const TAX_RATE = 0.07; const useStyles = makeStyles({ - root: { - width: '100%', - overflowX: 'auto', - }, table: { minWidth: 700, }, @@ -50,7 +47,7 @@ export default function SpanningTable() { const classes = useStyles(); return ( - + @@ -92,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 28a86dd358b628..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,10 +11,6 @@ import Paper from '@material-ui/core/Paper'; const TAX_RATE = 0.07; const useStyles = makeStyles({ - root: { - width: '100%', - overflowX: 'auto', - }, table: { minWidth: 700, }, @@ -57,7 +54,7 @@ export default function SpanningTable() { const classes = useStyles(); return ( - + @@ -98,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; +} + +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..c8f55aa8f47ac2 --- /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 table itself, normally `` + */ + 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;