filtering->filtered, onFilteringChange->onFilteredChange, defaultFiltering->defaultFiltered

src/defaultProps.js

@@ -21,7 +21,7 @@ export default {
   freezeWhenExpanded: false,
   showFilters: false,
   defaultSorted: [],
-  defaultFilters: [],
+  defaultFiltered: [],
   defaultExpanded: {},
   defaultFilterMethod: (filter, row, column) => {
     const id = filter.pivotId || filter.id
@@ -51,6 +51,7 @@ export default {
   // page: undefined,
   // pageSize: undefined,
   // sorted: [],
+  // filtered: [],
   // resizing: [],
   // expandedRows: {},
 
@@ -59,7 +60,7 @@ export default {
   onPageChange: undefined,
   onPageSizeChange: undefined,
   onSortedChange: undefined,
-  onFiltersChange: undefined,
+  onFilteredChange: undefined,
   onResize: undefined,
   onExpandRow: undefined,
 

src/index.js

@@ -36,7 +36,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       pageSize: props.defaultPageSize,
       sorted: props.defaultSorted,
       expandedRows: props.defaultExpanded,
-      filters: props.defaultFilters,
+      filtered: props.defaultFiltered,
       resizing: props.defaultResizing,
       currentlyResizing: false,
       skipNextSort: false
@@ -91,7 +91,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
       pageSize,
       page,
       sorted,
-      filters,
+      filtered,
       resizing,
       pages,
       // Pivoting State
@@ -393,7 +393,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
         ...columnHeaderProps.rest
       }
 
-      const filter = filters.find(filter => filter.id === column.id)
+      const filter = filtered.find(filter => filter.id === column.id)
 
       const ResolvedFilterComponent = column.Filter || FilterComponent
 

src/lifecycle.js

@@ -18,7 +18,7 @@ export default Base => class extends Base {
 
     if ((oldState.showFilters !== newState.showFilters) ||
       (oldState.showFilters !== newState.showFilters)) {
-      newState.filters = newState.defaultFilters
+      newState.filtered = newState.defaultFiltered
     }
 
     // Props that trigger a data update
@@ -28,7 +28,7 @@ export default Base => class extends Base {
       oldState.pivotBy !== newState.pivotBy ||
       oldState.sorted !== newState.sorted ||
       oldState.showFilters !== newState.showFilters ||
-      oldState.filters !== newState.filters
+      oldState.filtered !== newState.filtered
     ) {
       this.setStateWithData(this.getDataModel(newState))
     }
@@ -59,14 +59,14 @@ export default Base => class extends Base {
     if (
       (oldState.frozen && !newResolvedState.frozen) ||
       oldState.sorted !== newResolvedState.sorted ||
-      oldState.filters !== newResolvedState.filters ||
+      oldState.filtered !== newResolvedState.filtered ||
       oldState.showFilters !== newResolvedState.showFilters ||
       (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData)
     ) {
       // Handle collapseOnsortedChange & collapseOnDataChange
       if (
         (oldState.sorted !== newResolvedState.sorted && this.props.collapseOnSortingChange) ||
-        (oldState.filters !== newResolvedState.filters) ||
+        (oldState.filtered !== newResolvedState.filtered) ||
         (oldState.showFilters !== newResolvedState.showFilters) ||
         (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnDataChange)
       ) {

src/methods.js

@@ -271,7 +271,7 @@ export default Base => class extends Base {
     const {
       manual,
       sorted,
-      filters,
+      filtered,
       showFilters,
       defaultFilterMethod,
       resolvedData,
@@ -293,7 +293,7 @@ export default Base => class extends Base {
         this.filterData(
           resolvedData,
           showFilters,
-          filters,
+          filtered,
           defaultFilterMethod,
           allVisibleColumns
         ),
@@ -315,11 +315,11 @@ export default Base => class extends Base {
     return _.getFirstDefined(this.state[key], this.props[key])
   }
 
-  filterData (data, showFilters, filters, defaultFilterMethod, allVisibleColumns) {
+  filterData (data, showFilters, filtered, defaultFilterMethod, allVisibleColumns) {
     let filteredData = data
 
-    if (showFilters && filters.length) {
-      filteredData = filters.reduce(
+    if (showFilters && filtered.length) {
+      filteredData = filtered.reduce(
         (filteredSoFar, nextFilter) => {
           return filteredSoFar.filter(
             (row) => {
@@ -353,7 +353,7 @@ export default Base => class extends Base {
         }
         return {
           ...row,
-          [this.props.subRowsKey]: this.filterData(row[this.props.subRowsKey], showFilters, filters, defaultFilterMethod, allVisibleColumns)
+          [this.props.subRowsKey]: this.filterData(row[this.props.subRowsKey], showFilters, filtered, defaultFilterMethod, allVisibleColumns)
         }
       }).filter(row => {
         if (!row[this.props.subRowsKey]) {
@@ -545,11 +545,11 @@ export default Base => class extends Base {
   }
 
   filterColumn (column, value) {
-    const {filters} = this.getResolvedState()
-    const {onFiltersChange} = this.props
+    const {filtered} = this.getResolvedState()
+    const {onFilteredChange} = this.props
 
     // Remove old filter first if it exists
-    const newFiltering = (filters || []).filter(x => {
+    const newFiltering = (filtered || []).filter(x => {
       if (x.id !== column.id) {
         return true
       }
@@ -562,16 +562,16 @@ export default Base => class extends Base {
       })
     }
 
-    onFiltersChange && onFiltersChange(newFiltering, column, value)
+    onFilteredChange && onFilteredChange(newFiltering, column, value)
 
     // If filters is being controlled, do not manage state internally
-    if (this.props.filters) {
+    if (this.props.filtered) {
       this.fireFetchData()
       return
     }
 
     this.setStateWithData({
-      filters: newFiltering
+      filtered: newFiltering
     }, () => {
       this.fireFetchData()
     })

stories/ControlledTable.js

@@ -39,7 +39,7 @@ class Story extends React.Component {
       pageSize: 10,
       expandedRows: {},
       resizing: [],
-      filters: []
+      filtered: []
     }
   }
   render () {
@@ -58,14 +58,14 @@ class Story extends React.Component {
             pageSize={this.state.pageSize}
             expandedRows={this.state.expandedRows}
             resizing={this.state.resizing}
-            filters={this.state.filters}
+            filtered={this.state.filtered}
             // Callbacks
             onSortedChange={sorted => this.setState({sorted})}
             onPageChange={page => this.setState({page})}
             onPageSizeChange={(pageSize, page) => this.setState({page, pageSize})}
             onExpandRow={(expandedRows) => this.setState({expandedRows})}
             onResize={resizing => this.setState({resizing})}
-            onFiltersChange={filters => this.setState({filters})}
+            onFilteredChange={filtered => this.setState({filtered})}
           />
         </div>
         <br />

stories/ServerSide.js

@@ -13,13 +13,13 @@ const rawData = _.map(_.range(3424), d => {
 })
 
 // Now let's mock the server.  It's job is simple: use the table model to sort and return the page data
-const requestData = (pageSize, page, sorted, filters) => {
+const requestData = (pageSize, page, sorted, filtered) => {
   return new Promise((resolve, reject) => {
     // On the server, you'll likely use SQL or noSQL or some other query language to do this.
     // For this mock, we'll just use lodash
     let filteredData = rawData
-    if (filters.length) {
-      filteredData = filters.reduce(
+    if (filtered.length) {
+      filteredData = filtered.reduce(
         (filteredSoFar, nextFilter) => {
           return filteredSoFar.filter(
             (row) => {
@@ -63,7 +63,7 @@ class Story extends React.Component {
     // You can set the `loading` prop of the table to true to use the built-in one or show you're own loading bar if you want.
     this.setState({loading: true})
     // Request the data however you want.  Here, we'll use our mocked service we created earlier
-    requestData(state.pageSize, state.page, state.sorted, state.filters)
+    requestData(state.pageSize, state.page, state.sorted, state.filtered)
       .then((res) => {
         // Now just get the rows of data to your React Table (and update anything else like total pages or loading)
         this.setState({