5.3.5

switch -sort-asc and -sort-desc in ternary (#138 )
Remove .DS_Store
2026-08-19 08:20:30 +00:00 · 2017-03-27 11:57:44 -06:00 · 2017-03-23 13:49:03 -06:00 · 2017-03-14 12:18:46 -06:00 · 2017-03-12 09:29:32 -06:00 · 2017-03-09 09:14:49 -07:00
21 changed files with 222 additions and 124 deletions
@@ -3,3 +3,5 @@ lib/
 react-table.js
 react-table.css
 *.log
+.idea
+.DS_Store
@@ -4,3 +4,10 @@ body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
 }
+
+h1 {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  margin-top: 5px;
+}
@@ -138,8 +138,9 @@ These are all of the available props (and their default values) for the main `<R
  defaultPageSize: 20,
  showPageJump: true,
  expanderColumnWidth: 35,
-  collapseOnSortingChange: false,
+  collapseOnSortingChange: true,
  collapseOnPageChange: true,
+  collapseOnDataChange: true,
  freezeWhenExpanded: false,
  defaultSorting: [],

@@ -307,6 +308,7 @@ Any values that contain bracket (`[]`) will be split.
 This array is then used as the path to the value to return.

 ("$" is the placeholder value that would be returned by the default accessor)
+
 | value        | path            | data                   |
 |--------------|-----------------|------------------------|
 | "a"          | ["a"]           | {"a": $}               |
@@ -16,7 +16,7 @@
      <body>
        <div id="root"></div>
        <div id="error-display"></div>
-        <script src="static/preview.e4c12816d598a43b6a84.bundle.js"></script>
+        <script src="static/preview.742092f25ec9b6802477.bundle.js"></script>
      </body>
    </html>
  
@@ -38,7 +38,7 @@
      </head>
      <body style="margin: 0;">
        <div id="root"></div>
-        <script src="static/manager.3f690da6fe3fd9729ee0.bundle.js"></script>
+        <script src="static/manager.1e44a83b81ae02b691ef.bundle.js"></script>
      </body>
    </html>
  
@@ -1 +1 @@
-{"version":3,"file":"static/manager.3f690da6fe3fd9729ee0.bundle.js","sources":["webpack:///static/manager.3f690da6fe3fd9729ee0.bundle.js"],"mappings":"AAAA;AAkuDA;AA84DA;AA28DA;AA00DA;AAsyEA;AA89CA;AA+rDA;AAsiDA;AAg6DA;AA2nDA;AA++CA;AAkvDA;AAsnEA;AA2oDA;AAivCA;AA+nDA;AAkpDA;AA6lEA;AAs4DA;AAquDA;AA+pDA;AAoxDA;AAsrDA;AA4yDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}
+{"version":3,"file":"static/manager.1e44a83b81ae02b691ef.bundle.js","sources":["webpack:///static/manager.1e44a83b81ae02b691ef.bundle.js"],"mappings":"AAAA;AAkuDA;AA84DA;AA28DA;AA00DA;AAsyEA;AA89CA;AA+rDA;AAsiDA;AAg6DA;AA2nDA;AA++CA;AAkvDA;AAsnEA;AA2oDA;AAivCA;AA+nDA;AAkpDA;AA6lEA;AAs4DA;AAquDA;AA+pDA;AAqxDA;AAsrDA;AA2yDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}
@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.742092f25ec9b6802477.bundle.js","sources":["webpack:///static/preview.742092f25ec9b6802477.bundle.js"],"mappings":"AAAA;AAkuDA;AAo8CA;AA8uGA;AA++EA;AAi9NA;AAo5GA;AAmvDA;AAmgEA;AA4xDA;AAigEA;AAmjDA;AA4sDA;AAk8CA;AAu/DA;AA8lDA;AA09CA;AAqoDA;AAywEA;AAokDA;AAsvCA;AA2mDA;AA4tDA;AAqjEA;AAs2DA;AAmyDA;AAsnDA;AAk1EA;AAmjGA;AAiuDA;AA+2CA;AAq5BA;AA4zDA;AA26BA;AAuOA;AAw5EA","sourceRoot":""}
@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.e4c12816d598a43b6a84.bundle.js","sources":["webpack:///static/preview.e4c12816d598a43b6a84.bundle.js"],"mappings":"AAAA;AAkuDA;AAq5DA;AA8xFA;AA2+EA;AA++NA;AA06GA;AAgsDA;AA8/DA;AA4xDA;AAigEA;AAmjDA;AA4sDA;AAk8CA;AAu/DA;AA8lDA;AA09CA;AAqoDA;AAywEA;AAokDA;AAsvCA;AA2mDA;AA4tDA;AAqjEA;AAs2DA;AAmyDA;AAsnDA;AAszFA;AA65FA;AA4/CA;AAwzCA;AAmlCA;AAotDA;AAyrBA;AAkPA;AA84EA","sourceRoot":""}
@@ -1,6 +1,6 @@
 {
  "name": "react-table",
-  "version": "5.3.3",
+  "version": "5.3.5",
  "description": "A fast, lightweight, opinionated table and datagrid built on React",
  "license": "MIT",
  "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -24,13 +24,13 @@
  ],
  "scripts": {
    "build:node": "babel src --out-dir lib --source-maps inline",
-    "build:css": "rm -rf react-table.css && stylus src/index.styl --compress -o react-table.css && yarn run css:autoprefix",
+    "build:css": "rimraf react-table.css && stylus src/index.styl --compress -o react-table.css && yarn run css:autoprefix",
    "css:autoprefix": "postcss --use autoprefixer react-table.css -r",
    "watch": "npm-run-all --parallel watch:*",
    "watch:node": "onchange 'src/**/*.js' -i -- npm run build:node",
    "watch:css": "onchange 'src/**/*.styl' -i -- npm run build:css",
    "test": "standard",
-    "umd": "rm -rf react-table.js && browserify lib/index.js -s reactTable -x react -t babelify -g uglifyify -o react-table.js",
+    "umd": "rimraf react-table.js && browserify lib/index.js -s reactTable -x react -t babelify -g uglifyify -o react-table.js",
    "prepublish": "npm-run-all build:* && npm run umd",
    "storybook": "start-storybook -p 8000 -c .storybook",
    "docs": "build-storybook -o docs && cp .storybook/CNAME docs/CNAME"
@@ -61,6 +61,7 @@
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-json-tree": "^0.10.1",
+    "rimraf": "^2.6.1",
    "standard": "^8.0.0",
    "storybook": "^0.0.0",
    "stylus": "^0.54.5",
@@ -16,8 +16,9 @@ export default {
  defaultPageSize: 20,
  showPageJump: true,
  expanderColumnWidth: 35,
-  collapseOnSortingChange: false,
+  collapseOnSortingChange: true,
  collapseOnPageChange: true,
+  collapseOnDataChange: true,
  freezeWhenExpanded: false,
  defaultSorting: [],

@@ -286,7 +286,7 @@ export default React.createClass({
                'rt-pivot-header',
                column.sortable && '-cursor-pointer',
                classes,
-                pivotSort ? (pivotSort.desc ? '-sort-asc' : '-sort-desc') : ''
+                pivotSort ? (pivotSort.desc ? '-sort-desc' : '-sort-asc') : ''
              )}
              style={{
                ...styles,
@@ -337,7 +337,7 @@ export default React.createClass({
          key={i}
          className={classnames(
            classes,
-            sort ? (sort.desc ? '-sort-asc' : '-sort-desc') : '',
+            sort ? (sort.desc ? '-sort-desc' : '-sort-asc') : '',
            column.sortable && '-cursor-pointer',
            !show && '-hidden',
          )}
@@ -696,7 +696,10 @@ export default React.createClass({
                  {...tFootTdProps.rest}
                  {...columnFooterProps.rest}
                >
-                  {_.normalizeComponent(column.footer)}
+                  {_.normalizeComponent(column.footer, {
+                    data: sortedData,
+                    column: column
+                  })}
                </TdComponent>
              )
            })}
@@ -26,7 +26,7 @@ export default {
  },

  componentWillMount () {
-    this.setStateWithData(this.getDataModel())
+    this.setStateWithData(this.getDataModel(this.getResolvedState()))
  },

  componentDidMount () {
@@ -37,6 +37,10 @@ export default {
    const oldState = this.getResolvedState()
    const newState = this.getResolvedState(nextProps, nextState)

+    if (oldState.defaultSorting !== newState.defaultSorting) {
+      newState.sorting = newState.defaultSorting
+    }
+
    // Props that trigger a data update
    if (
      oldState.data !== newState.data ||
@@ -44,7 +48,7 @@ export default {
      oldState.pivotBy !== newState.pivotBy ||
      oldState.sorting !== newState.sorting
    ) {
-      this.setStateWithData(this.getDataModel(nextProps, nextState))
+      this.setStateWithData(this.getDataModel(newState))
    }
  },

@@ -75,10 +79,10 @@ export default {
      oldState.sorting !== newResolvedState.sorting ||
      (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData)
    ) {
-      // Handle collapseOnSortingChange & collapseOnPageChange
+      // Handle collapseOnSortingChange & collapseOnDataChange
      if (
        (oldState.sorting !== newResolvedState.sorting && this.props.collapseOnSortingChange) ||
-        (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnPageChange)
+        (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnDataChange)
      ) {
        newResolvedState.expandedRows = {}
      }
@@ -1,7 +1,7 @@
 import _ from './utils'

 export default {
-  getDataModel (nextProps, nextState) {
+  getDataModel (newState) {
    const {
      columns,
      pivotBy = [],
@@ -14,7 +14,7 @@ export default {
      page,
      pages,
      pageSize
-    } = this.getResolvedState(nextProps, nextState)
+    } = newState

    // Determine Header Groups
    let hasHeaderGroups = false
@@ -219,6 +219,7 @@ export default {
    const newPage = page > newPages ? newPage - 1 : page

    return {
+      ...newState,
      resolvedData,
      pivotColumn,
      allVisibleColumns,
@@ -280,14 +281,17 @@ export default {

  // User actions
  onPageChange (page) {
-    const { onPageChange } = this.props
+    const { onPageChange, collapseOnPageChange } = this.props
    if (onPageChange) {
      return onPageChange(page)
    }
-    this.setStateWithData({
-      expandedRows: {},
-      page
-    }, () => {
+    const newState = { page }
+    if (collapseOnPageChange) {
+      newState.expandedRows = {}
+    }
+    this.setStateWithData(
+      newState
+    , () => {
      this.fireOnChange()
    })
  },
@@ -4,7 +4,7 @@ import classnames from 'classnames'
 // import _ from './utils'

 const defaultButton = (props) => (
-  <button {...props} className='-btn'>{props.children}</button>
+  <button type='button' {...props} className='-btn'>{props.children}</button>
 )

 export default React.createClass({
@@ -66,9 +66,7 @@ export default React.createClass({
        <div className='-center'>
          <span className='-pageInfo'>
            {this.props.pageText} {showPageJump ? (
-              <form className='-pageJump'
-                onSubmit={this.applyPage}
-              >
+              <div className='-pageJump'>
                <input
                  type={this.state.page === '' ? 'text' : 'number'}
                  onChange={e => {
@@ -81,8 +79,13 @@ export default React.createClass({
                  }}
                  value={this.state.page === '' ? '' : this.state.page + 1}
                  onBlur={this.applyPage}
+                  onKeyPress={e => {
+                    if (e.which === 13 || e.keyCode === 13) {
+                      this.applyPage()
+                    }
+                  }}
                />
-              </form>
+              </div>
            ) : (
              <span className='-currentPage'>{page + 1}</span>
            )} {this.props.ofText} <span className='-totalPages'>{pages}</span>
@@ -193,7 +193,7 @@ function isSortingDesc (d) {

 function normalizeComponent (Comp, params = {}, fallback = Comp) {
  return typeof Comp === 'function' ? (
-    Comp.prototype.isReactComponent ? (
+    Object.getPrototypeOf(Comp).isReactComponent ? (
      <Comp
        {...params}
      />
@@ -48,13 +48,13 @@ const ServerSide = React.createClass({
    }
  },
  fetchData (state, instance) {
-    console.log(state, instance)
    // Whenever the table model changes, or the user sorts or changes pages, this method gets called and passed the current table model.
    // 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)
      .then((res) => {
+        console.log(res.rows)
        // Now just get the rows of data to your React Table (and update anything else like total pages or loading)
        this.setState({
          data: res.rows,
@@ -5,77 +5,138 @@ import namor from 'namor'
 import CodeHighlight from './components/codeHighlight'
 import ReactTable from '../src/index'

-export default () => {
-  const data = _.map(_.range(5553), d => {
-    return {
-      firstName: namor.generate({ words: 1, numLen: 0 }),
-      lastName: namor.generate({ words: 1, numLen: 0 }),
-      age: Math.floor(Math.random() * 30)
+class SubComponents extends React.Component {
+
+  constructor(props) {
+    super(props)
+
+    const data = _.map(_.range(5553), d => {
+      return {
+        firstName: namor.generate({words: 1, numLen: 0}),
+        lastName: namor.generate({words: 1, numLen: 0}),
+        age: Math.floor(Math.random() * 30)
+      }
+    })
+
+    this.state = {
+      tableOptions: {
+        loading: false,
+        showPagination: true,
+        showPageSizeOptions: true,
+        showPageJump: true,
+        collapseOnSortingChange: true,
+        collapseOnPageChange: true,
+        collapseOnDataChange: true,
+        freezeWhenExpanded: false
+      },
+      data: data
    }
-  })

-  const columns = [{
-    header: 'Name',
-    columns: [{
-      header: 'First Name',
-      accessor: 'firstName'
+    this.setTableOption = this.setTableOption.bind(this);
+  }
+
+  render() {
+
+
+    const columns = [{
+      header: 'Name',
+      columns: [{
+        header: 'First Name',
+        accessor: 'firstName'
+      }, {
+        header: 'Last Name',
+        id: 'lastName',
+        accessor: d => d.lastName
+      }]
    }, {
-      header: 'Last Name',
-      id: 'lastName',
-      accessor: d => d.lastName
+      header: 'Info',
+      columns: [{
+        header: 'Age',
+        accessor: 'age'
+      }]
    }]
-  }, {
-    header: 'Info',
-    columns: [{
-      header: 'Age',
-      accessor: 'age'
-    }]
-  }]

-  return (
-    <div>
-      <div className='table-wrap'>
-        <ReactTable
-          className='-striped -highlight'
-          data={data}
-          columns={columns}
-          defaultPageSize={10}
-          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>
-            )
-          }}
-        />
+    return (
+      <div>
+        <div style={{float: "left"}}>
+          <h1>Table Options</h1>
+          <table>
+            <tbody>
+            {
+              Object.keys(this.state.tableOptions).map(optionKey => {
+                const optionValue = this.state.tableOptions[optionKey];
+                return (
+                  <tr key={optionKey}>
+                    <td>{optionKey}</td>
+                    <td style={{paddingLeft: 10, paddingTop: 5}}>
+                      <input type="checkbox"
+                             name={optionKey}
+                             checked={optionValue}
+                             onChange={this.setTableOption}
+                      />
+                    </td>
+                  </tr>
+                )
+              })
+            }
+            </tbody>
+          </table>
+        </div>
+        <div className='table-wrap' style={{paddingLeft: 240}}>
+          <ReactTable
+            className='-striped -highlight'
+            data={this.state.data}
+            columns={columns}
+            defaultPageSize={10}
+            {...this.state.tableOptions}
+            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={this.state.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>{() => this.getCode()}</CodeHighlight>
      </div>
-      <div style={{textAlign: 'center'}}>
-        <br />
-        <em>Tip: Hold shift when sorting to multi-sort!</em>
-      </div>
-      <CodeHighlight>{() => getCode()}</CodeHighlight>
-    </div>
-  )
-}
+    )
+  }

-function getCode () {
-  return `
+  setTableOption(event) {
+    const target = event.target;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const name = target.name;
+    this.setState({
+      tableOptions: {
+        ...this.state.tableOptions,
+        [name]: value
+      }
+    })
+  }
+
+  getCode() {
+    return `
 const columns = [{
  header: 'Name',
  columns: [{
@@ -99,6 +160,7 @@ export default (
    data={data}
    columns={columns}
    defaultPageSize={10}
+    {...otherOptions}
    SubComponent={(row) => {
      return (
        <div style={{padding: '20px'}}>
@@ -125,4 +187,7 @@ export default (
  />
 )
  `
-}
+  }
+}
+
+export default () => <SubComponents/>
@@ -2998,7 +2998,7 @@ indexof@0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"

-inflight@^1.0.4, inflight@^1.0.6:
+inflight@^1.0.4:
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
  dependencies:
@@ -4964,6 +4964,12 @@ rimraf@2, rimraf@^2.2.8, rimraf@~2.5.1, rimraf@~2.5.4:
  dependencies:
    glob "^7.0.5"

+rimraf@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
+  dependencies:
+    glob "^7.0.5"
+
 ripemd160@0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"
Author	SHA1	Message	Date
Tanner Linsley	1a9f0e57b4	5.3.5	2017-03-27 11:57:44 -06:00
Ryan PalermoandTanner Linsley	4c11248c69	switch -sort-asc and -sort-desc in ternary (#138 )	2017-03-23 13:49:03 -06:00
Tanner Linsley	784311bcd6	Remove .DS_Store Closes #126	2017-03-14 12:18:46 -06:00
Deepak Kumar JainandTanner Linsley	7b232cd6b4	Updated the package.json (#124 )	2017-03-12 09:29:32 -06:00
MishaandTanner Linsley	533bea77b6	use button type button in pagination to prevent form submitting if using table inside of the form (#122 )	2017-03-09 09:14:49 -07:00
MishaandTanner Linsley	218cf42bb2	removed form tag from pagination component to avoid nested forms error (#119 )	2017-03-09 07:34:44 -07:00
Wojtek BażantandTanner Linsley	62287d1641	Add extra empty line to get the accessors table to show up nicely on github's main page (#121 )	2017-03-09 07:34:22 -07:00
Ryan PalermoandTanner Linsley	10dc68acc1	use `Object.getPrototypeOf` instead of `.prototype` (#117 )	2017-03-08 11:43:29 -07:00
Michael BridgeandTanner Linsley	bd82468852	Pass relevant attributes to footer JSX (#116 )	2017-03-08 11:42:12 -07:00
Tanner Linsley	6d28bb2c4d	5.3.4	2017-03-01 15:50:43 -07:00
Tanner Linsley	9e95b331df	Feature: Changing `defaultSorting` now updates the sorting model	2017-03-01 15:50:36 -07:00
TacticalCodingandTanner Linsley	f296b075fe	Rename CollapseOnPageChange to CollapseOnDataChange (#100 ) * Rename CollapseOnPageChange to CollapseOnDataChange to more accurately reflect its purpose. * Add support for collapseOnPageChange. * Fix collapseOnPageChange efficiency.	2017-02-27 16:05:07 -07:00
				`@@ -0,0 +1 @@`
				`{"version":3,"file":"static/preview.742092f25ec9b6802477.bundle.js","sources":["webpack:///static/preview.742092f25ec9b6802477.bundle.js"],"mappings":"AAAA;AAkuDA;AAo8CA;AA8uGA;AA++EA;AAi9NA;AAo5GA;AAmvDA;AAmgEA;AA4xDA;AAigEA;AAmjDA;AA4sDA;AAk8CA;AAu/DA;AA8lDA;AA09CA;AAqoDA;AAywEA;AAokDA;AAsvCA;AA2mDA;AA4tDA;AAqjEA;AAs2DA;AAmyDA;AAsnDA;AAk1EA;AAmjGA;AAiuDA;AA+2CA;AAq5BA;AA4zDA;AA26BA;AAuOA;AAw5EA","sourceRoot":""}`
				`@@ -1 +0,0 @@`
				`{"version":3,"file":"static/preview.e4c12816d598a43b6a84.bundle.js","sources":["webpack:///static/preview.e4c12816d598a43b6a84.bundle.js"],"mappings":"AAAA;AAkuDA;AAq5DA;AA8xFA;AA2+EA;AA++NA;AA06GA;AAgsDA;AA8/DA;AA4xDA;AAigEA;AAmjDA;AA4sDA;AAk8CA;AAu/DA;AA8lDA;AA09CA;AAqoDA;AAywEA;AAokDA;AAsvCA;AA2mDA;AA4tDA;AAqjEA;AAs2DA;AAmyDA;AAsnDA;AAszFA;AA65FA;AA4/CA;AAwzCA;AAmlCA;AAotDA;AAyrBA;AAkPA;AA84EA","sourceRoot":""}`