#887 and#878 (#888)

* Fixes for issues #878 and #887 * Changing hint to label * Making the columnHeaderTooltip customizable for any column prop * Resolving comments * Add option to readme * Doc update
gregnb · Sep 12, 2019 · fdd7ee7 · fdd7ee7
1 parent 6d44805
commit fdd7ee7
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -342,6 +342,7 @@ const options = {
     body: {
       noMatch: "Sorry, no matching records found",
       toolTip: "Sort",
+      columnHeaderTooltip: column => `Sort for ${column.label}`
     },
     pagination: {
       next: "Next Page",

diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
@@ -2,11 +2,11 @@ import Paper from '@material-ui/core/Paper';
 import { withStyles } from '@material-ui/core/styles';
 import MuiTable from '@material-ui/core/Table';
 import classnames from 'classnames';
+import assignwith from 'lodash.assignwith';
 import cloneDeep from 'lodash.clonedeep';
 import find from 'lodash.find';
 import isUndefined from 'lodash.isundefined';
 import merge from 'lodash.merge';
-import assignwith from 'lodash.assignwith';
 import PropTypes from 'prop-types';
 import React from 'react';
 import TableBody from './components/TableBody';

diff --git a/src/components/TableHead.js b/src/components/TableHead.js
@@ -1,11 +1,11 @@
+import { withStyles } from '@material-ui/core/styles';
+import MuiTableHead from '@material-ui/core/TableHead';
+import classNames from 'classnames';
 import React from 'react';
 import { findDOMNode } from 'react-dom';
-import classNames from 'classnames';
-import MuiTableHead from '@material-ui/core/TableHead';
-import TableHeadRow from './TableHeadRow';
 import TableHeadCell from './TableHeadCell';
+import TableHeadRow from './TableHeadRow';
 import TableSelectCell from './TableSelectCell';
-import { withStyles } from '@material-ui/core/styles';
 
 const defaultHeadStyles = theme => ({
   main: {},
@@ -68,7 +68,8 @@ class TableHead extends React.Component {
                   toggleSort={this.handleToggleColumn}
                   hint={column.hint}
                   print={column.print}
-                  options={options}>
+                  options={options}
+                  column={column}>
                   {column.label}
                 </TableHeadCell>
               )),

diff --git a/src/components/TableHeadCell.js b/src/components/TableHeadCell.js
@@ -1,11 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
 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';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 const defaultHeadCellStyles = theme => ({
   root: {},
@@ -68,6 +68,8 @@ class TableHeadCell extends React.Component {
     hint: PropTypes.string,
     /** Column displayed in print */
     print: PropTypes.bool.isRequired,
+    /** Optional to be used with `textLabels.body.columnHeaderTooltip` */
+    column: PropTypes.object,
   };
 
   state = {
@@ -89,7 +91,7 @@ class TableHeadCell extends React.Component {
 
   render() {
     const { isSortTooltipOpen, isHintTooltipOpen } = this.state;
-    const { children, classes, options, sortDirection, sort, hint, print } = this.props;
+    const { children, classes, options, sortDirection, sort, hint, print, column } = this.props;
     const sortActive = sortDirection !== 'none' && sortDirection !== undefined ? true : false;
     const ariaSortDirection = sortDirection === 'none' ? false : sortDirection;
 
@@ -110,7 +112,11 @@ class TableHeadCell extends React.Component {
       <TableCell className={cellClass} scope={'col'} sortDirection={ariaSortDirection}>
         {options.sort && sort ? (
           <Tooltip
-            title={options.textLabels.body.toolTip}
+            title={
+              options.textLabels.body.columnHeaderTooltip
+                ? options.textLabels.body.columnHeaderTooltip(column)
+                : options.textLabels.body.toolTip
+            }
             placement={'bottom-start'}
             classes={{
               tooltip: classes.tooltip,