Add rowProps and cellProps props. Apply pass-through cell props direc…

…tly to the td element instead of the child div.
elastic · May 25, 2018 · bbbe378 · bbbe378
1 parent 1de0f49
commit bbbe378
Show file tree

Hide file tree

Showing 8 changed files with 451 additions and 64 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,12 +1,15 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-- `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))
+- `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
@@ -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
@@ -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
@@ -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"