Add support for custom props for rows in EuiBasicTable and EuiInMemor…

…yTable. (#869)

* Add rowProps and cellProps props to EuiBasicTable and EuiInMemoryTable.
* Apply pass-through cell props directly to the td element instead of the child div.
* Remove extraneous code from EuiBasicTable tests.

CHANGELOG.md

@@ -1,12 +1,15 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Created `EuiToggle`, `EuiButtonToggle`, and `EuiButtonGroup` ([#872](https://github.com/elastic/eui/pull/872))
+- `EuiBasicTable` and `EuiInMemoryTable` now accept `rowProps` and `cellProps` callbacks,
+which let you apply custom props to rows and props ([#869](https://github.com/elastic/eui/pull/869))
 
 **Breaking changes**
 
 - `EuiSearchBar` no longer has an `onParse` callback, and now passes an object to `onChange` with the shape `{ query, queryText, error }` ([#863](https://github.com/elastic/eui/pull/863))
 - `EuiInMemoryTable`'s `search.onChange` callback now passes an object with `{ query, queryText, error }` instead of only the query ([#863](https://github.com/elastic/eui/pull/863))
 - `EuiFormControlLayout` no longer has `onClear`, `iconSide`, or `onIconClick` props. Instead of `onClear` it now accepts a `clear` object of the shape `{ onClick }`. Instead of the icon props, it now accepts a single `icon` prop which be either a string or an object of the shape `{ type, side, onClick }`. ([#866](https://github.com/elastic/eui/pull/866))
+- `EuiBasicTable` and `EuiInMemoryTable` pass-through cell props (defined by the `columns` prop and the `cellProps` prop) used to be applied to the `div` inside of the `td` element. They're now applied directly to the `td` element. ([#869](https://github.com/elastic/eui/pull/869))
 
 **Bug fixes**
 

src-docs/src/views/tables/basic/basic.js

@@ -80,10 +80,32 @@ export const Table = () => {
     }
   }];
 
+  const items = store.users.filter((user, index) => index < 10);
+
+  const getRowProps = (item) => {
+    const { id } = item;
+    return {
+      'data-test-subj': `row-${id}`,
+      className: 'customRowClass',
+      onClick: () => console.log(`Clicked row ${id}`),
+    };
+  };
+
+  const getCellProps = (item, column) => {
+    const { id } = item;
+    const { field } = column;
+    return {
+      className: 'customCellClass',
+      'data-test-subj': `cell-${id}-${field}`,
+    };
+  };
+
   return (
     <EuiBasicTable
-      items={store.users.filter((user, index) => index < 10)}
+      items={items}
       columns={columns}
+      rowProps={getRowProps}
+      cellProps={getCellProps}
     />
   );
 };

src-docs/src/views/tables/basic/basic_section.js

@@ -31,8 +31,11 @@ export const section = {
       <ul>
         <li>
           <EuiCode>items</EuiCode> are an array of objects that should be displayed in the table;
-          one item per row. The exact item data that will be rendered in each cell in these rows is determined
-          by the <EuiCode>columns</EuiCode> property.
+          one item per row. The exact item data that will be rendered in each cell in these rows is
+          determined by the <EuiCode>columns</EuiCode> property.
+          You can define <EuiCode>rowProps</EuiCode> and <EuiCode>cellProps</EuiCode> props
+          which can either be objects and functions that return objects. The returned object&rsquo;s
+          will be applied as props to the rendered rows and row cells, respectively.
         </li>
         <li>
           <EuiCode>columns</EuiCode> defines what columns the table has and how to extract item data

src-docs/src/views/tables/data_store.js

@@ -50,7 +50,7 @@ const createUsers = (countries) => {
       github: index < 10 ? github[index] : github[index - 10],
       dateOfBirth: dob,
       nationality: random.oneToOne(countries.map(country => country.code), index),
-      online: index % 2 === 0
+      online: index % 2 === 0,
     };
   });
 };