[EuiDataGrid] Use displayAsText for column sort search and columns …

…headers (#4351)

* Column headers use displayAsText (#4114)

If the `display` property isn't provided, then the column header should use the `displayAsText` property before falling back to `id`.
Docs example now shows `Email address` while keeping `email` id, and other columns now capitalised.

* Column search matches `displayAsText` (#4204)

Still uses `id` if `displayAsText` property not provided

* Added `displayAsText` changes to changelog

CHANGELOG.md

@@ -8,6 +8,8 @@
 - Fixed `EuiErrorBoundary` error message not showing in non-Chromium browsers ([#4324](https://github.com/elastic/eui/pull/4324))
 - Fixed `EuiToolTip` closing during initial positioning period ([#4327](https://github.com/elastic/eui/pull/4327))
 - Added `!default` to SASS variables of `EuiCollapsibleNav` ([#4335](https://github.com/elastic/eui/pull/4335))
+- Fixed `EuiDataGrid` column property `displayAsText`. Column headers prefer `displayAsText` over `id`; `display` still takes precedence. If provided, the filter in the sort-popover will search against `displayAsText` instead of `id`. ([#4351](https://github.com/elastic/eui/pull/4351))
+
 
 **Theme: Amsterdam**
 

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

@@ -84,6 +84,8 @@ const columns = [
   },
   {
     id: 'email',
+    displayAsText: 'Email address',
+    initialWidth: 130,
     cellActions: [
       ({ rowIndex, columnId, Component }) => {
         const data = useContext(DataContext);
@@ -100,9 +102,11 @@ const columns = [
   },
   {
     id: 'location',
+    displayAsText: 'Location',
   },
   {
     id: 'account',
+    displayAsText: 'Account',
     actions: {
       showHide: { label: 'Custom hide label' },
       showMoveLeft: false,
@@ -140,19 +144,23 @@ const columns = [
   },
   {
     id: 'date',
+    displayAsText: 'Date',
     defaultSortDirection: 'desc',
   },
   {
     id: 'amount',
+    displayAsText: 'Amount',
   },
   {
     id: 'phone',
+    displayAsText: 'Phone',
     isSortable: false,
   },
   {
     id: 'version',
+    displayAsText: 'Version',
     defaultSortDirection: 'desc',
-    initialWidth: 65,
+    initialWidth: 70,
     isResizable: false,
     actions: false,
   },

src/components/datagrid/column_selector.tsx

@@ -117,7 +117,10 @@ export const useDataGridColumnSelector = (
   });
 
   const filteredColumns = sortedColumns.filter(
-    (id) => id.toLowerCase().indexOf(columnSearchText.toLowerCase()) !== -1
+    (id) =>
+      (displayValues[id] || id)
+        .toLowerCase()
+        .indexOf(columnSearchText.toLowerCase()) !== -1
   );
 
   const isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns

src/components/datagrid/data_grid_header_cell.tsx

@@ -70,7 +70,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
     headerIsInteractive,
     className,
   } = props;
-  const { id, display } = column;
+  const { id, display, displayAsText } = column;
 
   const width = columnWidths[id] || defaultColumnWidth;
 
@@ -308,12 +308,16 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
         </EuiScreenReaderOnly>
       )}
       {!showColumnActions ? (
-        <div className="euiDataGridHeaderCell__content">{display || id}</div>
+        <div className="euiDataGridHeaderCell__content">
+          {display || displayAsText || id}
+        </div>
       ) : (
         <button
           className="euiDataGridHeaderCell__button"
           onClick={() => setIsPopoverOpen(true)}>
-          <div className="euiDataGridHeaderCell__content">{display || id}</div>
+          <div className="euiDataGridHeaderCell__content">
+            {display || displayAsText || id}
+          </div>
           <EuiPopover
             className="euiDataGridHeaderCell__popover"
             panelPaddingSize="none"