Merge pull request #1269 from andfs/hideToolbarOnPrinting

Hide toolbar and select cells on printing
gregnb · Jun 8, 2020 · 8536207 · 8536207
2 parents 8929a73 + e35f655
commit 8536207
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 7 deletions.
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
@@ -31,6 +31,9 @@ const defaultTableStyles = theme => ({
   },
   responsiveBase: {
     overflow: 'auto',
+    '@media print': {
+      height: 'auto !important',
+    }
   },
 
   // deprecated, but continuing support through v3.x
@@ -276,7 +279,7 @@ class MUIDataTable extends React.Component {
 
   constructor() {
     super();
-    this.tableRef = false;
+    this.tableRef = React.createRef();
     this.tableContent = React.createRef();
     this.headCellRefs = {};
     this.setHeadResizeable = () => {};

diff --git a/src/components/TableFooter.js b/src/components/TableFooter.js
@@ -4,16 +4,22 @@ import MuiTable from '@material-ui/core/Table';
 import TablePagination from './TablePagination';
 import { withStyles } from '@material-ui/core/styles';
 
-export const defaultFooterStyles = {};
+export const defaultFooterStyles = {
+  root: {
+    '@media print': {
+      display: 'none',
+    }
+  }
+};
 
 class TableFooter extends React.Component {
   static propTypes = {};
 
   render() {
-    const { options, rowCount, page, rowsPerPage, changeRowsPerPage, changePage } = this.props;
+    const { options, rowCount, page, rowsPerPage, changeRowsPerPage, changePage, classes } = this.props;
 
     return (
-      <MuiTable>
+      <MuiTable className={classes.root}>
         {options.customFooter
           ? options.customFooter(
               rowCount,
@@ -39,4 +45,4 @@ class TableFooter extends React.Component {
   }
 }
 
-export default TableFooter;
+export default withStyles(defaultFooterStyles, { name: 'MUIDataTableFooter' })(TableFooter);
diff --git a/src/components/TableSelectCell.js b/src/components/TableSelectCell.js
@@ -9,7 +9,11 @@ import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 import Remove from '@material-ui/icons/Remove';
 
 const defaultSelectCellStyles = theme => ({
-  root: {},
+  root: {
+    '@media print': {
+      display: 'none',
+    }
+  },
   fixedHeader: {
     position: 'sticky',
     top: '0px',

diff --git a/src/components/TableToolbar.js b/src/components/TableToolbar.js
@@ -19,7 +19,11 @@ import cloneDeep from 'lodash.clonedeep';
 import MuiTooltip from '@material-ui/core/Tooltip';
 
 export const defaultToolbarStyles = theme => ({
-  root: {},
+  root: {
+    '@media print': {
+      display: 'none',
+    }
+  },
   fullWidthRoot: {},
   left: {
     flex: '1 1 auto',
@@ -82,6 +86,9 @@ export const defaultToolbarStyles = theme => ({
   [theme.breakpoints.down('xs')]: {
     root: {
       display: 'block',
+      '@media print': {
+        display: 'none !important',
+      }
     },
     left: {
       padding: '8px 0px 0px 0px',

diff --git a/src/components/TableToolbarSelect.js b/src/components/TableToolbarSelect.js
@@ -18,6 +18,9 @@ const defaultToolbarSelectStyles = theme => ({
     alignItems: 'center',
     paddingTop: typeof theme.spacing === 'function' ? theme.spacing(1) : theme.spacing.unit,
     paddingBottom: typeof theme.spacing === 'function' ? theme.spacing(1) : theme.spacing.unit,
+    '@media print': {
+      display: 'none',
+    }
   },
   title: {
     paddingLeft: '26px',