From f5d202f52201e3809d5e67f6efa8b18f4f7f2ddc Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 25 May 2018 10:51:45 -0700 Subject: [PATCH] Add support for custom props for rows in EuiBasicTable and EuiInMemoryTable. (#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 | 3 + src-docs/src/views/tables/basic/basic.js | 24 +- .../src/views/tables/basic/basic_section.js | 7 +- src-docs/src/views/tables/data_store.js | 2 +- .../__snapshots__/basic_table.test.js.snap | 363 ++++++++++++++---- src/components/basic_table/basic_table.js | 56 ++- .../basic_table/basic_table.test.js | 287 ++++++++------ src/components/basic_table/in_memory_table.js | 8 +- .../__snapshots__/table_row_cell.test.js.snap | 4 +- src/components/table/table_row_cell.js | 4 +- 10 files changed, 560 insertions(+), 198 deletions(-) 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 = {