Repository: gregnb/mui-datatables (js)

Issue:
Question: Hide column from Print
Hi,
Anyone knows if there's a way to hide a column so it doesn't show in the print file? Something like the `download` column option

BTW, amazing component! Thanks!

Pull request description:
upgrade react-to-print + add column print hide enhacement
Should resolve #358 when merged

Patch:
diff --git a/README.md b/README.md
index d726ee6..d511932 100644
--- a/README.md
+++ b/README.md
@@ -213,6 +213,7 @@ const columns = [
 |**`sort`**|boolean|true|Enable/disable sorting on column
 |**`searchable`**|boolean|true|Exclude/include column from search results
 |**`sortDirection`**|string||Set default sort order `enum('asc', 'desc')`
+|**`print`**|boolean|true|Display column when printing
 |**`download`**|boolean|true|Display column in CSV download file
 |**`hint`**|string||Display hint icon with string as tooltip on hover.
 |**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. `function(value, tableMeta, updateValue) => string`&#124;
diff --git a/examples/hide-columns-print/index.js b/examples/hide-columns-print/index.js
new file mode 100644
index 0000000..13996ae
--- /dev/null
+++ b/examples/hide-columns-print/index.js
@@ -0,0 +1,94 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import MUIDataTable from "../../src/";
+
+class Example extends React.Component {
+
+  render() {
+
+    const columns = [
+      {
+        name: "Name",
+        options: {
+          filter: true,
+          display: 'excluded',
+        }
+      },      
+      {
+        label: "Modified Title Label",
+        name: "Title",
+        options: {
+          filter: true,
+        }
+      },
+      {
+        name: "Location",
+        options: {
+          print: false,
+          filter: false,
+        }
+      },
+      {
+        name: "Age",
+        options: {
+          filter: true,
+          print: false,
+        }
+      },
+      {
+        name: "Salary",
+        options: {
+          filter: true,
+          sort: false
+        }
+      }      
+    ];
+
+
+    const data = [
+      ["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
+      ["Aiden Lloyd", "Business Consultant", "Dallas",  55, "$200,000"],
+      ["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000"],
+      ["Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000"],
+      ["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000"],
+      ["Blake Duncan", "Business Management Analyst", "San Diego", 65, "$94,000"],
+      ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "$210,000"],
+      ["Lane Wilson", "Commercial Specialist", "Omaha", 19, "$65,000"],
+      ["Robin Duncan", "Business Analyst", "Los Angeles", 20, "$77,000"],
+      ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, "$135,000"],
+      ["Harper White", "Attorney", "Pittsburgh", 52, "$420,000"],
+      ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "$150,000"],
+      ["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000"],
+      ["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000"],
+      ["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000"],
+      ["Addison Navarro", "Business Management Analyst", "New York", 50, "$295,000"],
+      ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000"],
+      ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000"],
+      ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000"],
+      ["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000"],
+      ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000"],
+      ["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000"],
+      ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000"],
+      ["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000"],
+      ["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000"],
+      ["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000" ],
+      ["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000"],
+      ["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000"],
+      ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, "$45,000"],
+      ["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000"]
+    ];
+
+    const options = {
+      filter: true,
+      filterType: 'dropdown',
+      responsive: 'scroll',
+    };
+
+    return (
+      <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
+    );
+
+  }
+}
+
+ReactDOM.render(<Example />, document.getElementById("app-root"));
diff --git a/package-lock.json b/package-lock.json
index f73c281..10be4de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-datatables",
-  "version": "2.0.0-beta.55",
+  "version": "2.0.0-beta.57",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -11534,6 +11534,7 @@
       "version": "16.6.3",
       "resolved": "https://registry.npmjs.org/react/-/react-16.6.3.tgz",
       "integrity": "sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -11621,12 +11622,11 @@
       }
     },
     "react-to-print": {
-      "version": "1.0.21",
-      "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-1.0.21.tgz",
-      "integrity": "sha512-fKUSFe7ra2GbtKCNw50J9ksq+iblOxvUvYYFkxvG/EaAxpM3tcCdyBnBAP6fwYf6+MlBrYw6AAqu71+dHOVrJQ==",
+      "version": "2.0.0-alpha.7",
+      "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.0.0-alpha.7.tgz",
+      "integrity": "sha512-7CJ47VgJdUBu/qD6GoShGiZmdG8S0LgYU5c2p5sqC7N55zgdqcKMKWODI1UF3XzB24FtxmdVAEER++4Qzo5SIw==",
       "requires": {
-        "prop-types": "^15.6.0",
-        "react": "^16.2.0"
+        "prop-types": "^15.6.2"
       }
     },
     "react-transition-group": {
@@ -12578,6 +12578,7 @@
       "version": "0.11.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.2.tgz",
       "integrity": "sha512-+WCP3s3wOaW4S7C1tl3TEXp4l9lJn0ZK8G3W3WKRWmw77Z2cIFUW2MiNTMHn5sCjxN+t7N43HAOOgMjyAg5hlg==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
diff --git a/package.json b/package.json
index 67969e6..441c8f2 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,7 @@
     "lodash.memoize": "^4.1.2",
     "lodash.merge": "^4.6.0",
     "prop-types": "^15.6.0",
-    "react-to-print": "^1.0.10"
+    "react-to-print": "^2.0.0-alpha.7"
   },
   "side-effects": false,
   "nyc": {
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index 0a623cd..fabd69b 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -42,6 +42,13 @@ const defaultTableStyles = {
     position: 'absolute',
     width: '1px',
   },
+  '@global': {
+    '@media print': {
+      '.datatables-noprint': {
+        display: 'none',
+      },
+    },
+  },
 };
 
 const TABLE_LOAD = {
@@ -67,6 +74,7 @@ class MUIDataTable extends React.Component {
             empty: PropTypes.bool,
             filter: PropTypes.bool,
             sort: PropTypes.bool,
+            print: PropTypes.bool,
             searchable: PropTypes.bool,
             download: PropTypes.bool,
             viewColumns: PropTypes.bool,
@@ -297,6 +305,7 @@ class MUIDataTable extends React.Component {
         empty: false,
         filter: true,
         sort: true,
+        print: true,
         searchable: true,
         download: true,
         viewColumns: true,
diff --git a/src/components/TableBody.js b/src/components/TableBody.js
index f22b58f..1cee437 100644
--- a/src/components/TableBody.js
+++ b/src/components/TableBody.js
@@ -156,6 +156,7 @@ class TableBody extends React.Component {
                         rowIndex={rowIndex}
                         colIndex={columnIndex}
                         columnHeader={columns[columnIndex].label}
+                        print={columns[columnIndex].print}
                         options={options}
                         key={columnIndex}>
                         {column}
diff --git a/src/components/TableBodyCell.js b/src/components/TableBodyCell.js
index caaa752..f050761 100644
--- a/src/components/TableBodyCell.js
+++ b/src/components/TableBodyCell.js
@@ -47,6 +47,7 @@ class TableBodyCell extends React.Component {
       dataIndex,
       rowIndex,
       className,
+      print,
       ...otherProps
     } = this.props;
 
@@ -58,6 +59,7 @@ class TableBodyCell extends React.Component {
             [classes.root]: true,
             [classes.cellHide]: true,
             [classes.cellStacked]: options.responsive === 'stacked',
+            'datatables-noprint': !print,
           },
           className,
         )}>
@@ -70,6 +72,7 @@ class TableBodyCell extends React.Component {
           {
             [classes.root]: true,
             [classes.responsiveStacked]: options.responsive === 'stacked',
+            'datatables-noprint': !print,
           },
           className,
         )}
diff --git a/src/components/TableHead.js b/src/components/TableHead.js
index 7f430a0..36e390d 100644
--- a/src/components/TableHead.js
+++ b/src/components/TableHead.js
@@ -66,6 +66,7 @@ class TableHead extends React.Component {
                   sortDirection={column.sortDirection}
                   toggleSort={this.handleToggleColumn}
                   hint={column.hint}
+                  print={column.print}
                   options={options}>
                   {column.label}
                 </TableHeadCell>
diff --git a/src/components/TableHeadCell.js b/src/components/TableHeadCell.js
index 8c3b11b..e662bb7 100644
--- a/src/components/TableHeadCell.js
+++ b/src/components/TableHeadCell.js
@@ -58,6 +58,8 @@ class TableHeadCell extends React.Component {
     sort: PropTypes.bool.isRequired,
     /** Hint tooltip text */
     hint: PropTypes.string,
+    /** Column displayed in print */
+    print: PropTypes.bool.isRequired,
   };
 
   handleSortClick = () => {
@@ -65,7 +67,7 @@ class TableHeadCell extends React.Component {
   };
 
   render() {
-    const { children, classes, options, sortDirection, sort, hint } = this.props;
+    const { children, classes, options, sortDirection, sort, hint, print } = this.props;
     const sortActive = sortDirection !== null && sortDirection !== undefined ? true : false;
 
     const sortLabelProps = {
@@ -76,6 +78,7 @@ class TableHeadCell extends React.Component {
     const cellClass = classNames({
       [classes.root]: true,
       [classes.fixedHeader]: options.fixedHeader,
+      'datatables-noprint': !print,
     });
 
     return (
diff --git a/webpack.config.js b/webpack.config.js
index 342df64..13a1de6 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,7 +3,7 @@ const webpack = require('webpack');
 
 module.exports = {
   entry: {
-    app: "./examples/customize-sorting/index.js"
+    app: "./examples/hide-columns-print/index.js"
   },
   stats: "verbose",
   context: __dirname,


Test patch:
diff --git a/test/MUIDataTable.test.js b/test/MUIDataTable.test.js
index e0183ca..1a27242 100644
--- a/test/MUIDataTable.test.js
+++ b/test/MUIDataTable.test.js
@@ -82,6 +82,7 @@ describe('<MUIDataTable />', function() {
       {
         display: 'true',
         empty: false,
+        print: true,
         name: 'Name',
         sort: true,
         filter: true,
@@ -95,6 +96,7 @@ describe('<MUIDataTable />', function() {
       {
         display: 'true',
         empty: false,
+        print: true,
         name: 'Company',
         sort: true,
         filter: true,
@@ -107,6 +109,7 @@ describe('<MUIDataTable />', function() {
       {
         display: 'true',
         empty: false,
+        print: true,
         name: 'City',
         sort: true,
         filter: true,
@@ -120,6 +123,7 @@ describe('<MUIDataTable />', function() {
       {
         display: 'true',
         empty: false,
+        print: true,
         name: 'State',
         sort: true,
         filter: true,
@@ -132,6 +136,7 @@ describe('<MUIDataTable />', function() {
       {
         display: 'true',
         empty: true,
+        print: true,
         name: 'Empty',
         sort: true,
         filter: true,
@@ -385,6 +390,7 @@ describe('<MUIDataTable />', function() {
         name: 'Name',
         display: 'false',
         empty: false,
+        print: true,
         sort: true,
         filter: true,
         label: 'Name',
@@ -398,6 +404,7 @@ describe('<MUIDataTable />', function() {
         name: 'Company',
         display: 'true',
         empty: false,
+        print: true,
         sort: true,
         filter: true,
         label: 'Company',
@@ -410,6 +417,7 @@ describe('<MUIDataTable />', function() {
         name: 'City',
         display: 'true',
         empty: false,
+        print: true,
         sort: true,
         filter: true,
         label: 'City Label',
@@ -423,6 +431,7 @@ describe('<MUIDataTable />', function() {
         name: 'State',
         display: 'true',
         empty: false,
+        print: true,
         sort: true,
         filter: true,
         label: 'State',
@@ -435,6 +444,7 @@ describe('<MUIDataTable />', function() {
         name: 'Empty',
         display: 'true',
         empty: true,
+        print: true,
         sort: true,
         filter: true,
         label: 'Empty',