fix broken responsive 'scroll' option #34

* The responsive: scroll option looked terrible. Made it look good and made headers and footers fixed. * Fixed the weird tooptip scrolling issue * Figured it out. I'm a little surprised that I was able to do this. Hooray for JSS!
gregnb · Apr 18, 2018 · 31c366c · 31c366c
1 parent f6e5090
commit 31c366c
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 40 deletions.
diff --git a/examples/component/index.js b/examples/component/index.js
@@ -108,7 +108,7 @@ class Example extends React.Component {
     const options = {
       filter: true,
       filterType: 'dropdown',
-      responsive: 'stacked',
+      responsive: 'scroll',
     };
 
     return (

diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <title>MUIDatables Example</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   </head>
   <body>
     <div id="app-root">

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
@@ -14,7 +14,6 @@ import { withStyles } from "material-ui/styles";
 const defaultTableStyles = {
   root: {},
   responsiveScroll: {
-    display: "block",
     overflowX: "auto",
   },
   caption: {
@@ -540,7 +539,7 @@ class MUIDataTable extends React.Component {
       <Paper
         elevation={4}
         ref={el => (this.tableContent = el)}
-        className={this.options.responsive === "scroll" ? classes.responsiveScroll : null}>
+      >
         {selectedRows.length ? (
           <MUIDataTableToolbarSelect
             options={this.options}
@@ -563,33 +562,38 @@ class MUIDataTable extends React.Component {
           />
         )}
         <MUIDataTableFilterList options={this.options} filterList={filterList} filterUpdate={this.filterUpdate} />
-        <Table ref={el => (this.tableRef = el)} tabIndex={"0"} role={"grid"} aria-readonly={"true"}>
-          <caption className={classes.caption}>{title}</caption>
-          <MUIDataTableHead
-            columns={columns}
-            handleHeadUpdateRef={fn => (this.updateToolbarSelect = fn)}
-            selectRowUpdate={this.selectRowUpdate}
-            toggleSort={this.toggleSortColumn}
-            options={this.options}
-          />
-          <MUIDataTableBody
-            data={this.state.displayData}
-            columns={columns}
-            page={page}
-            rowsPerPage={rowsPerPage}
-            selectedRows={selectedRows}
-            selectRowUpdate={this.selectRowUpdate}
-            options={this.options}
-            searchText={searchText}
-            filterList={filterList}
-          />
+        <div className={this.options.responsive === "scroll" ? classes.responsiveScroll : null}>
+          <Table ref={el => (this.tableRef = el)} tabIndex={"0"} role={"grid"} >
+            <caption className={classes.caption}>{title}</caption>
+            <MUIDataTableHead
+              columns={columns}
+              handleHeadUpdateRef={fn => (this.updateToolbarSelect = fn)}
+              selectRowUpdate={this.selectRowUpdate}
+              toggleSort={this.toggleSortColumn}
+              options={this.options}
+            />
+            <MUIDataTableBody
+              data={this.state.displayData}
+              columns={columns}
+              page={page}
+              rowsPerPage={rowsPerPage}
+              selectedRows={selectedRows}
+              selectRowUpdate={this.selectRowUpdate}
+              options={this.options}
+              searchText={searchText}
+              filterList={filterList}
+            />
+          </Table>
+        </div>
+        <Table>
           {this.options.pagination ? (
             <MUIDataTablePagination
               count={displayData.length}
               page={page}
               rowsPerPage={rowsPerPage}
               changeRowsPerPage={this.changeRowsPerPage}
               changePage={this.changePage}
+              component="div"
               options={this.options}
             />
           ) : (

diff --git a/src/MUIDataTableBodyCell.js b/src/MUIDataTableBodyCell.js
@@ -5,8 +5,10 @@ import { withStyles } from "material-ui/styles";
 
 const defaultBodyCellStyles = {
   root: {},
-  cellStacked: {
+  cellHide: {
     display: "none",
+  },
+  cellStacked: {
     "@media screen and (max-width: 960px)": {
       display: "inline-block",
       backgroundColor: "#FFF",
@@ -36,7 +38,8 @@ class MUIDataTableBodyCell extends React.Component {
         key={1}
         className={classNames({
           [classes.root]: true,
-          [classes.cellStacked]: true,
+          [classes.cellHide]: true,
+          [classes.cellStacked]: options.responsive === "stacked",
         })}>
         {columnHeader}
       </TableCell>,

diff --git a/src/MUIDataTableHead.js b/src/MUIDataTableHead.js
@@ -52,7 +52,7 @@ class MUIDataTableHead extends React.Component {
     const { selectChecked } = this.state;
 
     return (
-      <TableHead className={classNames({ [classes.responsiveStacked]: true, [classes.main]: true })}>
+      <TableHead className={classNames({ [classes.responsiveStacked]: options.responsive==="stacked", [classes.main]: true })}>
         <MUIDataTableHeadRow>
           {options.selectableRows ? (
             <MUIDataTableSelectCell onChange={this.handleRowSelect.bind(null)} checked={selectChecked} />

diff --git a/src/MUIDataTableHeadCell.js b/src/MUIDataTableHeadCell.js
@@ -9,6 +9,11 @@ const defaultHeadCellStyles = {
   tooltip: {
     cursor: "pointer",
   },
+  mypopper: {
+    "&[data-x-out-of-boundaries]": {
+      display: "none",
+    }
+  },
   data: {
     display: "inline-block",
   },
@@ -57,7 +62,7 @@ class MUIDataTableHeadCell extends React.Component {
     return (
       <TableCell className={classes.root} scope={"col"} sortDirection={sortDirection}>
         {options.sort ? (
-          <Tooltip title="Sort" placement={"bottom-end"} className={classes.tooltip} enterDelay={300}>
+          <Tooltip title="Sort" placement={"bottom-end"} className={classes.tooltip} enterDelay={300} classes={{ popper: classes.mypopper }}>
             <span
               role="button"
               onKeyUp={this.handleClickSort}

diff --git a/src/MUIDataTableToolbar.js b/src/MUIDataTableToolbar.js
@@ -86,7 +86,7 @@ class MUIDataTableToolbar extends React.Component {
   constructor(props) {
     super(props);
 
-    if (props.options.responsive && props.options.responsive === "stacked") {
+    if (props.options.responsive) {
       this.tbarStyles = merge(defaultToolbarStyles, responsiveToolbarStyles);
     } else {
       this.tbarStyles = defaultToolbarStyles;
@@ -194,16 +194,18 @@ class MUIDataTableToolbar extends React.Component {
                 false
               )}
               {options.print ? (
-                <ReactToPrint
-                  trigger={() => (
-                    <Tooltip title="Print">
-                      <IconButton aria-label="Print" classes={{ root: toolbarStyles.icon }}>
-                        <PrintIcon />
-                      </IconButton>
-                    </Tooltip>
-                  )}
-                  content={() => this.props.tableRef()}
-                />
+                <Tooltip title="Print">
+                  <span>
+                    <ReactToPrint
+                      trigger={() => (
+                        <IconButton aria-label="Print" classes={{ root: toolbarStyles.icon }}>
+                          <PrintIcon />
+                        </IconButton>
+                      )}
+                      content={() => this.props.tableRef()}
+                    />
+                  </span>
+                </Tooltip>
               ) : (
                 false
               )}