3.1.3

README.md

@@ -1,10 +1,14 @@
-![react-table](https://github.com/tannerlinsley/react-table/raw/master/media/Banner.png)
+<div align="center">
+  <a href="https://github.com/tannerlinsley/react-table"><img src="https://github.com/tannerlinsley/react-table/raw/master/media/Banner.png" alt="React Table Logo" style="width:450px;"/></a>
+  <br />
+  <br />
+  
+</div>
 
 # react-table
 A fast, lightweight, opinionated table and datagrid built on React
 
-[![Build Status](https://travis-ci.org/tannerlinsley/react-table.svg?branch=master)](https://travis-ci.org/tannerlinsley/react-table)
-[![react-table on Slack](https://img.shields.io/badge/slack-react--table-blue.svg)](https://react-table-slack.herokuapp.com/)
+[![Build Status](https://travis-ci.org/tannerlinsley/react-table.svg?branch=master)](https://travis-ci.org/tannerlinsley/react-table) [![npm](https://img.shields.io/npm/dm/react-table.svg)]() [![react-table on Slack](https://img.shields.io/badge/slack-react--table-blue.svg)](https://react-table-slack.herokuapp.com/) [![GitHub stars](https://img.shields.io/github/stars/tannerlinsley/react-table.svg?style=social&label=Star)]() [![Twitter Follow](https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow)](https://twitter.com/tannerlinsley)
 
 ## Features
 
@@ -86,6 +90,7 @@ These are the default props for the main react component `<ReactTable />`
   pageSize: 20, // The default page size (this can be changed by the user if `showPageSizeOptions` is enabled)
   minRows: 0, // Ensure this many rows are always rendered, regardless of rows on page
   showPagination: true, // Shows or hides the pagination component
+  showPageJump: true, // Shows or hides the pagination number input
   showPageSizeOptions: true, // Enables the user to change the page size
   pageSizeOptions: [5, 10, 20, 25, 50, 100], // The available page size options
 

example/package.json

@@ -19,10 +19,10 @@
     "stylus": "^0.54.5"
   },
   "dependencies": {
-    "jumpsuit": "^0.7.5",
+    "jumpsuit": "^1.3.3",
     "lodash": "^4.16.4",
     "namor": "^0.3.0",
     "react-syntax-highlighter": "^3.0.0",
-    "react-table": "^2.0.0"
+    "react-table": "^3.1.2"
   }
 }

example/src/app.styl

@@ -11,7 +11,7 @@ global-reset()
 // vendor styles
 // -----------------------------------------------------------------------------
 
-@import '../../src/index'
+@import '../node_modules/react-table/src/index'
 
 // -----------------------------------------------------------------------------
 // variables
@@ -84,7 +84,7 @@ strong
     display:block
     padding: 10px
     margin: 5px
-    background: alpha(black, .7)
+    background: alpha(black, .4)
     color: white
     border-radius: 3px
     transition: all .2s ease-out

example/src/screens/serverSide.js

@@ -3,7 +3,7 @@ import _ from 'lodash'
 import namor from 'namor'
 
 import CodeHighlight from 'components/codeHighlight'
-import ReactTable from '../../../lib/index.js'
+import ReactTable from 'react-table'
 
 // Let's mock some data to play around with
 const rawData = _.map(_.range(3424), d => {

example/src/screens/simple.js

@@ -3,7 +3,7 @@ import _ from 'lodash'
 import namor from 'namor'
 
 import CodeHighlight from 'components/codeHighlight'
-import ReactTable from '../../../lib/index.js'
+import ReactTable from 'react-table'
 
 export default Component({
   render () {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -16,6 +16,7 @@
   ],
   "main": "lib/index.js",
   "files": [
+    "src/",
     "lib/",
     "react-table.js",
     "react-table.css",

src/index.styl

@@ -160,6 +160,12 @@ $easeOutBack = cubic-bezier(0.175,  0.885, 0.320, 1.275)
     .-center
       flex: 1.5
       text-align:center
+      margin-bottom:0
+      display: flex
+      flex-direction: row
+      flex-wrap: wrap
+      align-items: center
+      justify-content: space-around
 
     .-pageInfo
       display: inline-block
@@ -173,7 +179,7 @@ $easeOutBack = cubic-bezier(0.175,  0.885, 0.320, 1.275)
         text-align:center
 
     .-pageSizeOptions
-      margin-left:12px
+      margin:0 10px 3px
 
 
   .-loading
@@ -211,6 +217,7 @@ $easeOutBack = cubic-bezier(0.175,  0.885, 0.320, 1.275)
   select
     appearance: none
     border: 1px solid rgba(0,0,0,0.1)
+    background: white
     padding: 5px 7px
     font-size: inherit
     border-radius: 3px

src/pagination.js

@@ -42,8 +42,8 @@ export default React.createClass({
       onPageSizeChange
     } = this.props
 
-    const PreviousComponent = this.props.PreviousComponent || defaultButton
-    const NextComponent = this.props.NextComponent || defaultButton
+    const PreviousComponent = this.props.previousComponent || defaultButton
+    const NextComponent = this.props.nextComponent || defaultButton
 
     return (
       <div