[EuiDataGrid] Custom column headers (#2421)

* Allow custom ReactNode for column header display

* Allow navigation into grid headers if any are interactive

* Properly wrap cell focus and use [enter], [f2] to interact

* Corrected header cell focus-state on blurring, [escape]. and single interactives

* Corrected header cell focus-state on blurring, [escape]. and single interactives

* When datagrid header is interactive, default its tabstop to the first header cell

* EuiDataGridHeaderCell warns about multiple interactive elements

* fix focus, example and screenreader stuffs, looks like tests pass

* simplifying screen reader read out

src-docs/src/views/datagrid/datagrid.js

@@ -13,15 +13,34 @@ import {
   EuiLink,
   EuiPopover,
   EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '../../../../src/components/';
 import { EuiRadioGroup } from '../../../../src/components/form/radio';
+import { EuiButtonIcon } from '../../../../src/components/button/button_icon';
 
 const columns = [
   {
     id: 'name',
   },
   {
     id: 'email',
+    display: (
+      // This is an example of an icon next to a title that still respects text truncate
+      <EuiFlexGroup gutterSize="xs">
+        <EuiFlexItem className="eui-textTruncate">
+          <div className="eui-textTruncate">email</div>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            aria-label="Column header email"
+            iconType="gear"
+            color="text"
+            onClick={() => alert('Email Icon Clicked!')}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ),
   },
   {
     id: 'location',