From 12dc4117c9384481b51fa3f8de94879f00d827f0 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 23 May 2018 16:15:24 -0700
Subject: [PATCH 1/6] Add support for custom props for rows in EuiBasicTable
 and EuiInMemoryTable.

---
 src-docs/src/views/tables/basic/basic.js      |  14 +-
 .../src/views/tables/basic/basic_section.js   |   6 +-
 src-docs/src/views/tables/data_store.js       |   2 +-
 .../__snapshots__/basic_table.test.js.snap    |  79 ++++++-----
 src/components/basic_table/basic_table.js     |   3 +
 .../basic_table/basic_table.test.js           | 133 +++++++++---------
 6 files changed, 131 insertions(+), 106 deletions(-)

diff --git a/src-docs/src/views/tables/basic/basic.js b/src-docs/src/views/tables/basic/basic.js
index 7c87de57b45..ba76e3399e6 100644
--- a/src-docs/src/views/tables/basic/basic.js
+++ b/src-docs/src/views/tables/basic/basic.js
@@ -80,9 +80,21 @@ export const Table = () => {
     }
   }];
 
+  const items = store.users.filter((user, index) => index < 10).map(user => {
+    const { id } = user;
+    return {
+      ...user,
+      __props__: {
+        'data-test-subj': `row-${id}`,
+        className: 'customClass',
+        onClick: () => console.log(`Clicked row ${id}`),
+      },
+    };
+  });
+
   return (
     <EuiBasicTable
-      items={store.users.filter((user, index) => index < 10)}
+      items={items}
       columns={columns}
     />
   );
diff --git a/src-docs/src/views/tables/basic/basic_section.js b/src-docs/src/views/tables/basic/basic_section.js
index 166659ed0c2..419cbfa3ec0 100644
--- a/src-docs/src/views/tables/basic/basic_section.js
+++ b/src-docs/src/views/tables/basic/basic_section.js
@@ -31,8 +31,10 @@ 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. You can define a <EuiCode>__props__</EuiCode> property on each item
+          object to define props to pass to the corresponding row component. The exact item data
+          that will be rendered in each cell in these rows is determined by
+          the <EuiCode>columns</EuiCode> property.
         </li>
         <li>
           <EuiCode>columns</EuiCode> defines what columns the table has and how to extract item data
diff --git a/src-docs/src/views/tables/data_store.js b/src-docs/src/views/tables/data_store.js
index 15405564146..a1202e1faec 100644
--- a/src-docs/src/views/tables/data_store.js
+++ b/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,
     };
   });
 };
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
index f9370dfb08b..50560eaaa5b 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiBasicTable basic - empty - custom message 1`] = `
+exports[`EuiBasicTable empty is rendered 1`] = `
 <div
   aria-label="aria-label"
   className="euiBasicTable testClass1 testClass2"
@@ -28,7 +28,7 @@ exports[`EuiBasicTable basic - empty - custom message 1`] = `
             isMobileFullWidth={true}
             textOnly={true}
           >
-            where my items at?
+            No items found
           </EuiTableRowCell>
         </EuiTableRow>
       </EuiTableBody>
@@ -37,7 +37,7 @@ exports[`EuiBasicTable basic - empty - custom message 1`] = `
 </div>
 `;
 
-exports[`EuiBasicTable basic - empty - custom message as node 1`] = `
+exports[`EuiBasicTable empty renders a node as a custom message 1`] = `
 <div
   aria-label="aria-label"
   className="euiBasicTable testClass1 testClass2"
@@ -82,7 +82,7 @@ exports[`EuiBasicTable basic - empty - custom message as node 1`] = `
 </div>
 `;
 
-exports[`EuiBasicTable basic - empty 1`] = `
+exports[`EuiBasicTable empty renders a string as a custom message 1`] = `
 <div
   aria-label="aria-label"
   className="euiBasicTable testClass1 testClass2"
@@ -110,7 +110,7 @@ exports[`EuiBasicTable basic - empty 1`] = `
             isMobileFullWidth={true}
             textOnly={true}
           >
-            No items found
+            where my items at?
           </EuiTableRowCell>
         </EuiTableRow>
       </EuiTableBody>
@@ -119,11 +119,9 @@ exports[`EuiBasicTable basic - empty 1`] = `
 </div>
 `;
 
-exports[`EuiBasicTable basic - with items 1`] = `
+exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile />
@@ -141,23 +139,38 @@ exports[`EuiBasicTable basic - with items 1`] = `
       </EuiTableHeader>
       <EuiTableBody>
         <React.Fragment
-          key="row_0"
+          key="row_1"
         >
           <EuiTableRow
+            aria-owns="row_1_expansion"
             isSelected={false}
           >
             <EuiTableRowCell
               align="left"
               header="Name"
-              key="_data_column_name_0_0"
+              key="_data_column_name_1_0"
               textOnly={true}
             >
               name1
             </EuiTableRowCell>
           </EuiTableRow>
+          <EuiTableRow
+            id="row_1_expansion"
+            isExpandedRow={true}
+          >
+            <EuiTableRowCell
+              align="left"
+              colSpan={1}
+              textOnly={true}
+            >
+              <div>
+                Expanded row
+              </div>
+            </EuiTableRowCell>
+          </EuiTableRow>
         </React.Fragment>
         <React.Fragment
-          key="row_1"
+          key="row_2"
         >
           <EuiTableRow
             isSelected={false}
@@ -165,7 +178,7 @@ exports[`EuiBasicTable basic - with items 1`] = `
             <EuiTableRowCell
               align="left"
               header="Name"
-              key="_data_column_name_1_0"
+              key="_data_column_name_2_0"
               textOnly={true}
             >
               name2
@@ -173,7 +186,7 @@ exports[`EuiBasicTable basic - with items 1`] = `
           </EuiTableRow>
         </React.Fragment>
         <React.Fragment
-          key="row_2"
+          key="row_3"
         >
           <EuiTableRow
             isSelected={false}
@@ -181,7 +194,7 @@ exports[`EuiBasicTable basic - with items 1`] = `
             <EuiTableRowCell
               align="left"
               header="Name"
-              key="_data_column_name_2_0"
+              key="_data_column_name_3_0"
               textOnly={true}
             >
               name3
@@ -194,9 +207,11 @@ exports[`EuiBasicTable basic - with items 1`] = `
 </div>
 `;
 
-exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
+exports[`EuiBasicTable items are rendered with custom props 1`] = `
 <div
-  className="euiBasicTable"
+  aria-label="aria-label"
+  className="euiBasicTable testClass1 testClass2"
+  data-test-subj="test subject string"
 >
   <div>
     <EuiTableHeaderMobile />
@@ -214,38 +229,26 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
       </EuiTableHeader>
       <EuiTableBody>
         <React.Fragment
-          key="row_1"
+          key="row_0"
         >
           <EuiTableRow
-            aria-owns="row_1_expansion"
+            className="customClass"
+            data-test-subj="row"
             isSelected={false}
+            onClick={[Function]}
           >
             <EuiTableRowCell
               align="left"
               header="Name"
-              key="_data_column_name_1_0"
+              key="_data_column_name_0_0"
               textOnly={true}
             >
               name1
             </EuiTableRowCell>
           </EuiTableRow>
-          <EuiTableRow
-            id="row_1_expansion"
-            isExpandedRow={true}
-          >
-            <EuiTableRowCell
-              align="left"
-              colSpan={1}
-              textOnly={true}
-            >
-              <div>
-                Expanded row
-              </div>
-            </EuiTableRowCell>
-          </EuiTableRow>
         </React.Fragment>
         <React.Fragment
-          key="row_2"
+          key="row_1"
         >
           <EuiTableRow
             isSelected={false}
@@ -253,7 +256,7 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
             <EuiTableRowCell
               align="left"
               header="Name"
-              key="_data_column_name_2_0"
+              key="_data_column_name_1_0"
               textOnly={true}
             >
               name2
@@ -261,7 +264,7 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
           </EuiTableRow>
         </React.Fragment>
         <React.Fragment
-          key="row_3"
+          key="row_2"
         >
           <EuiTableRow
             isSelected={false}
@@ -269,7 +272,7 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
             <EuiTableRowCell
               align="left"
               header="Name"
-              key="_data_column_name_3_0"
+              key="_data_column_name_2_0"
               textOnly={true}
             >
               name3
diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
index b61842c3f20..9918d8570ad 100644
--- a/src/components/basic_table/basic_table.js
+++ b/src/components/basic_table/basic_table.js
@@ -534,6 +534,8 @@ export class EuiBasicTable extends Component {
       </EuiTableRow>
     ) : undefined;
 
+    const { __props__: customRowProps } = item;
+
     return (
       <Fragment key={`row_${itemId}`}>
         <EuiTableRow
@@ -542,6 +544,7 @@ export class EuiBasicTable extends Component {
           isSelected={selected}
           hasActions={hasActions}
           isExpandable={isExpandable}
+          {...customRowProps}
         >
           {cells}
         </EuiTableRow>
diff --git a/src/components/basic_table/basic_table.test.js b/src/components/basic_table/basic_table.test.js
index fdc5a9ea905..d9c2aa7d8d9 100644
--- a/src/components/basic_table/basic_table.test.js
+++ b/src/components/basic_table/basic_table.test.js
@@ -23,75 +23,80 @@ describe('getItemId', () => {
 });
 
 describe('EuiBasicTable', () => {
-
-  test('basic - empty', () => {
-
-    const props = {
-      ...requiredProps,
-      items: [],
-      columns: [
-        {
-          field: 'name',
-          name: 'Name',
-          description: 'description'
-        }
-      ]
-    };
-    const component = shallow(
-      <EuiBasicTable {...props} />
-    );
-
-    expect(component).toMatchSnapshot();
+  describe('empty', () => {
+    test('is rendered', () => {
+      const props = {
+        ...requiredProps,
+        items: [],
+        columns: [
+          {
+            field: 'name',
+            name: 'Name',
+            description: 'description'
+          }
+        ]
+      };
+      const component = shallow(
+        <EuiBasicTable {...props} />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('renders a string as a custom message', () => {
+      const props = {
+        ...requiredProps,
+        items: [],
+        columns: [
+          {
+            field: 'name',
+            name: 'Name',
+            description: 'description'
+          }
+        ],
+        noItemsMessage: 'where my items at?'
+      };
+      const component = shallow(
+        <EuiBasicTable {...props} />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('renders a node as a custom message', () => {
+      const props = {
+        ...requiredProps,
+        items: [],
+        columns: [
+          {
+            field: 'name',
+            name: 'Name',
+            description: 'description'
+          }
+        ],
+        noItemsMessage: (<p>no items, click <a href>here</a> to make some</p>)
+      };
+      const component = shallow(
+        <EuiBasicTable {...props} />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
   });
 
-  test('basic - empty - custom message', () => {
-
-    const props = {
-      ...requiredProps,
-      items: [],
-      columns: [
-        {
-          field: 'name',
-          name: 'Name',
-          description: 'description'
-        }
-      ],
-      noItemsMessage: 'where my items at?'
-    };
-    const component = shallow(
-      <EuiBasicTable {...props} />
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-
-  test('basic - empty - custom message as node', () => {
-
-    const props = {
-      ...requiredProps,
-      items: [],
-      columns: [
-        {
-          field: 'name',
-          name: 'Name',
-          description: 'description'
-        }
-      ],
-      noItemsMessage: (<p>no items, click <a href>here</a> to make some</p>)
-    };
-    const component = shallow(
-      <EuiBasicTable {...props} />
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-
-  test('basic - with items', () => {
-
+  test('items are rendered with custom props', () => {
     const props = {
       ...requiredProps,
       items: [
-        { id: '1', name: 'name1' },
+        {
+          id: '1',
+          name: 'name1',
+          __props__: {
+            'data-test-subj': `row`,
+            className: 'customClass',
+            onClick: () => {},
+          },
+        },
         { id: '2', name: 'name2' },
         { id: '3', name: 'name3' }
       ],

From e26016bf83078ca612c0ee4ff699df9c81df6a20 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 23 May 2018 16:26:17 -0700
Subject: [PATCH 2/6] Remove extraneous code from EuiBasicTable tests.

---
 .../__snapshots__/basic_table.test.js.snap    | 60 +++++--------------
 .../basic_table/basic_table.test.js           | 27 ---------
 2 files changed, 15 insertions(+), 72 deletions(-)

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
index 50560eaaa5b..82553b8be8b 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -39,9 +39,7 @@ exports[`EuiBasicTable empty is rendered 1`] = `
 
 exports[`EuiBasicTable empty renders a node as a custom message 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile />
@@ -84,9 +82,7 @@ exports[`EuiBasicTable empty renders a node as a custom message 1`] = `
 
 exports[`EuiBasicTable empty renders a string as a custom message 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile />
@@ -209,9 +205,7 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
 
 exports[`EuiBasicTable items are rendered with custom props 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile />
@@ -287,9 +281,7 @@ exports[`EuiBasicTable items are rendered with custom props 1`] = `
 
 exports[`EuiBasicTable with pagination - 2nd page 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile />
@@ -357,9 +349,7 @@ exports[`EuiBasicTable with pagination - 2nd page 1`] = `
 
 exports[`EuiBasicTable with pagination 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile />
@@ -443,9 +433,7 @@ exports[`EuiBasicTable with pagination 1`] = `
 
 exports[`EuiBasicTable with pagination and error 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile />
@@ -486,9 +474,7 @@ exports[`EuiBasicTable with pagination and error 1`] = `
 
 exports[`EuiBasicTable with pagination and selection 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile />
@@ -630,9 +616,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
 
 exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile>
@@ -791,9 +775,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
 
 exports[`EuiBasicTable with pagination, selection, sorting and a single record action 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile>
@@ -1043,9 +1025,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
 
 exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile>
@@ -1204,9 +1184,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
 
 exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile>
@@ -1365,9 +1343,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
 
 exports[`EuiBasicTable with pagination, selection, sorting and multiple record actions 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile>
@@ -1611,9 +1587,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
 
 exports[`EuiBasicTable with pagination, selection, sorting, column renderer and column dataType 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile>
@@ -1772,9 +1746,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
 
 exports[`EuiBasicTable with sortable columns and sorting disabled 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile />
@@ -1847,9 +1819,7 @@ exports[`EuiBasicTable with sortable columns and sorting disabled 1`] = `
 
 exports[`EuiBasicTable with sorting 1`] = `
 <div
-  aria-label="aria-label"
-  className="euiBasicTable testClass1 testClass2"
-  data-test-subj="test subject string"
+  className="euiBasicTable"
 >
   <div>
     <EuiTableHeaderMobile>
diff --git a/src/components/basic_table/basic_table.test.js b/src/components/basic_table/basic_table.test.js
index d9c2aa7d8d9..cfd754b45ed 100644
--- a/src/components/basic_table/basic_table.test.js
+++ b/src/components/basic_table/basic_table.test.js
@@ -45,7 +45,6 @@ describe('EuiBasicTable', () => {
 
     test('renders a string as a custom message', () => {
       const props = {
-        ...requiredProps,
         items: [],
         columns: [
           {
@@ -65,7 +64,6 @@ describe('EuiBasicTable', () => {
 
     test('renders a node as a custom message', () => {
       const props = {
-        ...requiredProps,
         items: [],
         columns: [
           {
@@ -86,7 +84,6 @@ describe('EuiBasicTable', () => {
 
   test('items are rendered with custom props', () => {
     const props = {
-      ...requiredProps,
       items: [
         {
           id: '1',
@@ -143,9 +140,7 @@ describe('EuiBasicTable', () => {
   });
 
   test('with pagination', () => {
-
     const props = {
-      ...requiredProps,
       items: [
         { id: '1', name: 'name1' },
         { id: '2', name: 'name2' },
@@ -173,9 +168,7 @@ describe('EuiBasicTable', () => {
   });
 
   test('with pagination - 2nd page', () => {
-
     const props = {
-      ...requiredProps,
       items: [
         { id: '1', name: 'name1' },
         { id: '2', name: 'name2' },
@@ -202,9 +195,7 @@ describe('EuiBasicTable', () => {
   });
 
   test('with pagination and error', () => {
-
     const props = {
-      ...requiredProps,
       items: [
         { id: '1', name: 'name1' },
         { id: '2', name: 'name2' },
@@ -233,9 +224,7 @@ describe('EuiBasicTable', () => {
   });
 
   test('with sorting', () => {
-
     const props = {
-      ...requiredProps,
       items: [
         { id: '1', name: 'name1' },
         { id: '2', name: 'name2' },
@@ -262,9 +251,7 @@ describe('EuiBasicTable', () => {
   });
 
   test('with sortable columns and sorting disabled', () => {
-
     const props = {
-      ...requiredProps,
       items: [
         { id: '1', name: 'name1' },
         { id: '2', name: 'name2' },
@@ -288,9 +275,7 @@ describe('EuiBasicTable', () => {
   });
 
   test('with pagination and selection', () => {
-
     const props = {
-      ...requiredProps,
       items: [
         { id: '1', name: 'name1' },
         { id: '2', name: 'name2' },
@@ -322,9 +307,7 @@ describe('EuiBasicTable', () => {
   });
 
   test('with pagination, selection and sorting', () => {
-
     const props = {
-      ...requiredProps,
       items: [
         { id: '1', name: 'name1' },
         { id: '2', name: 'name2' },
@@ -360,9 +343,7 @@ describe('EuiBasicTable', () => {
   });
 
   test('with pagination, selection, sorting and column renderer', () => {
-
     const props = {
-      ...requiredProps,
       items: [
         { id: '1', name: 'name1' },
         { id: '2', name: 'name2' },
@@ -399,9 +380,7 @@ describe('EuiBasicTable', () => {
   });
 
   test('with pagination, selection, sorting and column dataType', () => {
-
     const props = {
-      ...requiredProps,
       items: [
         { id: '1', count: 1 },
         { id: '2', count: 2 },
@@ -439,9 +418,7 @@ describe('EuiBasicTable', () => {
 
   // here we want to verify that the column renderer takes precedence over the column data type
   test('with pagination, selection, sorting, column renderer and column dataType', () => {
-
     const props = {
-      ...requiredProps,
       items: [
         { id: '1', count: 1 },
         { id: '2', count: 2 },
@@ -479,9 +456,7 @@ describe('EuiBasicTable', () => {
   });
 
   test('with pagination, selection, sorting and a single record action', () => {
-
     const props = {
-      ...requiredProps,
       items: [
         { id: '1', name: 'name1' },
         { id: '2', name: 'name2' },
@@ -528,9 +503,7 @@ describe('EuiBasicTable', () => {
   });
 
   test('with pagination, selection, sorting and multiple record actions', () => {
-
     const props = {
-      ...requiredProps,
       items: [
         { id: '1', name: 'name1' },
         { id: '2', name: 'name2' },

From 59808c4167684c0a024c0bc99b999e1c8d659132 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 23 May 2018 16:28:59 -0700
Subject: [PATCH 3/6] Update CHANGELOG.

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5823fba4237..4dfed3b3211 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`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 let you define a `__props__` object on each row item,
+which lets you apply custom props to each row component ([#869](https://github.com/elastic/eui/pull/869))
 
 **Breaking changes**
 

From ce78c63e7ca9ef5a10ce315fcc8b38dcc23e38c3 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 24 May 2018 16:53:06 -0700
Subject: [PATCH 4/6] Add rowProps and cellProps props. Apply pass-through cell
 props directly to the td element instead of the child div.

---
 CHANGELOG.md                                  |   5 +-
 src-docs/src/views/tables/basic/basic.js      |  27 +-
 .../src/views/tables/basic/basic_section.js   |   9 +-
 .../__snapshots__/basic_table.test.js.snap    | 254 +++++++++++++++++-
 src/components/basic_table/basic_table.js     |  57 +++-
 .../basic_table/basic_table.test.js           | 153 ++++++++---
 .../__snapshots__/table_row_cell.test.js.snap |   4 +-
 src/components/table/table_row_cell.js        |   4 +-
 8 files changed, 449 insertions(+), 64 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4dfed3b3211..545100d7b94 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,14 +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 let you define a `__props__` object on each row item,
-which lets you apply custom props to each row component ([#869](https://github.com/elastic/eui/pull/869))
+- `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**
 
diff --git a/src-docs/src/views/tables/basic/basic.js b/src-docs/src/views/tables/basic/basic.js
index ba76e3399e6..ca6f08f0c8d 100644
--- a/src-docs/src/views/tables/basic/basic.js
+++ b/src-docs/src/views/tables/basic/basic.js
@@ -80,22 +80,31 @@ export const Table = () => {
     }
   }];
 
-  const items = store.users.filter((user, index) => index < 10).map(user => {
-    const { id } = user;
+  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, columnIndex) => {
+    const { id } = item;
     return {
-      ...user,
-      __props__: {
-        'data-test-subj': `row-${id}`,
-        className: 'customClass',
-        onClick: () => console.log(`Clicked row ${id}`),
-      },
+      className: 'customCellClass',
+      'data-test-subj': `cell-${id}-${columnIndex}`,
     };
-  });
+  };
 
   return (
     <EuiBasicTable
       items={items}
       columns={columns}
+      rowProps={getRowProps}
+      cellProps={getCellProps}
     />
   );
 };
diff --git a/src-docs/src/views/tables/basic/basic_section.js b/src-docs/src/views/tables/basic/basic_section.js
index 419cbfa3ec0..4221067205b 100644
--- a/src-docs/src/views/tables/basic/basic_section.js
+++ b/src-docs/src/views/tables/basic/basic_section.js
@@ -31,10 +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. You can define a <EuiCode>__props__</EuiCode> property on each item
-          object to define props to pass to the corresponding row component. 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
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
index 82553b8be8b..e3c98dd8fe4 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -1,5 +1,169 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiBasicTable cellProps renders cells with custom props from a callback 1`] = `
+<div
+  className="euiBasicTable"
+>
+  <div>
+    <EuiTableHeaderMobile />
+    <EuiTable
+      responsive={true}
+    >
+      <EuiTableHeader>
+        <EuiTableHeaderCell
+          align="left"
+          key="_data_h_name_0"
+          scope="col"
+        >
+          Name
+        </EuiTableHeaderCell>
+      </EuiTableHeader>
+      <EuiTableBody>
+        <React.Fragment
+          key="row_0"
+        >
+          <EuiTableRow
+            isSelected={false}
+          >
+            <EuiTableRowCell
+              align="left"
+              className="customRowClass"
+              data-test-subj="cell-1-0-name"
+              header="Name"
+              key="_data_column_name_0_0"
+              onClick={[Function]}
+              textOnly={true}
+            >
+              name1
+            </EuiTableRowCell>
+          </EuiTableRow>
+        </React.Fragment>
+        <React.Fragment
+          key="row_1"
+        >
+          <EuiTableRow
+            isSelected={false}
+          >
+            <EuiTableRowCell
+              align="left"
+              className="customRowClass"
+              data-test-subj="cell-2-0-name"
+              header="Name"
+              key="_data_column_name_1_0"
+              onClick={[Function]}
+              textOnly={true}
+            >
+              name2
+            </EuiTableRowCell>
+          </EuiTableRow>
+        </React.Fragment>
+        <React.Fragment
+          key="row_2"
+        >
+          <EuiTableRow
+            isSelected={false}
+          >
+            <EuiTableRowCell
+              align="left"
+              className="customRowClass"
+              data-test-subj="cell-3-0-name"
+              header="Name"
+              key="_data_column_name_2_0"
+              onClick={[Function]}
+              textOnly={true}
+            >
+              name3
+            </EuiTableRowCell>
+          </EuiTableRow>
+        </React.Fragment>
+      </EuiTableBody>
+    </EuiTable>
+  </div>
+</div>
+`;
+
+exports[`EuiBasicTable cellProps renders rows with custom props from an object 1`] = `
+<div
+  className="euiBasicTable"
+>
+  <div>
+    <EuiTableHeaderMobile />
+    <EuiTable
+      responsive={true}
+    >
+      <EuiTableHeader>
+        <EuiTableHeaderCell
+          align="left"
+          key="_data_h_name_0"
+          scope="col"
+        >
+          Name
+        </EuiTableHeaderCell>
+      </EuiTableHeader>
+      <EuiTableBody>
+        <React.Fragment
+          key="row_0"
+        >
+          <EuiTableRow
+            isSelected={false}
+          >
+            <EuiTableRowCell
+              align="left"
+              className="customClass"
+              data-test-subj="cell"
+              header="Name"
+              key="_data_column_name_0_0"
+              onClick={[Function]}
+              textOnly={true}
+            >
+              name1
+            </EuiTableRowCell>
+          </EuiTableRow>
+        </React.Fragment>
+        <React.Fragment
+          key="row_1"
+        >
+          <EuiTableRow
+            isSelected={false}
+          >
+            <EuiTableRowCell
+              align="left"
+              className="customClass"
+              data-test-subj="cell"
+              header="Name"
+              key="_data_column_name_1_0"
+              onClick={[Function]}
+              textOnly={true}
+            >
+              name2
+            </EuiTableRowCell>
+          </EuiTableRow>
+        </React.Fragment>
+        <React.Fragment
+          key="row_2"
+        >
+          <EuiTableRow
+            isSelected={false}
+          >
+            <EuiTableRowCell
+              align="left"
+              className="customClass"
+              data-test-subj="cell"
+              header="Name"
+              key="_data_column_name_2_0"
+              onClick={[Function]}
+              textOnly={true}
+            >
+              name3
+            </EuiTableRowCell>
+          </EuiTableRow>
+        </React.Fragment>
+      </EuiTableBody>
+    </EuiTable>
+  </div>
+</div>
+`;
+
 exports[`EuiBasicTable empty is rendered 1`] = `
 <div
   aria-label="aria-label"
@@ -203,7 +367,89 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
 </div>
 `;
 
-exports[`EuiBasicTable items are rendered with custom props 1`] = `
+exports[`EuiBasicTable rowProps renders rows with custom props from a callback 1`] = `
+<div
+  className="euiBasicTable"
+>
+  <div>
+    <EuiTableHeaderMobile />
+    <EuiTable
+      responsive={true}
+    >
+      <EuiTableHeader>
+        <EuiTableHeaderCell
+          align="left"
+          key="_data_h_name_0"
+          scope="col"
+        >
+          Name
+        </EuiTableHeaderCell>
+      </EuiTableHeader>
+      <EuiTableBody>
+        <React.Fragment
+          key="row_0"
+        >
+          <EuiTableRow
+            className="customRowClass"
+            data-test-subj="row-1"
+            isSelected={false}
+            onClick={[Function]}
+          >
+            <EuiTableRowCell
+              align="left"
+              header="Name"
+              key="_data_column_name_0_0"
+              textOnly={true}
+            >
+              name1
+            </EuiTableRowCell>
+          </EuiTableRow>
+        </React.Fragment>
+        <React.Fragment
+          key="row_1"
+        >
+          <EuiTableRow
+            className="customRowClass"
+            data-test-subj="row-2"
+            isSelected={false}
+            onClick={[Function]}
+          >
+            <EuiTableRowCell
+              align="left"
+              header="Name"
+              key="_data_column_name_1_0"
+              textOnly={true}
+            >
+              name2
+            </EuiTableRowCell>
+          </EuiTableRow>
+        </React.Fragment>
+        <React.Fragment
+          key="row_2"
+        >
+          <EuiTableRow
+            className="customRowClass"
+            data-test-subj="row-3"
+            isSelected={false}
+            onClick={[Function]}
+          >
+            <EuiTableRowCell
+              align="left"
+              header="Name"
+              key="_data_column_name_2_0"
+              textOnly={true}
+            >
+              name3
+            </EuiTableRowCell>
+          </EuiTableRow>
+        </React.Fragment>
+      </EuiTableBody>
+    </EuiTable>
+  </div>
+</div>
+`;
+
+exports[`EuiBasicTable rowProps renders rows with custom props from an object 1`] = `
 <div
   className="euiBasicTable"
 >
@@ -245,7 +491,10 @@ exports[`EuiBasicTable items are rendered with custom props 1`] = `
           key="row_1"
         >
           <EuiTableRow
+            className="customClass"
+            data-test-subj="row"
             isSelected={false}
+            onClick={[Function]}
           >
             <EuiTableRowCell
               align="left"
@@ -261,7 +510,10 @@ exports[`EuiBasicTable items are rendered with custom props 1`] = `
           key="row_2"
         >
           <EuiTableRow
+            className="customClass"
+            data-test-subj="row"
             isSelected={false}
+            onClick={[Function]}
           >
             <EuiTableRowCell
               align="left"
diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
index 9918d8570ad..2f287795a01 100644
--- a/src/components/basic_table/basic_table.js
+++ b/src/components/basic_table/basic_table.js
@@ -118,7 +118,7 @@ export const ItemIdType = PropTypes.oneOfType([
 ]);
 
 export const SelectionType = PropTypes.shape({
-  onSelectionChange: PropTypes.func, // (selection: Record[]) => void;,
+  onSelectionChange: PropTypes.func, // (selection: item[]) => void;,
   selectable: PropTypes.func, // (item) => boolean;
   selectableMessage: PropTypes.func // (selectable, item) => boolean;
 });
@@ -144,11 +144,12 @@ const BasicTablePropTypes = {
   responsive: PropTypes.bool,
   isSelectable: PropTypes.bool,
   isExpandable: PropTypes.bool,
-  hasActions: PropTypes.bool
+  hasActions: PropTypes.bool,
+  rowProps: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  cellProps: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };
 
-export function getItemId(item, props) {
-  const { itemId } = props;
+export function getItemId(item, itemId) {
   if (itemId) {
     if (isFunction(itemId)) {
       return itemId(item);
@@ -157,8 +158,29 @@ export function getItemId(item, props) {
   }
 }
 
-export class EuiBasicTable extends Component {
+function getRowProps(item, rowProps) {
+  if (rowProps) {
+    if (isFunction(rowProps)) {
+      return rowProps(item);
+    }
+    return rowProps;
+  }
 
+  return {};
+}
+
+function getCellProps(item, column, columnIndex, cellProps) {
+  if (cellProps) {
+    if (isFunction(cellProps)) {
+      return cellProps(item, column, columnIndex);
+    }
+    return cellProps;
+  }
+
+  return {};
+}
+
+export class EuiBasicTable extends Component {
   static propTypes = BasicTablePropTypes;
   static defaultProps = {
     responsive: true,
@@ -171,8 +193,9 @@ export class EuiBasicTable extends Component {
       return { selection: [] };
     }
 
+    const { itemId } = nextProps;
     const selection = prevState.selection.filter(selectedItem => (
-      nextProps.items.findIndex(item => getItemId(item, nextProps) === getItemId(selectedItem, nextProps)) !== -1
+      nextProps.items.findIndex(item => getItemId(item, itemId) === getItemId(selectedItem, itemId)) !== -1
     ));
 
     return { selection };
@@ -280,6 +303,8 @@ export class EuiBasicTable extends Component {
       isSelectable, // eslint-disable-line no-unused-vars
       isExpandable, // eslint-disable-line no-unused-vars
       hasActions, // eslint-disable-line no-unused-vars
+      rowProps, // eslint-disable-line no-unused-vars
+      cellProps, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 
@@ -495,9 +520,10 @@ export class EuiBasicTable extends Component {
 
     const cells = [];
 
-    const itemId = getItemId(item, this.props) || rowIndex;
-    const selected = !selection ? false : this.state.selection && !!this.state.selection.find(selectedRecord => (
-      getItemId(selectedRecord, this.props) === itemId
+    const { itemId: itemIdCallback } = this.props;
+    const itemId = getItemId(item, itemIdCallback) || rowIndex;
+    const selected = !selection ? false : this.state.selection && !!this.state.selection.find(selectedItem => (
+      getItemId(selectedItem, itemIdCallback) === itemId
     ));
 
     if (selection) {
@@ -534,7 +560,8 @@ export class EuiBasicTable extends Component {
       </EuiTableRow>
     ) : undefined;
 
-    const { __props__: customRowProps } = item;
+    const { rowProps: rowPropsCallback } = this.props;
+    const rowProps = getRowProps(item, rowPropsCallback);
 
     return (
       <Fragment key={`row_${itemId}`}>
@@ -544,7 +571,7 @@ export class EuiBasicTable extends Component {
           isSelected={selected}
           hasActions={hasActions}
           isExpandable={isExpandable}
-          {...customRowProps}
+          {...rowProps}
         >
           {cells}
         </EuiTableRow>
@@ -563,8 +590,9 @@ export class EuiBasicTable extends Component {
       if (event.target.checked) {
         this.changeSelection([...this.state.selection, item]);
       } else {
+        const { itemId: itemIdCallback } = this.props;
         this.changeSelection(this.state.selection.reduce((selection, selectedItem) => {
-          if (getItemId(selectedItem, this.props) !== itemId) {
+          if (getItemId(selectedItem, itemIdCallback) !== itemId) {
             selection.push(selectedItem);
           }
           return selection;
@@ -651,6 +679,10 @@ export class EuiBasicTable extends Component {
     const value = get(item, field);
     const contentRenderer = this.resolveContentRenderer(column);
     const content = contentRenderer(value, item);
+
+    const { cellProps: cellPropsCallback } = this.props;
+    const cellProps = getCellProps(item, column, columnIndex, cellPropsCallback);
+
     return (
       <EuiTableRowCell
         key={key}
@@ -658,6 +690,7 @@ export class EuiBasicTable extends Component {
         header={column.name}
         // If there's no render function defined then we're only going to render text.
         textOnly={textOnly || !render}
+        {...cellProps}
         {...rest}
       >
         {content}
diff --git a/src/components/basic_table/basic_table.test.js b/src/components/basic_table/basic_table.test.js
index cfd754b45ed..c89f0bb86fe 100644
--- a/src/components/basic_table/basic_table.test.js
+++ b/src/components/basic_table/basic_table.test.js
@@ -6,19 +6,19 @@ import { EuiBasicTable, getItemId } from './basic_table';
 
 describe('getItemId', () => {
   it('returns undefined if no itemId prop is given', () => {
-    expect(getItemId({ id: 5 }, {})).toBeUndefined();
-    expect(getItemId({ itemId: 5 }, {})).toBeUndefined();
-    expect(getItemId({ _itemId: 5 }, {})).toBeUndefined();
+    expect(getItemId({ id: 5 })).toBeUndefined();
+    expect(getItemId({ itemId: 5 })).toBeUndefined();
+    expect(getItemId({ _itemId: 5 })).toBeUndefined();
   });
 
   it('returns the correct id when a string itemId is given', () => {
-    expect(getItemId({ id: 5 }, { itemId: 'id' })).toBe(5);
-    expect(getItemId({ thing: '5' }, { itemId: 'thing' })).toBe('5');
+    expect(getItemId({ id: 5 }, 'id')).toBe(5);
+    expect(getItemId({ thing: '5' }, 'thing')).toBe('5');
   });
 
   it('returns the correct id when a function itemId is given', () => {
-    expect(getItemId({ id: 5 }, { itemId: () => 6 })).toBe(6);
-    expect(getItemId({ x: 2, y: 4 }, { itemId: ({ x, y }) => x * y })).toBe(8);
+    expect(getItemId({ id: 5 }, () => 6)).toBe(6);
+    expect(getItemId({ x: 2, y: 4 }, ({ x, y }) => x * y)).toBe(8);
   });
 });
 
@@ -82,34 +82,123 @@ describe('EuiBasicTable', () => {
     });
   });
 
-  test('items are rendered with custom props', () => {
-    const props = {
-      items: [
-        {
-          id: '1',
-          name: 'name1',
-          __props__: {
-            'data-test-subj': `row`,
-            className: 'customClass',
+  describe('rowProps', () => {
+    test('renders rows with custom props from a callback', () => {
+      const props = {
+        items: [
+          { id: '1', name: 'name1' },
+          { id: '2', name: 'name2' },
+          { id: '3', name: 'name3' }
+        ],
+        columns: [
+          {
+            field: 'name',
+            name: 'Name',
+            description: 'description'
+          }
+        ],
+        rowProps: (item) => {
+          const { id } = item;
+          return {
+            'data-test-subj': `row-${id}`,
+            className: 'customRowClass',
             onClick: () => {},
-          },
+          };
         },
-        { id: '2', name: 'name2' },
-        { id: '3', name: 'name3' }
-      ],
-      columns: [
-        {
-          field: 'name',
-          name: 'Name',
-          description: 'description'
-        }
-      ]
-    };
-    const component = shallow(
-      <EuiBasicTable {...props} />
-    );
+      };
+      const component = shallow(
+        <EuiBasicTable {...props} />
+      );
 
-    expect(component).toMatchSnapshot();
+      expect(component).toMatchSnapshot();
+    });
+
+    test('renders rows with custom props from an object', () => {
+      const props = {
+        items: [
+          { id: '1', name: 'name1' },
+          { id: '2', name: 'name2' },
+          { id: '3', name: 'name3' }
+        ],
+        columns: [
+          {
+            field: 'name',
+            name: 'Name',
+            description: 'description'
+          }
+        ],
+        rowProps: {
+          'data-test-subj': `row`,
+          className: 'customClass',
+          onClick: () => {},
+        },
+      };
+      const component = shallow(
+        <EuiBasicTable {...props} />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  describe('cellProps', () => {
+    test('renders cells with custom props from a callback', () => {
+      const props = {
+        items: [
+          { id: '1', name: 'name1' },
+          { id: '2', name: 'name2' },
+          { id: '3', name: 'name3' }
+        ],
+        columns: [
+          {
+            field: 'name',
+            name: 'Name',
+            description: 'description'
+          }
+        ],
+        cellProps: (item, column, columnIndex) => {
+          const { id } = item;
+          const { field } = column;
+          return {
+            'data-test-subj': `cell-${id}-${columnIndex}-${field}`,
+            className: 'customRowClass',
+            onClick: () => {},
+          };
+        },
+      };
+      const component = shallow(
+        <EuiBasicTable {...props} />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('renders rows with custom props from an object', () => {
+      const props = {
+        items: [
+          { id: '1', name: 'name1' },
+          { id: '2', name: 'name2' },
+          { id: '3', name: 'name3' }
+        ],
+        columns: [
+          {
+            field: 'name',
+            name: 'Name',
+            description: 'description'
+          }
+        ],
+        cellProps: {
+          'data-test-subj': `cell`,
+          className: 'customClass',
+          onClick: () => {},
+        },
+      };
+      const component = shallow(
+        <EuiBasicTable {...props} />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
   });
 
   test('itemIdToExpandedRowMap renders an expanded row', () => {
diff --git a/src/components/table/__snapshots__/table_row_cell.test.js.snap b/src/components/table/__snapshots__/table_row_cell.test.js.snap
index d77cae1ddfb..e7b5428c554 100644
--- a/src/components/table/__snapshots__/table_row_cell.test.js.snap
+++ b/src/components/table/__snapshots__/table_row_cell.test.js.snap
@@ -58,12 +58,12 @@ exports[`children's className merges new classnames into existing ones 1`] = `
 
 exports[`renders EuiTableRowCell 1`] = `
 <td
+  aria-label="aria-label"
   class="euiTableRowCell"
+  data-test-subj="test subject string"
 >
   <div
-    aria-label="aria-label"
     class="euiTableCellContent testClass1 testClass2"
-    data-test-subj="test subject string"
   >
     <span
       class="euiTableCellContent__text"
diff --git a/src/components/table/table_row_cell.js b/src/components/table/table_row_cell.js
index 4a7d8271b49..81ccce1ac01 100644
--- a/src/components/table/table_row_cell.js
+++ b/src/components/table/table_row_cell.js
@@ -68,8 +68,8 @@ export const EuiTableRowCell = ({
   }
 
   return (
-    <td className={cellClasses} colSpan={colSpan} data-header={header}>
-      <div className={contentClasses} {...rest}>
+    <td className={cellClasses} colSpan={colSpan} data-header={header} {...rest}>
+      <div className={contentClasses}>
         {modifiedChildren}
       </div>
     </td>

From 26e357cf29f899a17002d75424ab6c4db8b521c0 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 25 May 2018 09:11:55 -0700
Subject: [PATCH 5/6] Remove columnIndex from cellProps callback.

---
 src-docs/src/views/tables/basic/basic.js                    | 5 +++--
 .../basic_table/__snapshots__/basic_table.test.js.snap      | 6 +++---
 src/components/basic_table/basic_table.js                   | 6 +++---
 src/components/basic_table/basic_table.test.js              | 4 ++--
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src-docs/src/views/tables/basic/basic.js b/src-docs/src/views/tables/basic/basic.js
index ca6f08f0c8d..dbe7c930fd0 100644
--- a/src-docs/src/views/tables/basic/basic.js
+++ b/src-docs/src/views/tables/basic/basic.js
@@ -91,11 +91,12 @@ export const Table = () => {
     };
   };
 
-  const getCellProps = (item, column, columnIndex) => {
+  const getCellProps = (item, column) => {
     const { id } = item;
+    const { field } = column;
     return {
       className: 'customCellClass',
-      'data-test-subj': `cell-${id}-${columnIndex}`,
+      'data-test-subj': `cell-${id}-${field}`,
     };
   };
 
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
index e3c98dd8fe4..b6e91edcfa2 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -28,7 +28,7 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback
             <EuiTableRowCell
               align="left"
               className="customRowClass"
-              data-test-subj="cell-1-0-name"
+              data-test-subj="cell-1-name"
               header="Name"
               key="_data_column_name_0_0"
               onClick={[Function]}
@@ -47,7 +47,7 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback
             <EuiTableRowCell
               align="left"
               className="customRowClass"
-              data-test-subj="cell-2-0-name"
+              data-test-subj="cell-2-name"
               header="Name"
               key="_data_column_name_1_0"
               onClick={[Function]}
@@ -66,7 +66,7 @@ exports[`EuiBasicTable cellProps renders cells with custom props from a callback
             <EuiTableRowCell
               align="left"
               className="customRowClass"
-              data-test-subj="cell-3-0-name"
+              data-test-subj="cell-3-name"
               header="Name"
               key="_data_column_name_2_0"
               onClick={[Function]}
diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
index 2f287795a01..50d0d355ba2 100644
--- a/src/components/basic_table/basic_table.js
+++ b/src/components/basic_table/basic_table.js
@@ -169,10 +169,10 @@ function getRowProps(item, rowProps) {
   return {};
 }
 
-function getCellProps(item, column, columnIndex, cellProps) {
+function getCellProps(item, column, cellProps) {
   if (cellProps) {
     if (isFunction(cellProps)) {
-      return cellProps(item, column, columnIndex);
+      return cellProps(item, column);
     }
     return cellProps;
   }
@@ -681,7 +681,7 @@ export class EuiBasicTable extends Component {
     const content = contentRenderer(value, item);
 
     const { cellProps: cellPropsCallback } = this.props;
-    const cellProps = getCellProps(item, column, columnIndex, cellPropsCallback);
+    const cellProps = getCellProps(item, column, cellPropsCallback);
 
     return (
       <EuiTableRowCell
diff --git a/src/components/basic_table/basic_table.test.js b/src/components/basic_table/basic_table.test.js
index c89f0bb86fe..6a87659d311 100644
--- a/src/components/basic_table/basic_table.test.js
+++ b/src/components/basic_table/basic_table.test.js
@@ -156,11 +156,11 @@ describe('EuiBasicTable', () => {
             description: 'description'
           }
         ],
-        cellProps: (item, column, columnIndex) => {
+        cellProps: (item, column) => {
           const { id } = item;
           const { field } = column;
           return {
-            'data-test-subj': `cell-${id}-${columnIndex}-${field}`,
+            'data-test-subj': `cell-${id}-${field}`,
             className: 'customRowClass',
             onClick: () => {},
           };

From ed982f455aa5240910b70d87e2ebad82de755210 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 25 May 2018 09:21:03 -0700
Subject: [PATCH 6/6] Add rowProps and cellProps to EuiInMemoryTable.

---
 src/components/basic_table/in_memory_table.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/basic_table/in_memory_table.js b/src/components/basic_table/in_memory_table.js
index 04d9a8243e2..8daf220dfbb 100644
--- a/src/components/basic_table/in_memory_table.js
+++ b/src/components/basic_table/in_memory_table.js
@@ -56,7 +56,9 @@ const InMemoryTablePropTypes = {
     })
   ]),
   selection: SelectionType,
-  itemId: ItemIdType
+  itemId: ItemIdType,
+  rowProps: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  cellProps: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };
 
 const getInitialQuery = (search) => {
@@ -271,6 +273,8 @@ export class EuiInMemoryTable extends Component {
       sorting: hasSorting,
       itemIdToExpandedRowMap,
       itemId,
+      rowProps,
+      cellProps,
       items: _unuseditems, // eslint-disable-line no-unused-vars
       search, // eslint-disable-line no-unused-vars
       ...rest
@@ -310,6 +314,8 @@ export class EuiInMemoryTable extends Component {
       <EuiBasicTable
         items={items}
         itemId={itemId}
+        rowProps={rowProps}
+        cellProps={cellProps}
         columns={columns}
         pagination={pagination}
         sorting={sorting}