added onFilter event prop

Author: educastellano

README.md

@@ -461,15 +461,29 @@ var table = ReactDOM.render(
 
 ### Events
 
-You can pass an `onSort` prop to a `<Reactable.Table>` to provide an event
-handler for when the sorting in the table changes.
+You can pass functions to the following props of `<Reactable.Table>` to provide event
+handlers.
+
+#### onSort
+
+Called when the sorting in the table changes.
 
 This handler will be passed an object that contains the column name that is
-being sorted by, and the direction it is being sorted;
+being sorted by, and the direction it is being sorted:
 
-```JSON
+```js
 {
   column: 'Name',
   direction: -1
 }
 ```
+
+#### onFilter
+
+Called every time the filtering changes.
+
+Handler arguments:
+
+Name | Type | Description
+--- | --- | ---
+`filter` | *string* | Text that's being used for filtering

build/reactable.js

@@ -1414,6 +1414,9 @@ window.ReactDOM["default"] = window.ReactDOM;
                         filtering: filtering,
                         onFilter: function (filter) {
                             _this.setState({ filter: filter });
+                            if (_this.props.onFilter) {
+                                _this.props.onFilter(filter);
+                            }
                         },
                         filterPlaceholder: this.props.filterPlaceholder,
                         currentFilter: this.state.filter,

build/tests/reactable_test.js

@@ -1734,11 +1734,16 @@
         describe('filtering', function () {
             describe('filtering with javascript objects for data', function () {
                 var data = [{ name: "Lee SomeoneElse", age: 18 }, { name: "Lee Salminen", age: 23 }, { name: "No Age", age: null }];
+                var filterBy;
+                var onFilter = function onFilter(filter) {
+                    filterBy = filter;
+                };
                 before(function () {
                     ReactDOM.render(React.createElement(
                         Reactable.Table,
                         { className: 'table', id: 'table',
-                            filterable: ['Name', 'Age'] },
+                            filterable: ['Name', 'Age'],
+                            onFilter: onFilter },
                         React.createElement(
                             Reactable.Tr,
                             null,
@@ -1771,6 +1776,15 @@
                     ReactableTestUtils.expectRowText(0, ['Lee SomeoneElse', '18']);
                     ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23']);
                 });
+                it('calls onFilter event handler', function () {
+                    var $filter = $('#table thead tr.reactable-filterer input.reactable-filter-input');
+                    var textToSearch = 'lee';
+
+                    $filter.val(textToSearch);
+                    React.addons.TestUtils.Simulate.keyUp($filter[0]);
+
+                    expect(filterBy).to.equal(textToSearch);
+                });
             });
 
             describe('basic case-insensitive filtering', function () {

lib/reactable/table.js

@@ -467,6 +467,9 @@ var Table = (function (_React$Component) {
                     filtering: filtering,
                     onFilter: function (filter) {
                         _this.setState({ filter: filter });
+                        if (_this.props.onFilter) {
+                            _this.props.onFilter(filter);
+                        }
                     },
                     filterPlaceholder: this.props.filterPlaceholder,
                     currentFilter: this.state.filter,

src/reactable/table.jsx

@@ -434,6 +434,9 @@ export class Table extends React.Component {
                  filtering={filtering}
                  onFilter={filter => {
                      this.setState({ filter: filter });
+                     if (this.props.onFilter) {
+                        this.props.onFilter(filter)
+                     }
                  }}
                  filterPlaceholder={this.props.filterPlaceholder}
                  currentFilter={this.state.filter}

tests/reactable_test.jsx

@@ -1625,10 +1625,15 @@ describe('Reactable', function() {
     describe('filtering', function() {
         describe('filtering with javascript objects for data', function(){
             var data = [{name:"Lee SomeoneElse", age:18},{name:"Lee Salminen", age:23},{name:"No Age", age:null}]
+            var filterBy
+            var onFilter = function (filter) {
+                filterBy = filter
+            }
             before(function () {
                 ReactDOM.render(
                     <Reactable.Table className="table" id="table"
-                        filterable={['Name', 'Age']}>
+                        filterable={['Name', 'Age']}
+                        onFilter={onFilter}>
                         <Reactable.Tr>
                             <Reactable.Td column="Name" data={data[0].name}/>
                             <Reactable.Td column="Age" data={data[0].age}/>
@@ -1657,6 +1662,15 @@ describe('Reactable', function() {
                 ReactableTestUtils.expectRowText(0, ['Lee SomeoneElse', '18']);
                 ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23']);
             });
+            it('calls onFilter event handler', function() {
+                var $filter = $('#table thead tr.reactable-filterer input.reactable-filter-input');
+                var textToSearch = 'lee'
+
+                $filter.val(textToSearch);
+                React.addons.TestUtils.Simulate.keyUp($filter[0]);
+
+                expect(filterBy).to.equal(textToSearch);
+            });
         });
 
         describe('basic case-insensitive filtering', function(){