4.2.7

Fixes #34

.gitignore

@@ -3,6 +3,3 @@ lib/
 react-table.js
 react-table.css
 *.log
-example/dist/
-
-storybook-static

.storybook/config.js

@@ -11,6 +11,8 @@ import '../react-table.css'
 import Readme from '../README.md'
 //
 import Simple from '../stories/Simple.js'
+import CellRenderers from '../stories/CellRenderers.js'
+import MaxWidths from '../stories/MaxWidths.js'
 import ServerSide from '../stories/ServerSide.js'
 import SubComponents from '../stories/SubComponents.js'
 import Pivoting from '../stories/Pivoting.js'
@@ -31,7 +33,9 @@ configure(() => {
       return <ReadmeCmp />
     })
   storiesOf('2. Demos')
-    .add('Client-side Data', Simple)
+    .add('Simple Table', Simple)
+    .add('Cell Renderers & Custom Components', CellRenderers)
+    .add('Max Widths', MaxWidths)
     .add('Server-side Data', ServerSide)
     .add('Sub Components', SubComponents)
     .add('Pivoting & Aggregation', Pivoting)

README.md

@@ -15,8 +15,8 @@
 <a href="https://npmjs.com/package/react-table" target="\_parent">
   <img alt="" src="https://img.shields.io/npm/dm/react-table.svg" />
 </a>
-<a href="https://react-table-slack.herokuapp.com/" target="\_parent">
-  <img alt="" src="https://img.shields.io/badge/slack-react--table-blue.svg" />
+<a href="https://react-chat-signup.herokuapp.com/" target="\_parent">
+  <img alt="" src="https://img.shields.io/badge/slack-react--chat-blue.svg" />
 </a>
 <a href="https://github.com/tannerlinsley/react-table" target="\_parent">
   <img alt="" src="https://img.shields.io/github/stars/tannerlinsley/react-table.svg?style=social&label=Star" />
@@ -35,7 +35,7 @@
 - Fully controllable via optional props and callbacks
 - <a href="https://medium.com/@tannerlinsley/why-i-wrote-react-table-and-the-problems-it-has-solved-for-nozzle-others-445c4e93d4a8#.axza4ixba" target="\_parent">"Why I wrote React Table and the problems it has solved for Nozzle.io</a> by Tanner Linsley
 
-## <a href="http://react-table.zabapps.com/?selectedKind=2.%20Demos&selectedStory=Client-side%20Data&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel" target="\_parent">Demo</a>
+## <a href="http://react-table.js.org/?selectedKind=2.%20Demos&selectedStory=Client-side%20Data&full=0&down=0&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel" target="\_parent">Demo</a>
 
 ## Table of Contents
 - [Installation](#installation)
@@ -53,9 +53,27 @@
 - [Component Overrides](#component-overrides)
 
 ## Installation
+1. Install React Table as a dependency
 ```bash
 $ npm install react-table
+# or
+$ yarn react-table
 ```
+2. Import the `react-table` module
+```javascript
+// ES6
+import ReactTable from 'react-table'
+// ES5
+var ReactTable = require('react-table').default
+```
+3. Import styles by including `react-table.css` anywhere on the page
+```javascript
+// JS (Webpack)
+import 'react-table/react-table.css'
+// html
+<link rel="stylesheet" href="node_modules/react-table/react-table.css">
+```
+
 
 ## Example
 ```javascript
@@ -187,7 +205,8 @@ Or just define them on the component per-instance
   sortable: true,
   sort: 'asc' or 'desc', // used to determine the column sorting on init
   show: true, // can be used to hide a column
-  minWidth: 100 // A minimum width for this column. If there is room, columns will flex to fill available space
+  minWidth: 100 // A minimum width for this column. If there is extra room, column will flex to fill available space (up to the max-width, if set)
+  maxWidth: undefined // A maximum width for this column.
 
   // Cell Options
   className: '', // Set the classname of the `td` element of the column
@@ -211,7 +230,12 @@ Or just define them on the component per-instance
 ```
 
 ## Styles
-React-table is built to be dropped into existing applications or styled from the ground up, but if you'd like a decent starting point, you can optionally include our default theme `react-table.css`.  We think it looks great, honestly :)
+React-table ships with a minimal and clean stylesheet to get you on your feet quickly. It's located at `react-table/react-table.css`.
+
+- Adding a `-striped` className to ReactTable will slightly color odd numbered rows for legibility
+- Adding a `-highlight` className to ReactTable will highlight any row as you hover over it
+
+We think the default styles looks great! But, if you prefer a more custom look, all of the included styles are easily overridable. Every single component contains a unique class that makes it super easy to customize. Just go for it!
 
 ## Header Groups
 To group columns with another header column, just nest your columns in a header column like so:
@@ -391,17 +415,19 @@ 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
-- `npm install`
-- `npm run watch`
+- `$ yarn`
+- `$ yarn run storybook`
 - Implement your changes to files in the `src/` directory
+- View changes as you code via our <a href="https://github.com/storybooks/react-storybook" target="\_parent">React Storybook</a> `localhost:8000`
+- Make changes to stories in `/stories`, or create a new one if needed
 - Submit PR for review
 
-If you would like to preview your changes as you develop, you can link and utilize our <a href="https://github.com/storybooks/react-storybook" target="\_parent">React Storybook</a> like so:
+#### Scripts
 
-- `npm install`
-- `run storybook` (or run them in separate tabs)
-- Make changes to stories in `/stories`, or create a new one if needed
-- View changes at `localhost:8000`
+- `$ yarn run storybook` Runs the storybook server
+- `$ yarn run test` Runs the test suite
+- `$ yarn run prepublish` Builds the distributable bundle
+- `$ yarn run docs` Builds the website/docs from the storybook for github pages
 
 ## Used By
 

docs/CNAME

@@ -0,0 +1 @@
+react-table.js.org

docs/iframe.html

@@ -16,7 +16,7 @@
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="static/preview.30adfa2464622c0f1904.bundle.js"></script>
+        <script src="static/preview.254c6d60467ce3c21d01.bundle.js"></script>
       </body>
     </html>
   

docs/index.html

@@ -38,7 +38,7 @@
       </head>
       <body style="margin: 0;">
         <div id="root"></div>
-        <script src="static/manager.32cbfa2b6d56d1f8fbac.bundle.js"></script>
+        <script src="static/manager.6358a4421928765ac21b.bundle.js"></script>
       </body>
     </html>
   

docs/static/manager.32cbfa2b6d56d1f8fbac.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/manager.32cbfa2b6d56d1f8fbac.bundle.js","sources":["webpack:///static/manager.32cbfa2b6d56d1f8fbac.bundle.js"],"mappings":"AAAA;AA4zDA;AAg4DA;AAwgEA;AAqiEA;AAk0EA;AA67CA;AA0qDA;AAy4DA;AA8lDA;AA4hDA;AA62DA;AA+/DA;AA6mDA;AAsyCA;AA2gDA;AA+2DA;AA+jEA;AAixDA;AA6lDA;AA+nDA;AA0qEA;AAinDA;AAs3DA;AA80GA;AAhvCA;AAuqGA;AAuqEA;AA6wEA;AAleA;AA+gEA;AA+mCA","sourceRoot":""}

docs/static/manager.6358a4421928765ac21b.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/manager.6358a4421928765ac21b.bundle.js","sources":["webpack:///static/manager.6358a4421928765ac21b.bundle.js"],"mappings":"AAAA;AA4zDA;AAg4DA;AA4gEA;AAiiEA;AAk0EA;AA67CA;AA0qDA;AAy4DA;AA8lDA;AA4hDA;AA62DA;AA+/DA;AA6mDA;AAsyCA;AA2gDA;AA+2DA;AA+jEA;AAixDA;AA6lDA;AA+nDA;AA0qEA;AAinDA;AAw3DA;AA80GA;AAhvCA;AAuqGA;AAuqEA;AA6wEA;AAleA;AA+gEA;AA+mCA","sourceRoot":""}

docs/static/preview.254c6d60467ce3c21d01.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.254c6d60467ce3c21d01.bundle.js","sources":["webpack:///static/preview.254c6d60467ce3c21d01.bundle.js"],"mappings":"AAAA;AAwxDA;AA45DA;AA6rDA;AAokFA;AAy9FA;AA4nJA;AA1pHA;AAgsWA;AAm0DA;AA0kEA;AA6nDA;AAi9CA;AA8iEA;AAipDA;AAy8CA;AAmoDA;AAktEA;AA6pDA;AAwuCA;AA8oDA;AA6kDA;AA8pEA;AAu2DA;AAgpDA;AAwkDA;AAm5EA;AA0mHA;AA6rDA;AAugCA;AAs8CA;AA6WA;AA+9CA","sourceRoot":""}

docs/static/preview.30adfa2464622c0f1904.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.30adfa2464622c0f1904.bundle.js","sources":["webpack:///static/preview.30adfa2464622c0f1904.bundle.js"],"mappings":"AAAA;AAwxDA;AA45DA;AAo9DA;AA24DA;AAg3CA;AAkoIA;AAgwGA;AA+sPA;AAk6CA;AAq4DA;AA4gDA;AAmpDA;AA05DA;AAkoDA;AAu+CA;AA0rDA;AAiqEA;AAyoDA;AA8xCA;AAmnDA;AAqzDA;AAqhEA;AAqwDA;AAk7DA;AAw1CA;AAisFA;AAw3GA;AAo/CA;AAikCA;AA29BA;AA+vBA;AAy1CA","sourceRoot":""}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "4.2.4",
+  "version": "4.2.7",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -24,7 +24,7 @@
   ],
   "scripts": {
     "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",
+    "build:css": "rm -rf react-table.css && stylus src/index.styl --use autoprefixer-stylus --compress -o react-table.css",
     "watch": "npm-run-all --parallel watch:*",
     "watch:node": "onchange 'src/**/*.js' -i -- npm run build:node",
     "watch:css": "onchange 'src/**/*.styl' -i -- npm run build:css",
@@ -32,7 +32,7 @@
     "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",
     "storybook": "start-storybook -p 8000 -c .storybook",
-    "docs": "build-storybook -o docs"
+    "docs": "build-storybook -o docs && cp .storybook/CNAME docs/CNAME"
   },
   "dependencies": {
     "classnames": "^2.2.5"
@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@kadira/storybook": "^2.35.1",
+    "autoprefixer-stylus": "^0.13.0",
     "babel-cli": "6.14.0",
     "babel-eslint": "6.1.2",
     "babel-preset-es2015": "6.14.0",

src/index.js

@@ -45,7 +45,7 @@ export const ReactTableDefaults = {
   onTrClick: () => null,
 
   // Classes
-  className: '-striped -highlight',
+  className: '',
   tableClassName: '',
   theadClassName: '',
   tbodyClassName: '',
@@ -314,7 +314,8 @@ export default React.createClass({
               className={classnames(thClassname, 'rt-pivot-header')}
               style={_.prefixAll({
                 flex: `${columnPercentage} 0 auto`,
-                width: `${pivotColumn.minWidth}px`
+                width: `${pivotColumn.minWidth}px`,
+                maxWidth: `${pivotColumn.maxWidth}px`
               })}
             />
           ) : SubComponent ? (
@@ -333,7 +334,10 @@ export default React.createClass({
                 className={classnames(thClassname, column.headerClassName)}
                 style={Object.assign({}, thStyle, column.headerStyle, _.prefixAll({
                   flex: `${column.columns.length * columnPercentage} 0 auto`,
-                  width: `${_.sum(column.columns.map(d => d.minWidth))}px`
+                  width: `${_.sum(column.columns.map(d => {
+                    return d.maxWidth < d.minWidth ? d.maxWidth : d.minWidth
+                  }))}px`,
+                  maxWidth: `${_.sum(column.columns.map(d => d.maxWidth))}px`
                 }))}
               >
                 {typeof column.header === 'function' ? (
@@ -372,7 +376,8 @@ export default React.createClass({
                 )}
                 style={_.prefixAll({
                   flex: `${columnPercentage} 0 auto`,
-                  width: `${pivotColumn.minWidth}px`
+                  width: `${pivotColumn.minWidth}px`,
+                  maxWidth: `${pivotColumn.maxWidth}px`
                 })}
                 toggleSort={(e) => {
                   pivotColumn.sortable && this.sortColumn(pivotColumn.pivotColumns, e.shiftKey)
@@ -425,7 +430,8 @@ export default React.createClass({
           )}
           style={Object.assign({}, thStyle, column.headerStyle, _.prefixAll({
             flex: `${columnPercentage} 0 auto`,
-            width: `${column.minWidth}px`
+            width: `${column.minWidth}px`,
+            maxWidth: `${column.maxWidth}px`
           }))}
           toggleSort={(e) => {
             column.sortable && this.sortColumn(column, e.shiftKey)
@@ -468,7 +474,8 @@ export default React.createClass({
                 style={_.prefixAll({
                   paddingLeft: rowInfo.nestingPath.length === 1 ? undefined : `${30 * (rowInfo.nestingPath.length - 1)}px`,
                   flex: `${pivotColumn ? columnPercentage : 0} 0 auto`,
-                  width: `${pivotColumn ? pivotColumn.minWidth : expanderColumnWidth}px`
+                  width: `${pivotColumn ? pivotColumn.minWidth : expanderColumnWidth}px`,
+                  maxWidth: pivotColumn && `${pivotColumn.maxWidth}px`
                 })}
                 onClick={(e) => {
                   if (onExpandRow) {
@@ -515,7 +522,8 @@ export default React.createClass({
                   className={classnames(column.className, {hidden: !show})}
                   style={Object.assign({}, tdStyle, column.style, _.prefixAll({
                     flex: `${columnPercentage} 0 auto`,
-                    width: `${column.minWidth}px`
+                    width: `${column.minWidth}px`,
+                    maxWidth: `${column.maxWidth}px`
                   }))}
                 >
                   {typeof Cell === 'function' ? (
@@ -870,6 +878,11 @@ export default React.createClass({
       dcol.accessor = d => undefined
     }
 
+    // Ensure minWidth is not greater than maxWidth if set
+    if (dcol.maxWidth < dcol.minWidth) {
+      dcol.minWidth = dcol.maxWidth
+    }
+
     return dcol
   },
   getMinRows () {

src/index.styl

@@ -1,5 +1,3 @@
-@import 'nib'
-
 $easeOutQuad = cubic-bezier(0.250, 0.460, 0.450, 0.940)
 $easeOutBack = cubic-bezier(0.175,  0.885, 0.320, 1.275)
 $expandSize = 7px

src/utils.js

@@ -135,7 +135,7 @@ function prefixAll (obj) {
 function groupBy (xs, key) {
   return xs.reduce((rv, x, i) => {
     const resKey = typeof key === 'function' ? key(x, i) : x[key]
-    rv[resKey] = rv[resKey] || []
+    rv[resKey] = isArray(rv[resKey]) ? rv[resKey] : []
     rv[resKey].push(x)
     return rv
   }, {})

stories/CellRenderers.js

@@ -0,0 +1,170 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+export default () => {
+  const data = _.map(_.range(5553), d => {
+    const statusChance = Math.random()
+    return {
+      firstName: namor.generate({ words: 1, numLen: 0 }),
+      lastName: namor.generate({ words: 1, numLen: 0 }),
+      progress: Math.floor(Math.random() * 100),
+      status: statusChance > 0.66 ? 'relationship'
+        : statusChance > 0.33 ? 'complicated'
+        : 'single'
+    }
+  })
+
+  const columns = [{
+    header: 'Name',
+    columns: [{
+      header: 'First Name',
+      accessor: 'firstName'
+    }, {
+      header: 'Last Name',
+      id: 'lastName',
+      accessor: d => d.lastName
+    }]
+  }, {
+    header: 'Info',
+    columns: [{
+      header: 'Profile Progress',
+      accessor: 'progress',
+      render: row => (
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: '#dadada',
+            borderRadius: '2px'
+          }}
+        >
+          <div
+            style={{
+              width: `${row.value}%`,
+              height: '100%',
+              backgroundColor: row.value > 66 ? '#85cc00'
+                : row.value > 33 ? '#ffbf00'
+                : '#ff2e00',
+              borderRadius: '2px',
+              transition: 'all .2s ease-out'
+            }}
+          />
+        </div>
+      )
+    }, {
+      header: 'Status',
+      accessor: 'status',
+      render: row => (
+        <span>
+          <span style={{
+            color: row.value === 'relationship' ? '#ff2e00'
+              : row.value === 'complicated' ? '#ffbf00'
+              : '#57d500',
+            transition: 'all .3s ease'
+          }}>
+            &#x25cf;
+          </span> {
+            row.value === 'relationship' ? 'In a relationship'
+            : row.value === 'complicated' ? `It's complicated`
+            : 'Single'
+          }
+        </span>
+      )
+    }]
+  }]
+
+  return (
+    <div>
+      <div className='table-wrap'>
+        <ReactTable
+          className='-striped -highlight'
+          data={data}
+          columns={columns}
+          defaultPageSize={10}
+        />
+      </div>
+      <div style={{textAlign: 'center'}}>
+        <br />
+        <em>Tip: Hold shift when sorting to multi-sort!</em>
+      </div>
+      <CodeHighlight>{() => getCode()}</CodeHighlight>
+    </div>
+  )
+}
+
+function getCode () {
+  return `
+import ReactTable from 'react-table'
+
+const columns = [{
+  header: 'Name',
+  columns: [{
+    header: 'First Name',
+    accessor: 'firstName'
+  }, {
+    header: 'Last Name',
+    id: 'lastName',
+    accessor: d => d.lastName
+  }]
+}, {
+  header: 'Info',
+  columns: [{
+    header: 'Profile Progress',
+    accessor: 'progress',
+    render: row => (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          backgroundColor: '#dadada',
+          borderRadius: '2px'
+        }}
+      >
+        <div
+          style={{
+            width: \`$\{row.value}%\`,
+            height: '100%',
+            backgroundColor: row.value > 66 ? '#85cc00'
+              : row.value > 33 ? '#ffbf00'
+              : '#ff2e00',
+            borderRadius: '2px',
+            transition: 'all .2s ease-out'
+          }}
+        />
+      </div>
+    )
+  }, {
+    header: 'Status',
+    accessor: 'status',
+    render: row => (
+      <span>
+        <span style={{
+          color: row.value === 'relationship' ? '#ff2e00'
+            : row.value === 'complicated' ? '#ffbf00'
+            : '#57d500',
+          transition: 'all .3s ease'
+        }}>
+          &#x25cf;
+        </span> {
+          row.value === 'relationship' ? 'In a relationship'
+          : row.value === 'complicated' ? \`It's complicated\`
+          : 'Single'
+        }
+      </span>
+    )
+  }]
+}]
+
+return (
+  <ReactTable
+    data={data}
+    columns={columns}
+    defaultPageSize={10}
+  />
+)
+  `
+}

stories/MaxWidths.js

@@ -0,0 +1,91 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+export default () => {
+  const data = _.map(_.range(5553), d => {
+    return {
+      firstName: namor.generate({ words: 1, numLen: 0 }),
+      lastName: namor.generate({ words: 1, numLen: 0 }),
+      age: Math.floor(Math.random() * 30)
+    }
+  })
+
+  const columns = [{
+    header: 'Name',
+    columns: [{
+      header: 'First Name',
+      accessor: 'firstName',
+      maxWidth: 200
+    }, {
+      header: 'Last Name',
+      id: 'lastName',
+      accessor: d => d.lastName,
+      maxWidth: 400
+    }]
+  }, {
+    header: 'Info',
+    columns: [{
+      header: 'Age',
+      accessor: 'age',
+      maxWidth: 60
+    }]
+  }]
+
+  return (
+    <div>
+      <div className='table-wrap'>
+        <ReactTable
+          className='-striped -highlight'
+          data={data}
+          columns={columns}
+          defaultPageSize={10}
+        />
+      </div>
+      <div style={{textAlign: 'center'}}>
+        <br />
+        <em>Tip: Hold shift when sorting to multi-sort!</em>
+      </div>
+      <CodeHighlight>{() => getCode()}</CodeHighlight>
+    </div>
+  )
+}
+
+function getCode () {
+  return `
+import ReactTable from 'react-table'
+
+const columns = [{
+  header: 'Name',
+  columns: [{
+    header: 'First Name',
+    accessor: 'firstName',
+    maxWidth: 200
+  }, {
+    header: 'Last Name',
+    id: 'lastName',
+    accessor: d => d.lastName,
+    maxWidth: 400
+  }]
+}, {
+  header: 'Info',
+  columns: [{
+    header: 'Age',
+    accessor: 'age',
+    maxWidth: 60
+  }]
+}]
+
+return (
+  <ReactTable
+    className='-striped -highlight'
+    data={data}
+    columns={columns}
+    defaultPageSize={10}
+  />
+)
+  `
+}

stories/OneHundredKRows.js

@@ -47,6 +47,7 @@ export default () => {
         <ReactTable
           data={data}
           columns={columns}
+          className='-striped -highlight'
           defaultPageSize={10}
           pivotBy={['firstName', 'lastName']}
           SubComponent={(row) => {

stories/Pivoting.js

@@ -47,6 +47,7 @@ export default () => {
         <ReactTable
           data={data}
           columns={columns}
+          className='-striped -highlight'
           defaultPageSize={10}
           pivotBy={['firstName', 'lastName']}
           // expandedRows={{

stories/PivotingSubComponents.js

@@ -48,6 +48,7 @@ export default () => {
           data={data}
           columns={columns}
           defaultPageSize={10}
+          className='-striped -highlight'
           pivotBy={['firstName', 'lastName']}
           SubComponent={(row) => {
             return (

stories/ServerSide.js

@@ -68,6 +68,7 @@ const ServerSide = React.createClass({
       <div>
         <div className='table-wrap'>
           <ReactTable
+            className='-striped -highlight'
             columns={[{
               header: 'First Name',
               accessor: 'firstName'
@@ -135,42 +136,18 @@ export default React.createClass({
       })
   },
   render () {
-    const columns = [{
-      header: 'Name',
-      columns: [{
-        header: 'First Name',
-        accessor: 'firstName'
-      }, {
-        header: 'Last Name',
-        id: 'lastName',
-        accessor: d => d.lastName
-      }]
-    }, {
-      header: 'Info',
-      columns: [{
-        header: 'Age',
-        accessor: 'age'
-      }]
-    }]
-
     return (
       <ReactTable
         columns={[{
-          header: 'Name',
-          columns: [{
-            header: 'First Name',
-            accessor: 'firstName'
-          }, {
-            header: 'Last Name',
-            id: 'lastName',
-            accessor: d => d.lastName
-          }]
+          header: 'First Name',
+          accessor: 'firstName'
         }, {
-          header: 'Info',
-          columns: [{
-            header: 'Age',
-            accessor: 'age'
-          }]
+          header: 'Last Name',
+          id: 'lastName',
+          accessor: d => d.lastName
+        }, {
+          header: 'Age',
+          accessor: 'age'
         }]}
         manual // Forces table not to paginate or sort automatically, so we can handle it server-side
         defaultPageSize={10}

stories/Simple.js

@@ -36,6 +36,7 @@ export default () => {
     <div>
       <div className='table-wrap'>
         <ReactTable
+          className='-striped -highlight'
           data={data}
           columns={columns}
           defaultPageSize={10}

stories/SubComponents.js

@@ -36,6 +36,7 @@ export default () => {
     <div>
       <div className='table-wrap'>
         <ReactTable
+          className='-striped -highlight'
           data={data}
           columns={columns}
           defaultPageSize={10}

yarn.lock

@@ -344,7 +344,15 @@ asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
-autoprefixer@^6.3.1, autoprefixer@^6.3.7:
+autoprefixer-stylus:
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/autoprefixer-stylus/-/autoprefixer-stylus-0.13.0.tgz#cc2a864e121fad691421c82d9f3e4328137b7df4"
+  dependencies:
+    autoprefixer "6.6.1"
+    multi-stage-sourcemap "0.2.1"
+    postcss "5.2.8"
+
+autoprefixer@^6.3.1, autoprefixer@^6.3.7, autoprefixer@6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.6.1.tgz#11a4077abb4b313253ec2f6e1adb91ad84253519"
   dependencies:
@@ -3767,6 +3775,12 @@ ms@0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
 
+multi-stage-sourcemap@0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/multi-stage-sourcemap/-/multi-stage-sourcemap-0.2.1.tgz#b09fc8586eaa17f81d575c4ad02e0f7a3f6b1105"
+  dependencies:
+    source-map "^0.1.34"
+
 mute-stream@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
@@ -4469,6 +4483,15 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.1.2"
 
+postcss@5.2.8:
+  version "5.2.8"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.8.tgz#05720c49df23c79bda51fd01daeb1e9222e94390"
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.1.2"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -5115,6 +5138,12 @@ source-map-support@^0.4.2:
   dependencies:
     source-map "^0.5.3"
 
+source-map@^0.1.34, source-map@0.1.x:
+  version "0.1.43"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
+  dependencies:
+    amdefine ">=0.0.4"
+
 source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
@@ -5131,12 +5160,6 @@ source-map@~0.4.1, source-map@0.4.x:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@0.1.x:
-  version "0.1.43"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
-  dependencies:
-    amdefine ">=0.0.4"
-
 spdx-correct@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"