diff --git a/CHANGELOG.md b/CHANGELOG.md index e1451858e10..cc4417040b0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added `isLoading` prop and added `EuiOverlayMask` directly to `EuiConfirmModal` ([#4421](https://github.com/elastic/eui/pull/4421)) +- Added `wrapWithTableRow` to remove `` in `EuiTableHeader`([#4465](https://github.com/elastic/eui/pull/4465)) **Bug fixes** diff --git a/src/components/table/__snapshots__/table_header.test.tsx.snap b/src/components/table/__snapshots__/table_header.test.tsx.snap index 09b2da1459f..7782a62baa5 100644 --- a/src/components/table/__snapshots__/table_header.test.tsx.snap +++ b/src/components/table/__snapshots__/table_header.test.tsx.snap @@ -1,14 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiTableHeader is rendered 1`] = ` -Array [ - - - , - "children", -] + + + + children + + + +`; + +exports[`EuiTableHeader is rendered without 1`] = ` + + + + children + + + `; diff --git a/src/components/table/table_header.test.tsx b/src/components/table/table_header.test.tsx index 68382989e7b..8cb859977b9 100644 --- a/src/components/table/table_header.test.tsx +++ b/src/components/table/table_header.test.tsx @@ -25,10 +25,22 @@ import { EuiTableHeader } from './table_header'; describe('EuiTableHeader', () => { test('is rendered', () => { - const component = render( - children + const component = ( + + children + ); + expect(render(component)).toMatchSnapshot(); + }); - expect(component).toMatchSnapshot(); + test('is rendered without ', () => { + const component = ( + + + children + + + ); + expect(render(component)).toMatchSnapshot(); }); }); diff --git a/src/components/table/table_header.tsx b/src/components/table/table_header.tsx index 6c039a6bc4f..331a3473702 100644 --- a/src/components/table/table_header.tsx +++ b/src/components/table/table_header.tsx @@ -17,17 +17,31 @@ * under the License. */ -import React, { FunctionComponent } from 'react'; +import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react'; import { CommonProps } from '../common'; -export const EuiTableHeader: FunctionComponent = ({ +export type EuiTableHeaderProps = CommonProps & + HTMLAttributes & { + /** + * Children must be valid DOM structure residing within ``. + * Use ` | ` by default, or `` when `wrapWithTableRow=false` + */ + children?: ReactNode; + /** + * Automatically adds a wrapping `` element around the children + */ + wrapWithTableRow?: boolean; + }; + +export const EuiTableHeader: FunctionComponent = ({ children, className, + wrapWithTableRow = true, ...rest }) => { return ( - {children} + {wrapWithTableRow ? {children} : children} ); };