5.5.1

fix the system information section to use bulleted lists

ISSUE_TEMPLATE.md

@@ -8,8 +8,8 @@ include a detailed explanation of the problem here...
 2. to reproduce the issue
 
 ## System Information
-**Browser & Browser Version:**
-**Node Version:**
-**OS Version:**
-**NPM Version:**
-**Yarn Version:**
+* **Browser & Browser Version:**
+* **Node Version:**
+* **OS Version:**
+* **NPM Version:**
+* **Yarn Version:**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "5.5.0",
+  "version": "5.5.1",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",

src/pagination.js

@@ -17,12 +17,17 @@ export default React.createClass({
     this.setState({page: nextProps.page})
   },
   getSafePage (page) {
+    if (isNaN(page)) {
+      page = this.props.page
+    }
     return Math.min(Math.max(page, 0), this.props.pages - 1)
   },
   changePage (page) {
     page = this.getSafePage(page)
     this.setState({page})
-    this.props.onPageChange(page)
+    if (this.props.page !== page) {
+      this.props.onPageChange(page)
+    }
   },
   applyPage (e) {
     e && e.preventDefault()

src/utils.js

@@ -80,7 +80,7 @@ function orderBy (arr, funcs, dirs) {
     }
     return dirs[0]
       ? a.__index - b.__index
-      : b.__index - b.__index
+      : b.__index - a.__index
   })
 }
 

stories/CellRenderers.js

@@ -161,6 +161,7 @@ const columns = [{
 
 return (
   <ReactTable
+    className='-striped -highlight'
     data={data}
     columns={columns}
     defaultPageSize={10}

stories/ControlledTable.js

@@ -112,8 +112,6 @@ class ControlledTable extends React.Component {
   constructor() {
     super()
     this.sortChange = this.sortChange.bind(this)
-    this.pageChange = this.pageChange.bind(this)
-    this.pageSizeChange = this.pageSizeChange.bind(this)
     this.state = {
       sorting: [],
       page: 0,

stories/Footers.js

@@ -88,23 +88,52 @@ const columns = [{
   header: 'Name',
   columns: [{
     header: 'First Name',
-    accessor: 'firstName'
+      accessor: 'firstName',
+      footer: (
+        <span><strong>Popular:</strong> {
+          _.first(
+            _.reduce(
+              _.map(
+                _.groupBy(
+                  data, d => d.firstName
+                )
+              ),
+              (a, b) => a.length > b.length ? a : b
+            )
+          ).firstName}
+        </span>
+      )
   }, {
     header: 'Last Name',
     id: 'lastName',
-    accessor: d => d.lastName
+      accessor: d => d.lastName,
+      footer: (
+        <span><strong>Longest:</strong> {
+          _.reduce(
+            _.map(
+              _.groupBy(
+                data, d => d.lastName
+              ),
+              (d, key) => key
+            ),
+            (a, b) => a.length > b.length ? a : b
+          )}
+        </span>
+      )
   }]
 }, {
   header: 'Info',
   columns: [{
     header: 'Age',
-    accessor: 'age'
+      accessor: 'age',
+      footer: <span><strong>Average:</strong> {_.round(_.mean(_.map(data, d => d.age)))}</span>
   }]
 }]
 
 // Display your table!
 return (
   <ReactTable
+    className='-striped -highlight'
     data={data}
     columns={columns}
     defaultPageSize={10}

stories/Simple.js

@@ -77,6 +77,7 @@ const columns = [{
 // Display your table!
 return (
   <ReactTable
+    className='-striped -highlight'
     data={data}
     columns={columns}
     defaultPageSize={10}