Replaced empty th with td

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Empty table th elements replaced with td in `EuiTable`. ([#2934](https://github.com/elastic/eui/pull/2934))
 - Added default prompt text to `aria-describedby` for `EuiFilePicker` ([#2919](https://github.com/elastic/eui/pull/2919))
 - Added SASS variables for text variants of the primary palette `$euiColorPrimaryText`, `$euiColorSecondaryText`, etc... Updated components to use these new variables. ([#2873](https://github.com/elastic/eui/pull/2873))
 - Updated SASS mixin `makeHighContrastColor()` to default `$background: $euiPageBackgroundColor` and `$ratio: 4.5`. Created `makeGraphicContrastColor()` for graphic specific contrast levels of 3.0. ([#2873](https://github.com/elastic/eui/pull/2873))

src/components/table/__snapshots__/table_header_cell.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`align defaults to left 1`] = `
-<th
+<td
   class="euiTableHeaderCell"
   role="columnheader"
   scope="col"
@@ -13,11 +13,11 @@ exports[`align defaults to left 1`] = `
       class="euiTableCellContent__text"
     />
   </div>
-</th>
+</td>
 `;
 
 exports[`align renders center when specified 1`] = `
-<th
+<td
   class="euiTableHeaderCell"
   role="columnheader"
   scope="col"
@@ -29,11 +29,11 @@ exports[`align renders center when specified 1`] = `
       class="euiTableCellContent__text"
     />
   </div>
-</th>
+</td>
 `;
 
 exports[`align renders right when specified 1`] = `
-<th
+<td
   class="euiTableHeaderCell"
   role="columnheader"
   scope="col"
@@ -45,7 +45,7 @@ exports[`align renders right when specified 1`] = `
       class="euiTableCellContent__text"
     />
   </div>
-</th>
+</td>
 `;
 
 exports[`renders EuiTableHeaderCell 1`] = `
@@ -68,6 +68,24 @@ exports[`renders EuiTableHeaderCell 1`] = `
 </th>
 `;
 
+exports[`renders td when children is null/undefined 1`] = `
+<td
+  aria-label="aria-label"
+  class="euiTableHeaderCell testClass1 testClass2"
+  data-test-subj="test subject string"
+  role="columnheader"
+  scope="col"
+>
+  <div
+    class="euiTableCellContent testClass1 testClass2"
+  >
+    <span
+      class="euiTableCellContent__text"
+    />
+  </div>
+</td>
+`;
+
 exports[`width and style accepts style attribute 1`] = `
 <th
   class="euiTableHeaderCell"

src/components/table/table_header_cell.test.tsx

@@ -14,6 +14,12 @@ test('renders EuiTableHeaderCell', () => {
   expect(render(component)).toMatchSnapshot();
 });
 
+test('renders td when children is null/undefined', () => {
+  const component = render(<EuiTableHeaderCell {...requiredProps} />);
+
+  expect(component).toMatchSnapshot();
+});
+
 describe('align', () => {
   test('defaults to left', () => {
     const component = <EuiTableHeaderCell />;

src/components/table/table_header_cell.tsx

@@ -91,6 +91,8 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
 
   const styleObj = resolveWidthAsStyle(style, width);
 
+  const CellComponent = children ? 'th' : 'td';
+
   if (onSort) {
     const buttonClasses = classNames('euiTableHeaderButton', {
       'euiTableHeaderButton-isSorted': isSorted,
@@ -114,7 +116,7 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
     }
 
     return (
-      <th
+      <CellComponent
         className={classes}
         scope={scope}
         role="columnheader"
@@ -142,12 +144,12 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
             </EuiScreenReaderOnly>
           </span>
         </button>
-      </th>
+      </CellComponent>
     );
   }
 
   return (
-    <th
+    <CellComponent
       className={classes}
       scope={scope}
       role="columnheader"
@@ -156,6 +158,6 @@ export const EuiTableHeaderCell: FunctionComponent<Props> = ({
       <div className={contentClasses}>
         <span className="euiTableCellContent__text">{children}</span>
       </div>
-    </th>
+    </CellComponent>
   );
 };