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