gregnb · patorjk · Nov 29, 2019 · Nov 29, 2019
diff --git a/README.md b/README.md
@@ -165,8 +165,8 @@ The component accepts the following props:
 |**`rowsPerPage`**|number|10|Number of rows allowed per page
 |**`rowsPerPageOptions`**|array|[10,15,100]|Options to provide in pagination for number of rows a user can select
 |**`rowHover`**|boolean|true|Enable/disable hover style over rows
-|**`fixedHeader` DEPRECATED (use `fixedHeaderOptions`)**|boolean|true|Enable/disable fixed header columns
-|**`fixedHeaderOptions`**|object|`{xAxis: true, yAxis: true}`|Enable/disable fixed header columns according to axis in any combination desired [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/fixed-header/index.js)
+|**`fixedHeader`**|boolean|true|Enable/disable a fixed header for the table [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/fixed-header/index.js)
+|**`fixedSelectColumn`**|boolean|true|Enable/disable fixed select column [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/fixed-header/index.js)
 |**`sortFilterList`**|boolean|true|Enable/disable alphanumeric sorting of filter lists
 |**`sort`**|boolean|true|Enable/disable sort on all columns
 |**`filter`**|boolean|true|Show/hide filter icon from toolbar

diff --git a/examples/fixed-header/index.js b/examples/fixed-header/index.js
@@ -11,19 +11,21 @@ class Example extends React.Component {
         name: "Name",
         options: {
           filter: true,
-          display: 'excluded',
+          setCellProps: () => ({style: {whiteSpace:'nowrap'}})
         }
       },      
       {
         name: "Title",
         options: {
           filter: true,
+          setCellProps: () => ({style: {whiteSpace:'nowrap'}})
         }
       },
       {
         name: "Location",
         options: {
           filter: false,
+          setCellProps: () => ({style: {whiteSpace:'nowrap'}})
         }
       },
       {
@@ -38,51 +40,57 @@ class Example extends React.Component {
           filter: true,
           sort: false
         }
-      }      
+      },
+      {
+        name: "Phone Number",
+        options: {
+          filter: true,
+          sort: false,
+          setCellProps: () => ({style: {whiteSpace:'nowrap'}})
+        }
+      },
     ];
 
 
     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"]
+      ["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000", "555-5555"],
+      ["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", "555-5555"],
+      ["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000", "555-5555"],
+      ["Blake Duncan", "Consultant and Business Management Analyst", "San Diego", 65, "$94,000", "555-5555"],
+      ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "$210,000", "555-5555"],
+      ["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", "555-5555"],
+      ["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000", ""],
+      ["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000", ""],
+      ["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000", "555-5555"],
+      ["Addison Navarro", "Business Management Analyst", "New York", 50, "$295,000", "555-5555"],
+      ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000", "555-5555"],
+      ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000", "555-5555"],
+      ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000", "555-5555"],
+      ["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000", "555-5555"],
+      ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000", "555-5555"],
+      ["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000", "555-5555"],
+      ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000", "555-5555"],
+      ["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000", "555-5555"],
+      ["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000", ""],
+      ["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000", ""],
+      ["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000", "555-5555"],
+      ["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000", "555-5555"],
+      ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, "$45,000", "555-5555"],
+      ["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000", "555-5555"]
     ];
 
     const options = {
       filter: true,
       filterType: 'dropdown',
       responsive: 'scrollMaxHeight',
-      fixedHeaderOptions: {
-        xAxis: false,
-        yAxis: true
-      },
+      fixedHeader: true,
+      fixedSelectColumn: false
     };
 
     return (

diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
@@ -168,10 +168,7 @@ class MUIDataTable extends React.Component {
       caseSensitive: PropTypes.bool,
       rowHover: PropTypes.bool,
       fixedHeader: PropTypes.bool,
-      fixedHeaderOptions: PropTypes.shape({
-        xAxis: PropTypes.bool,
-        yAxis: PropTypes.bool,
-      }),
+      fixedSelectColumn: PropTypes.bool,
       page: PropTypes.number,
       count: PropTypes.number,
       rowsSelected: PropTypes.array,
@@ -309,6 +306,8 @@ class MUIDataTable extends React.Component {
     disableToolbarSelect: false,
     serverSide: false,
     rowHover: true,
+    fixedHeader: true,
+    fixedSelectColumn: true,
     elevation: 4,
     rowsPerPage: 10,
     rowsPerPageOptions: [10, 15, 100],
@@ -345,9 +344,10 @@ class MUIDataTable extends React.Component {
     if (this.options.responsive === 'scroll') {
       console.error('The "scroll" responsive option has been deprecated. It is being replaced by "scrollMaxHeight"');
     }
-    if (this.options.fixedHeader === false || this.options.fixedHeader) {
+
+    if (this.options.fixedHeaderOptions) {
       console.error(
-        'fixedHeader has been deprecated in favor of fixedHeaderOptions: { xAxis: boolean, yAxis: boolean }. Once removed, the new options will be set by default to render like the old fixedHeader. However, if you are setting the fixedHeader value manually, it will no longer work in the next major version.',
+        'fixedHeaderOptions has been deprecated in favor of fixedHeader and fixedSelectColumn.',
       );
     }
 

diff --git a/src/components/TableBody.js b/src/components/TableBody.js
@@ -238,7 +238,7 @@ class TableBody extends React.Component {
                       dataIndex: dataIndex,
                     })}
                     fixedHeader={options.fixedHeader}
-                    fixedHeaderOptions={options.fixedHeaderOptions}
+                    fixedSelectColumn={options.fixedSelectColumn}
                     checked={this.isRowSelected(dataIndex)}
                     expandableOn={options.expandableRows}
                     // When rows are expandable, but this particular row isn't expandable, set this to true.

diff --git a/src/components/TableBodyRow.js b/src/components/TableBodyRow.js
@@ -5,8 +5,29 @@ import TableRow from '@material-ui/core/TableRow';
 import { withStyles } from '@material-ui/core/styles';
 
 const defaultBodyRowStyles = theme => ({
-  root: {},
-  hover: {},
+  root: {
+
+    // material v4
+    '&.Mui-selected': {
+      '& td': {
+        backgroundColor: theme.palette.type === 'dark' ? theme.palette.grey[700] :theme.palette.grey[200],
+      }        
+    },
+
+    // material v3 workaround
+    '&.mui-row-selected': {
+      '& td': {
+        backgroundColor: theme.palette.type === 'dark' ? theme.palette.grey[700] :theme.palette.grey[200],
+      }        
+    },
+  },
+  hover: {
+    '&:hover': {
+      '& td': {
+        backgroundColor: theme.palette.type === 'dark' ? theme.palette.grey[700] :theme.palette.grey[200],
+      }
+    }
+  },
   hoverCursor: { cursor: 'pointer' },
   responsiveStacked: {
     [theme.breakpoints.down('sm')]: {
@@ -40,6 +61,7 @@ class TableBodyRow extends React.Component {
             [classes.hover]: options.rowHover,
             [classes.hoverCursor]: options.selectableRowsOnClick || options.expandableRowsOnClick,
             [classes.responsiveStacked]: options.responsive === 'stacked',
+            'mui-row-selected': rowSelected
           },
           className,
         )}

diff --git a/src/components/TableHead.js b/src/components/TableHead.js
@@ -68,7 +68,7 @@ class TableHead extends React.Component {
             expandableOn={options.expandableRows}
             selectableOn={options.selectableRows}
             fixedHeader={options.fixedHeader}
-            fixedHeaderOptions={options.fixedHeaderOptions}
+            fixedSelectColumn={options.fixedSelectColumn}
             selectableRowsHeader={options.selectableRowsHeader}
             isRowSelectable={true}
           />

diff --git a/src/components/TableHeadCell.js b/src/components/TableHeadCell.js
@@ -12,21 +12,9 @@ const defaultHeadCellStyles = theme => ({
   fixedHeader: {
     position: 'sticky',
     top: '0px',
-    left: '0px',
     zIndex: 100,
     backgroundColor: theme.palette.background.paper,
   },
-  fixedHeaderCommon: {
-    position: 'sticky',
-    zIndex: 100,
-    backgroundColor: theme.palette.background.paper,
-  },
-  fixedHeaderXAxis: {
-    left: '0px',
-  },
-  fixedHeaderYAxis: {
-    top: '0px',
-  },
   tooltip: {
     cursor: 'pointer',
   },
@@ -108,7 +96,6 @@ class TableHeadCell extends React.Component {
 
     const sortActive = sortDirection !== 'none' && sortDirection !== undefined ? true : false;
     const ariaSortDirection = sortDirection === 'none' ? false : sortDirection;
-    let fixedHeaderClasses;
 
     const sortLabelProps = {
       classes: { root: classes.sortLabelRoot },
@@ -117,18 +104,9 @@ class TableHeadCell extends React.Component {
       ...(ariaSortDirection ? { direction: sortDirection } : {}),
     };
 
-    // DEPRECATED, make sure to replace defaults with new options when removing
-    if (options.fixedHeader) fixedHeaderClasses = classes.fixedHeader;
-
-    if (options.fixedHeaderOptions) {
-      fixedHeaderClasses = classes.fixedHeaderCommon;
-      if (options.fixedHeaderOptions.xAxis) fixedHeaderClasses += ` ${classes.fixedHeaderXAxis}`;
-      if (options.fixedHeaderOptions.yAxis) fixedHeaderClasses += ` ${classes.fixedHeaderYAxis}`;
-    }
-
     const cellClass = classNames({
       [classes.root]: true,
-      [fixedHeaderClasses]: true,
+      [classes.fixedHeader]: options.fixedHeader,
       'datatables-noprint': !print,
       [className]: className,
     });

diff --git a/src/components/TableSelectCell.js b/src/components/TableSelectCell.js
@@ -8,23 +8,18 @@ import { withStyles } from '@material-ui/core/styles';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 
 const defaultSelectCellStyles = theme => ({
-  root: {},
+  root: {
+    backgroundColor: theme.palette.background.paper,
+  },
   fixedHeader: {
     position: 'sticky',
     top: '0px',
-    left: '0px',
     zIndex: 100,
   },
-  fixedHeaderCommon: {
+  fixedLeft: {
     position: 'sticky',
-    zIndex: 100,
-    backgroundColor: theme.palette.background.paper,
-  },
-  fixedHeaderXAxis: {
     left: '0px',
-  },
-  fixedHeaderYAxis: {
-    top: '0px',
+    zIndex: 100,
   },
   icon: {
     cursor: 'pointer',
@@ -52,11 +47,6 @@ class TableSelectCell extends React.Component {
     checked: PropTypes.bool.isRequired,
     /** Select cell part of fixed header */
     fixedHeader: PropTypes.bool,
-    /** Select cell part of fixed header */
-    fixedHeaderOptions: PropTypes.shape({
-      xAxis: PropTypes.bool,
-      yAxis: PropTypes.bool,
-    }),
     /** Callback to trigger cell update */
     onChange: PropTypes.func,
     /** Extend the style applied to components */
@@ -81,7 +71,7 @@ class TableSelectCell extends React.Component {
     const {
       classes,
       fixedHeader,
-      fixedHeaderOptions,
+      fixedSelectColumn,
       isHeaderCell,
       expandableOn,
       selectableOn,
@@ -96,18 +86,10 @@ class TableSelectCell extends React.Component {
 
     if (!expandableOn && selectableOn === 'none') return false;
 
-    // DEPRECATED, make sure to replace defaults with new options when removing
-    if (fixedHeader) fixedHeaderClasses = classes.fixedHeader;
-
-    if (fixedHeaderOptions) {
-      fixedHeaderClasses = classes.fixedHeaderCommon;
-      if (fixedHeaderOptions.xAxis) fixedHeaderClasses += ` ${classes.fixedHeaderXAxis}`;
-      if (fixedHeaderOptions.yAxis) fixedHeaderClasses += ` ${classes.fixedHeaderYAxis}`;
-    }
-
     const cellClass = classNames({
       [classes.root]: true,
-      [fixedHeaderClasses]: true,
+      [classes.fixedHeader]: fixedHeader && isHeaderCell,
+      [classes.fixedLeft]: fixedSelectColumn,
       [classes.headerCell]: isHeaderCell,
     });