4.2.5

.gitignore

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

.storybook/CNAME

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

.storybook/config.js

@@ -12,7 +12,6 @@ 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'
@@ -35,7 +34,6 @@ configure(() => {
   storiesOf('2. Demos')
     .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-chat-signup.herokuapp.com/" target="\_parent">
-  <img alt="" src="https://img.shields.io/badge/slack-react--chat-blue.svg" />
+<a href="https://react-table-slack.herokuapp.com/" target="\_parent">
+  <img alt="" src="https://img.shields.io/badge/slack-react--table-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" />
@@ -53,27 +53,9 @@
 - [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
@@ -205,8 +187,7 @@ 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 extra room, column will flex to fill available space (up to the max-width, if set)
-  maxWidth: undefined // A maximum width for this column.
+  minWidth: 100 // A minimum width for this column. If there is room, columns will flex to fill available space
 
   // Cell Options
   className: '', // Set the classname of the `td` element of the column
@@ -230,12 +211,7 @@ Or just define them on the component per-instance
 ```
 
 ## Styles
-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!
+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 :)
 
 ## Header Groups
 To group columns with another header column, just nest your columns in a header column like so:
@@ -415,19 +391,17 @@ 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
-- `$ yarn`
-- `$ yarn run storybook`
+- `npm install`
+- `npm run watch`
 - 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
 
-#### Scripts
+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:
 
-- `$ 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
+- `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`
 
 ## Used By
 

docs/CNAME

@@ -1 +1 @@
-react-table.js.org
+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.2dea77e688032cb54b25.bundle.js"></script>
+        <script src="static/preview.6255f53218a1ea5fdea0.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.6358a4421928765ac21b.bundle.js"></script>
+        <script src="static/manager.7351266fe8166602d73f.bundle.js"></script>
       </body>
     </html>
   

docs/static/manager.7351266fe8166602d73f.bundle.js.map

@@ -1 +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":""}
+{"version":3,"file":"static/manager.7351266fe8166602d73f.bundle.js","sources":["webpack:///static/manager.7351266fe8166602d73f.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;AAu3DA;AA80GA;AAhvCA;AAuqGA;AAuqEA;AA6wEA;AAleA;AA+gEA;AA+mCA","sourceRoot":""}

docs/static/preview.2dea77e688032cb54b25.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.2dea77e688032cb54b25.bundle.js","sources":["webpack:///static/preview.2dea77e688032cb54b25.bundle.js"],"mappings":"AAAA;AAwxDA;AA45DA;AA4rDA;AAgjFA;AAy+FA;AAomJA;AAloHA;AAgsWA;AAm0DA;AA4kEA;AA+nDA;AAw8CA;AAkjEA;AA0oDA;AAq8CA;AAqoDA;AAksEA;AAwrDA;AAiuCA;AAopDA;AA0kDA;AAyqEA;AAu2DA;AAgpDA;AAwkDA;AAm5EA;AA0mHA;AAmrDA;AA6/BA;AAw9CA;AA6ZA;AAw8CA","sourceRoot":""}

docs/static/preview.6255f53218a1ea5fdea0.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.6255f53218a1ea5fdea0.bundle.js","sources":["webpack:///static/preview.6255f53218a1ea5fdea0.bundle.js"],"mappings":"AAAA;AAwxDA;AA45DA;AAuuDA;AA46EA;AA2lGA;AAmpIA;AAnwOA;AAsweA;AA8zDA;AA0nEA;AAqkDA;AAq+CA;AAuiEA;AAupDA;AA68CA;AAioDA;AAqsEA;AAmpDA;AAgvCA;AA6oDA;AAwkDA;AAypEA;AAu2DA;AAgpDA;AAwkDA;AAm5EA;AA0mHA;AAyqDA;AAskCA;AAyyCA;AA0aA;AAo8CA","sourceRoot":""}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "4.2.8",
+  "version": "4.2.5",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -24,8 +24,7 @@
   ],
   "scripts": {
     "build:node": "babel src --out-dir lib --source-maps inline",
-    "build:css": "rm -rf react-table.css && stylus src/index.styl --compress -o react-table.css && yarn run css:autoprefix",
-    "css:autoprefix": "postcss --use autoprefixer react-table.css -r",
+    "build:css": "rm -rf react-table.css && stylus src/index.styl --use ./node_modules/nib/lib/nib.js --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",
@@ -33,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 && cp .storybook/CNAME docs/CNAME"
+    "docs": "build-storybook -o docs"
   },
   "dependencies": {
     "classnames": "^2.2.5"
@@ -43,7 +42,6 @@
   },
   "devDependencies": {
     "@kadira/storybook": "^2.35.1",
-    "autoprefixer": "^6.7.0",
     "babel-cli": "6.14.0",
     "babel-eslint": "6.1.2",
     "babel-preset-es2015": "6.14.0",
@@ -55,9 +53,9 @@
     "html-loader": "^0.4.4",
     "markdown-loader": "^0.1.7",
     "namor": "^0.3.0",
+    "nib": "^1.1.2",
     "npm-run-all": "^3.1.1",
     "onchange": "^3.0.2",
-    "postcss-cli": "^2.6.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "standard": "^8.0.0",

src/index.js

@@ -45,7 +45,7 @@ export const ReactTableDefaults = {
   onTrClick: () => null,
 
   // Classes
-  className: '',
+  className: '-striped -highlight',
   tableClassName: '',
   theadClassName: '',
   tbodyClassName: '',
@@ -314,8 +314,7 @@ export default React.createClass({
               className={classnames(thClassname, 'rt-pivot-header')}
               style={_.prefixAll({
                 flex: `${columnPercentage} 0 auto`,
-                width: `${pivotColumn.minWidth}px`,
-                maxWidth: `${pivotColumn.maxWidth}px`
+                width: `${pivotColumn.minWidth}px`
               })}
             />
           ) : SubComponent ? (
@@ -334,10 +333,7 @@ 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 => {
-                    return d.maxWidth < d.minWidth ? d.maxWidth : d.minWidth
-                  }))}px`,
-                  maxWidth: `${_.sum(column.columns.map(d => d.maxWidth))}px`
+                  width: `${_.sum(column.columns.map(d => d.minWidth))}px`
                 }))}
               >
                 {typeof column.header === 'function' ? (
@@ -376,8 +372,7 @@ export default React.createClass({
                 )}
                 style={_.prefixAll({
                   flex: `${columnPercentage} 0 auto`,
-                  width: `${pivotColumn.minWidth}px`,
-                  maxWidth: `${pivotColumn.maxWidth}px`
+                  width: `${pivotColumn.minWidth}px`
                 })}
                 toggleSort={(e) => {
                   pivotColumn.sortable && this.sortColumn(pivotColumn.pivotColumns, e.shiftKey)
@@ -430,8 +425,7 @@ export default React.createClass({
           )}
           style={Object.assign({}, thStyle, column.headerStyle, _.prefixAll({
             flex: `${columnPercentage} 0 auto`,
-            width: `${column.minWidth}px`,
-            maxWidth: `${column.maxWidth}px`
+            width: `${column.minWidth}px`
           }))}
           toggleSort={(e) => {
             column.sortable && this.sortColumn(column, e.shiftKey)
@@ -474,8 +468,7 @@ 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`,
-                  maxWidth: pivotColumn && `${pivotColumn.maxWidth}px`
+                  width: `${pivotColumn ? pivotColumn.minWidth : expanderColumnWidth}px`
                 })}
                 onClick={(e) => {
                   if (onExpandRow) {
@@ -522,8 +515,7 @@ 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`,
-                    maxWidth: `${column.maxWidth}px`
+                    width: `${column.minWidth}px`
                   }))}
                 >
                   {typeof Cell === 'function' ? (
@@ -878,11 +870,6 @@ 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,3 +1,5 @@
+@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

stories/CellRenderers.js

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

stories/MaxWidths.js

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

stories/Pivoting.js

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

stories/PivotingSubComponents.js

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

stories/ServerSide.js

@@ -68,7 +68,6 @@ const ServerSide = React.createClass({
       <div>
         <div className='table-wrap'>
           <ReactTable
-            className='-striped -highlight'
             columns={[{
               header: 'First Name',
               accessor: 'firstName'

stories/Simple.js

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

stories/SubComponents.js

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