From 31c366cdd2786fdfb9bda1eaf7cbd7fe33480616 Mon Sep 17 00:00:00 2001 From: tgBryanBailes Date: Wed, 18 Apr 2018 02:29:57 -0700 Subject: [PATCH] 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! --- examples/component/index.js | 2 +- index.html | 2 +- package-lock.json | 2 +- src/MUIDataTable.js | 48 ++++++++++++++++++++----------------- src/MUIDataTableBodyCell.js | 7 ++++-- src/MUIDataTableHead.js | 2 +- src/MUIDataTableHeadCell.js | 7 +++++- src/MUIDataTableToolbar.js | 24 ++++++++++--------- 8 files changed, 54 insertions(+), 40 deletions(-) diff --git a/examples/component/index.js b/examples/component/index.js index 181b4ae98..b260c7e86 100644 --- 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 index 8b14be991..8b38f931e 100755 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ MUIDatables Example - +
diff --git a/package-lock.json b/package-lock.json index 4ca8345eb..37bfafb7b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "mui-datatables", - "version": "1.1.3", + "version": "1.1.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index 220ae306b..c320697b8 100644 --- 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 { (this.tableContent = el)} - className={this.options.responsive === "scroll" ? classes.responsiveScroll : null}> + > {selectedRows.length ? ( )} - (this.tableRef = el)} tabIndex={"0"} role={"grid"} aria-readonly={"true"}> - - (this.updateToolbarSelect = fn)} - selectRowUpdate={this.selectRowUpdate} - toggleSort={this.toggleSortColumn} - options={this.options} - /> - +
+
{title}
(this.tableRef = el)} tabIndex={"0"} role={"grid"} > + + (this.updateToolbarSelect = fn)} + selectRowUpdate={this.selectRowUpdate} + toggleSort={this.toggleSortColumn} + options={this.options} + /> + +
{title}
+
+ {this.options.pagination ? ( ) : ( diff --git a/src/MUIDataTableBodyCell.js b/src/MUIDataTableBodyCell.js index 4f2c89fae..bee748c6a 100644 --- 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} , diff --git a/src/MUIDataTableHead.js b/src/MUIDataTableHead.js index f8a71a788..2524ae028 100644 --- a/src/MUIDataTableHead.js +++ b/src/MUIDataTableHead.js @@ -52,7 +52,7 @@ class MUIDataTableHead extends React.Component { const { selectChecked } = this.state; return ( - + {options.selectableRows ? ( diff --git a/src/MUIDataTableHeadCell.js b/src/MUIDataTableHeadCell.js index 39e305d5c..831f64379 100644 --- 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 ( {options.sort ? ( - + ( - - - - - - )} - content={() => this.props.tableRef()} - /> + + + ( + + + + )} + content={() => this.props.tableRef()} + /> + + ) : ( false )}