diff --git a/CHANGELOG.md b/CHANGELOG.md index 27b76c1db44..75bc56c2962 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added `childrenBetween` prop to `EuiInMemoryTable` to add content between search bar and table ([#4103](https://github.com/elastic/eui/pull/4103)) - Added `max-width: 100%` to `EuiKeyPadMenu` to allow it to shrink when its container is smaller than its fixed width ([ #4092](https://github.com/elastic/eui/pull/4092)) - Changed `EuiIcon` test mock to render as `span` instead of `div` ([#4099](https://github.com/elastic/eui/pull/4099)) - Added `scripts/docker-puppeteer` as the new home for test-related Docker images ([#4062](https://github.com/elastic/eui/pull/4062)) diff --git a/src-docs/src/views/tables/in_memory/in_memory_search.js b/src-docs/src/views/tables/in_memory/in_memory_search.js index 0df220ad5eb..f00590a281f 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_search.js +++ b/src-docs/src/views/tables/in_memory/in_memory_search.js @@ -9,6 +9,8 @@ import { EuiSwitch, EuiFlexGroup, EuiFlexItem, + EuiText, + EuiCode, } from '../../../../../src/components'; /* @@ -38,6 +40,7 @@ const store = createDataStore(); export const Table = () => { const [incremental, setIncremental] = useState(false); const [filters, setFilters] = useState(false); + const [contentBetween, setContentBetween] = useState(false); const columns = [ { @@ -132,6 +135,13 @@ export const Table = () => { onChange={() => setFilters(!filters)} /> + + setContentBetween(!contentBetween)} + /> + { search={search} pagination={true} sorting={true} + childrenBetween={ + contentBetween && ( + + You can inject custom content between the search bar and the table + using childrenBetween. + + ) + } /> ); diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap index 4be0d7d09a0..b2318573311 100644 --- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap @@ -2148,3 +2148,66 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and configured sea /> `; + +exports[`EuiInMemoryTable with search and component between search and table 1`] = ` + + + + + Children Between + + + + +`; diff --git a/src/components/basic_table/in_memory_table.test.tsx b/src/components/basic_table/in_memory_table.test.tsx index 00e90ce12ab..8622f5501a0 100644 --- a/src/components/basic_table/in_memory_table.test.tsx +++ b/src/components/basic_table/in_memory_table.test.tsx @@ -667,6 +667,41 @@ describe('EuiInMemoryTable', () => { expect(component).toMatchSnapshot(); }); + test('with search and component between search and table', () => { + const props: EuiInMemoryTableProps = { + ...requiredProps, + items: [ + { id: '1', name: 'name1' }, + { id: '2', name: 'name2' }, + { id: '3', name: 'name3' }, + ], + itemId: 'id', + columns: [ + { + field: 'name', + name: 'Name', + description: 'description', + sortable: true, + }, + { + name: 'Actions', + actions: [ + { + name: 'Edit', + description: 'edit', + onClick: () => undefined, + }, + ], + }, + ], + search: true, + childrenBetween: Children Between, + }; + const component = shallow(); + + expect(component).toMatchSnapshot(); + }); + test('with pagination, selection, sorting and configured search', () => { const props: EuiInMemoryTableProps = { ...requiredProps, diff --git a/src/components/basic_table/in_memory_table.tsx b/src/components/basic_table/in_memory_table.tsx index 2c7f7ab5d41..37874efe6df 100644 --- a/src/components/basic_table/in_memory_table.tsx +++ b/src/components/basic_table/in_memory_table.tsx @@ -92,6 +92,10 @@ type InMemoryTableProps = Omit< isClauseMatcher?: (...args: any) => boolean; explain?: boolean; }; + /** + * Insert content between the search bar and table components. + */ + childrenBetween?: ReactNode; }; type InMemoryTablePropsWithPagination = Omit< @@ -604,6 +608,7 @@ export class EuiInMemoryTable extends Component< onTableChange, executeQueryOptions, allowNeutralSort, + childrenBetween, ...rest } = this.props; @@ -678,6 +683,8 @@ export class EuiInMemoryTable extends Component< return ( {searchBar} + {childrenBetween != null ? : null} + {childrenBetween} {table}