Merge pull request glittershark#298 from tjphopkins/new_props

Call initialize methods with new props

Author: glittershark

build/reactable.js

@@ -1141,11 +1141,11 @@ window.ReactDOM["default"] = window.ReactDOM;
             }
         }, {
             key: 'initializeFilters',
-            value: function initializeFilters() {
+            value: function initializeFilters(props) {
                 this._filterable = {};
                 // Transform filterable properties into a more friendly list
-                for (var i in this.props.filterable) {
-                    var column = this.props.filterable[i];
+                for (var i in props.filterable) {
+                    var column = props.filterable[i];
                     var columnName = undefined,
                         filterFunction = undefined;
 
@@ -1172,11 +1172,11 @@ window.ReactDOM["default"] = window.ReactDOM;
             }
         }, {
             key: 'initializeSorts',
-            value: function initializeSorts() {
+            value: function initializeSorts(props) {
                 this._sortable = {};
                 // Transform sortable properties into a more friendly list
-                for (var i in this.props.sortable) {
-                    var column = this.props.sortable[i];
+                for (var i in props.sortable) {
+                    var column = props.sortable[i];
                     var columnName = undefined,
                         sortFunction = undefined;
 

lib/reactable/table.js

@@ -172,11 +172,11 @@ var Table = (function (_React$Component) {
         }
     }, {
         key: 'initializeFilters',
-        value: function initializeFilters() {
+        value: function initializeFilters(props) {
             this._filterable = {};
             // Transform filterable properties into a more friendly list
-            for (var i in this.props.filterable) {
-                var column = this.props.filterable[i];
+            for (var i in props.filterable) {
+                var column = props.filterable[i];
                 var columnName = undefined,
                     filterFunction = undefined;
 
@@ -203,11 +203,11 @@ var Table = (function (_React$Component) {
         }
     }, {
         key: 'initializeSorts',
-        value: function initializeSorts() {
+        value: function initializeSorts(props) {
             this._sortable = {};
             // Transform sortable properties into a more friendly list
-            for (var i in this.props.sortable) {
-                var column = this.props.sortable[i];
+            for (var i in props.sortable) {
+                var column = props.sortable[i];
                 var columnName = undefined,
                     sortFunction = undefined;
 

src/reactable/table.jsx

@@ -136,11 +136,11 @@ export class Table extends React.Component {
         this.initializeFilters(props);
     }
 
-    initializeFilters() {
+    initializeFilters(props) {
         this._filterable = {};
         // Transform filterable properties into a more friendly list
-        for (let i in this.props.filterable) {
-            let column = this.props.filterable[i];
+        for (let i in props.filterable) {
+            let column = props.filterable[i];
             let columnName, filterFunction;
 
             if (column instanceof Object) {
@@ -165,11 +165,11 @@ export class Table extends React.Component {
         }
     }
 
-    initializeSorts() {
+    initializeSorts(props) {
         this._sortable = {};
         // Transform sortable properties into a more friendly list
-        for (let i in this.props.sortable) {
-            let column = this.props.sortable[i];
+        for (let i in props.sortable) {
+            let column = props.sortable[i];
             let columnName, sortFunction;
 
             if (column instanceof Object) {

tests/reactable_test.jsx

@@ -1419,6 +1419,62 @@ describe('Reactable', function() {
             });
         });
 
+        describe('sorting after updating columns and sortable props', () => {
+            let parent;
+
+            before(function () {
+                var TestParent = React.createFactory(React.createClass({
+                    getInitialState: function() {
+                        return ({
+                            data: [
+                                {Name: 'Lee Salminen', Age: '23', Position: 'Programmer'},
+                                {Name: 'Griffin Smith', Age: '18', Position: 'Engineer'},
+                                {Name: 'Ian Zhang', Age: '28', Position: 'Developer'}
+                            ],
+                            sortable: ['Name', 'Age', 'Position'],
+                            defaultSort: 'Position'
+                        });
+                    },
+
+                    render: function() {
+                        return (
+                            <Reactable.Table
+                                className="table"
+                                id="table"
+                                data={this.state.data}
+                                sortable={this.state.sortable}
+                                defaultSort={this.state.defaultSort}
+                            />
+                        )
+                    }
+                }));
+
+                parent = ReactDOM.render(TestParent(), ReactableTestUtils.testNode());
+            });
+
+            after(ReactableTestUtils.resetTestEnvironment);
+
+            it('sorts on new column after receiving new props', function() {
+                const newData = [
+                    { Name: 'Lee Salminen', Age: '23', newColumn: 'Programmer'},
+                    { Name: 'Griffin Smith', Age: '18', newColumn: 'Engineer'},
+                    { Name: 'Ian Zhang', Age: '28', newColumn: 'Developer'}
+                ]
+                const newSortable = ['Name', 'Age', 'newColumn']
+                const newDefaultSort = 'newColumn'
+                parent.setState({data: newData, sortable: newSortable, defaultSort: newDefaultSort});
+                var positionHeader = $('#table thead tr.reactable-column-header th')[2];
+                ReactTestUtils.Simulate.click(positionHeader);
+
+                ReactableTestUtils.expectRowText(1, ['Griffin Smith', '18', 'Engineer']);
+                ReactableTestUtils.expectRowText(2, ['Lee Salminen', '23', 'Programmer']);
+                ReactableTestUtils.expectRowText(0, ['Ian Zhang', '28', 'Developer']);
+
+                // Make sure the headers have the right classes
+                expect($(positionHeader)).to.have.class('reactable-header-sort-asc');
+            });
+        });
+
         describe('sort descending by default flag', function(){
             before(function() {
                 ReactDOM.render(