diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js
index f0d38c350c762b..0cc515d2ad3c8c 100644
--- a/packages/material-ui/src/Table/Table.js
+++ b/packages/material-ui/src/Table/Table.js
@@ -22,9 +22,9 @@ class Table extends React.Component {
}
render() {
- const { classes, className: classNameProp, component: Component, ...other } = this.props;
+ const { classes, className, component: Component, ...other } = this.props;
- return ;
+ return ;
}
}
diff --git a/packages/material-ui/src/Table/TableBody.js b/packages/material-ui/src/Table/TableBody.js
index 07c0c14f339274..a1bed0f9db4a3c 100644
--- a/packages/material-ui/src/Table/TableBody.js
+++ b/packages/material-ui/src/Table/TableBody.js
@@ -20,9 +20,9 @@ class TableBody extends React.Component {
}
render() {
- const { classes, className: classNameProp, component: Component, ...other } = this.props;
+ const { classes, className, component: Component, ...other } = this.props;
- return ;
+ return ;
}
}
diff --git a/packages/material-ui/src/Table/TableFooter.d.ts b/packages/material-ui/src/Table/TableFooter.d.ts
index 34c71d8f172f47..853fe875ad9424 100644
--- a/packages/material-ui/src/Table/TableFooter.d.ts
+++ b/packages/material-ui/src/Table/TableFooter.d.ts
@@ -1,9 +1,12 @@
import * as React from 'react';
+import { StandardProps } from '..';
-export interface TableFooterProps extends TableFooterBaseProps {
+export interface TableFooterProps extends StandardProps {
component?: React.ReactType;
}
+export type TableFooterClassKey = 'root';
+
export type TableFooterBaseProps = React.HTMLAttributes;
declare const TableFooter: React.ComponentType;
diff --git a/packages/material-ui/src/Table/TableFooter.js b/packages/material-ui/src/Table/TableFooter.js
index 910e9a04a6ce02..28095be7d68d75 100644
--- a/packages/material-ui/src/Table/TableFooter.js
+++ b/packages/material-ui/src/Table/TableFooter.js
@@ -1,5 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import withStyles from '../styles/withStyles';
+
+const styles = {
+ root: {
+ display: 'table-footer-group',
+ },
+};
class TableFooter extends React.Component {
getChildContext() {
@@ -12,9 +20,9 @@ class TableFooter extends React.Component {
}
render() {
- const { component: Component, ...other } = this.props;
+ const { classes, className, component: Component, ...other } = this.props;
- return ;
+ return ;
}
}
@@ -23,6 +31,14 @@ TableFooter.propTypes = {
* The content of the component, normally `TableRow`.
*/
children: PropTypes.node,
+ /**
+ * Useful to extend the style applied to components.
+ */
+ 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.
@@ -38,4 +54,4 @@ TableFooter.childContextTypes = {
table: PropTypes.object,
};
-export default TableFooter;
+export default withStyles(styles, { name: 'MuiTableFooter' })(TableFooter);
diff --git a/packages/material-ui/src/Table/TableFooter.test.js b/packages/material-ui/src/Table/TableFooter.test.js
index 643ba1740a6426..5622f91c1b362f 100644
--- a/packages/material-ui/src/Table/TableFooter.test.js
+++ b/packages/material-ui/src/Table/TableFooter.test.js
@@ -1,13 +1,15 @@
import React from 'react';
import { assert } from 'chai';
-import { createShallow } from '../test-utils';
+import { createShallow, getClasses } from '../test-utils';
import TableFooter from './TableFooter';
describe('', () => {
let shallow;
+ let classes;
before(() => {
- shallow = createShallow();
+ shallow = createShallow({ dive: true });
+ classes = getClasses();
});
it('should render a tfoot', () => {
@@ -20,9 +22,10 @@ describe('', () => {
assert.strictEqual(wrapper.name(), 'div');
});
- it('should render with the user class', () => {
+ it('should render with the user and root class', () => {
const wrapper = shallow();
assert.strictEqual(wrapper.hasClass('woofTableHead'), true);
+ assert.strictEqual(wrapper.hasClass(classes.root), true);
});
it('should render children', () => {
diff --git a/packages/material-ui/src/Table/TableHead.js b/packages/material-ui/src/Table/TableHead.js
index d98a174118da65..7a52ddae71ecc0 100644
--- a/packages/material-ui/src/Table/TableHead.js
+++ b/packages/material-ui/src/Table/TableHead.js
@@ -20,9 +20,9 @@ class TableHead extends React.Component {
}
render() {
- const { classes, className: classNameProp, component: Component, ...other } = this.props;
+ const { classes, className, component: Component, ...other } = this.props;
- return ;
+ return ;
}
}
diff --git a/packages/material-ui/src/styles/overrides.d.ts b/packages/material-ui/src/styles/overrides.d.ts
index 9da73e80a80370..98c231dc565be8 100644
--- a/packages/material-ui/src/styles/overrides.d.ts
+++ b/packages/material-ui/src/styles/overrides.d.ts
@@ -2,12 +2,12 @@ import { AppBarClassKey } from '../AppBar/AppBar';
import { AvatarClassKey } from '../Avatar/Avatar';
import { BackdropClassKey } from '../Modal/Backdrop';
import { BadgeClassKey } from '../Badge/Badge';
-import { BottomNavigationClassKey } from '../BottomNavigation/BottomNavigation';
import { BottomNavigationActionClassKey } from '../BottomNavigation/BottomNavigationAction';
-import { ButtonClassKey } from '../Button/Button';
+import { BottomNavigationClassKey } from '../BottomNavigation/BottomNavigation';
import { ButtonBaseClassKey } from '../ButtonBase/ButtonBase';
-import { CardClassKey } from '../Card/Card';
+import { ButtonClassKey } from '../Button/Button';
import { CardActionsClassKey } from '../Card/CardActions';
+import { CardClassKey } from '../Card/Card';
import { CardContentClassKey } from '../Card/CardContent';
import { CardHeaderClassKey } from '../Card/CardHeader';
import { CardMediaClassKey } from '../Card/CardMedia';
@@ -62,8 +62,8 @@ import { SelectClassKey } from '../Select/Select';
import { SelectInputClassKey } from '../Select/SelectInput';
import { SnackbarClassKey } from '../Snackbar/Snackbar';
import { SnackbarContentClassKey } from '../Snackbar/SnackbarContent';
-import { StepClasskey } from '../Stepper/Step';
import { StepButtonClasskey } from '../Stepper/StepButton';
+import { StepClasskey } from '../Stepper/Step';
import { StepContentClasskey } from '../Stepper/StepContent';
import { StepIconClasskey } from '../Stepper/StepIcon';
import { StepLabelClasskey } from '../Stepper/StepLabel';
@@ -73,8 +73,11 @@ import { SvgIconClassKey } from '../SvgIcon/SvgIcon';
import { SwitchBaseClassKey } from '../internal/SwitchBase';
import { SwitchClassKey } from '../Switch/Switch';
import { TabClassKey } from '../Tabs/Tab';
-import { TableClassKey } from '../Table/Table';
+import { TableBodyClassKey } from '../Table/TableBody';
import { TableCellClassKey } from '../Table/TableCell';
+import { TableClassKey } from '../Table/Table';
+import { TableFooterClassKey } from '../Table/TableFooter';
+import { TableHeadClassKey } from '../Table/TableHead';
import { TablePaginationClassKey } from '../Table/TablePagination';
import { TableRowClassKey } from '../Table/TableRow';
import { TableSortLabelClassKey } from '../Table/TableSortLabel';
diff --git a/pages/api/table-footer.md b/pages/api/table-footer.md
index e700104a55e9ed..99bb2661b38030 100644
--- a/pages/api/table-footer.md
+++ b/pages/api/table-footer.md
@@ -13,6 +13,7 @@ filename: /packages/material-ui/src/Table/TableFooter.js
| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| children | node | | The content of the component, normally `TableRow`. |
+| classes | object | | Useful to extend the style applied to components. |
| component | union: string |
func
| 'tfoot' | The component used for the root node. Either a string to use a DOM element or a component. |
Any other properties supplied will be [spread to the root element](/guides/api#spread).