From 33dbab4334100786944cdeca49203163713d467f Mon Sep 17 00:00:00 2001 From: Niklas Wagner Date: Thu, 14 Sep 2017 17:56:57 +0200 Subject: [PATCH 01/10] Height should be set to 100% to allow scrolling --- docs/src/pages/demos/drawers/MiniDrawer.js | 2 +- docs/src/pages/demos/drawers/PermanentDrawer.js | 2 +- docs/src/pages/demos/drawers/PersistentDrawer.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/demos/drawers/MiniDrawer.js b/docs/src/pages/demos/drawers/MiniDrawer.js index 093840e0afb2d4..61d1cec995c93e 100644 --- a/docs/src/pages/demos/drawers/MiniDrawer.js +++ b/docs/src/pages/demos/drawers/MiniDrawer.js @@ -56,7 +56,7 @@ const styles = theme => ({ }, drawerPaper: { position: 'relative', - height: 'auto', + height: '100%', width: drawerWidth, transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, diff --git a/docs/src/pages/demos/drawers/PermanentDrawer.js b/docs/src/pages/demos/drawers/PermanentDrawer.js index 5ab9bc6bd77b9d..d686310da0c62a 100644 --- a/docs/src/pages/demos/drawers/PermanentDrawer.js +++ b/docs/src/pages/demos/drawers/PermanentDrawer.js @@ -35,7 +35,7 @@ const styles = theme => ({ }, drawerPaper: { position: 'relative', - height: 'auto', + height: '100%', width: drawerWidth, }, drawerHeader: theme.mixins.toolbar, diff --git a/docs/src/pages/demos/drawers/PersistentDrawer.js b/docs/src/pages/demos/drawers/PersistentDrawer.js index 7d203c5efbc60e..e594182b77cd4a 100644 --- a/docs/src/pages/demos/drawers/PersistentDrawer.js +++ b/docs/src/pages/demos/drawers/PersistentDrawer.js @@ -55,7 +55,7 @@ const styles = theme => ({ }, drawerPaper: { position: 'relative', - height: 'auto', + height: '100%', width: drawerWidth, }, drawerHeader: { From 4b6fe4615df793b86fd893220c2ac566bb9af3b8 Mon Sep 17 00:00:00 2001 From: Niklas Wagner Date: Wed, 22 Nov 2017 04:23:05 +0100 Subject: [PATCH 02/10] [Table] Add responsive table --- .../src/pages/demos/tables/ResponsiveTable.js | 105 ++++++++++++++++++ docs/src/pages/demos/tables/tables.md | 6 + pages/api/table.md | 2 + pages/demos/tables.js | 7 ++ src/Table/Table.d.ts | 5 +- src/Table/Table.js | 12 +- src/Table/Table.spec.js | 8 +- 7 files changed, 142 insertions(+), 3 deletions(-) create mode 100644 docs/src/pages/demos/tables/ResponsiveTable.js diff --git a/docs/src/pages/demos/tables/ResponsiveTable.js b/docs/src/pages/demos/tables/ResponsiveTable.js new file mode 100644 index 00000000000000..f69bd03f1c2267 --- /dev/null +++ b/docs/src/pages/demos/tables/ResponsiveTable.js @@ -0,0 +1,105 @@ +// @flow weak + +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from 'material-ui/styles'; +import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Table'; +import Paper from 'material-ui/Paper'; + +const styles = theme => ({ + root: { + width: '100%', + marginTop: theme.spacing.unit * 3, + }, + table: { + minWidth: 700, + }, + cell: { + whiteSpace: 'nowrap', + }, +}); + +let id = 0; +function createData(name, calories, fat, carbs, protein) { + id += 1; + return { id, name, calories, fat, carbs, protein }; +} + +const data = [ + 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 ResponsiveTable(props) { + const { classes } = props; + + return ( + + + + + Dessert (100g serving) + + Calories + + + Fat (g) + + + Carbs (g) + + + Protein (g) + + + Fat (g) + + + Carbs (g) + + + Protein (g) + + + Fat (g) + + + Carbs (g) + + + Protein (g) + + + + + {data.map(n => { + return ( + + {n.name} + {n.calories} + {n.fat} + {n.carbs} + {n.protein} + {n.fat} + {n.carbs} + {n.protein} + {n.fat} + {n.carbs} + {n.protein} + + ); + })} + +
+ + ); +} + +ResponsiveTable.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ResponsiveTable); diff --git a/docs/src/pages/demos/tables/tables.md b/docs/src/pages/demos/tables/tables.md index 50215326c2bdb8..a39f3e54864b64 100644 --- a/docs/src/pages/demos/tables/tables.md +++ b/docs/src/pages/demos/tables/tables.md @@ -19,6 +19,12 @@ A simple example with no frills. {{demo='pages/demos/tables/BasicTable.js'}} +## Responsive Table + +A responsive table will display a horizontal scroll bar if the screen is too small to display the full content. You may need to resize your browser window to see the effect. + +{{demo='pages/demos/tables/ResponsiveTable.js'}} + ## Sorting & Selecting This example demonstrates the use `Checkbox` and clickable rows for selection with a `Toolbar`. diff --git a/pages/api/table.md b/pages/api/table.md index 7de25cacdda19c..fade1a4fa957cc 100644 --- a/pages/api/table.md +++ b/pages/api/table.md @@ -15,6 +15,7 @@ filename: /src/Table/Table.js | children | Node | | The content of the table, normally `TableHeader` and `TableBody`. | | classes | Object | | Useful to extend the style applied to components. | | component | ElementType | 'table' | The component used for the root node. Either a string to use a DOM element or a component. | +| responsive | boolean | false | If `true`, overflowX is set to 'auto' which allow vertical scrolling. | Any other properties supplied will be [spread to the root element](/guides/api#spread). @@ -23,6 +24,7 @@ Any other properties supplied will be [spread to the root element](/guides/api#s You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - `root` +- `responsive` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/callemall/material-ui/tree/v1-beta/src/Table/Table.js) diff --git a/pages/demos/tables.js b/pages/demos/tables.js index 9a798803a68517..a6a8c9dab409fb 100644 --- a/pages/demos/tables.js +++ b/pages/demos/tables.js @@ -15,6 +15,13 @@ function Page() { raw: preval` module.exports = require('fs') .readFileSync(require.resolve('docs/src/pages/demos/tables/BasicTable'), 'utf8') +`, + }, + 'pages/demos/tables/ResponsiveTable.js': { + js: require('docs/src/pages/demos/tables/ResponsiveTable').default, + raw: preval` +module.exports = require('fs') + .readFileSync(require.resolve('docs/src/pages/demos/tables/ResponsiveTable'), 'utf8') `, }, 'pages/demos/tables/EnhancedTable.js': { diff --git a/src/Table/Table.d.ts b/src/Table/Table.d.ts index 213b32f885618e..c4cb549668e4c6 100644 --- a/src/Table/Table.d.ts +++ b/src/Table/Table.d.ts @@ -4,10 +4,13 @@ import { StandardProps } from '..'; export interface TableProps extends StandardProps< React.TableHTMLAttributes, TableClassKey -> {} +> { + responsive?: boolean; +} export type TableClassKey = | 'root' + | 'responsive' ; declare const Table: React.ComponentType; diff --git a/src/Table/Table.js b/src/Table/Table.js index 3fd83e37671dc8..02aa43d92bd459 100644 --- a/src/Table/Table.js +++ b/src/Table/Table.js @@ -14,6 +14,10 @@ export const styles = (theme: Object) => ({ borderSpacing: 0, overflow: 'hidden', }, + responsive: { + display: 'block', + overflowX: 'auto', + }, }); type ProvidedProps = { @@ -41,6 +45,10 @@ export type Props = { * @ignore */ className?: string, + /** + * If `true`, overflowX is set to 'auto' which allow vertical scrolling. + */ + responsive: boolean, /** * The component used for the root node. * Either a string to use a DOM element or a component. @@ -51,6 +59,7 @@ export type Props = { class Table extends React.Component { static defaultProps = { component: ('table': ElementType), + responsive: false, }; getChildContext() { @@ -66,9 +75,10 @@ class Table extends React.Component { className: classNameProp, children, component: ComponentProp, + responsive, ...other } = this.props; - const className = classNames(classes.root, classNameProp); + const className = classNames(classes.root, classNameProp, { [classes.responsive]: responsive }); return ( diff --git a/src/Table/Table.spec.js b/src/Table/Table.spec.js index d194a00a0d2ab3..6714fb752ee98c 100644 --- a/src/Table/Table.spec.js +++ b/src/Table/Table.spec.js @@ -33,10 +33,16 @@ describe('', () => { ); }); - it('should render with the user and root classes', () => { + it('should render with the user and root classes but without responsive classes', () => { const wrapper = shallow(
); assert.strictEqual(wrapper.hasClass('woofTable'), true); assert.strictEqual(wrapper.hasClass(classes.root), true); + assert.strictEqual(wrapper.hasClass(classes.responsive), false); + }); + + it('should render table with responsive classes', () => { + const wrapper = shallow(
); + assert.strictEqual(wrapper.hasClass(classes.responsive), true); }); it('should render children', () => { From 270733578dc88ef70632f5d385a59d0aaf3752a5 Mon Sep 17 00:00:00 2001 From: Niklas Wagner Date: Wed, 22 Nov 2017 15:53:04 +0100 Subject: [PATCH 03/10] Fix overflow in demo --- docs/src/pages/demos/tables/ResponsiveTable.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/docs/src/pages/demos/tables/ResponsiveTable.js b/docs/src/pages/demos/tables/ResponsiveTable.js index f69bd03f1c2267..8f3f8bd97032e2 100644 --- a/docs/src/pages/demos/tables/ResponsiveTable.js +++ b/docs/src/pages/demos/tables/ResponsiveTable.js @@ -11,9 +11,6 @@ const styles = theme => ({ width: '100%', marginTop: theme.spacing.unit * 3, }, - table: { - minWidth: 700, - }, cell: { whiteSpace: 'nowrap', }, @@ -38,7 +35,7 @@ function ResponsiveTable(props) { return ( -
+
Dessert (100g serving) From 415de905e049e9e95f01065c1dd87652762f3ec5 Mon Sep 17 00:00:00 2001 From: Niklas Wagner Date: Sun, 26 Nov 2017 09:30:47 +0100 Subject: [PATCH 04/10] Revert "Fix overflow in demo" This reverts commit 270733578dc88ef70632f5d385a59d0aaf3752a5. --- docs/src/pages/demos/tables/ResponsiveTable.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/demos/tables/ResponsiveTable.js b/docs/src/pages/demos/tables/ResponsiveTable.js index 8f3f8bd97032e2..f69bd03f1c2267 100644 --- a/docs/src/pages/demos/tables/ResponsiveTable.js +++ b/docs/src/pages/demos/tables/ResponsiveTable.js @@ -11,6 +11,9 @@ const styles = theme => ({ width: '100%', marginTop: theme.spacing.unit * 3, }, + table: { + minWidth: 700, + }, cell: { whiteSpace: 'nowrap', }, @@ -35,7 +38,7 @@ function ResponsiveTable(props) { return ( -
+
Dessert (100g serving) From 67ee95cd9c3a39614b7476247d3a10e180e35112 Mon Sep 17 00:00:00 2001 From: Niklas Wagner Date: Sun, 26 Nov 2017 09:30:49 +0100 Subject: [PATCH 05/10] Revert "[Table] Add responsive table" This reverts commit 4b6fe4615df793b86fd893220c2ac566bb9af3b8. --- .../src/pages/demos/tables/ResponsiveTable.js | 105 ------------------ docs/src/pages/demos/tables/tables.md | 6 - pages/api/table.md | 2 - pages/demos/tables.js | 7 -- src/Table/Table.d.ts | 5 +- src/Table/Table.js | 12 +- src/Table/Table.spec.js | 8 +- 7 files changed, 3 insertions(+), 142 deletions(-) delete mode 100644 docs/src/pages/demos/tables/ResponsiveTable.js diff --git a/docs/src/pages/demos/tables/ResponsiveTable.js b/docs/src/pages/demos/tables/ResponsiveTable.js deleted file mode 100644 index f69bd03f1c2267..00000000000000 --- a/docs/src/pages/demos/tables/ResponsiveTable.js +++ /dev/null @@ -1,105 +0,0 @@ -// @flow weak - -import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from 'material-ui/styles'; -import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Table'; -import Paper from 'material-ui/Paper'; - -const styles = theme => ({ - root: { - width: '100%', - marginTop: theme.spacing.unit * 3, - }, - table: { - minWidth: 700, - }, - cell: { - whiteSpace: 'nowrap', - }, -}); - -let id = 0; -function createData(name, calories, fat, carbs, protein) { - id += 1; - return { id, name, calories, fat, carbs, protein }; -} - -const data = [ - 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 ResponsiveTable(props) { - const { classes } = props; - - return ( - -
- - - Dessert (100g serving) - - Calories - - - Fat (g) - - - Carbs (g) - - - Protein (g) - - - Fat (g) - - - Carbs (g) - - - Protein (g) - - - Fat (g) - - - Carbs (g) - - - Protein (g) - - - - - {data.map(n => { - return ( - - {n.name} - {n.calories} - {n.fat} - {n.carbs} - {n.protein} - {n.fat} - {n.carbs} - {n.protein} - {n.fat} - {n.carbs} - {n.protein} - - ); - })} - -
- - ); -} - -ResponsiveTable.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(ResponsiveTable); diff --git a/docs/src/pages/demos/tables/tables.md b/docs/src/pages/demos/tables/tables.md index a39f3e54864b64..50215326c2bdb8 100644 --- a/docs/src/pages/demos/tables/tables.md +++ b/docs/src/pages/demos/tables/tables.md @@ -19,12 +19,6 @@ A simple example with no frills. {{demo='pages/demos/tables/BasicTable.js'}} -## Responsive Table - -A responsive table will display a horizontal scroll bar if the screen is too small to display the full content. You may need to resize your browser window to see the effect. - -{{demo='pages/demos/tables/ResponsiveTable.js'}} - ## Sorting & Selecting This example demonstrates the use `Checkbox` and clickable rows for selection with a `Toolbar`. diff --git a/pages/api/table.md b/pages/api/table.md index fade1a4fa957cc..7de25cacdda19c 100644 --- a/pages/api/table.md +++ b/pages/api/table.md @@ -15,7 +15,6 @@ filename: /src/Table/Table.js | children | Node | | The content of the table, normally `TableHeader` and `TableBody`. | | classes | Object | | Useful to extend the style applied to components. | | component | ElementType | 'table' | The component used for the root node. Either a string to use a DOM element or a component. | -| responsive | boolean | false | If `true`, overflowX is set to 'auto' which allow vertical scrolling. | Any other properties supplied will be [spread to the root element](/guides/api#spread). @@ -24,7 +23,6 @@ Any other properties supplied will be [spread to the root element](/guides/api#s You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: - `root` -- `responsive` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/callemall/material-ui/tree/v1-beta/src/Table/Table.js) diff --git a/pages/demos/tables.js b/pages/demos/tables.js index a6a8c9dab409fb..9a798803a68517 100644 --- a/pages/demos/tables.js +++ b/pages/demos/tables.js @@ -15,13 +15,6 @@ function Page() { raw: preval` module.exports = require('fs') .readFileSync(require.resolve('docs/src/pages/demos/tables/BasicTable'), 'utf8') -`, - }, - 'pages/demos/tables/ResponsiveTable.js': { - js: require('docs/src/pages/demos/tables/ResponsiveTable').default, - raw: preval` -module.exports = require('fs') - .readFileSync(require.resolve('docs/src/pages/demos/tables/ResponsiveTable'), 'utf8') `, }, 'pages/demos/tables/EnhancedTable.js': { diff --git a/src/Table/Table.d.ts b/src/Table/Table.d.ts index c4cb549668e4c6..213b32f885618e 100644 --- a/src/Table/Table.d.ts +++ b/src/Table/Table.d.ts @@ -4,13 +4,10 @@ import { StandardProps } from '..'; export interface TableProps extends StandardProps< React.TableHTMLAttributes, TableClassKey -> { - responsive?: boolean; -} +> {} export type TableClassKey = | 'root' - | 'responsive' ; declare const Table: React.ComponentType; diff --git a/src/Table/Table.js b/src/Table/Table.js index 02aa43d92bd459..3fd83e37671dc8 100644 --- a/src/Table/Table.js +++ b/src/Table/Table.js @@ -14,10 +14,6 @@ export const styles = (theme: Object) => ({ borderSpacing: 0, overflow: 'hidden', }, - responsive: { - display: 'block', - overflowX: 'auto', - }, }); type ProvidedProps = { @@ -45,10 +41,6 @@ export type Props = { * @ignore */ className?: string, - /** - * If `true`, overflowX is set to 'auto' which allow vertical scrolling. - */ - responsive: boolean, /** * The component used for the root node. * Either a string to use a DOM element or a component. @@ -59,7 +51,6 @@ export type Props = { class Table extends React.Component { static defaultProps = { component: ('table': ElementType), - responsive: false, }; getChildContext() { @@ -75,10 +66,9 @@ class Table extends React.Component { className: classNameProp, children, component: ComponentProp, - responsive, ...other } = this.props; - const className = classNames(classes.root, classNameProp, { [classes.responsive]: responsive }); + const className = classNames(classes.root, classNameProp); return ( diff --git a/src/Table/Table.spec.js b/src/Table/Table.spec.js index 6714fb752ee98c..d194a00a0d2ab3 100644 --- a/src/Table/Table.spec.js +++ b/src/Table/Table.spec.js @@ -33,16 +33,10 @@ describe('', () => { ); }); - it('should render with the user and root classes but without responsive classes', () => { + it('should render with the user and root classes', () => { const wrapper = shallow(
); assert.strictEqual(wrapper.hasClass('woofTable'), true); assert.strictEqual(wrapper.hasClass(classes.root), true); - assert.strictEqual(wrapper.hasClass(classes.responsive), false); - }); - - it('should render table with responsive classes', () => { - const wrapper = shallow(
); - assert.strictEqual(wrapper.hasClass(classes.responsive), true); }); it('should render children', () => { From 15bfadaf36a4b3a18e1cd5c18736671331981426 Mon Sep 17 00:00:00 2001 From: Niklas Wagner Date: Sun, 26 Nov 2017 09:50:45 +0100 Subject: [PATCH 06/10] [Table] make all Tables responsive --- docs/src/pages/demos/tables/BasicTable.js | 6 +- docs/src/pages/demos/tables/EnhancedTable.js | 108 +++++++++---------- src/Table/Table.js | 3 +- 3 files changed, 53 insertions(+), 64 deletions(-) diff --git a/docs/src/pages/demos/tables/BasicTable.js b/docs/src/pages/demos/tables/BasicTable.js index e6c3fca5ff487b..0d398f229b6bd3 100644 --- a/docs/src/pages/demos/tables/BasicTable.js +++ b/docs/src/pages/demos/tables/BasicTable.js @@ -10,10 +10,6 @@ const styles = theme => ({ root: { width: '100%', marginTop: theme.spacing.unit * 3, - overflowX: 'auto', - }, - table: { - minWidth: 700, }, }); @@ -36,7 +32,7 @@ function BasicTable(props) { return ( -
+
Dessert (100g serving) diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js index e674d4417f6320..f0dd05615ef82e 100644 --- a/docs/src/pages/demos/tables/EnhancedTable.js +++ b/docs/src/pages/demos/tables/EnhancedTable.js @@ -167,12 +167,6 @@ const styles = theme => ({ width: '100%', marginTop: theme.spacing.unit * 3, }, - table: { - minWidth: 800, - }, - tableWrapper: { - overflowX: 'auto', - }, }); class EnhancedTable extends React.Component { @@ -272,60 +266,58 @@ class EnhancedTable extends React.Component { return ( -
-
- - - {data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(n => { - const isSelected = this.isSelected(n.id); - return ( - this.handleClick(event, n.id)} - onKeyDown={event => this.handleKeyDown(event, n.id)} - role="checkbox" - aria-checked={isSelected} - tabIndex={-1} - key={n.id} - selected={isSelected} - > - - - - {n.name} - {n.calories} - {n.fat} - {n.carbs} - {n.protein} - - ); - })} - {emptyRows > 0 && ( - - +
+ + + {data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(n => { + const isSelected = this.isSelected(n.id); + return ( + this.handleClick(event, n.id)} + onKeyDown={event => this.handleKeyDown(event, n.id)} + role="checkbox" + aria-checked={isSelected} + tabIndex={-1} + key={n.id} + selected={isSelected} + > + + + + {n.name} + {n.calories} + {n.fat} + {n.carbs} + {n.protein} - )} - - - - + ); + })} + {emptyRows > 0 && ( + + - -
- + )} + + + + + + + ); } diff --git a/src/Table/Table.js b/src/Table/Table.js index 3fd83e37671dc8..4bff198201cc7f 100644 --- a/src/Table/Table.js +++ b/src/Table/Table.js @@ -12,7 +12,8 @@ export const styles = (theme: Object) => ({ width: '100%', borderCollapse: 'collapse', borderSpacing: 0, - overflow: 'hidden', + display: 'block', + overflowX: 'auto', }, }); From 16965ae7a3a9598e287c43aa70956eaa5ba6cc00 Mon Sep 17 00:00:00 2001 From: Niklas Wagner Date: Sun, 26 Nov 2017 11:35:15 +0100 Subject: [PATCH 07/10] Use wrapper --- src/Table/Table.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/Table/Table.js b/src/Table/Table.js index 4bff198201cc7f..1191418837b1dc 100644 --- a/src/Table/Table.js +++ b/src/Table/Table.js @@ -7,12 +7,14 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = (theme: Object) => ({ - root: { + table: { fontFamily: theme.typography.fontFamily, width: '100%', borderCollapse: 'collapse', borderSpacing: 0, - display: 'block', + }, + wrapper: { + width: '100%', overflowX: 'auto', }, }); @@ -69,12 +71,14 @@ class Table extends React.Component { component: ComponentProp, ...other } = this.props; - const className = classNames(classes.root, classNameProp); + const divWrapper = classNames(classes.wrapper, classNameProp); return ( - - {children} - +
+ + {children} + +
); } } From 8132c207e02cbdfc18bf6388e04f59f7ec22a2ac Mon Sep 17 00:00:00 2001 From: Niklas Wagner Date: Sun, 26 Nov 2017 12:18:51 +0100 Subject: [PATCH 08/10] Fix errors and run docs:api --- pages/api/table.md | 3 ++- src/Table/Table.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/pages/api/table.md b/pages/api/table.md index 7de25cacdda19c..43997342da4304 100644 --- a/pages/api/table.md +++ b/pages/api/table.md @@ -22,7 +22,8 @@ Any other properties supplied will be [spread to the root element](/guides/api#s You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` +- `table` +- `wrapper` Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/callemall/material-ui/tree/v1-beta/src/Table/Table.js) diff --git a/src/Table/Table.js b/src/Table/Table.js index 1191418837b1dc..8aee3db6351824 100644 --- a/src/Table/Table.js +++ b/src/Table/Table.js @@ -74,7 +74,7 @@ class Table extends React.Component { const divWrapper = classNames(classes.wrapper, classNameProp); return ( -
+
{children} From f99af4b4f384ae0e943d71046071afd7f1622301 Mon Sep 17 00:00:00 2001 From: Niklas Wagner Date: Sun, 26 Nov 2017 12:31:50 +0100 Subject: [PATCH 09/10] Fix Errors Hope so. Got some weird errors on this machine when running the tests. --- src/Table/Table.spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Table/Table.spec.js b/src/Table/Table.spec.js index d194a00a0d2ab3..8300096b6f0085 100644 --- a/src/Table/Table.spec.js +++ b/src/Table/Table.spec.js @@ -16,12 +16,12 @@ describe('', () => { it('should render a table', () => { const wrapper = shallow(
); - assert.strictEqual(wrapper.name(), 'table'); + assert.strictEqual(wrapper.childAt(0).name(), 'table'); }); it('should render a div', () => { const wrapper = shallow(
); - assert.strictEqual(wrapper.name(), 'div'); + assert.strictEqual(wrapper.childAt(0).name(), 'div'); }); it('should spread custom props on the root node', () => { @@ -36,13 +36,13 @@ describe('
', () => { it('should render with the user and root classes', () => { const wrapper = shallow(
); assert.strictEqual(wrapper.hasClass('woofTable'), true); - assert.strictEqual(wrapper.hasClass(classes.root), true); + assert.strictEqual(wrapper.hasClass(classes.wrapper), true); }); it('should render children', () => { const children = ; const wrapper = shallow(
{children}
); - assert.strictEqual(wrapper.childAt(0).equals(children), true); + assert.strictEqual(wrapper.childAt(0).childAt(0).equals(children), true); }); it('should define table in the child context', () => { From 794a5fc8676f6801d41404b0218952d9d11aab48 Mon Sep 17 00:00:00 2001 From: Niklas Wagner Date: Sun, 26 Nov 2017 13:01:59 +0100 Subject: [PATCH 10/10] Modify Errors to new div wrapper --- src/Table/Table.js | 6 ++---- src/Table/Table.spec.js | 8 +++++++- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/Table/Table.js b/src/Table/Table.js index 8aee3db6351824..4143208197ada9 100644 --- a/src/Table/Table.js +++ b/src/Table/Table.js @@ -74,10 +74,8 @@ class Table extends React.Component { const divWrapper = classNames(classes.wrapper, classNameProp); return ( -
- - {children} - +
+ {children}
); } diff --git a/src/Table/Table.spec.js b/src/Table/Table.spec.js index 8300096b6f0085..d5e4b4deda708d 100644 --- a/src/Table/Table.spec.js +++ b/src/Table/Table.spec.js @@ -42,7 +42,13 @@ describe('', () => { it('should render children', () => { const children = ; const wrapper = shallow(
{children}
); - assert.strictEqual(wrapper.childAt(0).childAt(0).equals(children), true); + assert.strictEqual( + wrapper + .childAt(0) + .childAt(0) + .equals(children), + true, + ); }); it('should define table in the child context', () => {