diff --git a/src/defaultProps.js b/src/defaultProps.js index 4995678..19bc5b7 100644 --- a/src/defaultProps.js +++ b/src/defaultProps.js @@ -19,8 +19,8 @@ export default { collapseOnPageChange: true, collapseOnDataChange: true, freezeWhenExpanded: false, - defaultSorting: [], showFilters: false, + defaultSorted: [], defaultFilters: [], defaultExpanded: {}, defaultFilterMethod: (filter, row, column) => { @@ -50,7 +50,7 @@ export default { // Controlled State Props // page: undefined, // pageSize: undefined, - // sorting: undefined, + // sorted: [], // resizing: [], // expandedRows: {}, @@ -58,7 +58,7 @@ export default { onExpandSubComponent: undefined, onPageChange: undefined, onPageSizeChange: undefined, - onSortingChange: undefined, + onSortedChange: undefined, onFiltersChange: undefined, onResize: undefined, onExpandRow: undefined, diff --git a/src/index.js b/src/index.js index 4f1036b..f60802a 100644 --- a/src/index.js +++ b/src/index.js @@ -34,7 +34,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { this.state = { page: 0, pageSize: props.defaultPageSize, - sorting: props.defaultSorting, + sorted: props.defaultSorted, expandedRows: props.defaultExpanded, filters: props.defaultFilters, resizing: props.defaultResizing, @@ -90,7 +90,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { loading, pageSize, page, - sorting, + sorted, filters, resizing, pages, @@ -280,7 +280,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { const makeHeader = (column, i) => { const resized = resizing.find(x => x.id === column.id) || {} - const sort = sorting.find(d => d.id === column.id) + const sort = sorted.find(d => d.id === column.id) const show = typeof column.show === 'function' ? column.show() : column.show const width = _.getFirstDefined(resized.value, column.width, column.minWidth) const maxWidth = _.getFirstDefined(resized.value, column.width, column.maxWidth) diff --git a/src/lifecycle.js b/src/lifecycle.js index 47343b0..4298c1e 100644 --- a/src/lifecycle.js +++ b/src/lifecycle.js @@ -12,8 +12,8 @@ export default Base => class extends Base { const oldState = this.getResolvedState() const newState = this.getResolvedState(nextProps, nextState) - if (JSON.stringify(oldState.defaultSorting) !== JSON.stringify(newState.defaultSorting)) { - newState.sorting = newState.defaultSorting + if (JSON.stringify(oldState.defaultSorted) !== JSON.stringify(newState.defaultSorted)) { + newState.sorted = newState.defaultSorted } if ((oldState.showFilters !== newState.showFilters) || @@ -26,7 +26,7 @@ export default Base => class extends Base { oldState.data !== newState.data || oldState.columns !== newState.columns || oldState.pivotBy !== newState.pivotBy || - oldState.sorting !== newState.sorting || + oldState.sorted !== newState.sorted || oldState.showFilters !== newState.showFilters || oldState.filters !== newState.filters ) { @@ -58,14 +58,14 @@ export default Base => class extends Base { // sorting model has changed, update the data if ( (oldState.frozen && !newResolvedState.frozen) || - oldState.sorting !== newResolvedState.sorting || + oldState.sorted !== newResolvedState.sorted || oldState.filters !== newResolvedState.filters || oldState.showFilters !== newResolvedState.showFilters || (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData) ) { - // Handle collapseOnSortingChange & collapseOnDataChange + // Handle collapseOnsortedChange & collapseOnDataChange if ( - (oldState.sorting !== newResolvedState.sorting && this.props.collapseOnSortingChange) || + (oldState.sorted !== newResolvedState.sorted && this.props.collapseOnSortingChange) || (oldState.filters !== newResolvedState.filters) || (oldState.showFilters !== newResolvedState.showFilters) || (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnDataChange) diff --git a/src/methods.js b/src/methods.js index 484dc72..b14d403 100644 --- a/src/methods.js +++ b/src/methods.js @@ -270,7 +270,7 @@ export default Base => class extends Base { getSortedData (resolvedState) { const { manual, - sorting, + sorted, filters, showFilters, defaultFilterMethod, @@ -297,7 +297,7 @@ export default Base => class extends Base { defaultFilterMethod, allVisibleColumns ), - sorting, + sorted, sortMethodsByColumnID ) } @@ -366,14 +366,14 @@ export default Base => class extends Base { return filteredData } - sortData (data, sorting, sortMethodsByColumnID = {}) { - if (!sorting.length) { + sortData (data, sorted, sortMethodsByColumnID = {}) { + if (!sorted.length) { return data } - const sorted = (this.props.orderByMethod || _.orderBy)( + const sortedData = (this.props.orderByMethod || _.orderBy)( data, - sorting.map(sort => { + sorted.map(sort => { // Support custom sorting methods for each column if (sortMethodsByColumnID[sort.id]) { return (a, b) => { @@ -384,18 +384,18 @@ export default Base => class extends Base { return this.props.defaultSortMethod(a[sort.id], b[sort.id]) } }), - sorting.map(d => !d.desc), + sorted.map(d => !d.desc), this.props.indexKey ) - sorted.forEach(row => { + sortedData.forEach(row => { if (!row[this.props.subRowsKey]) { return } - row[this.props.subRowsKey] = this.sortData(row[this.props.subRowsKey], sorting, sortMethodsByColumnID) + row[this.props.subRowsKey] = this.sortData(row[this.props.subRowsKey], sorted, sortMethodsByColumnID) }) - return sorted + return sortedData } getMinRows () { @@ -443,7 +443,7 @@ export default Base => class extends Base { } sortColumn (column, additive) { - const {sorting, skipNextSort} = this.getResolvedState() + const {sorted, skipNextSort} = this.getResolvedState() // we can't stop event propagation from the column resize move handlers // attached to the document because of react's synthetic events @@ -456,38 +456,38 @@ export default Base => class extends Base { return } - const {onSortingChange} = this.props + const {onSortedChange} = this.props - let newSorting = _.clone(sorting || []).map(d => { + let newSorted = _.clone(sorted || []).map(d => { d.desc = _.isSortingDesc(d) return d }) if (!_.isArray(column)) { // Single-Sort - const existingIndex = newSorting.findIndex(d => d.id === column.id) + const existingIndex = newSorted.findIndex(d => d.id === column.id) if (existingIndex > -1) { - const existing = newSorting[existingIndex] + const existing = newSorted[existingIndex] if (existing.desc) { if (additive) { - newSorting.splice(existingIndex, 1) + newSorted.splice(existingIndex, 1) } else { existing.desc = false - newSorting = [existing] + newSorted = [existing] } } else { existing.desc = true if (!additive) { - newSorting = [existing] + newSorted = [existing] } } } else { if (additive) { - newSorting.push({ + newSorted.push({ id: column.id, desc: false }) } else { - newSorting = [{ + newSorted = [{ id: column.id, desc: false }] @@ -495,35 +495,35 @@ export default Base => class extends Base { } } else { // Multi-Sort - const existingIndex = newSorting.findIndex(d => d.id === column[0].id) + const existingIndex = newSorted.findIndex(d => d.id === column[0].id) // Existing Sorted Column if (existingIndex > -1) { - const existing = newSorting[existingIndex] + const existing = newSorted[existingIndex] if (existing.desc) { if (additive) { - newSorting.splice(existingIndex, column.length) + newSorted.splice(existingIndex, column.length) } else { column.forEach((d, i) => { - newSorting[existingIndex + i].desc = false + newSorted[existingIndex + i].desc = false }) } } else { column.forEach((d, i) => { - newSorting[existingIndex + i].desc = true + newSorted[existingIndex + i].desc = true }) } if (!additive) { - newSorting = newSorting.slice(existingIndex, column.length) + newSorted = newSorted.slice(existingIndex, column.length) } } else { // New Sort Column if (additive) { - newSorting = newSorting.concat(column.map(d => ({ + newSorted = newSorted.concat(column.map(d => ({ id: d.id, desc: false }))) } else { - newSorting = column.map(d => ({ + newSorted = column.map(d => ({ id: d.id, desc: false })) @@ -531,14 +531,14 @@ export default Base => class extends Base { } } // If controlled, do not keep track of state - onSortingChange && onSortingChange(newSorting, column, additive) - if (typeof this.props.sorting !== 'undefined') { + onSortedChange && onSortedChange(newSorted, column, additive) + if (typeof this.props.sorted !== 'undefined') { this.fireFetchData() return } this.setStateWithData({ - page: ((!sorting.length && newSorting.length) || !additive) ? 0 : this.state.page, - sorting: newSorting + page: ((!sorted.length && newSorted.length) || !additive) ? 0 : this.state.page, + sorted: newSorted }, () => { this.fireFetchData() }) diff --git a/stories/ControlledTable.js b/stories/ControlledTable.js index 94318d5..36a387c 100644 --- a/stories/ControlledTable.js +++ b/stories/ControlledTable.js @@ -34,7 +34,7 @@ class Story extends React.Component { constructor () { super() this.state = { - sorting: [], + sorted: [], page: 0, pageSize: 10, expandedRows: {}, @@ -53,14 +53,14 @@ class Story extends React.Component { pivotBy={['lastName']} showFilters // Controlled Props - sorting={this.state.sorting} + sorted={this.state.sorted} page={this.state.page} pageSize={this.state.pageSize} expandedRows={this.state.expandedRows} resizing={this.state.resizing} filters={this.state.filters} // Callbacks - onSortingChange={sorting => this.setState({sorting})} + onSortedChange={sorted => this.setState({sorted})} onPageChange={page => this.setState({page})} onPageSizeChange={(pageSize, page) => this.setState({page, pageSize})} onExpandRow={(expandedRows) => this.setState({expandedRows})} diff --git a/stories/DefaultSorting.js b/stories/DefaultSorting.js index 68b9f4f..481d75f 100644 --- a/stories/DefaultSorting.js +++ b/stories/DefaultSorting.js @@ -40,7 +40,7 @@ class Story extends React.Component { data={data} columns={columns} defaultPageSize={10} - defaultSorting={[{ + defaultSorted={[{ id: 'age', desc: true }]} diff --git a/stories/PivotingOptions.js b/stories/PivotingOptions.js index f0a7cde..1a505f0 100644 --- a/stories/PivotingOptions.js +++ b/stories/PivotingOptions.js @@ -79,7 +79,7 @@ class Story extends React.Component { defaultPageSize={10} className='-striped -highlight' pivotBy={['firstName', 'lastName']} - defaultSorting={[{id: 'firstName', desc: false}, {id: 'lastName', desc: true}]} + defaultSorted={[{id: 'firstName', desc: false}, {id: 'lastName', desc: true}]} collapseOnSortingChange={false} showFilters ExpanderComponent={({isExpanded, ...rest}) => ( diff --git a/stories/ServerSide.js b/stories/ServerSide.js index 3854ffb..f4acbfe 100644 --- a/stories/ServerSide.js +++ b/stories/ServerSide.js @@ -13,7 +13,7 @@ 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, sorting, filters) => { +const requestData = (pageSize, page, sorted, filters) => { 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 @@ -28,14 +28,14 @@ const requestData = (pageSize, page, sorting, filters) => { } , filteredData) } - const sortedData = _.orderBy(filteredData, sorting.map(sort => { + const sortedData = _.orderBy(filteredData, sorted.map(sort => { return row => { if (row[sort.id] === null || row[sort.id] === undefined) { return -Infinity } return typeof row[sort.id] === 'string' ? row[sort.id].toLowerCase() : row[sort.id] } - }), sorting.map(d => d.desc ? 'desc' : 'asc')) + }), sorted.map(d => d.desc ? 'desc' : 'asc')) // Be sure to send back the rows to be displayed and any other pertinent information, like how many pages there are total. const res = { @@ -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.sorting, state.filters) + requestData(state.pageSize, state.page, state.sorted, state.filters) .then((res) => { // Now just get the rows of data to your React Table (and update anything else like total pages or loading) this.setState({