[EuiDataGrid] Add title attribute to column header cell content (#6013

)

* Add default `title` display to column headings

- to make headings more visible if text is being truncated due to column widths

* Update documentation

- clarify props documentation for `displayAsText`
- reorder props by general purpose
- Update `columns` snippet to include all props and also to follow new grouping order

* Changelog

* Fix VO double-announcing column titles on columns without actions

- reproducible on the Version column in the main datagrid example

src-docs/src/views/datagrid/_snippets.tsx

@@ -8,15 +8,20 @@ inMemory={{ level: 'sorting' }}`,
   columns: `columns={[
   {
     id: 'A', // required
+    display: <>Column A <EuiIcon type="dot" /></>, // optional column header rendering
+    displayAsText: 'Column A', // column header as plain text
     initialWidth: 150, // starting width of 150px
     isResizable: false, // prevents the user from resizing width
-    actions: false, // no column header actions are displayed
     isExpandable: false, // doesn't allow clicking in to see the content in a popup
-    actions: { showMoveLeft: false, showMoveRight: false }, // doesn't show move actions in column header
+    isSortable: false, // prevents the user from sorting the data grid by this column
+    defaultSortDirection: 'asc', // sets the default sort direction
     schema: 'franchise', // custom schema later defined under schemaDetectors
+    actions: false, // no column header actions are displayed
+    actions: { showMoveLeft: false, showMoveRight: false }, // doesn't show move actions in column header
     cellActions: [ // provides one additional cell action that triggers an alert once clicked
       ({ Component }) => <Component iconType="heart" onClick={() => alert('test')}>Custom action</Component>,
     ],
+    visibleCellActions: 2, // configures the number of cell action buttons immediately visible on a cell
   },
 ]}`,
   columnVisibility: `columnVisibility={{

src/components/datagrid/__snapshots__/data_grid.test.tsx.snap

@@ -1075,6 +1075,7 @@ Array [
                     >
                       <div
                         class="euiDataGridHeaderCell__content"
+                        title="A"
                       >
                         A
                       </div>
@@ -1118,6 +1119,7 @@ Array [
                     >
                       <div
                         class="euiDataGridHeaderCell__content"
+                        title="B"
                       >
                         B
                       </div>
@@ -1514,6 +1516,7 @@ Array [
                     >
                       <div
                         class="euiDataGridHeaderCell__content"
+                        title="A"
                       >
                         A
                       </div>
@@ -1557,6 +1560,7 @@ Array [
                     >
                       <div
                         class="euiDataGridHeaderCell__content"
+                        title="B"
                       >
                         B
                       </div>
@@ -2250,6 +2254,7 @@ Array [
                     >
                       <div
                         class="euiDataGridHeaderCell__content"
+                        title="A"
                       >
                         Column A
                       </div>
@@ -2293,6 +2298,7 @@ Array [
                     >
                       <div
                         class="euiDataGridHeaderCell__content"
+                        title="B"
                       >
                         <div>
                           More Elements
@@ -2669,6 +2675,7 @@ Array [
                     >
                       <div
                         class="euiDataGridHeaderCell__content"
+                        title="A"
                       >
                         A
                       </div>
@@ -2712,6 +2719,7 @@ Array [
                     >
                       <div
                         class="euiDataGridHeaderCell__content"
+                        title="B"
                       >
                         B
                       </div>

src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap

@@ -41,6 +41,7 @@ exports[`EuiDataGridBody renders 1`] = `
             >
               <div
                 class="euiDataGridHeaderCell__content"
+                title="columnA"
               >
                 columnA
               </div>
@@ -84,6 +85,7 @@ exports[`EuiDataGridBody renders 1`] = `
             >
               <div
                 class="euiDataGridHeaderCell__content"
+                title="columnB"
               >
                 columnB
               </div>

src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap

@@ -23,6 +23,7 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
       >
         <div
           className="euiDataGridHeaderCell__content"
+          title="someColumn"
         >
           someColumn
         </div>

src/components/datagrid/body/header/data_grid_header_cell.tsx

@@ -140,7 +140,10 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
       {!showColumnActions ? (
         <>
           {sortingArrow}
-          <div className="euiDataGridHeaderCell__content">
+          <div
+            className="euiDataGridHeaderCell__content"
+            title={displayAsText || id}
+          >
             {display || displayAsText || id}
           </div>
         </>
@@ -158,7 +161,10 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
               }}
             >
               {sortingArrow}
-              <div className="euiDataGridHeaderCell__content">
+              <div
+                className="euiDataGridHeaderCell__content"
+                title={displayAsText || id}
+              >
                 {display || displayAsText || id}
               </div>
               <EuiIcon

src/components/datagrid/data_grid_types.ts

@@ -539,11 +539,16 @@ export interface EuiDataGridColumn {
    */
   display?: ReactNode;
   /**
-   * A Schema to use for the column.
-   * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own #EuiDataGrid `schemaDetectors` (for in-memory detection).
-   * In general, it is advised to pass in a value here when you are sure of the schema ahead of time, so that you don't need to rely on the automatic detection.
+   * Display name as text for the column.
+   * This can be used to display a readable column name in column hiding/sorting, where `display` won't be used.
+   * This will also be used as a `title` attribute that will display on mouseover (useful if the display text is being truncated by the column width).
+   * If not passed, `id` will be shown as the column name.
    */
-  schema?: string;
+  displayAsText?: string;
+  /**
+   * Initial width (in pixels) of the column
+   */
+  initialWidth?: number;
   /**
    * Defaults to true, always true if cellActions are defined. Defines whether or not the column's cells can be expanded with a popup onClick / keydown.
    */
@@ -552,10 +557,6 @@ export interface EuiDataGridColumn {
    * Whether this column's width can be changed by the user, defaults to true
    */
   isResizable?: boolean;
-  /**
-   * Initial width (in pixels) of the column
-   */
-  initialWidth?: number;
   /**
    * Whether this column is sortable
    */
@@ -565,9 +566,11 @@ export interface EuiDataGridColumn {
    */
   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.
+   * A Schema to use for the column.
+   * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own #EuiDataGrid `schemaDetectors` (for in-memory detection).
+   * In general, it is advised to pass in a value here when you are sure of the schema ahead of time, so that you don't need to rely on the automatic detection.
    */
-  displayAsText?: string;
+  schema?: string;
   /**
    * Configuration of column actions. Set to false to disable or use #EuiDataGridColumnActions to configure the actions displayed in the header cell of the column.
    */

upcoming_changelogs/6013.md

@@ -0,0 +1 @@
+- Added a default `title` to `EuiDataGrid`'s column headers, allowing header text to remain visible if truncated due to column widths