fix(DataTable): add background color to selected table row (#1322)

* fix(DataTable): add CSS class for selected row background-color

* test(DataTable): update snapshots

* refactor(TableRow): attach `className` to `cleanProps`

* docs(DataTable): use consistent props and markup for `TableRow`s

* style(DataTable): use `cx` convention for `classnames` package import

* chore(DataTable): avoid empty `className` in snapshot

Author: emyarod

src/components/DataTable/DataTable.js

@@ -174,6 +174,7 @@ export default class DataTable extends React.Component {
       onExpand: composeEventHandlers([this.handleOnExpandRow(row.id), onClick]),
       isExpanded: row.isExpanded,
       ariaLabel: t(translationKey),
+      isSelected: row.isSelected,
     };
   };
 

src/components/DataTable/TableExpandRow.js

@@ -12,12 +12,14 @@ const TableExpandRow = ({
   isExpanded,
   onExpand,
   expandIconDescription,
+  isSelected,
   ...rest
 }) => {
   const className = cx(
     {
       'bx--parent-row-v2': true,
       'bx--expandable-row-v2': isExpanded,
+      'bx--data-table-v2--selected': isSelected,
     },
     rowClassName
   );

src/components/DataTable/TableRow.js

@@ -1,10 +1,17 @@
 import React from 'react';
 import omit from 'lodash.omit';
+import cx from 'classnames';
 
 const TableRow = props => {
   // Remove unnecessary props if provided to this component, these are
   // only useful in `TableExpandRow`
-  const cleanProps = omit(props, ['ariaLabel', 'onExpand', 'isExpanded']);
+  const className = cx(props.className, {
+    'bx--data-table-v2--selected': props.isSelected,
+  });
+  const cleanProps = {
+    ...omit(props, ['ariaLabel', 'onExpand', 'isExpanded']),
+    className: className || undefined,
+  };
   return <tr {...cleanProps} />;
 };
 

src/components/DataTable/stories/default.js

@@ -29,6 +29,7 @@ export default () => (
       rows,
       headers,
       getHeaderProps,
+      getRowProps,
       getSelectionProps,
       getBatchActionProps,
       onInputChange,
@@ -82,7 +83,7 @@ export default () => (
           </TableHead>
           <TableBody>
             {rows.map(row => (
-              <TableRow key={row.id}>
+              <TableRow {...getRowProps({ row })}>
                 <TableSelectRow {...getSelectionProps({ row })} />
                 {row.cells.map(cell => (
                   <TableCell key={cell.id}>{cell.value}</TableCell>

src/components/DataTable/stories/with-batch-actions.js

@@ -29,6 +29,7 @@ export default () => (
       rows,
       headers,
       getHeaderProps,
+      getRowProps,
       getSelectionProps,
       getBatchActionProps,
       onInputChange,
@@ -82,7 +83,7 @@ export default () => (
           </TableHead>
           <TableBody>
             {rows.map(row => (
-              <TableRow key={row.id}>
+              <TableRow {...getRowProps({ row })}>
                 <TableSelectRow {...getSelectionProps({ row })} />
                 {row.cells.map(cell => (
                   <TableCell key={cell.id}>{cell.value}</TableCell>

src/components/DataTable/stories/with-selection.js

@@ -16,7 +16,13 @@ export default () => (
   <DataTable
     rows={initialRows}
     headers={headers}
-    render={({ rows, headers, getHeaderProps, getSelectionProps }) => (
+    render={({
+      rows,
+      headers,
+      getHeaderProps,
+      getRowProps,
+      getSelectionProps,
+    }) => (
       <TableContainer title="DataTable">
         <Table>
           <TableHead>
@@ -31,7 +37,7 @@ export default () => (
           </TableHead>
           <TableBody>
             {rows.map(row => (
-              <TableRow key={row.id}>
+              <TableRow {...getRowProps({ row })}>
                 <TableSelectRow {...getSelectionProps({ row })} />
                 {row.cells.map(cell => (
                   <TableCell key={cell.id}>{cell.value}</TableCell>

src/components/DataTable/stories/with-sorting.js

@@ -14,7 +14,7 @@ export default () => (
   <DataTable
     rows={initialRows}
     headers={headers}
-    render={({ rows, headers, getHeaderProps }) => (
+    render={({ rows, headers, getHeaderProps, getRowProps }) => (
       <TableContainer title="DataTable with sorting">
         <Table>
           <TableHead>
@@ -28,7 +28,7 @@ export default () => (
           </TableHead>
           <TableBody>
             {rows.map(row => (
-              <TableRow key={row.id}>
+              <TableRow {...getRowProps({ row })}>
                 {row.cells.map(cell => (
                   <TableCell key={cell.id}>{cell.value}</TableCell>
                 ))}

src/components/DataTable/stories/with-toolbar.js

@@ -21,7 +21,7 @@ export default () => (
   <DataTable
     rows={initialRows}
     headers={headers}
-    render={({ rows, headers, getHeaderProps, onInputChange }) => (
+    render={({ rows, headers, getHeaderProps, getRowProps, onInputChange }) => (
       <TableContainer title="DataTable with toolbar">
         <TableToolbar>
           <TableToolbarSearch onChange={onInputChange} />
@@ -58,7 +58,7 @@ export default () => (
           </TableHead>
           <TableBody>
             {rows.map(row => (
-              <TableRow key={row.id}>
+              <TableRow {...getRowProps({ row })}>
                 {row.cells.map(cell => (
                   <TableCell key={cell.id}>{cell.value}</TableCell>
                 ))}