Repository: jbetancur/react-data-table-component (ts)

Issue:
Conditional Row Styles create a new class instead of being inline style
## Issue Check list
- [ x] Agree to the [Code of Conduct](https://github.com/jbetancur/react-data-table-component/blob/master/CODE-OF-CONDUCT.md)
- [x ] Read the README
- [x ] You are using React 16.8.0+
- [x ] You installed `styled-components`
- [x ] Include relevant code or preferably a [code sandbox](https://codesandbox.io/embed/react-data-table-sandbox-ccyuu
)

## Describe the bug
Conditional Row Styles create a new class instead of being inline change and we get the following message:
```
Over 200 classes were generated for component styled.div with the id of "sc-jrAGrp".
Consider using the attrs method, together with a style object for frequently changed styles.
Example:
  const Component = styled.div.attrs(props => ({
    style: {
      background: props.background,
    },
  }))`width: 100%;`
```

  <Component />
## To Reproduce
Simply add Conditional row style that depends on row value to create css style and update the row frequently (for example the table updates when new data come from websocket).

```
    {
      when: _row => true,
      style: row => ({
        background: `linear-gradient(90deg, rgba(255,88,87,0.1) ${calculateBackgroundBar(row, BidsData)}, rgba(0,0,0,1) ${calculateBackgroundBar(row, BidsData)})`,
        color: 'white'
      }),
    }

```
## Expected behavior
styled-components shouldn't create over 200 classes

## Versions (please complete the following information)
 - React 17.0.1
 - Styled Components 5.2.1
 - OS:  Windows 10 2004
 - Browser: Chrome

## Additional context
Add any other context about the problem here.


Pull request:
fix potential performance issue when using conditional rows/cells
FIxes #772 

Patch:
diff --git a/src/DataTable/TableCell.tsx b/src/DataTable/TableCell.tsx
index 83e4f8d..0b3889a 100644
--- a/src/DataTable/TableCell.tsx
+++ b/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>
diff --git a/src/DataTable/TableRow.tsx b/src/DataTable/TableRow.tsx
index fa35ec9..dd6c982 100644
--- a/src/DataTable/TableRow.tsx
+++ b/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


Test patch:
diff --git a/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
index dab7d46..db6bec9 100644
--- a/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/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"
         >