Make a table actually dense when padding="dense"

mui · Feb 16, 2019 · e0a5052 · e0a5052
1 parent ebd0d1f
commit e0a5052
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js
@@ -54,6 +54,8 @@ export const styles = theme => ({
   /* Styles applied to the root element if `padding="dense"`. */
   paddingDense: {
     paddingRight: 24,
+    paddingTop: 0,
+    paddingBottom: 0,
   },
   /* Styles applied to the root element if `padding="checkbox"`. */
   paddingCheckbox: {

diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js
@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
+import TableContext from '../Table/TableContext';
 
 export const styles = theme => ({
   /* Styles applied to the root element. */
@@ -26,7 +27,12 @@ export const styles = theme => ({
           ? 'rgba(0, 0, 0, 0.07)' // grey[200]
           : 'rgba(255, 255, 255, 0.14)',
     },
+    '&$dense': {
+      height: 32,
+    },
   },
+  /* Styles applied to the root element if `dense={true}`. */
+  dense: {},
   /* Styles applied to the root element if `selected={true}`. */
   selected: {},
   /* Styles applied to the root element if `hover={true}`. */
@@ -50,27 +56,33 @@ function TableRow(props) {
     classes,
     className: classNameProp,
     component: Component,
+    dense,
     hover,
     selected,
     ...other
   } = props;
 
   return (
-    <Tablelvl2Context.Consumer>
-      {tablelvl2 => {
-        const className = clsx(
-          classes.root,
-          {
-            [classes.head]: tablelvl2 && tablelvl2.variant === 'head',
-            [classes.footer]: tablelvl2 && tablelvl2.variant === 'footer',
-            [classes.hover]: hover,
-            [classes.selected]: selected,
-          },
-          classNameProp,
-        );
-        return <Component className={className} {...other} />;
-      }}
-    </Tablelvl2Context.Consumer>
+    <TableContext.Consumer>
+      {table => (
+        <Tablelvl2Context.Consumer>
+          {tablelvl2 => {
+            const className = clsx(
+              classes.root,
+              {
+                [classes.head]: tablelvl2 && tablelvl2.variant === 'head',
+                [classes.footer]: tablelvl2 && tablelvl2.variant === 'footer',
+                [classes.hover]: hover,
+                [classes.selected]: selected,
+                [classes.dense]: (table && table.padding === 'dense') || dense,
+              },
+              classNameProp,
+            );
+            return <Component className={className} {...other} />;
+          }}
+        </Tablelvl2Context.Consumer>
+      )}
+    </TableContext.Consumer>
   );
 }
 
@@ -93,6 +105,10 @@ TableRow.propTypes = {
    * Either a string to use a DOM element or a component.
    */
   component: componentPropType,
+  /**
+   * If `true`, the row will have less height.
+   */
+  dense: PropTypes.bool,
   /**
    * If `true`, the table row will shade on hover.
    */