feat(AnalyticalTable): add header tooltip property to column (#721)

whyang0808 · web-flow · commit 3cde6965f26e · 2020-10-09T13:06:46.000+02:00
closes #704
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx
@@ -23,6 +23,7 @@ import { DefaultNoDataComponent } from './defaults/NoDataComponent';
     columns: [
       {
         Header: 'Name',
+        headerTooltip: 'Full Name', // A more extensive description!
         accessor: 'name' // String-based value accessors!
       },
       {
@@ -177,6 +178,7 @@ import { DefaultNoDataComponent } from './defaults/NoDataComponent';
 | Attribute          | Type                                                                     | Description                                                                                                                                                                                                                                                                                                                                                                                                     |
 | ------------------ | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `Header`           | `string OR ComponentType`                                                | Can either be `string` or a React component that will be rendered as column header                                                                                                                                                                                                                                                                                                                              |
+| `headerTooltip`    | `string`                                                                 | Tooltip for the column header. If not set, the display text will be the same as the Header if it is a `string`                                                                                                                                                                                                                                                                                                  |
 | `Cell`             | `ComponentType`                                                          | Custom cell renderer. If set, the table will call that component for every cell and pass all required information as props, e.g. the cell value as `props.cell.value`                                                                                                                                                                                                                                           |
 | `width`            | `number`                                                                 | Cell width, if not set the table will distribute all columns without a width evenly                                                                                                                                                                                                                                                                                                                             |
 | `minWidth`         | `number`                                                                 | min width of the column, e.g. used for resizing                                                                                                                                                                                                                                                                                                                                                                 |
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx
@@ -10,6 +10,7 @@ import React, { useRef } from 'react';
 const columns = [
   {
     Header: 'Name',
+    headerTooltip: 'Full Name', // A more extensive description!
     accessor: 'name' // String-based value accessors!
   },
   {
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
@@ -91,6 +91,7 @@ export const ColumnHeaderContainer = (props) => {
               onDragEnter={onDragEnter}
               onDragEnd={onDragEnd}
               dragOver={column.id === dragOver}
+              headerTooltip={column.headerTooltip}
               isDraggable={column.canReorder && !resizeInfo.isResizingColumn}
               virtualColumn={virtualColumn}
             >
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
@@ -39,6 +39,7 @@ export interface ColumnHeaderProps {
   onDragEnd: DragEventHandler<HTMLDivElement>;
   dragOver: boolean;
   isResizing: boolean;
+  headerTooltip: string;
   isDraggable: boolean;
   role: string;
   isLastColumn: boolean;
@@ -102,6 +103,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
     onDragStart,
     onDrop,
     onDragEnd,
+    headerTooltip,
     isDraggable,
     dragOver,
     role,
@@ -110,6 +112,16 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
 
   const isFiltered = column.filterValue && column.filterValue.length > 0;
 
+  const tooltip = useMemo(() => {
+    if (headerTooltip) {
+      return headerTooltip;
+    }
+    if (typeof children === 'string') {
+      return children;
+    }
+    return null;
+  }, [children, headerTooltip]);
+
   const textStyle = useMemo(() => {
     let margin = 0;
 
@@ -176,12 +188,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
         onClick={onOpenPopover}
       >
         <div className={classes.header} data-h-align={column.hAlign}>
-          <Text
-            tooltip={typeof children === 'string' ? children : null}
-            wrapping={false}
-            style={textStyle}
-            className={classes.text}
-          >
+          <Text tooltip={tooltip} wrapping={false} style={textStyle} className={classes.text}>
             {children}
           </Text>
           <div className={classes.iconContainer}>
diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
           >
             <span
               class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"
-              title="Name"
+              title="Full Name"
             >
               Name
             </span>
@@ -452,7 +452,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
           >
             <span
               class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"
-              title="Name"
+              title="Full Name"
             >
               Name
             </span>
@@ -856,7 +856,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
           >
             <span
               class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"
-              title="Name"
+              title="Full Name"
             >
               Name
             </span>
@@ -1274,7 +1274,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           >
             <span
               class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"
-              title="Name"
+              title="Full Name"
             >
               Name
             </span>
@@ -1746,7 +1746,7 @@ exports[`AnalyticalTable custom row height 1`] = `
           >
             <span
               class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"
-              title="Name"
+              title="Full Name"
             >
               Name
             </span>
@@ -2164,7 +2164,7 @@ exports[`AnalyticalTable highlight row with custom row key 1`] = `
             >
               <span
                 class="Text-text Text-noWrap TableColumnHeader-text"
-                title="Name"
+                title="Full Name"
               >
                 Name
               </span>
@@ -2610,7 +2610,7 @@ exports[`AnalyticalTable render without data 1`] = `
           >
             <span
               class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"
-              title="Name"
+              title="Full Name"
             >
               Name
             </span>
@@ -2781,7 +2781,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
             >
               <span
                 class="Text-text Text-noWrap TableColumnHeader-text"
-                title="Name"
+                title="Full Name"
               >
                 Name
               </span>
@@ -3188,7 +3188,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
             >
               <span
                 class="Text-text Text-noWrap TableColumnHeader-text"
-                title="Name"
+                title="Full Name"
               >
                 Name
               </span>
@@ -3595,7 +3595,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
             >
               <span
                 class="Text-text Text-noWrap TableColumnHeader-text"
-                title="Name"
+                title="Full Name"
               >
                 Name
               </span>
@@ -4000,7 +4000,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
           >
             <span
               class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"
-              title="Name"
+              title="Full Name"
             >
               Name
             </span>
@@ -4453,7 +4453,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
           >
             <span
               class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"
-              title="Name"
+              title="Full Name"
             >
               Name
             </span>
@@ -5030,7 +5030,7 @@ exports[`AnalyticalTable with initial column order 1`] = `
             >
               <span
                 class="Text-text Text-noWrap TableColumnHeader-text"
-                title="Name"
+                title="Full Name"
               >
                 Name
               </span>
@@ -5335,7 +5335,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
           >
             <span
               class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"
-              title="Name"
+              title="Full Name"
             >
               Name
             </span>
diff --git a/packages/main/src/interfaces/AnalyticalTableColumnDefinition.ts b/packages/main/src/interfaces/AnalyticalTableColumnDefinition.ts
@@ -11,6 +11,7 @@ export interface AnalyticalTableColumnDefinition {
   id?: string;
 
   Header?: string | ComponentType<any>;
+  headerTooltip?: string;
   Cell?: string | ComponentType<any>;
   width?: number;
   minWidth?: number;

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ import React, { useRef } from 'react';`
`10`	`10`	`const columns = [`
`11`	`11`	`{`
`12`	`12`	`Header: 'Name',`
	`13`	`+ headerTooltip: 'Full Name', // A more extensive description!`
`13`	`14`	`accessor: 'name' // String-based value accessors!`
`14`	`15`	`},`
`15`	`16`	`{`
Original file line number	Diff line number	Diff line change
`@@ -91,6 +91,7 @@ export const ColumnHeaderContainer = (props) => {`
`91`	`91`	`onDragEnter={onDragEnter}`
`92`	`92`	`onDragEnd={onDragEnd}`
`93`	`93`	`dragOver={column.id === dragOver}`
	`94`	`+ headerTooltip={column.headerTooltip}`
`94`	`95`	`isDraggable={column.canReorder && !resizeInfo.isResizingColumn}`
`95`	`96`	`virtualColumn={virtualColumn}`
`96`	`97`	`>`
Original file line number	Diff line number	Diff line change
@@ -48,7 +48,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
`48`	`48`	`>`
`49`	`49`	`<span`
`50`	`50`	`class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"`
`51`		`- title="Name"`
	`51`	`+ title="Full Name"`
`52`	`52`	`>`
`53`	`53`	`Name`
`54`	`54`	`</span>`
@@ -452,7 +452,7 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
`452`	`452`	`>`
`453`	`453`	`<span`
`454`	`454`	`class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"`
`455`		`- title="Name"`
	`455`	`+ title="Full Name"`
`456`	`456`	`>`
`457`	`457`	`Name`
`458`	`458`	`</span>`
@@ -856,7 +856,7 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = `
`856`	`856`	`>`
`857`	`857`	`<span`
`858`	`858`	`class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"`
`859`		`- title="Name"`
	`859`	`+ title="Full Name"`
`860`	`860`	`>`
`861`	`861`	`Name`
`862`	`862`	`</span>`
@@ -1274,7 +1274,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
`1274`	`1274`	`>`
`1275`	`1275`	`<span`
`1276`	`1276`	`class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"`
`1277`		`- title="Name"`
	`1277`	`+ title="Full Name"`
`1278`	`1278`	`>`
`1279`	`1279`	`Name`
`1280`	`1280`	`</span>`
@@ -1746,7 +1746,7 @@ exports[`AnalyticalTable custom row height 1`] = `
`1746`	`1746`	`>`
`1747`	`1747`	`<span`
`1748`	`1748`	`class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"`
`1749`		`- title="Name"`
	`1749`	`+ title="Full Name"`
`1750`	`1750`	`>`
`1751`	`1751`	`Name`
`1752`	`1752`	`</span>`
@@ -2164,7 +2164,7 @@ exports[`AnalyticalTable highlight row with custom row key 1`] = `
`2164`	`2164`	`>`
`2165`	`2165`	`<span`
`2166`	`2166`	`class="Text-text Text-noWrap TableColumnHeader-text"`
`2167`		`- title="Name"`
	`2167`	`+ title="Full Name"`
`2168`	`2168`	`>`
`2169`	`2169`	`Name`
`2170`	`2170`	`</span>`
@@ -2610,7 +2610,7 @@ exports[`AnalyticalTable render without data 1`] = `
`2610`	`2610`	`>`
`2611`	`2611`	`<span`
`2612`	`2612`	`class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"`
`2613`		`- title="Name"`
	`2613`	`+ title="Full Name"`
`2614`	`2614`	`>`
`2615`	`2615`	`Name`
`2616`	`2616`	`</span>`
@@ -2781,7 +2781,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
`2781`	`2781`	`>`
`2782`	`2782`	`<span`
`2783`	`2783`	`class="Text-text Text-noWrap TableColumnHeader-text"`
`2784`		`- title="Name"`
	`2784`	`+ title="Full Name"`
`2785`	`2785`	`>`
`2786`	`2786`	`Name`
`2787`	`2787`	`</span>`
@@ -3188,7 +3188,7 @@ exports[`AnalyticalTable test Asc desc 2`] = `
`3188`	`3188`	`>`
`3189`	`3189`	`<span`
`3190`	`3190`	`class="Text-text Text-noWrap TableColumnHeader-text"`
`3191`		`- title="Name"`
	`3191`	`+ title="Full Name"`
`3192`	`3192`	`>`
`3193`	`3193`	`Name`
`3194`	`3194`	`</span>`
@@ -3595,7 +3595,7 @@ exports[`AnalyticalTable test Asc desc 3`] = `
`3595`	`3595`	`>`
`3596`	`3596`	`<span`
`3597`	`3597`	`class="Text-text Text-noWrap TableColumnHeader-text"`
`3598`		`- title="Name"`
	`3598`	`+ title="Full Name"`
`3599`	`3599`	`>`
`3600`	`3600`	`Name`
`3601`	`3601`	`</span>`
@@ -4000,7 +4000,7 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = `
`4000`	`4000`	`>`
`4001`	`4001`	`<span`
`4002`	`4002`	`class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"`
`4003`		`- title="Name"`
	`4003`	`+ title="Full Name"`
`4004`	`4004`	`>`
`4005`	`4005`	`Name`
`4006`	`4006`	`</span>`
@@ -4453,7 +4453,7 @@ exports[`AnalyticalTable with highlight row 1`] = `
`4453`	`4453`	`>`
`4454`	`4454`	`<span`
`4455`	`4455`	`class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"`
`4456`		`- title="Name"`
	`4456`	`+ title="Full Name"`
`4457`	`4457`	`>`
`4458`	`4458`	`Name`
`4459`	`4459`	`</span>`
@@ -5030,7 +5030,7 @@ exports[`AnalyticalTable with initial column order 1`] = `
`5030`	`5030`	`>`
`5031`	`5031`	`<span`
`5032`	`5032`	`class="Text-text Text-noWrap TableColumnHeader-text"`
`5033`		`- title="Name"`
	`5033`	`+ title="Full Name"`
`5034`	`5034`	`>`
`5035`	`5035`	`Name`
`5036`	`5036`	`</span>`
@@ -5335,7 +5335,7 @@ exports[`AnalyticalTable without selection Column 1`] = `
`5335`	`5335`	`>`
`5336`	`5336`	`<span`
`5337`	`5337`	`class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0"`
`5338`		`- title="Name"`
	`5338`	`+ title="Full Name"`
`5339`	`5339`	`>`
`5340`	`5340`	`Name`
`5341`	`5341`	`</span>`