diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js index f3e59ee03643a2..b7be5c2d414429 100644 --- a/packages/material-ui/src/Table/Table.js +++ b/packages/material-ui/src/Table/Table.js @@ -19,6 +19,7 @@ class Table extends React.Component { // eslint-disable-line class-methods-use-this return { table: {}, + padding: this.props.padding }; } @@ -43,6 +44,10 @@ Table.propTypes = { * @ignore */ className: PropTypes.string, + /** + * Allows TableCells to inherit padding of the Table. + */ + padding: PropTypes.string, /** * The component used for the root node. * Either a string to use a DOM element or a component. @@ -52,10 +57,12 @@ Table.propTypes = { Table.defaultProps = { component: 'table', + padding: 'default' }; Table.childContextTypes = { table: PropTypes.object, + padding: PropTypes.string }; export default withStyles(styles, { name: 'MuiTable' })(Table); diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js index 80507ea035b0c6..14350b63629d37 100644 --- a/packages/material-ui/src/TableCell/TableCell.js +++ b/packages/material-ui/src/TableCell/TableCell.js @@ -80,6 +80,9 @@ function TableCell(props, context) { variant, ...other } = props; + + let Padding = padding === 'default' ? context.padding : padding; + const { table } = context; let Component; if (component) { @@ -100,7 +103,7 @@ function TableCell(props, context) { [classes.body]: variant ? variant === 'body' : table && table.body, [classes.footer]: variant ? variant === 'footer' : table && table.footer, [classes.numeric]: numeric, - [classes[`padding${capitalize(padding)}`]]: padding !== 'default', + [classes[`padding${capitalize(Padding)}`]]: Padding !== 'default', }, classNameProp, ); @@ -166,6 +169,7 @@ TableCell.defaultProps = { TableCell.contextTypes = { table: PropTypes.object.isRequired, + padding: PropTypes.string }; export default withStyles(styles, { name: 'MuiTableCell' })(TableCell);