Merge pull request #660 from jbetancur/fix/651

fix conditionalRowStyles when using striped convenience prop

Author: jbetancur

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "6.11.0",
+  "version": "6.11.1",
   "description": "A declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

src/DataTable/TableRow.js

@@ -5,7 +5,7 @@ import TableCell from './TableCell';
 import TableCellCheckbox from './TableCellCheckbox';
 import TableCellExpander from './TableCellExpander';
 import ExpanderRow from './ExpanderRow';
-import { getConditionalStyle } from './util';
+import { getConditionalStyle, isOdd } from './util';
 
 const STOP_PROP_TAG = '___react-data-table-allow-propagation___';
 
@@ -97,13 +97,14 @@ const TableRow = memo(({
   const extendedRowStyle = getConditionalStyle(row, conditionalRowStyles);
   const hightlightSelected = selectableRowsHighlight && selected;
   const inheritStyles = inheritConditionalStyles ? extendedRowStyle : null;
+  const isStriped = striped && isOdd(rowIndex);
 
   return (
     <>
       <TableRowStyle
         id={`row-${id}`}
         role="row"
-        striped={striped}
+        striped={isStriped}
         highlightOnHover={highlightOnHover}
         pointerOnHover={!defaultExpanderDisabled && showPointer}
         dense={dense}

src/DataTable/__tests__/__snapshots__/DataTable.test.js.snap

@@ -48593,11 +48593,34 @@ exports[`DataTable::striped should render correctly when striped 1`] = `
   border-bottom-color: rgba(0,0,0,.12);
 }
 
-.c14:nth-of-type(odd) {
+.c16 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 13px;
+  color: rgba(0,0,0,0.87);
+  background-color: #FFFFFF;
+  min-height: 48px;
   color: rgba(0,0,0,0.87);
   background-color: #FAFAFA;
 }
 
+.c16:not(:last-of-type) {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(0,0,0,.12);
+}
+
 .c11 {
   position: relative;
   display: -webkit-box;
@@ -48915,7 +48938,7 @@ exports[`DataTable::striped should render correctly when striped 1`] = `
           </div>
         </div>
         <div
-          class="c14 rdt_TableRow"
+          class="c16 rdt_TableRow"
           id="row-2"
           role="row"
         >

src/DataTable/styles.js

@@ -129,10 +129,8 @@ export const defaultStyles = theme => ({
       outlineColor: theme.background.default,
     },
     stripedStyle: {
-      '&:nth-of-type(odd)': {
-        color: theme.striped.text,
-        backgroundColor: theme.striped.default,
-      },
+      color: theme.striped.text,
+      backgroundColor: theme.striped.default,
     },
   },
   expanderRow: {

src/DataTable/util.js

@@ -133,3 +133,7 @@ export const detectRTL = (direction = 'auto') => {
 
   return direction === 'rtl';
 };
+
+export const isOdd = num => {
+  return num % 2;
+};