diff --git a/.storybook/config.js b/.storybook/config.js index cdcfebe..5099cc8 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -15,6 +15,7 @@ import ServerSide from '../stories/ServerSide.js' import SubComponents from '../stories/SubComponents.js' import Pivoting from '../stories/Pivoting.js' import PivotingSubComponents from '../stories/PivotingSubComponents.js' +import MillionRows from '../stories/MillionRows.js' // configure(() => { storiesOf('1. Docs') @@ -35,4 +36,5 @@ configure(() => { .add('Sub Components', SubComponents) .add('Pivoting & Aggregation', Pivoting) .add('Pivoting & Aggregation w/ Sub Components', PivotingSubComponents) + .add('1 Million Rows w/ Pivoting & Sub Components', MillionRows) }, module) diff --git a/src/index.js b/src/index.js index 22faa32..b6bd128 100644 --- a/src/index.js +++ b/src/index.js @@ -177,11 +177,11 @@ export default React.createClass({ setStateWithData (newState, cb) { const oldState = this.getResolvedState() const newResolvedState = this.getResolvedState({}, newState) - if ( - oldState.sorting !== newResolvedState.sorting - ) { + if (oldState.sorting !== newResolvedState.sorting) { Object.assign(newState, this.getDataModel({}, newState)) } + // Calculate pageSize all the time + newState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize) return this.setState(newState, cb) }, @@ -231,6 +231,7 @@ export default React.createClass({ pageSize, page, sorting, + pages, // Pivoting State pivotBy, pivotValKey, @@ -258,8 +259,7 @@ export default React.createClass({ headerGroups, standardColumns, allDecoratedColumns, - hasHeaderGroups, - pages + hasHeaderGroups } = resolvedProps // Pagination @@ -535,36 +535,38 @@ export default React.createClass({ const makePadRow = (row, i) => { return ( - - {SubComponent && ( - - )} - {standardColumns.map((column, i2) => { - const show = typeof column.show === 'function' ? column.show() : column.show - return ( - + + {SubComponent && ( + -   - - ) - })} - + /> + )} + {standardColumns.map((column, i2) => { + const show = typeof column.show === 'function' ? column.show() : column.show + return ( + +   + + ) + })} + + ) } @@ -618,9 +620,7 @@ export default React.createClass({ pivotValKey, subRowsKey, manual, - sorting, - pageSize, - pages + sorting } = this.getResolvedState(nextProps, nextState) // Determine Header Groups @@ -784,8 +784,7 @@ export default React.createClass({ headerGroups, standardColumns, allDecoratedColumns, - hasHeaderGroups, - pages: manual ? pages : Math.ceil(resolvedData.length / pageSize) + hasHeaderGroups } }, @@ -880,7 +879,7 @@ export default React.createClass({ // Normalize the page to display const currentRow = pageSize * page - const newPage = Math.floor(currentRow / pageSize) + const newPage = Math.floor(currentRow / newPageSize) if (onPageSizeChange) { return onPageSizeChange(newPageSize, newPage) diff --git a/src/index.styl b/src/index.styl index 27c5c4e..75b3f79 100644 --- a/src/index.styl +++ b/src/index.styl @@ -108,7 +108,7 @@ $expandSize = 7px background: alpha(black, .03) &.-highlight .rt-tbody - .rt-tr:hover + .rt-tr:not(.-padRow):hover background: alpha(black, .05) .-pagination diff --git a/stories/MillionRows.js b/stories/MillionRows.js new file mode 100644 index 0000000..edf09c2 --- /dev/null +++ b/stories/MillionRows.js @@ -0,0 +1,138 @@ +import React from 'react' +import _ from 'lodash' +import namor from 'namor' + +import CodeHighlight from './components/codeHighlight' +import ReactTable from '../lib/index' + +export default () => { + const data = _.map(_.range(1000000), d => { + return { + firstName: namor.generate({ words: 1, numLen: 0 }), + lastName: namor.generate({ words: 1, numLen: 0 }), + age: Math.floor(Math.random() * 30), + visits: Math.floor(Math.random() * 100) + } + }) + + const columns = [{ + header: 'Name', + columns: [{ + header: 'First Name', + accessor: 'firstName' + }, { + header: 'Last Name', + id: 'lastName', + accessor: d => d.lastName + }] + }, { + header: 'Info', + columns: [{ + header: 'Age', + accessor: 'age', + aggregate: vals => _.round(_.mean(vals)), + render: row => { + return {row.aggregated ? `${row.value} (avg)` : row.value} + } + }, { + header: 'Visits', + accessor: 'visits', + aggregate: vals => _.sum(vals) + }] + }] + + return ( +
+
+ { + return ( +
+ You can put any component you want here, even another React Table! +
+
+ { + return ( +
+ It even has access to the row data: + {() => JSON.stringify(row, null, 2)} +
+ ) + }} + /> +
+ ) + }} + /> +
+
+
+ Tip: Hold shift when sorting to multi-sort! +
+ {() => getCode()} +
+ ) +} + +function getCode () { + return ` +const columns = [{ + header: 'Name', + columns: [{ + header: 'First Name', + accessor: 'firstName' + }, { + header: 'Last Name', + id: 'lastName', + accessor: d => d.lastName + }] +}, { + header: 'Info', + columns: [{ + header: 'Age', + accessor: 'age' + }] +}] + +export default ( + { + return ( +
+ You can put any component you want here, even another React Table! +
+
+ { + return ( +
+ It even has access to the row data: + {() => JSON.stringify(row, null, 2)} +
+ ) + }} + /> +
+ ) + }} + /> +) + ` +} diff --git a/stories/PivotingSubComponents.js b/stories/PivotingSubComponents.js index 73b9ec4..e96ac7d 100644 --- a/stories/PivotingSubComponents.js +++ b/stories/PivotingSubComponents.js @@ -6,7 +6,7 @@ import CodeHighlight from './components/codeHighlight' import ReactTable from '../lib/index' export default () => { - const data = _.map(_.range(10000), d => { + const data = _.map(_.range(1000), d => { return { firstName: namor.generate({ words: 1, numLen: 0 }), lastName: namor.generate({ words: 1, numLen: 0 }),