[Table] add Responsive table option

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 (
     <Paper className={classes.root}>
-      <Table className={classes.table}>
+      <Table>
         <TableHead>
           <TableRow>
             <TableCell>Dessert (100g serving)</TableCell>

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 (
       <Paper className={classes.root}>
         <EnhancedTableToolbar numSelected={selected.length} />
-        <div className={classes.tableWrapper}>
-          <Table className={classes.table}>
-            <EnhancedTableHead
-              numSelected={selected.length}
-              order={order}
-              orderBy={orderBy}
-              onSelectAllClick={this.handleSelectAllClick}
-              onRequestSort={this.handleRequestSort}
-              rowCount={data.length}
-            />
-            <TableBody>
-              {data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(n => {
-                const isSelected = this.isSelected(n.id);
-                return (
-                  <TableRow
-                    hover
-                    onClick={event => this.handleClick(event, n.id)}
-                    onKeyDown={event => this.handleKeyDown(event, n.id)}
-                    role="checkbox"
-                    aria-checked={isSelected}
-                    tabIndex={-1}
-                    key={n.id}
-                    selected={isSelected}
-                  >
-                    <TableCell padding="checkbox">
-                      <Checkbox checked={isSelected} />
-                    </TableCell>
-                    <TableCell padding="none">{n.name}</TableCell>
-                    <TableCell numeric>{n.calories}</TableCell>
-                    <TableCell numeric>{n.fat}</TableCell>
-                    <TableCell numeric>{n.carbs}</TableCell>
-                    <TableCell numeric>{n.protein}</TableCell>
-                  </TableRow>
-                );
-              })}
-              {emptyRows > 0 && (
-                <TableRow style={{ height: 49 * emptyRows }}>
-                  <TableCell colSpan={6} />
+        <Table>
+          <EnhancedTableHead
+            numSelected={selected.length}
+            order={order}
+            orderBy={orderBy}
+            onSelectAllClick={this.handleSelectAllClick}
+            onRequestSort={this.handleRequestSort}
+            rowCount={data.length}
+          />
+          <TableBody>
+            {data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(n => {
+              const isSelected = this.isSelected(n.id);
+              return (
+                <TableRow
+                  hover
+                  onClick={event => this.handleClick(event, n.id)}
+                  onKeyDown={event => this.handleKeyDown(event, n.id)}
+                  role="checkbox"
+                  aria-checked={isSelected}
+                  tabIndex={-1}
+                  key={n.id}
+                  selected={isSelected}
+                >
+                  <TableCell padding="checkbox">
+                    <Checkbox checked={isSelected} />
+                  </TableCell>
+                  <TableCell padding="none">{n.name}</TableCell>
+                  <TableCell numeric>{n.calories}</TableCell>
+                  <TableCell numeric>{n.fat}</TableCell>
+                  <TableCell numeric>{n.carbs}</TableCell>
+                  <TableCell numeric>{n.protein}</TableCell>
                 </TableRow>
-              )}
-            </TableBody>
-            <TableFooter>
-              <TableRow>
-                <TablePagination
-                  count={data.length}
-                  rowsPerPage={rowsPerPage}
-                  page={page}
-                  onChangePage={this.handleChangePage}
-                  onChangeRowsPerPage={this.handleChangeRowsPerPage}
-                />
+              );
+            })}
+            {emptyRows > 0 && (
+              <TableRow style={{ height: 49 * emptyRows }}>
+                <TableCell colSpan={6} />
               </TableRow>
-            </TableFooter>
-          </Table>
-        </div>
+            )}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TablePagination
+                count={data.length}
+                rowsPerPage={rowsPerPage}
+                page={page}
+                onChangePage={this.handleChangePage}
+                onChangeRowsPerPage={this.handleChangeRowsPerPage}
+              />
+            </TableRow>
+          </TableFooter>
+        </Table>
       </Paper>
     );
   }

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)

src/Table/Table.js

@@ -7,12 +7,15 @@ 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,
-    overflow: 'hidden',
+  },
+  wrapper: {
+    width: '100%',
+    overflowX: 'auto',
   },
 });
 
@@ -68,12 +71,12 @@ class Table extends React.Component<ProvidedProps & Props> {
       component: ComponentProp,
       ...other
     } = this.props;
-    const className = classNames(classes.root, classNameProp);
+    const divWrapper = classNames(classes.wrapper, classNameProp);
 
     return (
-      <ComponentProp className={className} {...other}>
-        {children}
-      </ComponentProp>
+      <div className={divWrapper} {...other}>
+        <ComponentProp className={classes.table}>{children}</ComponentProp>
+      </div>
     );
   }
 }

src/Table/Table.spec.js

@@ -16,12 +16,12 @@ describe('<Table />', () => {
 
   it('should render a table', () => {
     const wrapper = shallow(<Table />);
-    assert.strictEqual(wrapper.name(), 'table');
+    assert.strictEqual(wrapper.childAt(0).name(), 'table');
   });
 
   it('should render a div', () => {
     const wrapper = shallow(<Table component="div" />);
-    assert.strictEqual(wrapper.name(), 'div');
+    assert.strictEqual(wrapper.childAt(0).name(), 'div');
   });
 
   it('should spread custom props on the root node', () => {
@@ -36,13 +36,19 @@ describe('<Table />', () => {
   it('should render with the user and root classes', () => {
     const wrapper = shallow(<Table className="woofTable" />);
     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 = <tbody className="test" />;
     const wrapper = shallow(<Table>{children}</Table>);
-    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', () => {