3.2.1

Fixed paginationComponent and paginationClassName
Fixes #24 and fixes #25
2026-08-19 08:20:30 +00:00 · 2017-01-09 13:44:46 -07:00 · 2017-01-09 13:44:43 -07:00 · 2017-01-09 11:57:51 -07:00 · 2017-01-09 11:38:22 -07:00 · 2016-12-15 07:02:25 -07:00
18 changed files with 6408 additions and 59352 deletions
@@ -3,5 +3,4 @@ lib/
 react-table.js
 react-table.css
 *.log
-
-dist/
+example/dist/
@@ -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`

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>React-Table Demo</title>
-  <link rel="stylesheet" href="/app.css" charset="utf-8">
-</head>
-<body>
-  <div id="app"></div>
-  <script src="/app.js"></script>
-  <script async defer src="https://buttons.github.io/buttons.js"></script>
-</body>
-</html>
@@ -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"
  }
 }
@@ -12,4 +12,6 @@ Render(null, (
      <Route path='server-side' component={ServerSide} />
    </Route>
  </Router>
-))
+), {
+  useHash: false
+})
@@ -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
@@ -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 => {
@@ -106,6 +106,7 @@ export default Component({
 function getCode () {
  return `
 import ReactTable from 'react-table'
+import Axios from 'axios'

 export default React.creatClass({
  getInitialState () {
@@ -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 () {
@@ -1,4 +1,8 @@
 {
  "name": "react-table",
-  "root": "dist"
+  "root": "dist",
+  "routes": [{
+    "src": "/**",
+    "dest": "index.html"
+  }]
 }
@@ -1,6 +1,6 @@
 {
  "name": "react-table",
-  "version": "3.1.0",
+  "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",
@@ -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>
@@ -416,8 +423,8 @@ export default React.createClass({
            })}
          </TbodyComponent>
        </TableComponent>
-        {this.props.showPagination && pagesLength > 1 && (
-          <Pagination
+        {this.props.showPagination && (
+          <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} />
@@ -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
@@ -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>
                  )
                })}
Author	SHA1	Message	Date
Tanner Linsley	dd433f7d9c	3.2.1	2017-01-09 13:44:46 -07:00
Tanner Linsley	0daffaf08d	Fixed paginationComponent and paginationClassName Fixes #24 and fixes #25	2017-01-09 13:44:43 -07:00
Tanner Linsley	ecd660ef10	3.2.0	2017-01-09 11:57:51 -07:00
DimitryandTanner Linsley	be951a3252	onTrClick (#23 ) * README: correct watch command * Add onTrClick handler * react soften peerDependency: ^15.x.x	2017-01-09 11:38:22 -07:00
Lukas Gisder-DubéandTanner Linsley	f195b3243d	added props for more pagination customization (#19 )	2016-12-15 07:02:25 -07:00
Tanner LinsleyandGitHub	19a0187720	Update README.md	2016-12-08 11:59:46 -07:00
Tanner Linsley	d8e5188d94	3.1.4	2016-12-07 13:00:39 -07:00
Tanner Linsley	8c79bf95df	Page Size fix	2016-12-07 13:00:27 -07:00
Tanner Linsley	6053c48781	3.1.3	2016-12-07 12:55:10 -07:00
Tanner Linsley	8f1c8774f2	Fixes and use Yarn	2016-12-07 12:55:03 -07:00
Tanner Linsley	d5795fb5ac	Readme Update	2016-12-06 23:19:00 -07:00
Tanner Linsley	8abbefa680	Readme updates	2016-12-06 13:17:38 -07:00
Tanner Linsley	4db644941a	Badges	2016-12-06 13:15:55 -07:00
Pedro Tacla YamadaandTanner Linsley	6905ccae72	Fix typo when overriding pagination components (#17 )	2016-11-15 08:56:05 -07:00
Tanner LinsleyandGitHub	e832bf52b0	Update README.md	2016-11-07 13:44:31 -07:00
Tanner Linsley	3432fefce2	Example Update	2016-11-02 15:34:00 -06:00
Tanner Linsley	2abcc86954	3.1.2	2016-11-02 15:20:48 -06:00
Tanner Linsley	610972d99e	Pagination Style fixes	2016-11-02 15:20:43 -06:00
Tanner Linsley	c99796342b	3.1.1	2016-11-02 15:07:27 -06:00
Tanner Linsley	1b4d8bd45f	Fix pagination not showing with 0 pagesLength	2016-11-02 15:07:20 -06:00
Tanner Linsley	e922a43741	No example/dist	2016-11-02 13:08:20 -06:00
Tanner Linsley	75317c2251	Example Update	2016-11-02 13:07:05 -06:00
Tanner Linsley	e531ef1f64	Readme Updates	2016-11-02 12:12:29 -06:00