3.2.1

Fixes #24 and fixes #25

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)](https://npmjs.com/packag/react-table) [![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)](https://github.com/tannerlinsley/react-table) [![Twitter Follow](https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow)](https://twitter.com/tannerlinsley)
 
 ## Features
 
@@ -86,15 +90,20 @@ 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
 
   // Callbacks
   onChange: (state, instance) => null, // Anytime the internal state of the table changes, this will fire
+  onTrClick: (row, event) => null,  // Handler for row click events
 
   // Text
   previousText: 'Previous',
-  nextText: 'Next'
+  nextText: 'Next',
+  pageText: 'Page',
+  ofText: 'of',
+  rowsText: 'rows',
 
   // Classes
   className: '-striped -highlight', // The most top level className for the component
@@ -282,7 +291,7 @@ If you would like to help develop a suggested feature follow these steps:
 
 - Fork this repo
 - `npm install`
-- `npm watch`
+- `npm run watch`
 - Implement your changes to files in the `src/` directory
 - Submit PR for review
 
@@ -292,7 +301,7 @@ If you would like to preview your changes, you can link and utilize the example
 - `cd example`
 - `npm install`
 - `npm link react-table`
-- `npm watch`
+- `npm run watch`
 - Make changes to the example in `src/screens/index.js` if needed
 - View changes at `localhost:8000`
 

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 '../../../lib/index'
 
 export default Component({
   render () {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "3.1.2",
+  "version": "3.2.1",
   "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",
@@ -34,7 +35,7 @@
     "classnames": "^2.2.5"
   },
   "peerDependencies": {
-    "react": "^15.3.1"
+    "react": "^15.x.x"
   },
   "devDependencies": {
     "babel-cli": "6.14.0",

src/index.js

@@ -16,6 +16,7 @@ export const ReactTableDefaults = {
   showPageJump: true,
   // Callbacks
   onChange: () => null,
+  onTrClick: () => null,
   // Classes
   className: '-striped -highlight',
   tableClassName: '',
@@ -54,6 +55,9 @@ export const ReactTableDefaults = {
   previousText: 'Previous',
   nextText: 'Next',
   loadingText: 'Loading...',
+  pageText: 'Page',
+  ofText: 'of',
+  rowsText: 'rows',
   // Components
   tableComponent: (props) => <table {...props}>{props.children}</table>,
   theadComponent: (props) => <thead {...props}>{props.children}</thead>,
@@ -68,6 +72,7 @@ export const ReactTableDefaults = {
     )
   },
   tdComponent: (props) => <td {...props}>{props.children}</td>,
+  paginationComponent: Pagination,
   previousComponent: null,
   nextComponent: null,
   loadingComponent: props => (
@@ -163,7 +168,7 @@ export default React.createClass({
       : Math.ceil(this.props.data.length / this.getStateOrProp('pageSize'))
   },
   getMinRows () {
-    return _.getFirstDefined(this.props.minRows, this.props.pageSize)
+    return _.getFirstDefined(this.props.minRows, this.getStateOrProp('pageSize'))
   },
   render () {
     // Build Columns
@@ -242,6 +247,7 @@ export default React.createClass({
     const canPrevious = currentPage > 0
     const canNext = currentPage + 1 < pagesLength
 
+    const PaginationComponent = this.props.paginationComponent
     const TableComponent = this.props.tableComponent
     const TheadComponent = this.props.theadComponent
     const TbodyComponent = this.props.tbodyComponent
@@ -355,6 +361,7 @@ export default React.createClass({
               return (
                 <TrComponent
                   key={i}
+                  onClick={event => this.props.onTrClick(rowInfo.row, event)}
                   className={classnames(this.props.trClassName, this.props.trClassCallback(rowInfo))}
                   style={Object.assign({}, this.props.trStyle, this.props.trStyleCallback(rowInfo))}
                 >
@@ -378,7 +385,7 @@ export default React.createClass({
                               {...rowInfo}
                               value={rowInfo.rowValues[column.id]}
                             />
-                            ) : typeof Cell !== 'undefined' ? Cell
+                          ) : typeof Cell !== 'undefined' ? Cell
                           : rowInfo.rowValues[column.id]}
                         </div>
                       </TdComponent>
@@ -417,7 +424,7 @@ export default React.createClass({
           </TbodyComponent>
         </TableComponent>
         {this.props.showPagination && (
-          <Pagination
+          <PaginationComponent
             currentPage={currentPage}
             pagesLength={pagesLength}
             pageSize={pageSize}
@@ -428,11 +435,16 @@ export default React.createClass({
             canNext={canNext}
             previousText={this.props.previousText}
             nextText={this.props.nextText}
+            pageText={this.props.pageText}
+            ofText={this.props.ofText}
+            rowsText={this.props.rowsText}
             previousComponent={PreviousComponent}
             nextComponent={NextComponent}
             //
             onChange={this.setPage}
             onPageSizeChange={this.setPageSize}
+            //
+            className={this.props.paginationClassName}
           />
         )}
         <LoadingComponent {...this.props} />

src/pagination.js

@@ -39,15 +39,16 @@ export default React.createClass({
       showPageJump,
       canPrevious,
       canNext,
-      onPageSizeChange
+      onPageSizeChange,
+      className
     } = 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
-        className={classnames(this.props.paginationClassName, '-pagination')}
+        className={classnames(className, '-pagination')}
         style={this.props.paginationStyle}
       >
         <div className='-previous'>
@@ -63,7 +64,7 @@ export default React.createClass({
         </div>
         <div className='-center'>
           <span className='-pageInfo'>
-            Page {showPageJump ? (
+            {this.props.pageText} {showPageJump ? (
               <form className='-pageJump'
                 onSubmit={this.applyPage}
               >
@@ -83,7 +84,7 @@ export default React.createClass({
               </form>
               ) : (
                 <span className='-currentPage'>{currentPage + 1}</span>
-            )} of <span className='-totalPages'>{pagesLength}</span>
+            )} {this.props.ofText} <span className='-totalPages'>{pagesLength}</span>
           </span>
           {showPageSizeOptions && (
             <span className='select-wrap -pageSizeOptions'>
@@ -96,7 +97,7 @@ export default React.createClass({
                     <option
                       key={i}
                       value={option}>
-                      {option} rows
+                      {option} {this.props.rowsText}
                     </option>
                   )
                 })}