Repository: gregnb/mui-datatables
Pull request #319 (2018-12-17 10:59:35)

Custom column hint tooltip
This adds the option to add a custom hint tooltip to column headers by setting the `hint` property on column options.
![image](https://user-images.githubusercontent.com/108799/50083176-376bc080-01f3-11e9-904a-01e17372320d.png)


coveralls: 
[![Coverage Status](https://coveralls.io/builds/20670684/badge)](https://coveralls.io/builds/20670684)

Coverage decreased (-0.06%) to 78.188% when pulling **3ddab1f61bffb163c9062ab6a6aa2fe81cfa0d23 on Legogris:custom-column-tooltip** into **68e523e1f1c61170ce6f58ffd8a168a752d181e5 on gregnb:master**.

gregnb: Nice, great idea! Merged

Patch:
diff --git a/README.md b/README.md
index a86ea0b..f067d9f 100644
--- a/README.md
+++ b/README.md
@@ -200,6 +200,7 @@ const columns = [
 |**`filter`**|boolean|true|Display column in filter list
 |**`sort`**|boolean|true|Enable/disable sorting on column
 |**`download`**|boolean|true|Display column in CSV download file
+|**`hint`**|string|`undefined`Display hint icon with string as tooltip on hover.
 |**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. `function(value, tableMeta, updateValue) => string`&#124;`
 |**`customBodyRender`**|function||Function that returns a string or React component. Used as display data within all table cells of a given column. `function(value, tableMeta, updateValue) => string`&#124;` React Component` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/component/index.js)
 
diff --git a/examples/selectable-rows/index.js b/examples/selectable-rows/index.js
index e30f99a..602243d 100644
--- a/examples/selectable-rows/index.js
+++ b/examples/selectable-rows/index.js
@@ -6,7 +6,13 @@ class Example extends React.Component {
 
   render() {
 
-    const columns = ["Name", "Title", "Location", "Age", "Salary"];
+    const columns = [
+      "Name",
+      "Title",
+      "Location",
+      "Age",
+      { name: "Salary", options: { hint: "USD / year"}}
+    ];
 
     const data = [
       ["Gabby George", "Business Analyst", "Minneapolis", 30, 100000],
diff --git a/src/MUIDataTableHead.js b/src/MUIDataTableHead.js
index 2231c56..1e5eafa 100644
--- a/src/MUIDataTableHead.js
+++ b/src/MUIDataTableHead.js
@@ -63,6 +63,7 @@ class MUIDataTableHead extends React.Component {
                   sort={column.sort}
                   sortDirection={column.sortDirection}
                   toggleSort={this.handleToggleColumn}
+                  hint={column.hint}
                   options={options}>
                   {column.name}
                 </MUIDataTableHeadCell>
diff --git a/src/MUIDataTableHeadCell.js b/src/MUIDataTableHeadCell.js
index 8c17fbf..dc5661d 100644
--- a/src/MUIDataTableHeadCell.js
+++ b/src/MUIDataTableHeadCell.js
@@ -5,6 +5,7 @@ import TableCell from "@material-ui/core/TableCell";
 import TableSortLabel from "@material-ui/core/TableSortLabel";
 import Tooltip from "@material-ui/core/Tooltip";
 import { withStyles } from "@material-ui/core/styles";
+import HelpIcon from '@material-ui/icons/Help';
 
 const defaultHeadCellStyles = {
   root: {},
@@ -55,6 +56,8 @@ class MUIDataTableHeadCell extends React.Component {
     toggleSort: PropTypes.func.isRequired,
     /** Sort enabled / disabled for this column **/
     sort: PropTypes.bool.isRequired,
+    /** Hint tooltip text */
+    hint: PropTypes.string,
   };
 
   handleSortClick = () => {
@@ -62,7 +65,7 @@ class MUIDataTableHeadCell extends React.Component {
   };
 
   render() {
-    const { children, classes, options, sortDirection, sort } = this.props;
+    const { children, classes, options, sortDirection, sort, hint } = this.props;
     const sortActive = sortDirection !== null && sortDirection !== undefined ? true : false;
 
     const sortLabelProps = {
@@ -107,6 +110,18 @@ class MUIDataTableHeadCell extends React.Component {
         ) : (
           children
         )}
+        { hint &&
+          <Tooltip
+            title={hint}
+            placement={"bottom-end"}
+            classes={{
+              tooltip: classes.tooltip,
+            }}
+            enterDelay={300}
+            classes={{ popper: classes.mypopper }}>
+              <HelpIcon fontSize="small" />
+          </Tooltip>
+        }
       </TableCell>
     );
   }


Test patch:
diff --git a/test/MUIDataTableHeadCell.test.js b/test/MUIDataTableHeadCell.test.js
index 8aff55b..91cf57c 100644
--- a/test/MUIDataTableHeadCell.test.js
+++ b/test/MUIDataTableHeadCell.test.js
@@ -4,7 +4,8 @@ import { mount, shallow } from "enzyme";
 import { assert, expect, should } from "chai";
 import textLabels from "../src/textLabels";
 import MUIDataTableHeadCell from "../src/MUIDataTableHeadCell";
-import Tooltip from "@material-ui/core/Tooltip";
+import TableSortLabel from "@material-ui/core/TableSortLabel";
+import HelpIcon from "@material-ui/icons/Help";
 
 describe("<MUIDataTableHeadCell />", function() {
   let classes;
@@ -30,7 +31,7 @@ describe("<MUIDataTableHeadCell />", function() {
       </MUIDataTableHeadCell>,
     ).dive();
 
-    const actualResult = shallowWrapper.find(Tooltip);
+    const actualResult = shallowWrapper.find(TableSortLabel);
     assert.strictEqual(actualResult.length, 1);
   });
 
@@ -49,7 +50,38 @@ describe("<MUIDataTableHeadCell />", function() {
       </MUIDataTableHeadCell>,
     );
 
-    const actualResult = shallowWrapper.find(Tooltip);
+    const actualResult = shallowWrapper.find(TableSortLabel);
+    assert.strictEqual(actualResult.length, 0);
+  });
+
+  it("should render a table help icon when hint provided", () => {
+    const options = { sort: true, textLabels };
+
+    const shallowWrapper = shallow(
+      <MUIDataTableHeadCell
+        options={options}
+        hint={"hint text"}
+        classes={classes}>
+        some content
+      </MUIDataTableHeadCell>,
+    ).dive();
+
+    const actualResult = shallowWrapper.find(HelpIcon);
+    assert.strictEqual(actualResult.length, 1);
+  });
+
+  it("should render a table head cell without custom tooltip when hint provided", () => {
+    const options = { sort: true, textLabels };
+
+    const shallowWrapper = shallow(
+      <MUIDataTableHeadCell
+        options={options}
+        classes={classes}>
+        some content
+      </MUIDataTableHeadCell>,
+    ).dive();
+
+    const actualResult = shallowWrapper.find(HelpIcon);
     assert.strictEqual(actualResult.length, 0);
   });