diff --git a/CHANGELOG.md b/CHANGELOG.md index 5823fba4237..545100d7b94 100644 --- a/CHANGELOG.md +++ b/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** diff --git a/src-docs/src/views/tables/basic/basic.js b/src-docs/src/views/tables/basic/basic.js index 7c87de57b45..dbe7c930fd0 100644 --- a/src-docs/src/views/tables/basic/basic.js +++ b/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 ( index < 10)} + 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 166659ed0c2..4221067205b 100644 --- a/src-docs/src/views/tables/basic/basic_section.js +++ b/src-docs/src/views/tables/basic/basic_section.js @@ -31,8 +31,11 @@ export const section = {