Repository: gregnb/mui-datatables
Pull request #316 (2018-12-14 03:59:42)

Fix issue with sort not taking into account on re-render
Fixing issue #305 

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

Coverage decreased (-0.5%) to 77.704% when pulling **ee01e5e82e0c3b2bb04ebd4bfe26c195d77d9dc4 on joaoaguiam:master** into **68e523e1f1c61170ce6f58ffd8a168a752d181e5 on gregnb:master**.


Patch:
diff --git a/README.md b/README.md
index a86ea0b..05b1846 100644
--- a/README.md
+++ b/README.md
@@ -163,8 +163,7 @@ The component accepts the following props:
 |**`onChangeRowsPerPage`**|function||Callback function that triggers when the number of rows per page has changed. `function(numberOfRows: number) => void`
 |**`onSearchChange`**|function||Callback function that triggers when the search text value has changed. `function(searchText: string) => void`
 |**`onSearchOpen`**|function||Callback function that triggers when the searchbox opens. `function() => void`
-|**`onFilterChange`**|function||Callback function that triggers when filters have changed. `function(changedColumn: string, filterList: array) => 
-void`
+|**`onFilterChange`**|function||Callback function that triggers when filters have changed. `function(changedColumn: string, filterList: array) => void`
 |**`onColumnSortChange`**|function||Callback function that triggers when a column has been sorted. `function(changedColumn: string, direction: string) => void`
 |**`onColumnViewChange`**|function||Callback function that triggers when a column view has been changed. `function(changedColumn: string, action: string) => void`
 |**`onTableChange`**|function||Callback function that triggers when table state has changed. `function(action: string, tableState: object) => void`
@@ -200,6 +199,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/MUIDataTable.js b/src/MUIDataTable.js
index 41df9a2..a9bdc1b 100644
--- a/src/MUIDataTable.js
+++ b/src/MUIDataTable.js
@@ -165,7 +165,7 @@ class MUIDataTable extends React.Component {
     }
 
     return MUIDataTable.fallbackComparator;
-  }
+  };
 
   /*
    * React currently does not support deep merge for defaultProps. Objects are overwritten
@@ -289,6 +289,8 @@ class MUIDataTable extends React.Component {
 
     let tableData = [];
     let { columns, filterData, filterList } = this.buildColumns(props.columns);
+    let sortIndex = null;
+    let sortDirection = null;
 
     columns.forEach((column, colIndex) => {
       for (let rowIndex = 0; rowIndex < data.length; rowIndex++) {
@@ -319,6 +321,11 @@ class MUIDataTable extends React.Component {
         const comparator = MUIDataTable.getCollatzComparator();
         filterData[colIndex].sort(comparator);
       }
+
+      if (column.sortDirection !== null) {
+        sortIndex = colIndex;
+        sortDirection = column.sortDirection === "asc" ? "desc" : "asc";
+      }
     });
 
     if (options.filterList) filterList = options.filterList;
@@ -341,6 +348,11 @@ class MUIDataTable extends React.Component {
       }
     }
 
+    if (sortIndex !== null) {
+      const sortedData = this.sortTable(tableData, sortIndex, sortDirection);
+      tableData = sortedData.data;
+    }
+
     /* set source data and display Data set source set */
     this.setState(
       prevState => ({
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);
   });