From 46217c9ad7236f4517404821951496101a872855 Mon Sep 17 00:00:00 2001
From: Sean Landsman <sean@thelandsmans.com>
Date: Wed, 26 Jul 2017 12:10:12 +0100
Subject: [PATCH] Fix sorting issue

---
 src/richGridExample/ColDefFactory.jsx         | 78 ++++++++++++++-----
 .../SortableHeaderComponent.jsx               |  8 +-
 2 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/src/richGridExample/ColDefFactory.jsx b/src/richGridExample/ColDefFactory.jsx
index 8c0e239..735dd63 100644
--- a/src/richGridExample/ColDefFactory.jsx
+++ b/src/richGridExample/ColDefFactory.jsx
@@ -9,46 +9,85 @@ import HeaderGroupComponent from './HeaderGroupComponent.jsx';
 export default class ColDefFactory {
 
     createColDefs() {
-
-        var columnDefs = [
-            {headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true,
-                suppressMenu: true, pinned: true},
+        return [
+            {
+                headerName: '#',
+                width: 30,
+                checkboxSelection: true,
+                suppressSorting: true,
+                suppressMenu: true,
+                pinned: true,
+                icons: {
+                    checkboxChecked: '<i class="fa fa-arrow-left"/>',
+                    checkboxUnchecked: '<i class="fa fa-arrow-right"/>',
+                    checkboxIndeterminate: '<i class="fa fa-arrow-up"/>'
+                }
+            },
             {
                 headerName: 'Employee',
                 headerGroupComponentFramework: HeaderGroupComponent,
                 children: [
                     {
-                        headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
-                        width: 150, pinned: true, editable: true,
+                        headerName: "Name",
+                        field: "name",
+                        enableRowGroup: true,
+                        enablePivot: true,
+                        width: 150,
+                        pinned: true,
+                        editable: true,
                         // use a React cellEditor
                         cellEditorFramework: NameCellEditor
                     }, {
-                        headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
+                        headerName: "Country",
+                        field: "country",
+                        width: 150,
+                        enableRowGroup: true,
+                        enablePivot: true,
                         // an example of using a non-React cell renderer
-                        cellRenderer: countryCellRenderer, pinned: true,
+                        cellRenderer: countryCellRenderer,
+                        pinned: true,
                         filterParams: {
-                            cellRenderer: countryCellRenderer, cellHeight: 20
-                        }, columnGroupShow: 'open'
+                            cellRenderer: countryCellRenderer,
+                            cellHeight: 20
+                        },
+                        columnGroupShow: 'open'
                     }, {
-                        headerName: "DOB", field: "dob", width: 110, enableRowGroup: true, enablePivot: true, filter:'date',
-                        pinned: true, cellRenderer: function(params) {
-                            return  pad(params.value.getDate(), 2) + '/' +
-                                    pad(params.value.getMonth() + 1, 2)+ '/' +
-                                    params.value.getFullYear();
-                        }, columnGroupShow: 'open'
+                        headerName: "DOB",
+                        field: "dob",
+                        width: 110,
+                        enableRowGroup: true,
+                        enablePivot: true,
+                        filter: 'date',
+                        pinned: true,
+                        cellRenderer: function (params) {
+                            return pad(params.value.getDate(), 2) + '/' +
+                                pad(params.value.getMonth() + 1, 2) + '/' +
+                                params.value.getFullYear();
+                        },
+                        columnGroupShow: 'open'
                     }
                 ]
             },
             {
                 headerName: 'IT Skills',
                 children: [
-                    {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true,
+                    {
+                        headerName: "Skills",
+                        width: 125,
+                        suppressSorting: true,
+                        field: 'skills',
+                        enableRowGroup: true,
+                        enablePivot: true,
                         // supply a React component
                         cellRendererFramework: SkillsCellRenderer,
                         // supply a React component
                         filterFramework: SkillsFilter
                     },
-                    {headerName: "Proficiency", field: "proficiency", width: 135, enableValue: true,
+                    {
+                        headerName: "Proficiency",
+                        field: "proficiency",
+                        width: 135,
+                        enableValue: true,
                         // supply a React component
                         cellRendererFramework: ProficiencyCellRenderer,
                         // supply a React component
@@ -65,7 +104,6 @@ export default class ColDefFactory {
                 ]
             }
         ];
-        return columnDefs;
     }
 }
 
@@ -73,7 +111,7 @@ export default class ColDefFactory {
 // need to use React for it.
 function countryCellRenderer(params) {
     if (params.value) {
-        var flag = "<img border='0' width='15' height='10' " +
+        const flag = "<img border='0' width='15' height='10' " +
             "style='margin-bottom: 2px' src='http://flags.fmcdn.net/data/flags/mini/"
             + RefData.COUNTRY_CODES[params.value] + ".png'>";
         return flag + " " + params.value;
diff --git a/src/richGridExample/SortableHeaderComponent.jsx b/src/richGridExample/SortableHeaderComponent.jsx
index f034c1c..6a09591 100644
--- a/src/richGridExample/SortableHeaderComponent.jsx
+++ b/src/richGridExample/SortableHeaderComponent.jsx
@@ -7,7 +7,8 @@ export default class SortableHeaderComponent extends React.Component {
     constructor(props) {
         super(props);
 
-        this.props.column.addEventListener('sortChanged', this.onSortChanged.bind(this));
+        // this.sortChanged = this.onSortChanged.bind(this);
+        this.props.column.addEventListener('sortChanged', this.onSortChanged);
 
         //The state of this component contains the current sort state of this column
         //The possible values are: 'asc', 'desc' and ''
@@ -16,6 +17,9 @@ export default class SortableHeaderComponent extends React.Component {
         }
     }
 
+    componentWillUnmount() {
+        this.props.column.removeEventListener('sortChanged', this.onSortChanged);
+    }
 
     render() {
         let sortElements = [];
@@ -51,7 +55,7 @@ export default class SortableHeaderComponent extends React.Component {
         this.props.setSort(order, event.shiftKey);
     };
 
-    onSortChanged() {
+    onSortChanged = () => {
         if (this.props.column.isSortAscending()) {
             this.setState({
                 sorted: 'asc'