Add support for custom props for rows in EuiBasicTable and EuiInMemoryTable.

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,
  };
  });
 };