Bugfix/issue 1095 fix stacked view styles (gregnb#1096)

* Fix issues caused by style changes for dense table views We need something closer to the previous styles for default stacked views to prevent divergences in display with mui v4 * Fix deprecation warning in example
patorjk · May 31, 2020 · 5600876 · 5600876
1 parent bc30519
commit 5600876
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 16 deletions.
diff --git a/examples/customize-styling/index.js b/examples/customize-styling/index.js
@@ -147,7 +147,10 @@ class Example extends React.Component {
       filter: true,
       filterType: 'dropdown',
       responsive: this.state.stacked ? 'stacked' : 'scrollMaxHeight',
-      fixedHeader: true,
+      fixedHeaderOptions: {
+        xAxis: true,
+        yAxis: true
+      },
       rowHover: false,
       setRowProps: (row) => {
         return {

diff --git a/src/components/TableBodyCell.js b/src/components/TableBodyCell.js
@@ -8,30 +8,30 @@ const defaultBodyCellStyles = theme => ({
   cellHide: {
     display: 'none',
   },
-  cellStacked: {
+  stackedCommon: {
     [theme.breakpoints.down('sm')]: {
       display: 'inline-block',
       fontSize: '16px',
-      width: '50%',
+      height: '24px',
+      whiteSpace: 'nowrap',
+      width: 'calc(50% - 80px)',
       whiteSpace: 'nowrap',
-      boxSizing: 'border-box',
-      height: '32px',
+      '&:last-child': {
+        borderBottom: 'none',
+      },
       '&:nth-last-child(2)': {
         borderBottom: 'none',
       },
     },
   },
-  responsiveStacked: {
+  cellStackedSmall: {
+    [theme.breakpoints.down('sm')]: {
+      width: '50%',
+    },
+  },
+  responsiveStackedSmall: {
     [theme.breakpoints.down('sm')]: {
-      display: 'inline-block',
-      fontSize: '16px',
       width: '50%',
-      whiteSpace: 'nowrap',
-      boxSizing: 'border-box',
-      height: '32px',
-      '&:last-child': {
-        borderBottom: 'none',
-      },
     },
   },
 });
@@ -65,7 +65,10 @@ class TableBodyCell extends React.Component {
           {
             [classes.root]: true,
             [classes.cellHide]: true,
-            [classes.cellStacked]: options.responsive === 'stacked',
+            [classes.stackedCommon]: options.responsive === 'stacked',
+            [classes.cellStackedSmall]:
+              options.responsive === 'stacked' &&
+              (options.setTableProps().padding === 'none' || options.setTableProps().size === 'small'),
             'datatables-noprint': !print,
           },
           className,
@@ -78,7 +81,10 @@ class TableBodyCell extends React.Component {
         className={classNames(
           {
             [classes.root]: true,
-            [classes.responsiveStacked]: options.responsive === 'stacked',
+            [classes.stackedCommon]: options.responsive === 'stacked',
+            [classes.responsiveStackedSmall]:
+              options.responsive === 'stacked' &&
+              (options.setTableProps().padding === 'none' || options.setTableProps().size === 'small'),
             'datatables-noprint': !print,
           },
           className,