diff --git a/src/index.js b/src/index.js index b6bd128..ec4f485 100644 --- a/src/index.js +++ b/src/index.js @@ -170,18 +170,23 @@ export default React.createClass({ oldState.pivotBy !== newState.pivotBy || oldState.sorting !== newState.sorting ) { - this.setState(this.getDataModel(nextProps, nextState)) + this.setStateWithData(this.getDataModel(nextProps, nextState)) } }, setStateWithData (newState, cb) { const oldState = this.getResolvedState() const newResolvedState = this.getResolvedState({}, newState) - if (oldState.sorting !== newResolvedState.sorting) { - Object.assign(newState, this.getDataModel({}, newState)) + if ( + oldState.resolvedData !== newResolvedState.resolvedData || + oldState.sorting !== newResolvedState.sorting + ) { + Object.assign(newState, this.getSortedData({}, newState)) } // Calculate pageSize all the time - newState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize) + if (newResolvedState.resolvedData) { + newState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize) + } return this.setState(newState, cb) }, @@ -190,8 +195,7 @@ export default React.createClass({ const newState = this.getResolvedState(nextProps, nextState) // State changes that trigger a render if ( - oldState.sorting !== newState.sorting || - oldState.resolvedData !== newState.resolvedData || + oldState.sortedData !== newState.sortedData || oldState.page !== newState.page || oldState.pageSize !== newState.pageSize || oldState.expandedRows !== newState.expandedRows @@ -259,13 +263,15 @@ export default React.createClass({ headerGroups, standardColumns, allDecoratedColumns, - hasHeaderGroups + hasHeaderGroups, + // Sorted Data + sortedData } = resolvedProps // Pagination const startRow = pageSize * page const endRow = startRow + pageSize - const pageRows = manual ? resolvedData : resolvedData.slice(startRow, endRow) + const pageRows = manual ? resolvedData : sortedData.slice(startRow, endRow) const minRows = this.getMinRows() const padRows = pages > 1 ? _.range(pageSize - pageRows.length) : minRows ? _.range(Math.max(minRows - pageRows.length, 0)) @@ -332,7 +338,7 @@ export default React.createClass({ > {typeof column.header === 'function' ? ( ) : column.header} @@ -377,7 +383,7 @@ export default React.createClass({ {typeof column.header === 'function' ? ( ) : column.header} @@ -427,7 +433,7 @@ export default React.createClass({ > {typeof column.header === 'function' ? ( ) : column.header} @@ -618,9 +624,7 @@ export default React.createClass({ data, pivotIDKey, pivotValKey, - subRowsKey, - manual, - sorting + subRowsKey } = this.getResolvedState(nextProps, nextState) // Determine Header Groups @@ -715,7 +719,7 @@ export default React.createClass({ const columnPercentage = 100 / allVisibleColumns.length // Access the data - let accessedData = data.map((d, i) => { + let resolvedData = data.map((d, i) => { const row = { __original: d, __index: i @@ -768,18 +772,13 @@ export default React.createClass({ }) return groupedRows } - accessedData = groupRecursively(accessedData, pivotBy) + resolvedData = groupRecursively(resolvedData, pivotBy) } - const resolvedSorting = sorting.length ? sorting : this.getInitSorting(allDecoratedColumns) - - // Resolve the data from either manual data or sorted data - const resolvedData = manual ? accessedData : this.sortData(accessedData, resolvedSorting) - return { + resolvedData, columnPercentage, pivotColumn, - resolvedData, allVisibleColumns, headerGroups, standardColumns, @@ -788,6 +787,22 @@ export default React.createClass({ } }, + getSortedData (nextProps, nextState) { + const { + manual, + sorting, + allDecoratedColumns, + resolvedData + } = this.getResolvedState(nextProps, nextState) + + const resolvedSorting = sorting.length ? sorting : this.getInitSorting(allDecoratedColumns) + + // Resolve the data from either manual data or sorted data + return { + sortedData: manual ? resolvedData : this.sortData(resolvedData, resolvedSorting) + } + }, + fireOnChange () { this.props.onChange(this.getResolvedState(), this) },