+
);
diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js
index 2f91404ada0c2c..2d49ac4732ec86 100644
--- a/packages/material-ui/src/TableRow/TableRow.js
+++ b/packages/material-ui/src/TableRow/TableRow.js
@@ -9,7 +9,6 @@ export const styles = theme => ({
root: {
color: 'inherit',
display: 'table-row',
- height: 48,
verticalAlign: 'middle',
// We disable the focus ring for mouse, touch and keyboard users.
outline: 'none',
@@ -30,14 +29,10 @@ export const styles = theme => ({
selected: {},
/* Styles applied to the root element if `hover={true}`. */
hover: {},
- /* Styles applied to the root element if table variant = 'head'. */
- head: {
- height: 56,
- },
- /* Styles applied to the root element if table variant = 'footer'. */
- footer: {
- height: 56,
- },
+ /* Styles applied to the root element if table variant="head". */
+ head: {},
+ /* Styles applied to the root element if table variant="footer". */
+ footer: {},
});
/**
@@ -45,31 +40,24 @@ export const styles = theme => ({
* based on the material table element parent (head, body, etc).
*/
const TableRow = React.forwardRef(function TableRow(props, ref) {
- const {
- classes,
- className: classNameProp,
- component: Component,
- hover,
- selected,
- ...other
- } = props;
+ const { classes, className, component: Component, hover, selected, ...other } = props;
+ const tablelvl2 = React.useContext(Tablelvl2Context);
return (
-
- {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 ;
- }}
-
+
);
});
diff --git a/pages/api/table-cell.md b/pages/api/table-cell.md
index eedab36e2264d5..e52178027e40d4 100644
--- a/pages/api/table-cell.md
+++ b/pages/api/table-cell.md
@@ -22,9 +22,9 @@ import TableCell from '@material-ui/core/TableCell';
| children | node | | The table cell contents. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. |
-| ~~numeric~~ | bool | | *Deprecated*. Instead, use the `align` property.
If `true`, content will align to the right. |
-| padding | enum: 'default' |
'checkbox' |
'dense' |
'none'
| | Sets the padding applied to the cell. By default, the Table parent component set the value. |
+| padding | enum: 'default' |
'checkbox' |
'none'
| | Sets the padding applied to the cell. By default, the Table parent component set the value. |
| scope | string | | Set scope attribute. |
+| size | enum: 'small' |
'medium'
| | Specify the size of the cell. By default, the Table parent component set the value (`normal`). |
| sortDirection | enum: 'asc' |
'desc' |
false
| | Set aria-sort direction. |
| variant | enum: 'head' |
'body' |
'footer'
| | Specify the cell type. By default, the TableHead, TableBody or TableFooter parent component set the value. |
@@ -42,8 +42,7 @@ This property accepts the following keys:
| head | Styles applied to the root element if `variant="head"` or `context.table.head`.
| body | Styles applied to the root element if `variant="body"` or `context.table.body`.
| footer | Styles applied to the root element if `variant="footer"` or `context.table.footer`.
-| numeric | Styles applied to the root element if `numeric={true}`.
-| paddingDense | Styles applied to the root element if `padding="dense"`.
+| sizeSmall | Styles applied to the root element if `padding="dense"`.
| paddingCheckbox | Styles applied to the root element if `padding="checkbox"`.
| paddingNone | Styles applied to the root element if `padding="none"`.
| alignLeft | Styles applied to the root element if `align="left"`.
diff --git a/pages/api/table-row.md b/pages/api/table-row.md
index 1288dd425ce9a1..3f6d897e34da40 100644
--- a/pages/api/table-row.md
+++ b/pages/api/table-row.md
@@ -38,8 +38,8 @@ This property accepts the following keys:
| root | Styles applied to the root element.
| selected | Styles applied to the root element if `selected={true}`.
| hover | Styles applied to the root element if `hover={true}`.
-| head | Styles applied to the root element if table variant = 'head'.
-| footer | Styles applied to the root element if table variant = 'footer'.
+| head | Styles applied to the root element if table variant="head".
+| footer | Styles applied to the root element if table variant="footer".
Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
and the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/TableRow/TableRow.js)
diff --git a/pages/api/table.md b/pages/api/table.md
index d52a12d314cc5b..925786e6d80b0f 100644
--- a/pages/api/table.md
+++ b/pages/api/table.md
@@ -21,7 +21,8 @@ import Table from '@material-ui/core/Table';
| 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 | 'table' | The component used for the root node. Either a string to use a DOM element or a component. |
-| padding | enum: 'default' |
'checkbox' |
'dense' |
'none'
| 'default' | Allows TableCells to inherit padding of the Table. |
+| padding | enum: 'default' |
'checkbox' |
'none'
| 'default' | Allows TableCells to inherit padding of the Table. |
+| size | enum: 'small' |
'medium'
| 'medium' | Allows TableCells to inherit size of the Table. |
Any other properties supplied will be spread to the root element (native element).
diff --git a/test/regressions/tests/Table/DenseCheckboxTable.js b/test/regressions/tests/Table/DenseCheckboxTable.js
new file mode 100644
index 00000000000000..a6e0f8baa82b5d
--- /dev/null
+++ b/test/regressions/tests/Table/DenseCheckboxTable.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Checkbox from '@material-ui/core/Checkbox';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ },
+ paper: {
+ marginTop: theme.spacing(3),
+ width: '100%',
+ overflowX: 'auto',
+ marginBottom: theme.spacing(2),
+ },
+ table: {
+ minWidth: 650,
+ },
+});
+
+let id = 0;
+function createData(name, calories, fat, carbs, protein) {
+ id += 1;
+ return { id, name, calories, fat, carbs, protein };
+}
+
+const rows = [
+ createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+ createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+ createData('Eclair', 262, 16.0, 24, 6.0),
+ createData('Cupcake', 305, 3.7, 67, 4.3),
+ createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+function DenseCheckboxTable(props) {
+ const { classes } = props;
+
+ return (
+
+
+
+
+
+
+
+
+ Dessert (100g serving)
+ Calories
+ Fat (g)
+ Carbs (g)
+ Protein (g)
+
+
+
+ {rows.map(row => (
+
+
+
+
+
+ {row.name}
+
+ {row.calories}
+ {row.fat}
+ {row.carbs}
+ {row.protein}
+
+ ))}
+
+
+
+
-
-
- Padding: {padding}
-
-
-
-
-
- Dummy Data
- Dummy Data
-
-
- Dummy Data
- Dummy Data
-
-
-
-
- );
-}
-
-MyTable.propTypes = {
- padding: PropTypes.any,
-};
-
-function PaddingTable() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default PaddingTable;