2.1.2

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - "6"
+script: npm test

README.md

@@ -1,7 +1,10 @@
+![react-table](https://github.com/tannerlinsley/react-table/raw/master/media/Banner.png)
+
 # react-table
 A fast, lightweight, opinionated table and datagrid built on React
 
-[![react-table on Slack](https://img.shields.io/badge/slack-reactTable-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)
+[![react-table on Slack](https://img.shields.io/badge/slack-react--table-blue.svg)](https://react-table-slack.herokuapp.com/)
 
 ## Features
 
@@ -9,12 +12,11 @@ A fast, lightweight, opinionated table and datagrid built on React
 - No composition needed
 - Uses customizable JSX and callbacks for everything
 - Client-side pagination and sorting
-- Server-side support
+- Server-side data
 - Minimal design & easily themeable
 
 Why you may **not** want to use this component:
-- No support for infinite scrolling. We chose to avoid the complex problems that come with it, and instead provide reliable and predictable pagination.
-- You need tables built in something other than traditional HTML table elements.
+- No support for infinite scrolling yet. We chose to avoid the complex problems that come with it, and instead provide reliable and predictable pagination.
 
 ## [Demo](http://react-table.zabapps.com)
 
@@ -107,24 +109,29 @@ This function will be called on mount, pagination events, and sorting events. It
 ```
 
 ## Multi-Sort
-When clicking on a column header, hold shift to multi-sort! You can toggle `aascending` `descending` and `none` for multi-sort columns. Clicking on a header without holding shift will clear the multi-sort and replace it with the single sort of that column. It's quite handy!
+When clicking on a column header, hold shift to multi-sort! You can toggle `ascending` `descending` and `none` for multi-sort columns. Clicking on a header without holding shift will clear the multi-sort and replace it with the single sort of that column. It's quite handy!
 
 ## Default Props
 ```javascript
 {
-  className: '-striped -highlight',
+  // Classes
+  className: '-striped -highlight', // The most top level className for the component
+  tableClassName: '', // ClassName for the `table` element
+  theadClassName: '', // ClassName for the `thead` element
+  tbodyClassName: '', // ClassName for the `tbody` element
+  trClassName: '', // ClassName for all `tr` elements
+  paginationClassName: '' // ClassName for `pagination` element
+  //
   pageSize: 20,
-  minRows: 0,
-  data: [],
-  previousComponent: <button {...props} className='-btn'>{props.children}</button>,
-  nextComponent: <button {...props} className='-btn'>{props.children}</button>,
-  previousText: 'Previous',
-  nextText: 'Next',
-  loadingComponent: <span>Loading...</span>,
+  minRows: 0, // Ensure this many rows are always rendered, regardless of rows on page
+  // Global Column Defaults
   column: { // default properties for every column's model
     sortable: true,
     show: true
-  }
+  },
+  // Text
+  previousText: 'Previous',
+  nextText: 'Next'
 }
 ```
 
@@ -147,7 +154,7 @@ Or just define them on the component
   pageSize={10}
   minRows={3}
   // etc...
-})
+  />
 ```
 
 ## Column Props
@@ -162,8 +169,10 @@ Or just define them on the component
   id: 'myProperty',
 
   // Optional
+  className: '', // Set the classname of the `th/td` element of the column
+  innerClassName: '', // Set the classname of the `.th-inner/.td-inner` element of the column
   columns: [...] // See Header Groups section below
-  render: JSX eg. ({row, value, index}) => <span>{value}</span>, // Provide a JSX element or stateless function to render whatever you want as the column's cell with access to the entire row
+  render: JSX eg. ({row, value, index, viewIndex}) => <span>{value}</span>, // Provide a JSX element or stateless function to render whatever you want as the column's cell with access to the entire row
   sortable: true,
   sort: 'asc' or 'desc',
   show: true,
@@ -190,20 +199,51 @@ const columns = [{
 }]
 ```
 
+## Component Overrides
+Though we wouldn't suggest it, `react-table` has the ability to change the core componentry it used to render it's table. You can do so by assigning a react component to it's corresponding global prop, or on a one-off basis like so:
+```javascript
+// Change the global default
+import { ReactTableDefaults } from 'react-table'
+Object.assign(ReactTableDefaults, {
+  tableComponent: Component,
+  theadComponent: Component,
+  tbodyComponent: Component,
+  trComponent: Component,
+  thComponent: Component,
+  tdComponent: Component,
+  paginationComponent: Component,
+  previousComponent: Component,
+  nextComponent: Component,
+  loadingComponent: Component
+})
+
+// Or change per instance
+<ReactTable
+  tableComponent={Component},
+  theadComponent={Component},
+  // etc...
+  />
+```
+
+If you choose to change the core components React-Table uses to render, you must make sure your components support and utilized all of the neeeded features for that component to work properly. For a broad reference on how to do this, investigate [the source](https://github.com/tannerlinsley/react-table/blob/master/src/index.js) for the component you wish to replace.
+
+
 ## Contributing
 To suggest a feature, create an issue if it does not already exist.
 If you would like to help develop a suggested feature follow these steps:
 
 - Fork this repo
-- Run `npm install`
-- Run `npm watch`
+- `npm install`
+- `npm watch`
 - Implement your changes to files in the `src/` directory
 - Submit PR for review
 
-If you would like to preview your changes, you can utilize the example like so:
+If you would like to preview your changes, you can link and utilize the example like so:
 
+- `npm link`
 - `cd example`
-- Run `npm install`
-- Run `npm watch`
+- `npm install`
+- `npm link react-table`
+- `npm watch`
 - Make changes to the example in `src/screens/index.js` if needed
 - View changes at `localhost:8000`

example/dist/app.css

@@ -100,12 +100,7 @@ html {
   min-height: 100vh;
 }
 body {
-  background: #003952;
-  background: -webkit-radial-gradient(ellipse at center, #005275 0%, #003952 100%);
-  background: -moz-radial-gradient(ellipse at center, #005275 0%, #003952 100%);
-  background: -o-radial-gradient(ellipse at center, #005275 0%, #003952 100%);
-  background: -ms-radial-gradient(ellipse at center, #005275 0%, #003952 100%);
-  background: radial-gradient(ellipse at center, #005275 0%, #003952 100%);
+  background: #fff;
   font-family: 'Open Sans', sans-serif;
   font-weight: 300;
   padding-bottom: 50px;
@@ -115,12 +110,16 @@ h1 {
   color: #fff;
 }
 a {
-  color: #fff;
+  color: #02bfe6;
   font-weight: bold;
+  text-decoration: none;
 }
 strong {
   font-weight: bold;
 }
+.logo {
+  width: 400px;
+}
 .container {
   display: -webkit-box;
   display: -moz-box;
@@ -151,12 +150,22 @@ strong {
 }
 .container .github-addon {
   font-size: 20px;
-  color: #fff;
   padding: 10px;
 }
 .container .table-wrap {
-  background: #fff;
   width: 700px;
   padding: 10px;
   border-radius: 5px;
+  -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
+  box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
+}
+.ReactTable thead th.-sort-asc,
+.ReactTable thead td.-sort-asc {
+  -webkit-box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.6);
+  box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.6);
+}
+.ReactTable thead th.-sort-desc,
+.ReactTable thead td.-sort-desc {
+  -webkit-box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.6);
+  box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.6);
 }

example/src/app.styl

@@ -18,9 +18,7 @@ global-reset()
 // -----------------------------------------------------------------------------
 
 $fnt-open-sans = 'Open Sans', sans-serif
-$clr-jumpsuit1 = #003952
-$clr-jumpsuit2 = #005275
-$clr-jumpsuit3 = #0082bb
+$react = #25d8fd
 
 // -----------------------------------------------------------------------------
 // styles
@@ -33,8 +31,7 @@ html
   min-height 100vh
 
 body
-  background: $clr-jumpsuit1
-  background: radial-gradient(ellipse at center, $clr-jumpsuit2 0%, $clr-jumpsuit1 100%)
+  background: white
   font-family: $fnt-open-sans
   font-weight: 300
   padding-bottom: 50px
@@ -44,12 +41,16 @@ h1
   color: white
 
 a
-  color: white
+  color: darken($react, 20%)
   font-weight: bold
+  text-decoration: none
 
 strong
   font-weight: bold
 
+.logo
+  width: 400px
+
 .container
   display: flex
   flex-direction: column
@@ -60,11 +61,19 @@ strong
 
   .github-addon
     font-size: 20px
-    color:white
     padding: 10px
 
   .table-wrap
-    background: white
     width: 700px
     padding: 10px
     border-radius: 5px
+    box-shadow: 0 0 20px 0 alpha(black, .2)
+
+.ReactTable
+	thead
+		th
+		td
+			&.-sort-asc
+				box-shadow:inset 0 3px 0 0 alpha(black, .6)
+			&.-sort-desc
+				box-shadow:inset 0 -3px 0 0 alpha(black, .6)

example/src/screens/index.js

@@ -34,14 +34,18 @@ export default Component({
     return (
       <div className='container'>
         <div style={{textAlign: 'center'}}>
-          <h1>react-table <strong>demo</strong></h1>
+          <h1>
+            <span style={{position: 'absolute', textIndent: '-9999em'}}>
+              react-table <strong>demo</strong>
+            </span>
+            <img src='/Banner.png' className='logo' />
+          </h1>
           <br />
           <div>
             <a
               className='github-button'
               href='https://github.com/tannerlinsley/react-table'
               target='_blank'
-              data-icon='octicon-star'
               data-style='mega'
               data-count-href='/tannerlinsley/react-table/stargazers'
               data-count-api='/repos/tannerlinsley/react-table#stargazers_count'
@@ -50,6 +54,7 @@ export default Component({
               Star
             </a>
           </div>
+          <br />
           <div className='github-addon'>
             <a
               target='_blank'
@@ -66,9 +71,9 @@ export default Component({
             columns={columns}
           />
         </div>
-        <div style={{textAlign: 'center', color: 'white'}}>
+        <div style={{textAlign: 'center'}}>
           <br />
-          <em>Tip: Hold shift when sorting for multi-sort!</em>
+          <em>Tip: Hold shift when sorting to multi-sort!</em>
         </div>
       </div>
     )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "2.0.1",
+  "version": "2.1.2",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -14,16 +14,19 @@
     "react-table",
     "datagrid"
   ],
-  "main": "react-table.js",
+  "main": "lib/index.js",
   "scripts": {
-    "build:js": "rm -rf react-table.js && browserify src/index.js -s reactTable -u react -t babelify -g uglifyify -o react-table.js",
+    "build:node": "babel src --out-dir lib --source-maps inline",
     "build:css": "rm -rf react-table.css && stylus src/index.styl --use ./node_modules/nib/lib/nib.js --compress -o react-table.css",
     "watch": "onchange 'src/**' -i -- npm-run-all build:*",
-    "prepublish": "npm-run-all build:*"
+    "test": "standard",
+    "umd": "rm -rf react-table.js && browserify lib/index.js -s reactTable -x react -t babelify -g uglifyify -o react-table.js",
+    "prepublish": "npm-run-all build:* && npm run umd"
   },
   "dependencies": {
-    "classnames": "^2.2.5",
-    "lodash": "^4.16.4",
+    "classnames": "^2.2.5"
+  },
+  "peerDependencies": {
     "react": "^15.3.1"
   },
   "devDependencies": {
@@ -34,16 +37,23 @@
     "babel-preset-stage-2": "6.13.0",
     "babelify": "^7.3.0",
     "browserify": "13.1.0",
+    "nib": "^1.1.2",
+    "npm-run-all": "^3.1.1",
     "onchange": "^3.0.2",
-    "react": "15.3.1",
     "standard": "8.0.0",
     "stylus": "^0.54.5",
     "uglifyify": "3.0.3"
   },
+  "browserify-shim": {
+    "react": "global:React"
+  },
   "standard": {
     "parser": "babel-eslint",
     "ignore": [
+      "node_modules",
+      "dist",
       "lib",
+      "example",
       "react-table.js"
     ]
   },

src/index.js

@@ -16,19 +16,36 @@ const defaultButton = (props) => (
 )
 
 export const ReactTableDefaults = {
+  // Classes
   className: '-striped -highlight',
+  tableClassName: '',
+  theadClassName: '',
+  tbodyClassName: '',
+  trClassName: '',
+  paginationClassName: '',
+  //
   pageSize: 20,
   minRows: 0,
-  data: [],
-  previousComponent: defaultButton,
-  nextComponent: defaultButton,
-  previousText: 'Previous',
-  nextText: 'Next',
-  loadingComponent: <span>Loading...</span>,
+  // Global Column Defaults
   column: {
     sortable: true,
     show: true
-  }
+  },
+  // Text
+  previousText: 'Previous',
+  nextText: 'Next',
+  loadingText: 'Loading...',
+  // Components
+  tableComponent: (props) => <table {...props}>{props.children}</table>,
+  theadComponent: (props) => <thead {...props}>{props.children}</thead>,
+  tbodyComponent: (props) => <tbody {...props}>{props.children}</tbody>,
+  trComponent: (props) => <tr {...props}>{props.children}</tr>,
+  thComponent: (props) => <th {...props}>{props.children}</th>,
+  tdComponent: (props) => <td {...props}>{props.children}</td>,
+  previousComponent: null,
+  nextComponent: null,
+  // Unlisted
+  data: []
 }
 
 export default React.createClass({
@@ -179,9 +196,10 @@ export default React.createClass({
     }
   },
   accessData (data) {
-    return data.map((d) => {
+    return data.map((d, i) => {
       const row = {
-        __original: d
+        __original: d,
+        __index: i
       }
       this.decoratedColumns.forEach(column => {
         row[column.id] = column.accessor(d)
@@ -223,22 +241,30 @@ export default React.createClass({
     const canPrevious = this.state.page > 0
     const canNext = this.state.page + 1 < pagesLength
 
-    const PreviousComponent = this.props.previousComponent
-    const NextComponent = this.props.previousComponent
+    const TableComponent = this.props.tableComponent
+    const TheadComponent = this.props.theadComponent
+    const TbodyComponent = this.props.tbodyComponent
+    const TrComponent = this.props.trComponent
+    const ThComponent = this.props.thComponent
+    const TdComponent = this.props.tdComponent
+
+    const PreviousComponent = this.props.previousComponent || defaultButton
+    const NextComponent = this.props.nextComponent || defaultButton
 
     return (
       <div className={classnames(this.props.className, 'ReactTable')}>
-        <table>
+        <TableComponent className={classnames(this.props.tableClassName)}>
           {this.hasHeaderGroups && (
-            <thead className='-headerGroups'>
-              <tr>
+            <TheadComponent className={classnames(this.props.theadClassName, '-headerGroups')}>
+              <TrComponent className={this.props.trClassName}>
                 {this.headerGroups.map((column, i) => {
                   return (
-                    <th
+                    <ThComponent
                       key={i}
+                      className={classnames(column.className)}
                       colSpan={column.columns.length}>
                       <div
-                        className='-th-inner'>
+                        className={classnames(column.innerClassName, '-th-inner')}>
                         {typeof column.header === 'function' ? (
                           <column.header
                             data={this.props.data}
@@ -246,21 +272,22 @@ export default React.createClass({
                           />
                         ) : column.header}
                       </div>
-                    </th>
+                    </ThComponent>
                   )
                 })}
-              </tr>
-            </thead>
+              </TrComponent>
+            </TheadComponent>
           )}
-          <thead>
-            <tr>
+          <TheadComponent className={classnames(this.props.theadClassName)}>
+            <TrComponent className={this.props.trClassName}>
               {this.decoratedColumns.map((column, i) => {
                 const sort = this.state.sorting.find(d => d.id === column.id)
                 const show = typeof column.show === 'function' ? column.show() : column.show
                 return (
-                  <th
+                  <ThComponent
                     key={i}
                     className={classnames(
+                      column.className,
                       sort ? (sort.asc ? '-sort-asc' : '-sort-desc') : '',
                       {
                         '-cursor-pointer': column.sortable,
@@ -271,7 +298,7 @@ export default React.createClass({
                       column.sortable && this.sortColumn(column, e.shiftKey)
                     }}>
                     <div
-                      className='-th-inner'
+                      className={classnames(column.innerClassName, '-th-inner')}
                       style={{
                         width: column.width + 'px',
                         minWidth: column.minWidth + 'px'
@@ -283,24 +310,26 @@ export default React.createClass({
                         />
                       ) : column.header}
                     </div>
-                  </th>
+                  </ThComponent>
                 )
               })}
-            </tr>
-          </thead>
-          <tbody>
+            </TrComponent>
+          </TheadComponent>
+          <TbodyComponent className={classnames(this.props.tbodyClassName)}>
             {pageRows.map((row, i) => {
               return (
-                <tr key={i}>
+                <TrComponent
+                  className={classnames(this.props.trClassName)}
+                  key={i}>
                   {this.decoratedColumns.map((column, i2) => {
                     const Cell = column.render
                     const show = typeof column.show === 'function' ? column.show() : column.show
                     return (
-                      <td
-                        className={classnames({hidden: !show})}
+                      <TdComponent
+                        className={classnames(column.className, {hidden: !show})}
                         key={i2}>
                         <div
-                          className='-td-inner'
+                          className={classnames(column.innerClassName, '-td-inner')}
                           style={{
                             width: column.width + 'px',
                             minWidth: column.minWidth + 'px'
@@ -309,42 +338,45 @@ export default React.createClass({
                             <Cell
                               value={row[column.id]}
                               row={row.__original}
-                              index={i}
+                              index={row.__index}
+                              viewIndex={i}
                             />
                             ) : typeof Cell !== 'undefined' ? Cell
                           : row[column.id]}
                         </div>
-                      </td>
+                      </TdComponent>
                     )
                   })}
-                </tr>
+                </TrComponent>
               )
             })}
             {padRows.map((row, i) => {
               return (
-                <tr key={i}>
+                <TrComponent
+                  className={classnames(this.props.trClassName, '-padRow')}
+                  key={i}>
                   {this.decoratedColumns.map((column, i2) => {
                     const show = typeof column.show === 'function' ? column.show() : column.show
                     return (
-                      <td
-                        className={classnames({hidden: !show})}
+                      <TdComponent
+                        className={classnames(column.className, {hidden: !show})}
                         key={i2}>
                         <div
-                          className='-td-inner'
+                          className={classnames(column.innerClassName, '-td-inner')}
                           style={{
                             width: column.width + 'px',
                             minWidth: column.minWidth + 'px'
                           }}>&nbsp;</div>
-                      </td>
+                      </TdComponent>
                     )
                   })}
-                </tr>
+                </TrComponent>
               )
             })}
-          </tbody>
-        </table>
+          </TbodyComponent>
+        </TableComponent>
         {pagesLength > 1 && (
-          <div className='-pagination'>
+          <div className={classnames(this.props.paginationClassName, '-pagination')}>
             <div className='-left'>
               <PreviousComponent
                 onClick={canPrevious && ((e) => this.previousPage(e))}
@@ -366,7 +398,7 @@ export default React.createClass({
         )}
         <div className={classnames('-loading', {'-active': this.state.loading})}>
           <div className='-loading-inner'>
-            {this.props.loadingComponent}
+            {this.props.loadingText}
           </div>
         </div>
       </div>
@@ -417,13 +449,10 @@ export default React.createClass({
   }
 })
 
-
-
 // ########################################################################
 // Utils
 // ########################################################################
 
-
 function remove (a, b) {
   return a.filter(function (o, i) {
     var r = b(o)