diff --git a/docs/src/pages/demos/tables/BasicTable.js b/docs/src/pages/demos/tables/BasicTable.js index 6692be2f5e5f2f..bca4194d2b21b8 100644 --- a/docs/src/pages/demos/tables/BasicTable.js +++ b/docs/src/pages/demos/tables/BasicTable.js @@ -7,11 +7,14 @@ import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Ta import Paper from 'material-ui/Paper'; const styles = theme => ({ - paper: { + root: { width: '100%', marginTop: theme.spacing.unit * 3, overflowX: 'auto', }, + table: { + width: 700, + }, }); let id = 0; @@ -32,8 +35,8 @@ function BasicTable(props) { const { classes } = props; return ( - - + +
Dessert (100g serving) diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js index 0cb51a9088b8ae..6d19634ba8c975 100644 --- a/docs/src/pages/demos/tables/EnhancedTable.js +++ b/docs/src/pages/demos/tables/EnhancedTable.js @@ -72,7 +72,11 @@ class EnhancedTableHead extends React.Component { numeric={column.numeric} padding={column.disablePadding ? 'none' : 'default'} > - + ({ width: '100%', marginTop: theme.spacing.unit * 3, }, + table: { + width: 800, + }, tableWrapper: { overflowX: 'auto', }, @@ -264,7 +271,7 @@ class EnhancedTable extends React.Component {
-
+
({ root: { borderBottom: `1px solid ${theme.palette.text.lightDivider}`, - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', textAlign: 'left', }, numeric: { @@ -59,12 +57,12 @@ export const styles = (theme: Object) => ({ flexDirection: 'row-reverse', // can be dynamically inherited at runtime by contents }, head: { - whiteSpace: 'pre', fontWeight: theme.typography.fontWeightMedium, position: 'relative', // Workaround for Tooltip positioning issue. }, paddingDefault: { - padding: `0 ${theme.spacing.unit * 7}px 0 ${theme.spacing.unit * 3}px`, + padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit * 7}px ${theme.spacing.unit / + 2}px ${theme.spacing.unit * 3}px`, '&:last-child': { paddingRight: theme.spacing.unit * 3, }, @@ -73,8 +71,7 @@ export const styles = (theme: Object) => ({ paddingRight: theme.spacing.unit * 3, }, paddingCheckbox: { - paddingLeft: 12, - paddingRight: 12, + padding: '0 12px', }, footer: { borderBottom: 0, diff --git a/src/Table/TablePagination.js b/src/Table/TablePagination.js index 7636c9dc04e17a..3c6b7cc21cdf3e 100644 --- a/src/Table/TablePagination.js +++ b/src/Table/TablePagination.js @@ -32,6 +32,9 @@ export const styles = (theme: Object) => ({ caption: { flexShrink: 0, }, + selectRoot: { + marginRight: theme.spacing.unit * 4, + }, select: { marginLeft: theme.spacing.unit, width: 34, @@ -41,9 +44,6 @@ export const styles = (theme: Object) => ({ height: 32, lineHeight: '32px', }, - selectRoot: { - marginRight: theme.spacing.unit * 4, - }, actions: { flexShrink: 0, color: theme.palette.text.secondary, @@ -178,20 +178,18 @@ class TablePagination extends React.Component { {labelRowsPerPage} - - - + {labelDisplayedRows({ from: count === 0 ? 0 : page * rowsPerPage + 1, diff --git a/src/Table/TablePagination.spec.js b/src/Table/TablePagination.spec.js index 3e04de4eff8868..4e10bba2c4153b 100644 --- a/src/Table/TablePagination.spec.js +++ b/src/Table/TablePagination.spec.js @@ -279,7 +279,7 @@ describe('', () => { assert.strictEqual( wrapper .find('withStyles(Typography)') - .at(2) + .at(1) .text(), '0-0 of 0', );