Add displayAsText props to EuiDataGridColumn (#3520)

* Add displayAsText props to column type * Column selector must show dispalyAsTest if it exists * Use displayAsText instead of id * Add displayAsText to EuiDataGridSorting interface * Added example in docs * Add cl * Rever changes * Removed display as test * Updated info of props * Use displayValues to get displayAsText from id * Move displayValues to data grid * Updated comment
elastic · Jun 2, 2020 · d0c497b · d0c497b
1 parent c7795f1
commit d0c497b
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `displayAsText` prop to `EuiDataGridColumn` ([#3520](https://github.com/elastic/eui/pull/3520))
 - Added `minSizeForControls` prop to `EuiDataGrid` to control the minimum width for showing grid controls ([#3527](https://github.com/elastic/eui/pull/3527))
 - Passed `getSelectedOptionForSearchValue` to `EuiComboBoxOptionsList` as prop ([#3501](https://github.com/elastic/eui/pull/3501))
 - Added `appendIconComponentCache` function to allow manual pre-emptive loading of source elements into the `EuiIcon` cache ([#3481](https://github.com/elastic/eui/pull/3481))

diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
@@ -21,6 +21,7 @@ import {
 const columns = [
   {
     id: 'name',
+    displayAsText: 'Name',
     defaultSortDirection: 'asc',
   },
   {

diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx
@@ -59,7 +59,8 @@ const getShowColumnSelectorValue = (
 export const useColumnSelector = (
   availableColumns: EuiDataGridColumn[],
   columnVisibility: EuiDataGridColumnVisibility,
-  showColumnSelector: EuiDataGridToolBarVisibilityOptions['showColumnSelector']
+  showColumnSelector: EuiDataGridToolBarVisibilityOptions['showColumnSelector'],
+  displayValues: { [key: string]: string }
 ): [ReactElement, EuiDataGridColumn[]] => {
   const allowColumnHiding = getShowColumnSelectorValue(
     showColumnSelector,
@@ -109,6 +110,7 @@ export const useColumnSelector = (
   const filteredColumns = sortedColumns.filter(
     id => id.toLowerCase().indexOf(columnSearchText.toLowerCase()) !== -1
   );
+
   const isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
 
   let buttonText = (
@@ -197,7 +199,7 @@ export const useColumnSelector = (
                             {allowColumnHiding ? (
                               <EuiSwitch
                                 name={id}
-                                label={id}
+                                label={displayValues[id] || id}
                                 checked={visibleColumnIds.has(id)}
                                 compressed
                                 className="euiSwitch--mini"

diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx
@@ -49,7 +49,8 @@ export const useColumnSorting = (
   columns: EuiDataGridColumn[],
   sorting: EuiDataGridSorting | undefined,
   schema: EuiDataGridSchema,
-  schemaDetectors: EuiDataGridSchemaDetector[]
+  schemaDetectors: EuiDataGridSchemaDetector[],
+  displayValues: { [key: string]: string }
 ): ReactNode => {
   const [isOpen, setIsOpen] = useState(false);
   const [avilableColumnsisOpen, setAvailableColumnsIsOpen] = useState(false);
@@ -283,7 +284,9 @@ export const useColumnSorting = (
                                     />
                                   </EuiFlexItem>
                                   <EuiFlexItem grow={false}>
-                                    <EuiText size="xs">{id}</EuiText>
+                                    <EuiText size="xs">
+                                      {displayValues[id]}
+                                    </EuiText>
                                   </EuiFlexItem>
                                 </EuiFlexGroup>
                               </button>

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
@@ -672,16 +672,26 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = props => {
   );
   const mergedSchema = useMergedSchema(detectedSchema, columns);
 
+  const displayValues: { [key: string]: string } = columns.reduce(
+    (acc: { [key: string]: string }, column: EuiDataGridColumn) => ({
+      ...acc,
+      [column.id]: column.displayAsText || column.id,
+    }),
+    {}
+  );
+
   const [columnSelector, orderedVisibleColumns] = useColumnSelector(
     columns,
     columnVisibility,
-    checkOrDefaultToolBarDiplayOptions(toolbarVisibility, 'showColumnSelector')
+    checkOrDefaultToolBarDiplayOptions(toolbarVisibility, 'showColumnSelector'),
+    displayValues
   );
   const columnSorting = useColumnSorting(
     orderedVisibleColumns,
     sorting,
     mergedSchema,
-    allSchemaDetectors
+    allSchemaDetectors,
+    displayValues
   );
   const [styleSelector, gridStyles] = useStyleSelector(gridStyleWithDefaults);
 

diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
@@ -53,7 +53,7 @@ export interface EuiDataGridColumn {
    */
   schema?: string;
   /**
-   * Defauls to true. Defines shether or not the column's cells can be expanded with a popup onClick / keydown.
+   * Defaults to true. Defines whether or not the column's cells can be expanded with a popup onClick / keydown.
    */
   isExpandable?: boolean;
   /**
@@ -72,6 +72,10 @@ export interface EuiDataGridColumn {
    * Default sort direction of the column
    */
   defaultSortDirection?: 'asc' | 'desc';
+  /**
+   * Display name as text for column. This can be used to display column name in column selector and column sorting where `display` won't be used. If not used `id` will be shown as column name in column selector and column sorting.
+   */
+  displayAsText?: string;
 }
 
 export interface EuiDataGridColumnVisibility {
@@ -192,7 +196,10 @@ export interface EuiDataGridSorting {
   /**
    * An array of the column ids currently being sorted and their sort direction. The array order determines the sort order. `{ id: 'A'; direction: 'asc' }`
    */
-  columns: Array<{ id: string; direction: 'asc' | 'desc' }>;
+  columns: Array<{
+    id: string;
+    direction: 'asc' | 'desc';
+  }>;
 }
 
 export interface EuiDataGridInMemory {