diff --git a/src/defaultProps.js b/src/defaultProps.js index 6cf11b5..76443f8 100644 --- a/src/defaultProps.js +++ b/src/defaultProps.js @@ -20,8 +20,10 @@ export default { collapseOnDataChange: true, freezeWhenExpanded: false, showFilters: false, + resizable: true, defaultSorted: [], defaultFiltered: [], + defaultResized: [], defaultExpanded: {}, defaultFilterMethod: (filter, row, column) => { const id = filter.pivotId || filter.id @@ -44,15 +46,13 @@ export default { // returning 0, undefined or any falsey value will use subsequent sorts or the index as a tiebreaker return 0 }, - resizable: true, - defaultResizing: [], // Controlled State Props // page: undefined, // pageSize: undefined, // sorted: [], // filtered: [], - // resizing: [], + // resized: [], // expanded: {}, // Controlled State Callbacks @@ -61,7 +61,7 @@ export default { onPageSizeChange: undefined, onSortedChange: undefined, onFilteredChange: undefined, - onResize: undefined, + onResizedChange: undefined, onExpanded: undefined, // Pivoting diff --git a/src/index.js b/src/index.js index 66626ec..84d5090 100644 --- a/src/index.js +++ b/src/index.js @@ -37,7 +37,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { sorted: props.defaultSorted, expanded: props.defaultExpanded, filtered: props.defaultFiltered, - resizing: props.defaultResizing, + resized: props.defaultResized, currentlyResizing: false, skipNextSort: false } @@ -92,7 +92,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { page, sorted, filtered, - resizing, + resized, pages, // Pivoting State expanded, @@ -159,8 +159,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { const canNext = page + 1 < pages const rowMinWidth = _.sum(allVisibleColumns.map(d => { - const resized = resizing.find(x => x.id === d.id) || {} - return _.getFirstDefined(resized.value, d.width, d.minWidth) + const resizedColumn = resized.find(x => x.id === d.id) || {} + return _.getFirstDefined(resizedColumn.value, d.width, d.minWidth) })) let rowIndex = -1 @@ -204,7 +204,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { } const makeHeaderGroup = (column, i) => { - const resizedValue = col => (resizing.find(x => x.id === col.id) || {}).value + const resizedValue = col => (resized.find(x => x.id === col.id) || {}).value const flex = _.sum(column.columns.map(col => col.width || resizedValue(col) ? 0 : col.minWidth)) const width = _.sum(column.columns.map(col => _.getFirstDefined(resizedValue(col), col.width, col.minWidth))) const maxWidth = _.sum(column.columns.map(col => _.getFirstDefined(resizedValue(col), col.width, col.maxWidth))) @@ -279,11 +279,11 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { } const makeHeader = (column, i) => { - const resized = resizing.find(x => x.id === column.id) || {} + const resizedCol = resized.find(x => x.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) + const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth) + const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth) const theadThProps = _.splitProps(getTheadThProps(finalState, undefined, column, this)) const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this)) @@ -370,9 +370,9 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { } const makeFilter = (column, i) => { - const resized = resizing.find(x => x.id === column.id) || {} - const width = _.getFirstDefined(resized.value, column.width, column.minWidth) - const maxWidth = _.getFirstDefined(resized.value, column.width, column.maxWidth) + const resizedCol = resized.find(x => x.id === column.id) || {} + const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth) + const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth) const theadFilterThProps = _.splitProps(getTheadFilterThProps(finalState, undefined, column, this)) const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this)) @@ -454,10 +454,10 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { {...trProps.rest} > {allVisibleColumns.map((column, i2) => { - const resized = resizing.find(x => x.id === column.id) || {} + const resizedCol = resized.find(x => x.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) + const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth) + const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth) const tdProps = _.splitProps(getTdProps(finalState, rowInfo, column, this)) const columnProps = _.splitProps(column.getProps(finalState, rowInfo, column, this)) @@ -641,11 +641,11 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { } const makePadColumn = (column, i) => { - const resized = resizing.find(x => x.id === column.id) || {} + const resizedCol = resized.find(x => x.id === column.id) || {} const show = typeof column.show === 'function' ? column.show() : column.show - let width = _.getFirstDefined(resized.value, column.width, column.minWidth) + let width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth) let flex = width - let maxWidth = _.getFirstDefined(resized.value, column.width, column.maxWidth) + let maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth) const tdProps = _.splitProps(getTdProps(finalState, undefined, column, this)) const columnProps = _.splitProps(column.getProps(finalState, undefined, column, this)) @@ -707,10 +707,10 @@ export default class ReactTable extends Methods(Lifecycle(Component)) { } const makeColumnFooter = (column, i) => { - const resized = resizing.find(x => x.id === column.id) || {} + const resizedCol = resized.find(x => x.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) + const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth) + const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth) const tFootTdProps = _.splitProps(getTfootTdProps(finalState, undefined, undefined, this)) const columnProps = _.splitProps(column.getProps(finalState, undefined, column, this)) const columnFooterProps = _.splitProps(column.getFooterProps(finalState, undefined, column, this)) diff --git a/src/methods.js b/src/methods.js index fc79ea7..ecaefeb 100644 --- a/src/methods.js +++ b/src/methods.js @@ -633,11 +633,11 @@ export default Base => class extends Base { } resizeColumnMoving (event) { - const {onResize} = this.props - const {resizing, currentlyResizing} = this.getResolvedState() + const {onResizedChange} = this.props + const {resized, currentlyResizing} = this.getResolvedState() // Delete old value - const newResizing = resizing.filter(x => x.id !== currentlyResizing.id) + const newResized = resized.filter(x => x.id !== currentlyResizing.id) let pageX @@ -650,19 +650,19 @@ export default Base => class extends Base { // Set the min size to 10 to account for margin and border or else the group headers don't line up correctly const newWidth = Math.max(currentlyResizing.parentWidth + pageX - currentlyResizing.startX, 11) - newResizing.push({ + newResized.push({ id: currentlyResizing.id, value: newWidth }) - onResize && onResize(newResizing, event) + onResizedChange && onResizedChange(newResized, event) - if (this.props.resizing) { + if (this.props.resized) { return } this.setStateWithData({ - resizing: newResizing + resized: newResized }) } } diff --git a/stories/ControlledTable.js b/stories/ControlledTable.js index 3d16305..3a1f496 100644 --- a/stories/ControlledTable.js +++ b/stories/ControlledTable.js @@ -38,7 +38,7 @@ class Story extends React.Component { page: 0, pageSize: 10, expanded: {}, - resizing: [], + resized: [], filtered: [] } } @@ -57,14 +57,14 @@ class Story extends React.Component { page={this.state.page} pageSize={this.state.pageSize} expanded={this.state.expanded} - resizing={this.state.resizing} + resized={this.state.resized} filtered={this.state.filtered} // Callbacks onSortedChange={sorted => this.setState({sorted})} onPageChange={page => this.setState({page})} onPageSizeChange={(pageSize, page) => this.setState({page, pageSize})} - onExpanded={(expanded) => this.setState({expanded})} - onResize={resizing => this.setState({resizing})} + onExpanded={expanded => this.setState({expanded})} + onResizedChange={resized => this.setState({resized})} onFilteredChange={filtered => this.setState({filtered})} />