fix ptotential styled performance isssue when using conditional rows/cells (#778)

Author: jbetancur

src/DataTable/TableCell.tsx

@@ -8,7 +8,6 @@ interface TableCellStyleProps {
 	wrapCell: boolean | undefined;
 	allowOverflow: boolean | undefined;
 	cellStyle: CSSObject | undefined;
-	extendedCellStyle: CSSObject;
 }
 
 const overflowCSS = css<TableCellStyleProps>`
@@ -19,12 +18,13 @@ const overflowCSS = css<TableCellStyleProps>`
 	}
 `;
 
-const TableCellStyle = styled(Cell)<TableCellStyleProps>`
+const TableCellStyle = styled(Cell).attrs(props => ({
+	style: props.style,
+}))<TableCellStyleProps>`
 	font-size: ${({ theme }) => theme.rows.fontSize};
 	font-weight: 400;
 	${({ renderAsCell }) => !renderAsCell && overflowCSS};
 	${({ cellStyle }) => cellStyle};
-	${({ extendedCellStyle }) => extendedCellStyle};
 `;
 
 interface TableCellProps extends TableColumnBase {
@@ -44,7 +44,6 @@ function TableCell({ column, dataTag, extendedCellStyle, id, renderAsCell, child
 			className="rdt_TableCell"
 			data-tag={dataTag}
 			cellStyle={column.style}
-			extendedCellStyle={extendedCellStyle}
 			renderAsCell={renderAsCell}
 			allowOverflow={column.allowOverflow}
 			button={column.button}
@@ -57,6 +56,7 @@ function TableCell({ column, dataTag, extendedCellStyle, id, renderAsCell, child
 			right={column.right}
 			width={column.width}
 			wrapCell={column.wrap}
+			style={extendedCellStyle}
 		>
 			{children}
 		</TableCellStyle>

src/DataTable/TableRow.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled, { css, CSSObject } from 'styled-components';
+import styled, { css } from 'styled-components';
 import TableCell from './TableCell';
 import TableCellCheckbox from './TableCellCheckbox';
 import TableCellExpander from './TableCellExpander';
@@ -23,9 +23,10 @@ const pointerCSS = css`
 	}
 `;
 
-const TableRowStyle = styled.div<{
+const TableRowStyle = styled.div.attrs(props => ({
+	style: props.style,
+}))<{
 	dense?: boolean;
-	extendedRowStyle?: CSSObject;
 	highlightOnHover?: boolean;
 	pointerOnHover?: boolean;
 	selected?: boolean;
@@ -42,7 +43,6 @@ const TableRowStyle = styled.div<{
 	${({ highlightOnHover }) => highlightOnHover && highlightCSS};
 	${({ pointerOnHover }) => pointerOnHover && pointerCSS};
 	${({ selected, theme }) => selected && theme.rows.selectedHighlightStyle};
-	${({ extendedRowStyle }) => extendedRowStyle};
 `;
 
 type DProps<T> = Pick<
@@ -171,8 +171,8 @@ function TableRow<T extends RowRecord>({
 				onClick={handleRowClick}
 				onDoubleClick={handleRowDoubleClick}
 				className="rdt_TableRow"
-				extendedRowStyle={extendedRowStyle}
 				selected={hightlightSelected}
+				style={extendedRowStyle}
 			>
 				{selectableRows && (
 					<TableCellCheckbox

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

@@ -10724,7 +10724,6 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
 
 .c12 {
   font-weight: 400;
-  background-color: rgba(63,195,128,0.9);
 }
 
 .c12 div:first-child {
@@ -10733,16 +10732,6 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
   text-overflow: ellipsis;
 }
 
-.c13 {
-  font-weight: 400;
-}
-
-.c13 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .c10 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -10871,6 +10860,7 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
             data-tag="allowRowEvents"
             id="cell-1-1"
             role="gridcell"
+            style="background-color: rgba(63, 195, 128, 0.9);"
           >
             <div
               data-tag="allowRowEvents"
@@ -10885,7 +10875,7 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
           role="row"
         >
           <div
-            class="c11 c6 c13 rdt_TableCell"
+            class="c11 c6 c12 rdt_TableCell"
             data-tag="allowRowEvents"
             id="cell-1-2"
             role="gridcell"
@@ -11263,7 +11253,6 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
 
 .c12 {
   font-weight: 400;
-  color: pink;
 }
 
 .c12 div:first-child {
@@ -11272,16 +11261,6 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
   text-overflow: ellipsis;
 }
 
-.c13 {
-  font-weight: 400;
-}
-
-.c13 div:first-child {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .c10 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -11410,6 +11389,7 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
             data-tag="allowRowEvents"
             id="cell-1-1"
             role="gridcell"
+            style="color: pink;"
           >
             <div
               data-tag="allowRowEvents"
@@ -11424,7 +11404,7 @@ exports[`DataTable::conditionalCellStyles should render correctly when condition
           role="row"
         >
           <div
-            class="c11 c6 c13 rdt_TableCell"
+            class="c11 c6 c12 rdt_TableCell"
             data-tag="allowRowEvents"
             id="cell-1-2"
             role="gridcell"
@@ -11828,8 +11808,6 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
   color: rgba(0,0,0,0.87);
   background-color: #FFFFFF;
   min-height: 48px;
-  background-color: rgba(63,195,128,0.9);
-  color: white;
 }
 
 .c10:not(:last-of-type) {
@@ -11838,36 +11816,6 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
   border-bottom-color: rgba(0,0,0,.12);
 }
 
-.c10:hover {
-  cursor: pointer;
-}
-
-.c13 {
-  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;
-}
-
-.c13:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-}
-
 .c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -11964,6 +11912,7 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
           class="c10 rdt_TableRow"
           id="row-1"
           role="row"
+          style="background-color: rgba(63, 195, 128, 0.9); color: white;"
         >
           <div
             class="c11 c6 c12 rdt_TableCell"
@@ -11979,7 +11928,7 @@ exports[`DataTable::conditionalRowStyles should render correctly when conditiona
           </div>
         </div>
         <div
-          class="c13 rdt_TableRow"
+          class="c10 rdt_TableRow"
           id="row-2"
           role="row"
         >
@@ -26651,8 +26600,6 @@ exports[`should render correctly when conditionalRowStyles is used with an expan
   color: rgba(0,0,0,0.87);
   background-color: #FFFFFF;
   min-height: 48px;
-  background-color: rgba(63,195,128,0.9);
-  color: white;
 }
 
 .c12:not(:last-of-type) {
@@ -26661,36 +26608,6 @@ exports[`should render correctly when conditionalRowStyles is used with an expan
   border-bottom-color: rgba(0,0,0,.12);
 }
 
-.c12:hover {
-  cursor: pointer;
-}
-
-.c18 {
-  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;
-}
-
-.c18:not(:last-of-type) {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  border-bottom-color: rgba(0,0,0,.12);
-}
-
 .c9 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -26797,6 +26714,7 @@ exports[`should render correctly when conditionalRowStyles is used with an expan
           class="c12 rdt_TableRow"
           id="row-1"
           role="row"
+          style="background-color: rgba(63, 195, 128, 0.9); color: white;"
         >
           <div
             class="c13 c14"
@@ -26850,7 +26768,7 @@ exports[`should render correctly when conditionalRowStyles is used with an expan
           </div>
         </div>
         <div
-          class="c18 rdt_TableRow"
+          class="c12 rdt_TableRow"
           id="row-2"
           role="row"
         >