[EuiTableHeader] Add prop to remove <tr>

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 `<tr>` in `EuiTableHeader`([#4465](https://github.com/elastic/eui/pull/4465))
 
 **Bug fixes**
 

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 [
-  <thead
-    aria-label="aria-label"
-    class="testClass1 testClass2"
-    data-test-subj="test subject string"
-  >
-    <tr />
-  </thead>,
-  "children",
-]
+<thead
+  aria-label="aria-label"
+  class="testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <tr>
+    <td>
+      children
+    </td>
+  </tr>
+</thead>
+`;
+
+exports[`EuiTableHeader is rendered without <tr> 1`] = `
+<thead>
+  <tr>
+    <td>
+      children
+    </td>
+  </tr>
+</thead>
 `;

src/components/table/table_header.test.tsx

@@ -25,10 +25,22 @@ import { EuiTableHeader } from './table_header';
 
 describe('EuiTableHeader', () => {
   test('is rendered', () => {
-    const component = render(
-      <EuiTableHeader {...requiredProps}>children</EuiTableHeader>
+    const component = (
+      <EuiTableHeader {...requiredProps}>
+        <td>children</td>
+      </EuiTableHeader>
     );
+    expect(render(component)).toMatchSnapshot();
+  });
 
-    expect(component).toMatchSnapshot();
+  test('is rendered without <tr>', () => {
+    const component = (
+      <EuiTableHeader wrapWithTableRow={false}>
+        <tr>
+          <td>children</td>
+        </tr>
+      </EuiTableHeader>
+    );
+    expect(render(component)).toMatchSnapshot();
   });
 });

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<CommonProps> = ({
+export type EuiTableHeaderProps = CommonProps &
+  HTMLAttributes<HTMLElement> & {
+    /**
+     * Children must be valid DOM structure residing within `<thead>`.
+     * Use `<td> | <th>` by default, or `<tr><th/></tr>` when `wrapWithTableRow=false`
+     */
+    children?: ReactNode;
+    /**
+     * Automatically adds a wrapping `<tr>` element around the children
+     */
+    wrapWithTableRow?: boolean;
+  };
+
+export const EuiTableHeader: FunctionComponent<EuiTableHeaderProps> = ({
   children,
   className,
+  wrapWithTableRow = true,
   ...rest
 }) => {
   return (
     <thead className={className} {...rest}>
-      <tr>{children}</tr>
+      {wrapWithTableRow ? <tr>{children}</tr> : children}
     </thead>
   );
 };