Fix pageSize bug and 1 Million rows example

2026-07-01 01:50:02 +00:00 · 2017-01-16 14:18:11 -07:00
parent f06caec053
commit a8a0d1bab8
5 changed files with 181 additions and 42 deletions
--- 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)
--- 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 (
-        <TrComponent
-          key={i}
-          className={classnames(trClassName, '-padRow')}
-          style={trStyle}
-        >
-          {SubComponent && (
-            <ThComponent
-              className={classnames(thClassname, 'rt-expander-header')}
-              style={_.prefixAll({
-                flex: `0 0 auto`,
-                width: `${expanderColumnWidth}px`
-              })}
-            />
-          )}
-          {standardColumns.map((column, i2) => {
-            const show = typeof column.show === 'function' ? column.show() : column.show
-            return (
-              <TdComponent
-                key={i2}
-                className={classnames(column.className, {hidden: !show})}
-                style={Object.assign({}, tdStyle, column.style, {
-                  flex: `${columnPercentage} 0 auto`,
-                  width: `${column.minWidth}px`
+        <TrGroupComponent>
+          <TrComponent
+            key={i}
+            className={classnames(trClassName, '-padRow')}
+            style={trStyle}
+          >
+            {SubComponent && (
+              <ThComponent
+                className={classnames(thClassname, 'rt-expander-header')}
+                style={_.prefixAll({
+                  flex: `0 0 auto`,
+                  width: `${expanderColumnWidth}px`
                })}
-              >
-                &nbsp;
-              </TdComponent>
-            )
-          })}
-        </TrComponent>
+              />
+            )}
+            {standardColumns.map((column, i2) => {
+              const show = typeof column.show === 'function' ? column.show() : column.show
+              return (
+                <TdComponent
+                  key={i2}
+                  className={classnames(column.className, {hidden: !show})}
+                  style={Object.assign({}, tdStyle, column.style, {
+                    flex: `${columnPercentage} 0 auto`,
+                    width: `${column.minWidth}px`
+                  })}
+                >
+                  &nbsp;
+                </TdComponent>
+              )
+            })}
+          </TrComponent>
+        </TrGroupComponent>
      )
    }

@@ -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)
--- 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
--- a/stories/MillionRows.js
+++ 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 <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>
+      }
+    }, {
+      header: 'Visits',
+      accessor: 'visits',
+      aggregate: vals => _.sum(vals)
+    }]
+  }]
+
+  return (
+    <div>
+      <div className='table-wrap'>
+        <ReactTable
+          data={data}
+          columns={columns}
+          defaultPageSize={10}
+          pivotBy={['firstName', 'lastName']}
+          SubComponent={(row) => {
+            return (
+              <div style={{padding: '20px'}}>
+                <em>You can put any component you want here, even another React Table!</em>
+                <br />
+                <br />
+                <ReactTable
+                  data={data}
+                  columns={columns}
+                  defaultPageSize={3}
+                  showPagination={false}
+                  SubComponent={(row) => {
+                    return (
+                      <div style={{padding: '20px'}}>
+                        <em>It even has access to the row data: </em>
+                        <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
+                      </div>
+                    )
+                  }}
+                />
+              </div>
+            )
+          }}
+        />
+      </div>
+      <div style={{textAlign: 'center'}}>
+        <br />
+        <em>Tip: Hold shift when sorting to multi-sort!</em>
+      </div>
+      <CodeHighlight>{() => getCode()}</CodeHighlight>
+    </div>
+  )
+}
+
+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 (
+  <ReactTable
+    data={data}
+    columns={columns}
+    defaultPageSize={10}
+    pivotBy={['firstName', 'lastName']}
+    SubComponent={(row) => {
+      return (
+        <div style={{padding: '20px'}}>
+          <em>You can put any component you want here, even another React Table!</em>
+          <br />
+          <br />
+          <ReactTable
+            data={data}
+            columns={columns}
+            defaultPageSize={3}
+            showPagination={false}
+            SubComponent={(row) => {
+              return (
+                <div style={{padding: '20px'}}>
+                  <em>It even has access to the row data: </em>
+                  <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
+                </div>
+              )
+            }}
+          />
+        </div>
+      )
+    }}
+  />
+)
+  `
+}
--- 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 }),