diff --git a/src/defaultProps.js b/src/defaultProps.js index 19bc5b7..db5c884 100644 --- a/src/defaultProps.js +++ b/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, diff --git a/src/index.js b/src/index.js index f60802a..fc63168 100644 --- a/src/index.js +++ b/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 diff --git a/src/lifecycle.js b/src/lifecycle.js index 4298c1e..271fe0b 100644 --- a/src/lifecycle.js +++ b/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) ) { diff --git a/src/methods.js b/src/methods.js index b14d403..d7f6e71 100644 --- a/src/methods.js +++ b/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() }) diff --git a/stories/ControlledTable.js b/stories/ControlledTable.js index 36a387c..8c4ffd6 100644 --- a/stories/ControlledTable.js +++ b/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})} />
diff --git a/stories/ServerSide.js b/stories/ServerSide.js index f4acbfe..b0b6e61 100644 --- a/stories/ServerSide.js +++ b/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({