Repository: gregnb/mui-datatables (js)

Issue:
Not able to override styling for MUIDataTableToolbar using MuiTheme
<!--- Provide a general summary of the issue in the Title above -->

First of all thank you for creating this component. Saved us tons of time 👍 I am trying to add a background color to the MUIDataTableToolbar (The one with all the tools on the top right side of the component). But I dont see the styling reflect in the component.

<!--
    Thank you very much for contributing to MUI-datatables by creating an issue! ❤️
-->

## Expected Behavior
<!---
    If you're describing a bug, tell us what should happen.
    If you're suggesting a change/improvement, tell us how it should work.
-->

## Current Behavior
<!---
    If describing a bug, tell us what happens instead of the expected behavior.
    If suggesting a change/improvement, explain the difference from current behavior.
-->
When the overrides section is added  in the createMuiTheme(), the styles for MUIDataTableToolbar dont take effect, but the styles for MUIDataTableBodyCell do.

## Steps to Reproduce (for bugs)
<!---
    Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.
    Include code to reproduce, if relevant (which it most likely is).
-->

1. Access : https://codesandbox.io/s/6lqr6mxn03
2. Change the styles for MUIDataTableToolbar(root/actions)
3. Verify if the changes reflect on page
4.

## Your Environment
<!--- Include as many relevant details about the environment with which you experienced the bug. -->

| Tech         | Version |
|--------------|---------|
| Material-UI  |    1.0.0 |
| MUI-datatables  |     2.0.0-beta-19    |
| React        |    16.3.2     |
| browser      |    Chrome     |
| etc          |         |

Pull request description:
remove Datastyles. upgrade enzyme. add toolbar styles support
When merged this should resolve #162 

Patch:
diff --git a/package-lock.json b/package-lock.json
index ed52d3f..946926e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-datatables",
-  "version": "2.0.0-beta-21",
+  "version": "2.0.0-beta-22",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -275,9 +275,9 @@
       }
     },
     "@types/node": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.1.tgz",
-      "integrity": "sha512-IsX9aDHDzJohkm3VCDB8tkzl5RQ34E/PFA29TQk6uDGb7Oc869ZBtmdKVDBzY3+h9GnXB8ssrRXEPVZrlIOPOw==",
+      "version": "10.9.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.9.2.tgz",
+      "integrity": "sha512-pwZnkVyCGJ3LsQ0/3flQK5lCFao4esIzwUVzzk5NvL9vnkEyDhNf4fhHzUMHvyr56gNZywWTS2MR0euabMSz4A==",
       "dev": true
     },
     "@types/react": {
@@ -614,6 +614,17 @@
       "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
       "dev": true
     },
+    "array.prototype.flat": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz",
+      "integrity": "sha512-rVqIs330nLJvfC7JqYvEWwqVr5QjYF1ib02i3YJtR/fICO6527Tjpc/e4Mvmxh3GIePPreRXMdaGyC99YphWEw==",
+      "dev": true,
+      "requires": {
+        "define-properties": "1.1.2",
+        "es-abstract": "1.12.0",
+        "function-bind": "1.1.1"
+      }
+    },
     "arrify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
@@ -3195,20 +3206,22 @@
       "dev": true
     },
     "enzyme": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.3.0.tgz",
-      "integrity": "sha512-l8csyPyLmtxskTz6pX9W8eDOyH1ckEtDttXk/vlFWCjv00SkjTjtoUrogqp4yEvMyneU9dUJoOLnqFoiHb8IHA==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.5.0.tgz",
+      "integrity": "sha512-I51gsZvXiUjrJC3oJ9wo1tvKyWQrrLD+7esOwTw5sZeQ6a+GVcQYVroXBF13hB/kJQ4vurtxEm35+5T1Q8R2Pw==",
       "dev": true,
       "requires": {
+        "array.prototype.flat": "1.2.1",
         "cheerio": "1.0.0-rc.2",
         "function.prototype.name": "1.1.0",
         "has": "1.0.3",
         "is-boolean-object": "1.0.0",
-        "is-callable": "1.1.3",
+        "is-callable": "1.1.4",
         "is-number-object": "1.0.3",
         "is-string": "1.0.4",
         "is-subset": "0.1.1",
-        "lodash": "4.17.10",
+        "lodash.escape": "4.0.1",
+        "lodash.isequal": "4.5.0",
         "object-inspect": "1.6.0",
         "object-is": "1.0.1",
         "object.assign": "4.1.0",
@@ -3216,32 +3229,64 @@
         "object.values": "1.0.4",
         "raf": "3.4.0",
         "rst-selector-parser": "2.2.3"
+      },
+      "dependencies": {
+        "is-callable": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
+          "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==",
+          "dev": true
+        }
       }
     },
     "enzyme-adapter-react-16": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.1.tgz",
-      "integrity": "sha512-kC8pAtU2Jk3OJ0EG8Y2813dg9Ol0TXi7UNxHzHiWs30Jo/hj7alc//G1YpKUsPP1oKl9X+Lkx+WlGJpPYA+nvw==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.3.0.tgz",
+      "integrity": "sha512-TRX+Y5QPreGmqfFU3bPsJUmqNZX9paQCmQ93kj7hnfQoZzufO/pahGN/OviWn60YcgaQojhf0AWv3PxrIDARbA==",
       "dev": true,
       "requires": {
-        "enzyme-adapter-utils": "1.3.0",
-        "lodash": "4.17.10",
+        "enzyme-adapter-utils": "1.6.0",
+        "function.prototype.name": "1.1.0",
         "object.assign": "4.1.0",
         "object.values": "1.0.4",
-        "prop-types": "15.6.1",
-        "react-reconciler": "0.7.0",
-        "react-test-renderer": "16.4.0"
+        "prop-types": "15.6.2",
+        "react-is": "16.4.2",
+        "react-test-renderer": "16.4.2"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.6.2",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+          "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "1.3.1",
+            "object-assign": "4.1.1"
+          }
+        }
       }
     },
     "enzyme-adapter-utils": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.3.0.tgz",
-      "integrity": "sha512-vVXSt6uDv230DIv+ebCG66T1Pm36Kv+m74L1TrF4kaE7e1V7Q/LcxO0QRkajk5cA6R3uu9wJf5h13wOTezTbjA==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.6.0.tgz",
+      "integrity": "sha512-8bzxmmBwYNqgEVVpTgONW3IzH3eYHiLZp+V+JL1GPKLVbIMnXSPChsQ7EKMdIimf6+aSHzANUEsGXG+zSRS23w==",
       "dev": true,
       "requires": {
-        "lodash": "4.17.10",
+        "function.prototype.name": "1.1.0",
         "object.assign": "4.1.0",
-        "prop-types": "15.6.1"
+        "prop-types": "15.6.2"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.6.2",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+          "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "1.3.1",
+            "object-assign": "4.1.1"
+          }
+        }
       }
     },
     "errno": {
@@ -6498,6 +6543,12 @@
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
     },
+    "lodash.escape": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
+      "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=",
+      "dev": true
+    },
     "lodash.flattendeep": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
@@ -6509,6 +6560,12 @@
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
       "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
+      "dev": true
+    },
     "lodash.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
@@ -6945,6 +7002,12 @@
       "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=",
       "dev": true
     },
+    "moo": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.4.3.tgz",
+      "integrity": "sha512-gFD2xGCl8YFgGHsqJ9NKRVdwlioeW3mI1iqfLNYQOv0+6JRwG58Zk9DIGQgyIaffSYaO1xsKnMaYzzNr1KyIAw==",
+      "dev": true
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -7052,11 +7115,12 @@
       "dev": true
     },
     "nearley": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.13.0.tgz",
-      "integrity": "sha512-ioYYogSaZhFlCpRizQgY3UT3G1qFXmHGY/5ozoFE3dMfiCRAeJfh+IPE3/eh9gCZvqLhPCWb4bLt7Bqzo+1mLQ==",
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.15.1.tgz",
+      "integrity": "sha512-8IUY/rUrKz2mIynUGh8k+tul1awMKEjeHHC5G3FHvvyAW6oq4mQfNp2c0BMea+sYZJvYcrrM6GmZVIle/GRXGw==",
       "dev": true,
       "requires": {
+        "moo": "0.4.3",
         "nomnom": "1.6.2",
         "railroad-diagrams": "1.0.0",
         "randexp": "0.4.6",
@@ -10855,7 +10919,7 @@
       "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
       "dev": true,
       "requires": {
-        "@types/node": "10.3.1"
+        "@types/node": "10.9.2"
       }
     },
     "parseurl": {
@@ -11390,9 +11454,9 @@
       }
     },
     "react-is": {
-      "version": "16.4.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.0.tgz",
-      "integrity": "sha512-8ADZg/mBw+t2Fbr5Hm1K64v8q8Q6E+DprV5wQ5A8PSLW6XP0XJFMdUskVEW8efQ5oUgWHn8EYdHEPAMF0Co6hA==",
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.2.tgz",
+      "integrity": "sha512-rI3cGFj/obHbBz156PvErrS5xc6f1eWyTwyV4mo0vF2lGgXgS+mm7EKD5buLJq6jNgIagQescGSVG2YzgXt8Yg==",
       "dev": true
     },
     "react-jss": {
@@ -11414,28 +11478,16 @@
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
       "dev": true
     },
-    "react-reconciler": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.7.0.tgz",
-      "integrity": "sha512-50JwZ3yNyMS8fchN+jjWEJOH3Oze7UmhxeoJLn2j6f3NjpfCRbcmih83XTWmzqtar/ivd5f7tvQhvvhism2fgg==",
-      "dev": true,
-      "requires": {
-        "fbjs": "0.8.16",
-        "loose-envify": "1.3.1",
-        "object-assign": "4.1.1",
-        "prop-types": "15.6.1"
-      }
-    },
     "react-test-renderer": {
-      "version": "16.4.0",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.0.tgz",
-      "integrity": "sha512-Seh1t9xFY6TKiV/hRlPzUkqX1xHOiKIMsctfU0cggo1ajsLjoIJFL520LlrxV+4/VIj+clrCeH6s/aVv/vTStg==",
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.2.tgz",
+      "integrity": "sha512-vdTPnRMDbxfv4wL4lzN4EkVGXyYs7LE2uImOsqh1FKiP6L5o1oJl8nore5sFi9vxrP9PK3l4rgb/fZ4PVUaWSA==",
       "dev": true,
       "requires": {
         "fbjs": "0.8.16",
         "object-assign": "4.1.1",
         "prop-types": "15.6.1",
-        "react-is": "16.4.0"
+        "react-is": "16.4.2"
       }
     },
     "react-to-print": {
@@ -12014,7 +12066,7 @@
       "dev": true,
       "requires": {
         "lodash.flattendeep": "4.4.0",
-        "nearley": "2.13.0"
+        "nearley": "2.15.1"
       }
     },
     "run-async": {
diff --git a/package.json b/package.json
index e527541..162bca3 100644
--- a/package.json
+++ b/package.json
@@ -53,8 +53,8 @@
     "chai": "^4.1.2",
     "coveralls": "^3.0.0",
     "cross-env": "^5.1.1",
-    "enzyme": "^3.2.0",
-    "enzyme-adapter-react-16": "^1.1.0",
+    "enzyme": "^3.5.0",
+    "enzyme-adapter-react-16": "^1.3.0",
     "eslint": "^4.14.0",
     "eslint-loader": "^2.0.0",
     "eslint-plugin-filenames": "^1.2.0",
diff --git a/src/DataStyles.js b/src/DataStyles.js
deleted file mode 100644
index 4b9fdd3..0000000
--- a/src/DataStyles.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from "react";
-import merge from "lodash.merge";
-import get from "lodash.get";
-import { withStyles } from "@material-ui/core/styles";
-
-const getStyle = (obj, name) => {
-  return get(obj, "styles." + name, null);
-};
-
-const stylePass = (displayName, setFn) => {
-  const result = class StylePass extends React.Component {
-    componentWillMount() {
-      setFn(this.props.classes);
-    }
-
-    componentWillReceiveProps(nextProps) {
-      if (this.props.classes !== nextProps.classes) setFn(nextProps.classes);
-    }
-
-    render() {
-      return this.props.children;
-    }
-  };
-  result.displayName = displayName;
-  return result;
-};
-
-/**
- * This wrapper was created because I needed the ability to pass styles as a prop that
- * were extracted from an object that was a prop as well. In order to avoid name collisions
- * I needed to be able to extract deeply with a dot notation from user suppplied styling.
- *
- */
-
-class DataStyles extends React.Component {
-  state = {
-    data: null,
-  };
-
-  setStyleClass = data => {
-    this.setState(() => ({
-      styleData: data,
-    }));
-  };
-
-  constructor(props) {
-    super(props);
-    this.buildComponent(props);
-  }
-
-  componentWillReceieveProps(nextProps) {
-    if (nextProps.styles !== this.props.styles) this.buildComponent(nextProps);
-  }
-
-  buildComponent(props) {
-    const defaultStyles = props.defaultStyles ? props.defaultStyles : {};
-    const finalStyles = merge(defaultStyles, props.styles);
-
-    // just a pass-through
-    this.component = withStyles(finalStyles)(stylePass(props.name, this.setStyleClass));
-  }
-
-  render() {
-    const { children } = this.props;
-    const WrappedComponent = this.component;
-
-    return <WrappedComponent>{this.state.styleData ? children(this.state.styleData) : false}</WrappedComponent>;
-  }
-}
-
-export { DataStyles, getStyle };
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index 5cdf62c..a7094f2 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -601,7 +601,8 @@ class MUIDataTable extends React.Component {
         },
         () => {
           if (this.options.onRowsSelect) {
-            this.options.onRowsSelect(this.state.curSelectedRows.data, this.state.selectedRows.data);
+            console.log(this.state.curSelectedRows);
+            this.options.onRowsSelect(this.state.curSelectedRows.data[0], this.state.selectedRows.data);
           }
         },
       );
diff --git a/src/MUIDataTableToolbar.js b/src/MUIDataTableToolbar.js
index fb519b8..45fff06 100644
--- a/src/MUIDataTableToolbar.js
+++ b/src/MUIDataTableToolbar.js
@@ -12,11 +12,10 @@ import DownloadIcon from "@material-ui/icons/CloudDownload";
 import PrintIcon from "@material-ui/icons/Print";
 import ViewColumnIcon from "@material-ui/icons/ViewColumn";
 import FilterIcon from "@material-ui/icons/FilterList";
-import merge from "lodash.merge";
 import ReactToPrint from "react-to-print";
-import { getStyle, DataStyles } from "./DataStyles";
+import styled from './styled';
 
-export const defaultToolbarStyles = {
+export const defaultToolbarStyles = (theme, props) => ({
   root: {},
   left: {
     flex: "1 1 55%",
@@ -40,7 +39,8 @@ export const defaultToolbarStyles = {
     marginTop: "10px",
     marginRight: "8px",
   },
-};
+  ...props.options.responsive ? {...responsiveToolbarStyles} : {} 
+});
 
 export const responsiveToolbarStyles = {
   "@media screen and (max-width: 960px)": {
@@ -83,16 +83,6 @@ class MUIDataTableToolbar extends React.Component {
     showSearch: false,
   };
 
-  constructor(props) {
-    super(props);
-
-    if (props.options.responsive) {
-      this.tbarStyles = merge(defaultToolbarStyles, responsiveToolbarStyles);
-    } else {
-      this.tbarStyles = defaultToolbarStyles;
-    }
-  }
-
   handleCSVDownload = () => {
     const { data, columns } = this.props;
 
@@ -144,6 +134,7 @@ class MUIDataTableToolbar extends React.Component {
     const {
       data,
       options,
+      classes,
       columns,
       filterData,
       filterList,
@@ -159,122 +150,115 @@ class MUIDataTableToolbar extends React.Component {
     const { showSearch } = this.state;
 
     return (
-      <DataStyles
-        defaultStyles={this.tbarStyles}
-        name="MUIDataTableToolbar"
-        styles={getStyle(options, "table.toolbar")}>
-        {toolbarStyles => (
-          <Toolbar className={toolbarStyles.root} role={"toolbar"} aria-label={"Table Toolbar"}>
-            <div className={toolbarStyles.left}>
-              {showSearch === true ? (
-                <MUIDataTableSearch onSearch={searchTextUpdate} onHide={this.hideSearch} options={options} />
-              ) : (
-                <div className={toolbarStyles.titleRoot} aria-hidden={"true"}>
-                  <Typography variant="title" className={toolbarStyles.titleText}>
-                    {title}
-                  </Typography>
-                </div>
-              )}
+      <Toolbar className={classes.root} role={"toolbar"} aria-label={"Table Toolbar"}>
+        <div className={classes.left}>
+          {showSearch === true ? (
+            <MUIDataTableSearch onSearch={searchTextUpdate} onHide={this.hideSearch} options={options} />
+          ) : (
+            <div className={classes.titleRoot} aria-hidden={"true"}>
+              <Typography variant="title" className={classes.titleText}>
+                {title}
+              </Typography>
             </div>
-            <div className={toolbarStyles.actions}>
-              {options.search ? (
-                <Tooltip title={search}>
-                  <IconButton
-                    aria-label={search}
-                    buttonRef={el => (this.searchButton = el)}
-                    classes={{ root: this.getActiveIcon(toolbarStyles, "search") }}
-                    onClick={this.setActiveIcon.bind(null, "search")}>
-                    <SearchIcon />
-                  </IconButton>
-                </Tooltip>
-              ) : (
-                false
-              )}
-              {options.download ? (
-                <Tooltip title={downloadCsv}>
-                  <IconButton
-                    aria-label={downloadCsv}
-                    classes={{ root: toolbarStyles.icon }}
-                    onClick={this.handleCSVDownload}>
-                    <DownloadIcon />
-                  </IconButton>
-                </Tooltip>
-              ) : (
-                false
-              )}
-              {options.print ? (
-                <Tooltip title={print}>
-                  <span>
-                    <ReactToPrint
-                      trigger={() => (
-                        <IconButton aria-label={print} classes={{ root: toolbarStyles.icon }}>
-                          <PrintIcon />
-                        </IconButton>
-                      )}
-                      content={() => this.props.tableRef()}
-                    />
-                  </span>
-                </Tooltip>
-              ) : (
-                false
-              )}
-              {options.viewColumns ? (
-                <MUIPopover refExit={this.setActiveIcon.bind(null)} container={tableRef}>
-                  <MUIPopoverTarget>
-                    <IconButton
-                      aria-label={viewColumns}
-                      classes={{ root: this.getActiveIcon(toolbarStyles, "viewcolumns") }}
-                      onClick={this.setActiveIcon.bind(null, "viewcolumns")}>
-                      <Tooltip title={viewColumns}>
-                        <ViewColumnIcon />
-                      </Tooltip>
-                    </IconButton>
-                  </MUIPopoverTarget>
-                  <MUIPopoverContent>
-                    <MUIDataTableViewCol
-                      data={data}
-                      columns={columns}
-                      options={options}
-                      onColumnUpdate={toggleViewColumn}
-                    />
-                  </MUIPopoverContent>
-                </MUIPopover>
-              ) : (
-                false
-              )}
-              {options.filter ? (
-                <MUIPopover refExit={this.setActiveIcon.bind(null)} container={tableRef}>
-                  <MUIPopoverTarget>
-                    <IconButton
-                      aria-label={filterTable}
-                      classes={{ root: this.getActiveIcon(toolbarStyles, "filter") }}
-                      onClick={this.setActiveIcon.bind(null, "filter")}>
-                      <Tooltip title={filterTable}>
-                        <FilterIcon />
-                      </Tooltip>
+          )}
+        </div>
+        <div className={classes.actions}>
+          {options.search ? (
+            <Tooltip title={search}>
+              <IconButton
+                aria-label={search}
+                buttonRef={el => (this.searchButton = el)}
+                classes={{ root: this.getActiveIcon(classes, "search") }}
+                onClick={this.setActiveIcon.bind(null, "search")}>
+                <SearchIcon />
+              </IconButton>
+            </Tooltip>
+          ) : (
+            false
+          )}
+          {options.download ? (
+            <Tooltip title={downloadCsv}>
+              <IconButton
+                aria-label={downloadCsv}
+                classes={{ root: classes.icon }}
+                onClick={this.handleCSVDownload}>
+                <DownloadIcon />
+              </IconButton>
+            </Tooltip>
+          ) : (
+            false
+          )}
+          {options.print ? (
+            <Tooltip title={print}>
+              <span>
+                <ReactToPrint
+                  trigger={() => (
+                    <IconButton aria-label={print} classes={{ root: classes.icon }}>
+                      <PrintIcon />
                     </IconButton>
-                  </MUIPopoverTarget>
-                  <MUIPopoverContent>
-                    <MUIDataTableFilter
-                      columns={columns}
-                      options={options}
-                      filterList={filterList}
-                      filterData={filterData}
-                      onFilterUpdate={filterUpdate}
-                      onFilterReset={resetFilters}
-                    />
-                  </MUIPopoverContent>
-                </MUIPopover>
-              ) : (
-                false
-              )}
-              {options.customToolbar ? options.customToolbar() : false}
-            </div>
-          </Toolbar>
-        )}
-      </DataStyles>
+                  )}
+                  content={() => this.props.tableRef()}
+                />
+              </span>
+            </Tooltip>
+          ) : (
+            false
+          )}
+          {options.viewColumns ? (
+            <MUIPopover refExit={this.setActiveIcon.bind(null)} container={tableRef}>
+              <MUIPopoverTarget>
+                <IconButton
+                  aria-label={viewColumns}
+                  classes={{ root: this.getActiveIcon(classes, "viewcolumns") }}
+                  onClick={this.setActiveIcon.bind(null, "viewcolumns")}>
+                  <Tooltip title={viewColumns}>
+                    <ViewColumnIcon />
+                  </Tooltip>
+                </IconButton>
+              </MUIPopoverTarget>
+              <MUIPopoverContent>
+                <MUIDataTableViewCol
+                  data={data}
+                  columns={columns}
+                  options={options}
+                  onColumnUpdate={toggleViewColumn}
+                />
+              </MUIPopoverContent>
+            </MUIPopover>
+          ) : (
+            false
+          )}
+          {options.filter ? (
+            <MUIPopover refExit={this.setActiveIcon.bind(null)} container={tableRef}>
+              <MUIPopoverTarget>
+                <IconButton
+                  aria-label={filterTable}
+                  classes={{ root: this.getActiveIcon(classes, "filter") }}
+                  onClick={this.setActiveIcon.bind(null, "filter")}>
+                  <Tooltip title={filterTable}>
+                    <FilterIcon />
+                  </Tooltip>
+                </IconButton>
+              </MUIPopoverTarget>
+              <MUIPopoverContent>
+                <MUIDataTableFilter
+                  columns={columns}
+                  options={options}
+                  filterList={filterList}
+                  filterData={filterData}
+                  onFilterUpdate={filterUpdate}
+                  onFilterReset={resetFilters}
+                />
+              </MUIPopoverContent>
+            </MUIPopover>
+          ) : (
+            false
+          )}
+          {options.customToolbar ? options.customToolbar() : false}
+        </div>
+      </Toolbar>
     );
   }
 }
 
-export default MUIDataTableToolbar;
+export default styled(MUIDataTableToolbar)(defaultToolbarStyles, { name: "MUIDataTableToolbar" });
diff --git a/src/styled.js b/src/styled.js
new file mode 100644
index 0000000..85f7700
--- /dev/null
+++ b/src/styled.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import merge from 'lodash.merge';
+import { withStyles } from '@material-ui/core/styles';
+
+/*
+ *  Material-UI does not yet support ability to grab props within style()
+ *  https://github.com/mui-org/material-ui/issues/7633
+ *
+ *  This is a workaround provided from the thread
+ */
+
+const styles = (theme, props, style) => {
+  return typeof style === 'function' ? style(theme, props) : style;
+};
+
+class StyledComponent extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+  };
+
+  render() {
+    const { classes, className = '', WrappedComponent, ...passThroughProps } = this.props;
+
+    return <WrappedComponent classes={classes} className={className} {...passThroughProps} />;
+  }
+}
+
+const styled = (WrappedComponent, customProps = {}) => {
+  return (style, options = {}) => {
+    const HOCProps = WrappedComponent => {
+      return class _HOCProps extends React.Component {
+        constructor(props) {
+          super(props);
+          this.FinalComponent = withStyles(theme => {
+            const defaultStyles = styles(theme, props, style);
+            const mergedStyles = merge(defaultStyles, props.styles ? props.styles : {});
+            return mergedStyles;
+          }, options)(StyledComponent);
+        }
+
+        render() {
+          const { styles, ...otherProps } = this.props;
+          return <this.FinalComponent {...customProps} {...otherProps} WrappedComponent={WrappedComponent} />;
+        }
+      };
+    };
+    return HOCProps(WrappedComponent);
+  };
+};
+
+export default styled;
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 9c44ab6..f3cd389 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,7 +3,7 @@ const webpack = require('webpack');
 
 module.exports = {
   entry: {
-    app: "./examples/resizable-columns/index.js"
+    app: "./examples/selectable-rows/index.js"
   },
   stats: "verbose",
   context: __dirname,


Test patch:
diff --git a/test/MUIDataTableToolbar.test.js b/test/MUIDataTableToolbar.test.js
index 1cbb0c7..728573f 100644
--- a/test/MUIDataTableToolbar.test.js
+++ b/test/MUIDataTableToolbar.test.js
@@ -90,52 +90,56 @@ describe("<MUIDataTableToolbar />", function() {
   });
 
   it("should render a toolbar with a search clicking search icon", () => {
-    const mountWrapper = mount(<MUIDataTableToolbar columns={columns} data={data} options={options} />);
-    const instance = mountWrapper.instance();
+    const shallowWrapper = shallow(<MUIDataTableToolbar columns={columns} data={data} options={options} />).dive().dive().dive();
+    const instance = shallowWrapper.instance();
 
     instance.setActiveIcon("search");
-    mountWrapper.update();
-
-    const actualResult = mountWrapper.find(MUIDataTableSearch);
+    shallowWrapper.update();
+    
+    const actualResult = shallowWrapper.find(MUIDataTableSearch);
     assert.strictEqual(actualResult.length, 1);
   });
 
   it("should hide search after clicking cancel icon", () => {
     const searchTextUpdate = () => {};
-    const mountWrapper = mount(
+    const shallowWrapper = shallow(
       <MUIDataTableToolbar searchTextUpdate={searchTextUpdate} columns={columns} data={data} options={options} />,
-    );
-    const instance = mountWrapper.instance();
+    ).dive().dive().dive();
+    const instance = shallowWrapper.instance();
+
+    instance.searchButton = {
+      focus: () => {}
+    };
 
     // display search
     instance.setActiveIcon("search");
-    mountWrapper.update();
+    shallowWrapper.update();
 
-    let actualResult = mountWrapper.find(MUIDataTableSearch);
+    let actualResult = shallowWrapper.find(MUIDataTableSearch);
     assert.strictEqual(actualResult.length, 1);
 
     // now hide it and test
     instance.hideSearch();
-    mountWrapper.update();
+    shallowWrapper.update();
 
-    actualResult = mountWrapper.find(MUIDataTableSearch);
+    actualResult = shallowWrapper.find(MUIDataTableSearch);
     assert.strictEqual(actualResult.length, 0);
   });
 
   it("should set icon when calling method setActiveIcon", () => {
-    const mountWrapper = mount(<MUIDataTableToolbar columns={columns} data={data} options={options} />);
-    const instance = mountWrapper.instance();
+    const shallowWrapper = shallow(<MUIDataTableToolbar columns={columns} data={data} options={options} />).dive().dive().dive();
+    const instance = shallowWrapper.instance();
 
     instance.setActiveIcon("filter");
-    mountWrapper.update();
+    shallowWrapper.update();
 
-    const state = mountWrapper.state();
+    const state = shallowWrapper.state();
     assert.strictEqual(state.iconActive, "filter");
   });
 
   it("should download CSV when calling method handleCSVDownload", () => {
-    const mountWrapper = mount(<MUIDataTableToolbar columns={columns} data={data} options={options} />);
-    const instance = mountWrapper.instance();
+    const shallowWrapper = shallow(<MUIDataTableToolbar columns={columns} data={data} options={options} />);
+    const instance = shallowWrapper.dive().dive().dive().instance();
 
     const appendSpy = spy(document.body, "appendChild");
     const removeSpy = spy(document.body, "removeChild");