5.5.2

#203

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.2",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",

src/index.js

@@ -87,25 +87,31 @@ export default React.createClass({
     // Pagination
     const startRow = pageSize * page
     const endRow = startRow + pageSize
-    const pageRows = manual ? resolvedData : sortedData.slice(startRow, endRow)
+    let pageRows = manual ? resolvedData : sortedData.slice(startRow, endRow)
     const minRows = this.getMinRows()
     const padRows = _.range(Math.max(minRows - pageRows.length, 0))
 
     const hasColumnFooter = allVisibleColumns.some(d => d.footer)
 
     const recurseRowsViewIndex = (rows, path = [], index = -1) => {
-      rows.forEach((row, i) => {
-        index++
-        row._viewIndex = index
-        const newPath = path.concat([i])
-        if (row[subRowsKey] && _.get(expandedRows, newPath)) {
-          index = recurseRowsViewIndex(row[subRowsKey], newPath, index)
-        }
-      })
-      return index
+      return [
+        rows.map((row, i) => {
+          index++
+          const rowWithViewIndex = {
+            ...row,
+            _viewIndex: index
+          }
+          const newPath = path.concat([i])
+          if (rowWithViewIndex[subRowsKey] && _.get(expandedRows, newPath)) {
+            [rowWithViewIndex[subRowsKey], index] = recurseRowsViewIndex(rowWithViewIndex[subRowsKey], newPath, index)
+          }
+          return rowWithViewIndex
+        }),
+        index
+      ]
     }
 
-    recurseRowsViewIndex(pageRows)
+    [pageRows] = recurseRowsViewIndex(pageRows)
 
     const canPrevious = page > 0
     const canNext = page + 1 < pages

src/index.styl

@@ -260,7 +260,6 @@ $expandSize = 7px
 
   input
   select
-    appearance: none
     border: 1px solid rgba(0,0,0,0.1)
     background: white
     padding: 5px 7px
@@ -269,6 +268,10 @@ $expandSize = 7px
     font-weight: normal
     outline:none
 
+  input:not([type="checkbox"]):not([type="radio"])
+  select
+    appearance: none
+
   .select-wrap
     position:relative
     display:inline-block

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}