6.4.0

Feature: PadRowComponent prop
6.3.0
2026-08-19 08:20:30 +00:00 · 2017-06-19 11:34:29 -06:00 · 2017-06-19 11:34:21 -06:00 · 2017-06-09 21:02:37 -06:00 · 2017-06-09 21:02:28 -06:00 · 2017-06-07 21:57:54 -06:00
41 changed files with 1667 additions and 1376 deletions
@@ -0,0 +1,74 @@
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 8,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+      node: false
+    },
+    sourceType: 'module'
+  },
+
+  extends: ['standard'],
+
+  plugins: ['react'],
+
+  rules: {
+    // Nozzle
+    'jsx-quotes': [2, 'prefer-single'],
+    'comma-dangle': [2, 'always-multiline'],
+
+    // // React
+    'react/jsx-boolean-value': 2,
+    'react/jsx-curly-spacing': [2, 'never'],
+    'react/jsx-equals-spacing': [2, 'never'],
+    // 'react/jsx-indent': 2,
+    'react/jsx-indent-props': [2, 2],
+    'react/jsx-no-duplicate-props': 2,
+    'react/jsx-no-undef': 2,
+    'react/jsx-tag-spacing': [
+      2,
+      {
+        closingSlash: 'never',
+        beforeSelfClosing: 'always',
+        afterOpening: 'never'
+      }
+    ],
+    'react/jsx-uses-react': 2,
+    'react/jsx-uses-vars': 2,
+    'react/self-closing-comp': 2,
+    'react/jsx-no-bind': [
+      2,
+      {
+        allowArrowFunctions: true,
+        allowBind: false,
+        ignoreRefs: true
+      }
+    ],
+    'react/no-did-update-set-state': 2,
+    'react/no-unknown-property': 2,
+    'react/react-in-jsx-scope': 2,
+    'react/jsx-closing-bracket-location': [2, 'tag-aligned'],
+    'react/jsx-tag-spacing': [2, { beforeSelfClosing: 'always' }],
+    'react/jsx-wrap-multilines': 2,
+    'react/self-closing-comp': 2,
+    'react/jsx-key': 2,
+    'react/jsx-no-comment-textnodes': 2,
+    'react/jsx-no-duplicate-props': 2,
+    'react/jsx-no-target-blank': 2,
+    'react/jsx-no-undef': 2,
+    'react/jsx-uses-react': 2,
+    'react/jsx-uses-vars': 2,
+    'react/no-danger-with-children': 2,
+    'react/no-deprecated': 2,
+    'react/no-direct-mutation-state': 2,
+    'react/no-find-dom-node': 2,
+    'react/no-is-mounted': 2,
+    'react/no-render-return-value': 2,
+    'react/no-string-refs': 2,
+    'react/no-unknown-property': 2,
+    'react/react-in-jsx-scope': 2,
+    'react/require-render-return': 2
+    // 'react/jsx-max-props-per-line': [2, { maximum: 1 }]
+  }
+}
@@ -1 +0,0 @@
-react-table.js.org
@@ -1,18 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600");
-body {
-  background: #fff;
-  font-family: 'Open Sans', sans-serif;
-  font-weight: 300;
-}
-
-h1 {
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 15px;
-  margin-top: 5px;
-}
-
-p {
-  margin-bottom: 15px;
-  line-height: 22px;
-}
@@ -1,7 +0,0 @@
-body{
-	padding: 20px;
-}
-
-strong {
-	font-weight: bold
-}
@@ -1,48 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-/*ol, ul {
-	list-style: none;
-}*/
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
@@ -1,27 +0,0 @@
-const path = require('path')
-
-// load the default config generator.
-const genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js')
-
-module.exports = (config, env) => {
-  config = genDefaultConfig(config, env)
-
-  Object.assign(config, {
-    module: Object.assign(config.module, {
-      loaders: config.module.loaders.concat([{
-        test: /\.md$/,
-        loader: 'html!markdown',
-        include: path.resolve(__dirname, '../')
-      }, {
-        test: /\.html$/,
-        loader: 'html',
-        query: {
-          minimize: true
-        },
-        include: path.resolve(__dirname, '../')
-      }])
-    })
-  })
-
-  return config
-}
@@ -1,3 +1,12 @@
+## 6.4.0
+##### New Features
+- `PadRowComponent` - the content rendered inside of a padding row. Defaults to a react component that renders `&nbsp;`
+
+## 6.3.0
+##### New Features
+- `defaultSortDesc` - allows you to set the default sorting direction for all columns to descending.
+- `column.defaultSortDesc` - allows you to set the default sorting direction for a specific column. Falls back to the global `defaultSortDesc` when not set at all.
+
 ## 6.0.0

 ##### New Features
@@ -155,9 +155,12 @@ These are all of the available props (and their default values) for the main `<R
  data: [],
  loading: false,
  showPagination: true,
+  showPaginationTop: false,
+  showPaginationBottom: true
  showPageSizeOptions: true,
  pageSizeOptions: [5, 10, 20, 25, 50, 100],
  defaultPageSize: 20,
+  minRows: undefined,
  showPageJump: true,
  collapseOnSortingChange: true,
  collapseOnPageChange: true,
@@ -166,6 +169,7 @@ These are all of the available props (and their default values) for the main `<R
  sortable: true,
  resizable: true,
  filterable: false,
+  defaultSortDesc: false,
  defaultSorted: [],
  defaultFiltered: [],
  defaultResized: [],
@@ -191,6 +195,7 @@ These are all of the available props (and their default values) for the main `<R
    // returning 0, undefined or any falsey value will use subsequent sorts or the index as a tiebreaker
    return 0
  },
+  PadRowComponent: () => <span>&nbsp;</span>, // the content rendered inside of a padding row

  // Controlled State Overrides (see Fully Controlled Component section)
  page: undefined,
@@ -283,7 +288,8 @@ These are all of the available props (and their default values) for the main `<R
    footerStyle: {},
    getFooterProps: () => ({}),
    filterMethod: undefined,
-    sortMethod: undefined
+    sortMethod: undefined,
+    defaultSortDesc: undefined,
  },

  // Global Expander Column Defaults
@@ -729,7 +735,7 @@ Here are the props and their corresponding callbacks that control the state of t
  // Props
  page={0} // the index of the page you wish to display
  pageSize={20} // the number of rows per page to be displayed
-  sorting={[{ // the sorting model for the table
+  sorted={[{ // the sorting model for the table
      id: 'lastName',
      desc: true
    }, {
@@ -801,7 +807,11 @@ Accessing internal state and wrapping with more UI:
 The possibilities are endless!

 ## Sorting
-Sorting comes built in with React-Table. Click column header to sort by its column. Click it again to reverse the sort.
+Sorting comes built in with React-Table.
+- Click a column header to sort by its accessor.
+- Click it again to reverse the sort.
+- Set `defaultSortDesc` property to `true` to make the first sort direction default to descending.
+- Override a specific column's default sort direction by using the same `defaultSortDesc` property on a column, set to `true`

 ## Multi-Sort
 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!
@@ -821,8 +831,8 @@ defaultSortMethod = (a, b) => {
  a = (a === null || a === undefined) ? -Infinity : a
  b = (b === null || b === undefined) ? -Infinity : b
  // force any string values to lowercase
-  a = a === 'string' ? a.toLowerCase() : a
-  b = b === 'string' ? b.toLowerCase() : b
+  a = typeof a === 'string' ? a.toLowerCase() : a
+  b = typeof b === 'string' ? b.toLowerCase() : b
  // Return either 1 or -1 to indicate a sort priority
  if (a > b) {
    return 1
@@ -9,10 +9,12 @@
  "dependencies": {
    "github-markdown-css": "^2.6.0",
    "marked": "^0.3.6",
+    "namor": "^1.0.1",
    "raw-loader": "^0.5.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
-    "react-story": "^0.0.6"
+    "react-json-tree": "^0.10.9",
+    "react-story": "^0.0.10"
  },
  "scripts": {
    "start": "react-scripts start",
@@ -25,9 +25,11 @@ import Filtering from './stories/Filtering.js'
 import ControlledTable from './stories/ControlledTable.js'
 import PivotingOptions from './stories/PivotingOptions.js'
 import EditableTable from './stories/EditableTable.js'
+import FixedHeader from './stories/FixedHeader.js'
+import MultiplePagers from './stories/MultiplePagers';

 export default class App extends React.Component {
-  render () {
+  render() {
    return (
      <ReactStory
        style={{
@@ -35,15 +37,15 @@ export default class App extends React.Component {
          width: '100%',
          height: '100%'
        }}
-        pathPrefix='story/'
-        StoryWrapper={(props) => (
+        pathPrefix="story/"
+        StoryWrapper={props => (
          <defaultProps.StoryWrapper
            css={{
              padding: 0
            }}
          >
            <a
-              href='//github.com/tannerlinsley/react-table'
+              href="//github.com/tannerlinsley/react-table"
              style={{
                display: 'block',
                textAlign: 'center',
@@ -51,8 +53,8 @@ export default class App extends React.Component {
              }}
            >
              <img
-                src='//npmcdn.com/react-table/media/Banner.png'
-                alt='React Table Logo'
+                src="//npmcdn.com/react-table/media/Banner.png"
+                alt="React Table Logo"
                style={{
                  width: '100px'
                }}
@@ -69,7 +71,10 @@ export default class App extends React.Component {
        stories={[
          { name: 'Readme', component: Readme },
          { name: 'Simple Table', component: Simple },
-          { name: 'Cell Renderers & Custom Components', component: CellRenderers },
+          {
+            name: 'Cell Renderers & Custom Components',
+            component: CellRenderers
+          },
          { name: 'Default Sorting', component: DefaultSorting },
          { name: 'Custom Sorting', component: CustomSorting },
          { name: 'Custom Column Widths', component: CustomWidths },
@@ -77,16 +82,27 @@ export default class App extends React.Component {
          { name: 'Server-side Data', component: ServerSide },
          { name: 'Sub Components', component: SubComponents },
          { name: 'Pivoting & Aggregation', component: Pivoting },
-          { name: 'Pivoting & Aggregation w/ Sub Components', component: PivotingSubComponents },
-          { name: '100k Rows w/ Pivoting & Sub Components', component: OneHundredKRows },
+          {
+            name: 'Pivoting & Aggregation w/ Sub Components',
+            component: PivotingSubComponents
+          },
+          {
+            name: '100k Rows w/ Pivoting & Sub Components',
+            component: OneHundredKRows
+          },
          { name: 'Pivoting Options', component: PivotingOptions },
          { name: 'Functional Rendering', component: FunctionalRendering },
-          { name: 'Custom Expander Position', component: CustomExpanderPosition },
+          {
+            name: 'Custom Expander Position',
+            component: CustomExpanderPosition
+          },
          { name: 'Custom "No Data" Text', component: NoDataText },
          { name: 'Footers', component: Footers },
          { name: 'Custom Filtering', component: Filtering },
          { name: 'Controlled Component', component: ControlledTable },
-          { name: 'Editable Table', component: EditableTable }
+          { name: 'Editable Table', component: EditableTable },
+          { name: 'Fixed Header w/ Vertical Scroll', component: FixedHeader },
+          { name: 'Multiple Pagers (Top and Bottom)', component: MultiplePagers}
        ]}
      />
    )
@@ -10,8 +10,8 @@ class Story extends React.PureComponent {
    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 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        progress: Math.floor(Math.random() * 100),
        status: statusChance > 0.66 ? 'relationship'
          : statusChance > 0.33 ? 'complicated'
@@ -7,8 +7,8 @@ import ReactTable from '../../../lib/index'

 const data = _.map(_.range(5553), d => {
  return {
-    firstName: namor.generate({ words: 1, numLen: 0 }),
-    lastName: namor.generate({ words: 1, numLen: 0 }),
+    firstName: namor.generate({ words: 1, numbers: 0 }),
+    lastName: namor.generate({ words: 1, numbers: 0 }),
    age: Math.floor(Math.random() * 30)
  }
 })
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({words: 1, numLen: 0}),
-        lastName: namor.generate({words: 1, numLen: 0}),
+        firstName: namor.generate({words: 1, numbers: 0}),
+        lastName: namor.generate({words: 1, numbers: 0}),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -13,8 +13,8 @@ class Story extends React.PureComponent {

    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({words: 1, numLen: 0}),
-        lastName: namor.generate({words: 1, numLen: 0}),
+        firstName: namor.generate({words: 1, numbers: 0}),
+        lastName: namor.generate({words: 1, numbers: 0}),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -0,0 +1,81 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import ReactTable from '../../../lib/index'
+
+class Story extends React.PureComponent {
+  render() {
+    const data = _.map(_.range(5553), d => {
+      return {
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
+        age: Math.floor(Math.random() * 30),
+        children: _.map(_.range(10), d => {
+          return {
+            firstName: namor.generate({ words: 1, numbers: 0 }),
+            lastName: namor.generate({ words: 1, numbers: 0 }),
+            age: Math.floor(Math.random() * 30)
+          }
+        })
+      }
+    })
+
+    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 (
+      <div>
+        <div className="table-wrap">
+          <ReactTable
+            className="-striped -highlight"
+            data={data}
+            columns={columns}
+            defaultPageSize={20}
+            style={{
+              height: '400px' // This will force the table body to overflow and scroll, since there is not enough room
+            }}
+          />
+        </div>
+        <div style={{ textAlign: 'center' }}>
+          <br />
+          <em>Tip: Hold shift when sorting to multi-sort!</em>
+        </div>
+      </div>
+    )
+  }
+}
+
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw!./Simple')
+
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -31,8 +31,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -0,0 +1,73 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import ReactTable from '../../../lib/index'
+
+class Story extends React.PureComponent {
+  render () {
+    const data = _.map(_.range(5553), d => {
+      return {
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
+        age: Math.floor(Math.random() * 30),
+        children: _.map(_.range(10), d => {
+          return {
+            firstName: namor.generate({ words: 1, numbers: 0 }),
+            lastName: namor.generate({ words: 1, numbers: 0 }),
+            age: Math.floor(Math.random() * 30)
+          }
+        })
+      }
+    })
+
+    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 (
+      <div>
+        <div className='table-wrap'>
+          <ReactTable
+            className='-striped -highlight'
+            data={data}
+            columns={columns}
+            defaultPageSize={10}
+            showPagination
+            showPaginationTop
+            showPaginationBottom
+          />
+        </div>
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: Hold shift when sorting to multi-sort!</em>
+        </div>
+      </div>
+    )
+  }
+}
+
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw!./MultiplePagers')
+
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(100000), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30),
        visits: Math.floor(Math.random() * 100)
      }
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(1000), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30),
        visits: Math.floor(Math.random() * 100)
      }
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(1000), d => {
      return {
-        firstName: namor.generate({words: 1, numLen: 0}),
-        lastName: namor.generate({words: 1, numLen: 0}),
+        firstName: namor.generate({words: 1, numbers: 0}),
+        lastName: namor.generate({words: 1, numbers: 0}),
        age: Math.floor(Math.random() * 30),
        visits: Math.floor(Math.random() * 100)
      }
@@ -9,8 +9,8 @@ class Story extends React.PureComponent {
  render () {
    const data = _.map(_.range(1000), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30),
        visits: Math.floor(Math.random() * 100)
      }
@@ -6,10 +6,15 @@ import Readme from '!raw!../../../README.md'
 import 'github-markdown-css/github-markdown.css'

 export default class Story extends React.Component {
-  render () {
-    return <span className='markdown-body' dangerouslySetInnerHTML={{__html: marked(Readme)}} />
+  render() {
+    return (
+      <span
+        className="markdown-body"
+        dangerouslySetInnerHTML={{ __html: marked(Readme) }}
+      />
+    )
  }
-  componentDidMount () {
+  componentDidMount() {
    global.Prism.highlightAll()
  }
 }
@@ -7,8 +7,8 @@ import ReactTable from '../../../lib/index'

 const rawData = _.map(_.range(3424), d => {
  return {
-    firstName: namor.generate({ words: 1, numLen: 0 }),
-    lastName: namor.generate({ words: 1, numLen: 0 }),
+    firstName: namor.generate({ words: 1, numbers: 0 }),
+    lastName: namor.generate({ words: 1, numbers: 0 }),
    age: Math.floor(Math.random() * 30)
  }
 })
@@ -6,51 +6,59 @@ import namor from 'namor'
 import ReactTable from '../../../lib/index'

 class Story extends React.PureComponent {
-  render () {
+  render() {
    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: namor.generate({ words: 1, numbers: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        age: Math.floor(Math.random() * 30),
        children: _.map(_.range(10), d => {
          return {
-            firstName: namor.generate({ words: 1, numLen: 0 }),
-            lastName: namor.generate({ words: 1, numLen: 0 }),
+            firstName: namor.generate({ words: 1, numbers: 0 }),
+            lastName: namor.generate({ words: 1, numbers: 0 }),
            age: Math.floor(Math.random() * 30)
          }
        })
      }
    })

-    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'
-      }]
-    }]
+    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 (
      <div>
-        <div className='table-wrap'>
+        <div className="table-wrap">
          <ReactTable
-            className='-striped -highlight'
+            className="-striped -highlight"
            data={data}
            columns={columns}
            defaultPageSize={10}
          />
        </div>
-        <div style={{textAlign: 'center'}}>
+        <div style={{ textAlign: 'center' }}>
          <br />
          <em>Tip: Hold shift when sorting to multi-sort!</em>
        </div>
@@ -62,9 +70,8 @@ class Story extends React.PureComponent {
 const CodeHighlight = require('./components/codeHighlight').default
 const source = require('!raw!./Simple')

-export default () => (
+export default () =>
  <div>
    <Story />
    <CodeHighlight>{() => source}</CodeHighlight>
  </div>
-)
@@ -11,8 +11,8 @@ class Story extends React.PureComponent {

    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({words: 1, numLen: 0}),
-        lastName: namor.generate({words: 1, numLen: 0}),
+        firstName: namor.generate({words: 1, numbers: 0}),
+        lastName: namor.generate({words: 1, numbers: 0}),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -15,13 +15,13 @@ class Story extends React.PureComponent {
          }
        })
        return {
-          firstName: namor.generate({ words: 1, numLen: 0 }),
+          firstName: namor.generate({ words: 1, numbers: 0 }),
          age: Math.floor(Math.random() * 30),
          children: grandChildren
        }
      })
      return {
-        lastName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numbers: 0 }),
        firstName: children.map(d => d.firstName),
        age: Math.floor(Math.random() * 30),
        children
@@ -844,7 +844,7 @@ babel-runtime@6.22.0:
    core-js "^2.4.0"
    regenerator-runtime "^0.10.0"

-babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0:
+babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.6.1:
  version "6.23.0"
  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
  dependencies:
@@ -892,6 +892,10 @@ balanced-match@^0.4.1, balanced-match@^0.4.2:
  version "0.4.2"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"

+base16@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
+
 base64-js@^1.0.2:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
@@ -3473,6 +3477,14 @@ lodash.cond@^4.3.0:
  version "4.5.2"
  resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"

+lodash.curry@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
+
+lodash.flow@^3.3.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
+
 lodash.isarguments@^3.0.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
@@ -3670,6 +3682,10 @@ mute-stream@0.0.5:
  version "0.0.5"
  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"

+namor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/namor/-/namor-1.0.1.tgz#ac879d9b6a0a71abecac12da6393e27ab35fb757"
+
 nan@^2.3.0:
  version "2.6.2"
  resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.2.tgz#e4ff34e6c95fdfb5aecc08de6596f43605a7db45"
@@ -4425,6 +4441,10 @@ punycode@^1.2.4, punycode@^1.4.1:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"

+pure-color@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.2.0.tgz#702d2f2819dd545b1fde5116fca5f0c2dad2d18d"
+
 q@^1.1.2:
  version "1.5.0"
  resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
@@ -4486,6 +4506,15 @@ rc@^1.1.7:
    minimist "^1.2.0"
    strip-json-comments "~2.0.1"

+react-base16-styling@^0.5.1:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.5.3.tgz#3858f24e9c4dd8cbd3f702f3f74d581ca2917269"
+  dependencies:
+    base16 "^1.0.0"
+    lodash.curry "^4.0.1"
+    lodash.flow "^3.3.0"
+    pure-color "^1.2.0"
+
 react-dev-utils@^0.5.2:
  version "0.5.2"
  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-0.5.2.tgz#50d0b962d3a94b6c2e8f2011ed6468e4124bc410"
@@ -4520,14 +4549,24 @@ react-html-attributes@^1.3.0:
  dependencies:
    html-element-attributes "^1.0.0"

-react-router-dom@next:
-  version "4.0.0-beta.8"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.0.0-beta.8.tgz#907a5a0a36e9190652c80f2feead0eadbbba262e"
+react-json-tree@^0.10.9:
+  version "0.10.9"
+  resolved "https://registry.yarnpkg.com/react-json-tree/-/react-json-tree-0.10.9.tgz#7263173a2cc8bf05eac63b0419c3ce75b232e284"
+  dependencies:
+    babel-runtime "^6.6.1"
+    prop-types "^15.5.8"
+    react-base16-styling "^0.5.1"
+
+react-router-dom@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.1.tgz#3021ade1f2c160af97cf94e25594c5f294583025"
  dependencies:
    history "^4.5.1"
-    react-router "^4.0.0-beta.8"
+    loose-envify "^1.3.1"
+    prop-types "^15.5.4"
+    react-router "^4.1.1"

-react-router@^4.0.0-beta.8:
+react-router@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.1.1.tgz#d448f3b7c1b429a6fbb03395099949c606b1fe95"
  dependencies:
@@ -4584,9 +4623,9 @@ react-scripts@0.9.5:
  optionalDependencies:
    fsevents "1.0.17"

-react-story@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/react-story/-/react-story-0.0.6.tgz#ec3e6b42e5edab8a74dd581c12bd321ec304eaba"
+react-story@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/react-story/-/react-story-0.0.10.tgz#4c07d122962900162f0871666780da34402a2573"
  dependencies:
    classnames "^2.2.5"
    glamor "^2.20.25"
@@ -4594,7 +4633,7 @@ react-story@^0.0.6:
    javascript-detect-element-resize "^0.5.3"
    raf "^3.3.2"
    react-fastclick "^3.0.1"
-    react-router-dom next
+    react-router-dom "^4.1.1"

 react@^15.5.4:
  version "15.5.4"
@@ -1,6 +1,6 @@
 {
  "name": "react-table",
-  "version": "6.0.2",
+  "version": "6.4.0",
  "description": "A fast, lightweight, opinionated table and datagrid built on React",
  "license": "MIT",
  "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -34,11 +34,12 @@
    "build": "npm-run-all build:*",
    "prepublish": "npm run build && npm run umd",
    "postpublish": "git push --tags",
-    "docs": "cd docs && yarn && yarn start",
-    "docs:build": "cd docs && yarn && yarn run build"
+    "docs": "yarn watch & cd docs && yarn && yarn start",
+    "docs:build": "yarn build && cd docs && yarn && yarn run build"
  },
  "dependencies": {
-    "classnames": "^2.2.5"
+    "classnames": "^2.2.5",
+    "react-json-tree": "^0.10.9"
  },
  "peerDependencies": {
    "react": "^15.x.x"
@@ -50,22 +51,15 @@
    "babel-preset-es2015": "6.14.0",
    "babel-preset-react": "6.11.1",
    "babel-preset-stage-2": "6.13.0",
-    "github-markdown-css": "^2.4.1",
-    "html-loader": "^0.4.4",
-    "markdown-loader": "^0.1.7",
-    "namor": "^0.3.0",
    "npm-run-all": "^3.1.1",
    "onchange": "^3.0.2",
    "postcss-cli": "^2.6.0",
-    "raw-loader": "^0.5.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
-    "react-json-tree": "^0.10.1",
    "rimraf": "^2.6.1",
    "standard": "^10.0.2",
-    "storybook": "^0.0.0",
    "stylus": "^0.54.5",
-    "webpack": "^2.4.1"
+    "webpack": "^2.5.1"
  },
  "standard": {
    "parser": "babel-eslint",
@@ -11,6 +11,8 @@ export default {
  data: [],
  loading: false,
  showPagination: true,
+  showPaginationTop: false,
+  showPaginationBottom: true,
  showPageSizeOptions: true,
  pageSizeOptions: [5, 10, 20, 25, 50, 100],
  defaultPageSize: 20,
@@ -22,18 +24,21 @@ export default {
  sortable: true,
  resizable: true,
  filterable: false,
+  defaultSortDesc: false,
  defaultSorted: [],
  defaultFiltered: [],
  defaultResized: [],
  defaultExpanded: {},
  defaultFilterMethod: (filter, row, column) => {
    const id = filter.pivotId || filter.id
-    return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true
+    return row[id] !== undefined
+      ? String(row[id]).startsWith(filter.value)
+      : true
  },
  defaultSortMethod: (a, b) => {
    // force null and undefined to the bottom
-    a = (a === null || a === undefined) ? '' : a
-    b = (b === null || b === undefined) ? '' : b
+    a = a === null || a === undefined ? '' : a
+    b = b === null || b === undefined ? '' : b
    // force any string values to lowercase
    a = typeof a === 'string' ? a.toLowerCase() : a
    b = typeof b === 'string' ? b.toLowerCase() : b
@@ -140,7 +145,7 @@ export default {
    footerStyle: {},
    getFooterProps: emptyObj,
    filterMethod: undefined,
-    sortMethod: undefined
+    sortMethod: undefined,
  },

  // Global Expander Column Defaults
@@ -148,7 +153,7 @@ export default {
    sortable: false,
    resizable: false,
    filterable: false,
-    width: 35
+    width: 35,
  },

  pivotDefaults: {
@@ -170,7 +175,7 @@ export default {
  TbodyComponent: _.makeTemplateComponent('rt-tbody'),
  TrGroupComponent: _.makeTemplateComponent('rt-tr-group'),
  TrComponent: _.makeTemplateComponent('rt-tr'),
-  ThComponent: ({toggleSort, className, children, ...rest}) => {
+  ThComponent: ({ toggleSort, className, children, ...rest }) => {
    return (
      <div
        className={classnames(className, 'rt-th')}
@@ -185,51 +190,46 @@ export default {
  },
  TdComponent: _.makeTemplateComponent('rt-td'),
  TfootComponent: _.makeTemplateComponent('rt-tfoot'),
-  FilterComponent: ({filter, onChange}) => (
-    <input type='text'
+  FilterComponent: ({ filter, onChange }) =>
+    <input
+      type='text'
      style={{
-        width: '100%'
+        width: '100%',
      }}
      value={filter ? filter.value : ''}
-      onChange={(event) => onChange(event.target.value)}
-    />
-  ),
-  ExpanderComponent: ({isExpanded}) => (
+      onChange={event => onChange(event.target.value)}
+    />,
+  ExpanderComponent: ({ isExpanded }) =>
    <div className={classnames('rt-expander', isExpanded && '-open')}>
      &bull;
-    </div>
-  ),
-  PivotValueComponent: ({subRows, value}) => (
-    <span>{value} {subRows && `(${subRows.length})`}</span>
-  ),
-  AggregatedComponent: ({subRows, column}) => {
+    </div>,
+  PivotValueComponent: ({ subRows, value }) =>
+    <span>{value} {subRows && `(${subRows.length})`}</span>,
+  AggregatedComponent: ({ subRows, column }) => {
    const previewValues = subRows
      .filter(d => typeof d[column.id] !== 'undefined')
-      .map((row, i) => (
-        <span key={i}>{row[column.id]}{i < subRows.length - 1 ? ', ' : ''}</span>
-      ))
-    return (
-      <span>{previewValues}</span>
-    )
+      .map((row, i) =>
+        <span key={i}>
+          {row[column.id]}{i < subRows.length - 1 ? ', ' : ''}
+        </span>
+      )
+    return <span>{previewValues}</span>
  },
  PivotComponent: undefined, // this is a computed default generated using
  // the ExpanderComponent and PivotValueComponent at run-time in methods.js
  PaginationComponent: Pagination,
  PreviousComponent: undefined,
  NextComponent: undefined,
-  LoadingComponent: ({className, loading, loadingText, ...rest}) => (
-    <div className={classnames(
-      '-loading',
-      {'-active': loading},
-      className
-    )}
+  LoadingComponent: ({ className, loading, loadingText, ...rest }) =>
+    <div
+      className={classnames('-loading', { '-active': loading }, className)}
      {...rest}
    >
      <div className='-loading-inner'>
        {loadingText}
      </div>
-    </div>
-  ),
+    </div>,
  NoDataComponent: _.makeTemplateComponent('rt-noData'),
-  ResizerComponent: _.makeTemplateComponent('rt-resizer')
+  ResizerComponent: _.makeTemplateComponent('rt-resizer'),
+  PadRowComponent: () => <span>&nbsp;</span>,
 }
@@ -11,7 +11,7 @@ export const ReactTableDefaults = defaultProps
 export default class ReactTable extends Methods(Lifecycle(Component)) {
  static defaultProps = defaultProps

-  constructor (props) {
+  constructor(props) {
    super()

    this.getResolvedState = this.getResolvedState.bind(this)
@@ -43,7 +43,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
    }
  }

-  render () {
+  render() {
    const resolvedState = this.getResolvedState()
    const {
      children,
@@ -72,6 +72,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      getNoDataProps,
      getResizerProps,
      showPagination,
+      showPaginationTop,
+      showPaginationBottom,
      manual,
      loadingText,
      noDataText,
@@ -116,6 +118,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      PivotComponent,
      AggregatedComponent,
      FilterComponent,
+      PadRowComponent,
      // Data model
      resolvedData,
      allVisibleColumns,
@@ -146,23 +149,28 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          }
          const newPath = path.concat([i])
          if (rowWithViewIndex[subRowsKey] && _.get(expanded, newPath)) {
-            [rowWithViewIndex[subRowsKey], index] = recurseRowsViewIndex(rowWithViewIndex[subRowsKey], newPath, index)
+            ;[rowWithViewIndex[subRowsKey], index] = recurseRowsViewIndex(
+              rowWithViewIndex[subRowsKey],
+              newPath,
+              index
+            )
          }
          return rowWithViewIndex
        }),
        index
      ]
    }
-
-    [pageRows] = recurseRowsViewIndex(pageRows)
+    ;[pageRows] = recurseRowsViewIndex(pageRows)

    const canPrevious = page > 0
    const canNext = page + 1 < pages

-    const rowMinWidth = _.sum(allVisibleColumns.map(d => {
-      const resizedColumn = resized.find(x => x.id === d.id) || {}
-      return _.getFirstDefined(resizedColumn.value, d.width, d.minWidth)
-    }))
+    const rowMinWidth = _.sum(
+      allVisibleColumns.map(d => {
+        const resizedColumn = resized.find(x => x.id === d.id) || {}
+        return _.getFirstDefined(resizedColumn.value, d.width, d.minWidth)
+      })
+    )

    let rowIndex = -1

@@ -182,8 +190,12 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
    // Visual Components

    const makeHeaderGroups = () => {
-      const theadGroupProps = _.splitProps(getTheadGroupProps(finalState, undefined, undefined, this))
-      const theadGroupTrProps = _.splitProps(getTheadGroupTrProps(finalState, undefined, undefined, this))
+      const theadGroupProps = _.splitProps(
+        getTheadGroupProps(finalState, undefined, undefined, this)
+      )
+      const theadGroupTrProps = _.splitProps(
+        getTheadGroupTrProps(finalState, undefined, undefined, this)
+      )
      return (
        <TheadComponent
          className={classnames('-headerGroups', theadGroupProps.className)}
@@ -205,13 +217,30 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
    }

    const makeHeaderGroup = (column, i) => {
-      const resizedValue = col => (resized.find(x => x.id === col.id) || {}).value
-      const flex = _.sum(column.columns.map(col => col.width || resizedValue(col) ? 0 : col.minWidth))
-      const width = _.sum(column.columns.map(col => _.getFirstDefined(resizedValue(col), col.width, col.minWidth)))
-      const maxWidth = _.sum(column.columns.map(col => _.getFirstDefined(resizedValue(col), col.width, col.maxWidth)))
+      const resizedValue = col =>
+        (resized.find(x => x.id === col.id) || {}).value
+      const flex = _.sum(
+        column.columns.map(
+          col => (col.width || resizedValue(col) ? 0 : col.minWidth)
+        )
+      )
+      const width = _.sum(
+        column.columns.map(col =>
+          _.getFirstDefined(resizedValue(col), col.width, col.minWidth)
+        )
+      )
+      const maxWidth = _.sum(
+        column.columns.map(col =>
+          _.getFirstDefined(resizedValue(col), col.width, col.maxWidth)
+        )
+      )

-      const theadGroupThProps = _.splitProps(getTheadGroupThProps(finalState, undefined, column, this))
-      const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
+      const theadGroupThProps = _.splitProps(
+        getTheadGroupThProps(finalState, undefined, column, this)
+      )
+      const columnHeaderProps = _.splitProps(
+        column.getHeaderProps(finalState, undefined, column, this)
+      )

      const classes = [
        column.headerClassName,
@@ -239,9 +268,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      return (
        <ThComponent
          key={i + '-' + column.id}
-          className={classnames(
-            classes
-          )}
+          className={classnames(classes)}
          style={{
            ...styles,
            ...flexStyles
@@ -257,8 +284,12 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
    }

    const makeHeaders = () => {
-      const theadProps = _.splitProps(getTheadProps(finalState, undefined, undefined, this))
-      const theadTrProps = _.splitProps(getTheadTrProps(finalState, undefined, undefined, this))
+      const theadProps = _.splitProps(
+        getTheadProps(finalState, undefined, undefined, this)
+      )
+      const theadTrProps = _.splitProps(
+        getTheadTrProps(finalState, undefined, undefined, this)
+      )
      return (
        <TheadComponent
          className={classnames('-header', theadProps.className)}
@@ -282,11 +313,25 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
    const makeHeader = (column, i) => {
      const resizedCol = resized.find(x => x.id === column.id) || {}
      const sort = sorted.find(d => d.id === column.id)
-      const show = typeof column.show === 'function' ? column.show() : column.show
-      const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
-      const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
-      const theadThProps = _.splitProps(getTheadThProps(finalState, undefined, column, this))
-      const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
+      const show = typeof column.show === 'function'
+        ? column.show()
+        : column.show
+      const width = _.getFirstDefined(
+        resizedCol.value,
+        column.width,
+        column.minWidth
+      )
+      const maxWidth = _.getFirstDefined(
+        resizedCol.value,
+        column.width,
+        column.maxWidth
+      )
+      const theadThProps = _.splitProps(
+        getTheadThProps(finalState, undefined, column, this)
+      )
+      const columnHeaderProps = _.splitProps(
+        column.getHeaderProps(finalState, undefined, column, this)
+      )

      const classes = [
        column.headerClassName,
@@ -306,14 +351,13 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      }

      const isResizable = _.getFirstDefined(column.resizable, resizable, false)
-      const resizer = isResizable ? (
-        <ResizerComponent
-          onMouseDown={e => this.resizeColumnStart(column, e, false)}
-          onTouchStart={e => this.resizeColumnStart(column, e, true)}
-
-          {...resizerProps}
-        />
-      ) : null
+      const resizer = isResizable
+        ? <ResizerComponent
+            onMouseDown={e => this.resizeColumnStart(column, e, false)}
+            onTouchStart={e => this.resizeColumnStart(column, e, true)}
+            {...resizerProps}
+          />
+        : null

      const isSortable = _.getFirstDefined(column.sortable, sortable, false)

@@ -326,7 +370,9 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
            sort ? (sort.desc ? '-sort-desc' : '-sort-asc') : '',
            isSortable && '-cursor-pointer',
            !show && '-hidden',
-            pivotBy && pivotBy.slice(0, -1).includes(column.id) && 'rt-header-pivot'
+            pivotBy &&
+              pivotBy.slice(0, -1).includes(column.id) &&
+              'rt-header-pivot'
          )}
          style={{
            ...styles,
@@ -334,12 +380,12 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
            width: `${width}px`,
            maxWidth: `${maxWidth}px`
          }}
-          toggleSort={(e) => {
+          toggleSort={e => {
            isSortable && this.sortColumn(column, e.shiftKey)
          }}
          {...rest}
        >
-          <div className='rt-resizable-header-content'>
+          <div className="rt-resizable-header-content">
            {_.normalizeComponent(column.Header, {
              data: sortedData,
              column: column
@@ -351,8 +397,12 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
    }

    const makeFilters = () => {
-      const theadFilterProps = _.splitProps(getTheadFilterProps(finalState, undefined, undefined, this))
-      const theadFilterTrProps = _.splitProps(getTheadFilterTrProps(finalState, undefined, undefined, this))
+      const theadFilterProps = _.splitProps(
+        getTheadFilterProps(finalState, undefined, undefined, this)
+      )
+      const theadFilterTrProps = _.splitProps(
+        getTheadFilterTrProps(finalState, undefined, undefined, this)
+      )
      return (
        <TheadComponent
          className={classnames('-filters', theadFilterProps.className)}
@@ -375,10 +425,22 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {

    const makeFilter = (column, i) => {
      const resizedCol = resized.find(x => x.id === column.id) || {}
-      const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
-      const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
-      const theadFilterThProps = _.splitProps(getTheadFilterThProps(finalState, undefined, column, this))
-      const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
+      const width = _.getFirstDefined(
+        resizedCol.value,
+        column.width,
+        column.minWidth
+      )
+      const maxWidth = _.getFirstDefined(
+        resizedCol.value,
+        column.width,
+        column.maxWidth
+      )
+      const theadFilterThProps = _.splitProps(
+        getTheadFilterThProps(finalState, undefined, column, this)
+      )
+      const columnHeaderProps = _.splitProps(
+        column.getHeaderProps(finalState, undefined, column, this)
+      )

      const classes = [
        column.headerClassName,
@@ -401,14 +463,16 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {

      const ResolvedFilterComponent = column.Filter || FilterComponent

-      const isFilterable = _.getFirstDefined(column.filterable, filterable, false)
+      const isFilterable = _.getFirstDefined(
+        column.filterable,
+        filterable,
+        false
+      )

      return (
        <ThComponent
          key={i + '-' + column.id}
-          className={classnames(
-            classes
-          )}
+          className={classnames(classes)}
          style={{
            ...styles,
            flex: `${width} 0 auto`,
@@ -417,16 +481,17 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          }}
          {...rest}
        >
-          {isFilterable ? (
-            _.normalizeComponent(ResolvedFilterComponent,
-              {
-                column,
-                filter,
-                onChange: (value) => (this.filterColumn(column, value))
-              },
-              defaultProps.column.Filter
-            )
-          ) : null}
+          {isFilterable
+            ? _.normalizeComponent(
+                ResolvedFilterComponent,
+                {
+                  column,
+                  filter,
+                  onChange: value => this.filterColumn(column, value)
+                },
+                defaultProps.column.Filter
+              )
+            : null}
        </ThComponent>
      )
    }
@@ -445,12 +510,11 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      }
      const isExpanded = _.get(expanded, rowInfo.nestingPath)
      const trGroupProps = getTrGroupProps(finalState, rowInfo, undefined, this)
-      const trProps = _.splitProps(getTrProps(finalState, rowInfo, undefined, this))
+      const trProps = _.splitProps(
+        getTrProps(finalState, rowInfo, undefined, this)
+      )
      return (
-        <TrGroupComponent
-          key={rowInfo.nestingPath.join('_')}
-          {...trGroupProps}
-        >
+        <TrGroupComponent key={rowInfo.nestingPath.join('_')} {...trGroupProps}>
          <TrComponent
            className={classnames(
              trProps.className,
@@ -461,11 +525,25 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          >
            {allVisibleColumns.map((column, i2) => {
              const resizedCol = resized.find(x => x.id === column.id) || {}
-              const show = typeof column.show === 'function' ? column.show() : column.show
-              const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
-              const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
-              const tdProps = _.splitProps(getTdProps(finalState, rowInfo, column, this))
-              const columnProps = _.splitProps(column.getProps(finalState, rowInfo, column, this))
+              const show = typeof column.show === 'function'
+                ? column.show()
+                : column.show
+              const width = _.getFirstDefined(
+                resizedCol.value,
+                column.width,
+                column.minWidth
+              )
+              const maxWidth = _.getFirstDefined(
+                resizedCol.value,
+                column.width,
+                column.maxWidth
+              )
+              const tdProps = _.splitProps(
+                getTdProps(finalState, rowInfo, column, this)
+              )
+              const columnProps = _.splitProps(
+                column.getProps(finalState, rowInfo, column, this)
+              )

              const classes = [
                tdProps.className,
@@ -482,7 +560,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
              const cellInfo = {
                ...rowInfo,
                isExpanded,
-                column: {...column},
+                column: { ...column },
                value: rowInfo.row[column.id],
                pivoted: column.pivoted,
                expander: column.expander,
@@ -502,7 +580,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
              let isBranch
              let isPreview

-              const onExpanderClick = (e) => {
+              const onExpanderClick = e => {
                let newExpanded = _.clone(expanded)
                if (isExpanded) {
                  newExpanded = _.set(newExpanded, cellInfo.nestingPath, false)
@@ -510,29 +588,41 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                  newExpanded = _.set(newExpanded, cellInfo.nestingPath, {})
                }

-                return this.setStateWithData({
-                  expanded: newExpanded
-                }, () => {
-                  onExpandedChange && onExpandedChange(newExpanded, cellInfo.nestingPath, e)
-                })
+                return this.setStateWithData(
+                  {
+                    expanded: newExpanded
+                  },
+                  () => {
+                    onExpandedChange &&
+                      onExpandedChange(newExpanded, cellInfo.nestingPath, e)
+                  }
+                )
              }

              // Default to a standard cell
-              let resolvedCell = _.normalizeComponent(column.Cell, cellInfo, value)
+              let resolvedCell = _.normalizeComponent(
+                column.Cell,
+                cellInfo,
+                value
+              )

              // Resolve Renderers
-              const ResolvedAggregatedComponent = column.Aggregated || (!column.aggregate ? AggregatedComponent : column.Cell)
-              const ResolvedExpanderComponent = column.Expander || ExpanderComponent
-              const ResolvedPivotValueComponent = column.PivotValue || PivotValueComponent
-              const DefaultResolvedPivotComponent = PivotComponent || (
-                  props => (
-                    <div>
-                      <ResolvedExpanderComponent {...props} />
-                      <ResolvedPivotValueComponent {...props} />
-                    </div>
-                  )
-                )
-              const ResolvedPivotComponent = column.Pivot || DefaultResolvedPivotComponent
+              const ResolvedAggregatedComponent =
+                column.Aggregated ||
+                (!column.aggregate ? AggregatedComponent : column.Cell)
+              const ResolvedExpanderComponent =
+                column.Expander || ExpanderComponent
+              const ResolvedPivotValueComponent =
+                column.PivotValue || PivotValueComponent
+              const DefaultResolvedPivotComponent =
+                PivotComponent ||
+                (props =>
+                  <div>
+                    <ResolvedExpanderComponent {...props} />
+                    <ResolvedPivotValueComponent {...props} />
+                  </div>)
+              const ResolvedPivotComponent =
+                column.Pivot || DefaultResolvedPivotComponent

              // Is this cell expandable?
              if (cellInfo.pivoted || cellInfo.expander) {
@@ -554,30 +644,47 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {

              if (cellInfo.pivoted) {
                // Is this column a branch?
-                isBranch = rowInfo.row[pivotIDKey] === column.id &&
-                  cellInfo.subRows
+                isBranch =
+                  rowInfo.row[pivotIDKey] === column.id && cellInfo.subRows
                // Should this column be blank?
-                isPreview = pivotBy.indexOf(column.id) > pivotBy.indexOf(rowInfo.row[pivotIDKey]) &&
-                  cellInfo.subRows
+                isPreview =
+                  pivotBy.indexOf(column.id) >
+                    pivotBy.indexOf(rowInfo.row[pivotIDKey]) && cellInfo.subRows
                // Pivot Cell Render Override
                if (isBranch) {
                  // isPivot
-                  resolvedCell = _.normalizeComponent(ResolvedPivotComponent, {
-                    ...cellInfo,
-                    value: row[pivotValKey]
-                  }, row[pivotValKey])
+                  resolvedCell = _.normalizeComponent(
+                    ResolvedPivotComponent,
+                    {
+                      ...cellInfo,
+                      value: row[pivotValKey]
+                    },
+                    row[pivotValKey]
+                  )
                } else if (isPreview) {
                  // Show the pivot preview
-                  resolvedCell = _.normalizeComponent(ResolvedAggregatedComponent, cellInfo, value)
+                  resolvedCell = _.normalizeComponent(
+                    ResolvedAggregatedComponent,
+                    cellInfo,
+                    value
+                  )
                } else {
                  resolvedCell = null
                }
              } else if (cellInfo.aggregated) {
-                resolvedCell = _.normalizeComponent(ResolvedAggregatedComponent, cellInfo, value)
+                resolvedCell = _.normalizeComponent(
+                  ResolvedAggregatedComponent,
+                  cellInfo,
+                  value
+                )
              }

              if (cellInfo.expander) {
-                resolvedCell = _.normalizeComponent(ResolvedExpanderComponent, cellInfo, row[pivotValKey])
+                resolvedCell = _.normalizeComponent(
+                  ResolvedExpanderComponent,
+                  cellInfo,
+                  row[pivotValKey]
+                )
                if (pivotBy) {
                  if (cellInfo.groupedByPivot) {
                    resolvedCell = null
@@ -612,24 +719,31 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
              )
            })}
          </TrComponent>
-          {(
-            rowInfo.subRows &&
+          {rowInfo.subRows &&
            isExpanded &&
-            rowInfo.subRows.map((d, i) => makePageRow(d, i, rowInfo.nestingPath))
-          )}
-          {SubComponent && !rowInfo.subRows && isExpanded && SubComponent(rowInfo)}
+            rowInfo.subRows.map((d, i) =>
+              makePageRow(d, i, rowInfo.nestingPath)
+            )}
+          {SubComponent &&
+            !rowInfo.subRows &&
+            isExpanded &&
+            SubComponent(rowInfo)}
        </TrGroupComponent>
      )
    }

    const makePadRow = (row, i) => {
-      const trGroupProps = getTrGroupProps(finalState, undefined, undefined, this)
-      const trProps = _.splitProps(getTrProps(finalState, undefined, undefined, this))
+      const trGroupProps = getTrGroupProps(
+        finalState,
+        undefined,
+        undefined,
+        this
+      )
+      const trProps = _.splitProps(
+        getTrProps(finalState, undefined, undefined, this)
+      )
      return (
-        <TrGroupComponent
-          key={i}
-          {...trGroupProps}
-        >
+        <TrGroupComponent key={i} {...trGroupProps}>
          <TrComponent
            className={classnames(
              '-padRow',
@@ -646,12 +760,26 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {

    const makePadColumn = (column, i) => {
      const resizedCol = resized.find(x => x.id === column.id) || {}
-      const show = typeof column.show === 'function' ? column.show() : column.show
-      let width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
+      const show = typeof column.show === 'function'
+        ? column.show()
+        : column.show
+      let width = _.getFirstDefined(
+        resizedCol.value,
+        column.width,
+        column.minWidth
+      )
      let flex = width
-      let maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
-      const tdProps = _.splitProps(getTdProps(finalState, undefined, column, this))
-      const columnProps = _.splitProps(column.getProps(finalState, undefined, column, this))
+      let maxWidth = _.getFirstDefined(
+        resizedCol.value,
+        column.width,
+        column.maxWidth
+      )
+      const tdProps = _.splitProps(
+        getTdProps(finalState, undefined, column, this)
+      )
+      const columnProps = _.splitProps(
+        column.getProps(finalState, undefined, column, this)
+      )

      const classes = [
        tdProps.className,
@@ -668,10 +796,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      return (
        <TdComponent
          key={i + '-' + column.id}
-          className={classnames(
-            classes,
-            !show && 'hidden'
-          )}
+          className={classnames(classes, !show && 'hidden')}
          style={{
            ...styles,
            flex: `${flex} 0 auto`,
@@ -680,14 +805,16 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          }}
          {...tdProps.rest}
        >
-          &nbsp;
+          {_.normalizeComponent(PadRowComponent)}
        </TdComponent>
      )
    }

    const makeColumnFooters = () => {
      const tFootProps = getTfootProps(finalState, undefined, undefined, this)
-      const tFootTrProps = _.splitProps(getTfootTrProps(finalState, undefined, undefined, this))
+      const tFootTrProps = _.splitProps(
+        getTfootTrProps(finalState, undefined, undefined, this)
+      )
      return (
        <TfootComponent
          className={tFootProps.className}
@@ -698,9 +825,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          {...tFootProps.rest}
        >
          <TrComponent
-            className={classnames(
-              tFootTrProps.className
-            )}
+            className={classnames(tFootTrProps.className)}
            style={tFootTrProps.style}
            {...tFootTrProps.rest}
          >
@@ -712,12 +837,28 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {

    const makeColumnFooter = (column, i) => {
      const resizedCol = resized.find(x => x.id === column.id) || {}
-      const show = typeof column.show === 'function' ? column.show() : column.show
-      const width = _.getFirstDefined(resizedCol.value, column.width, column.minWidth)
-      const maxWidth = _.getFirstDefined(resizedCol.value, column.width, column.maxWidth)
-      const tFootTdProps = _.splitProps(getTfootTdProps(finalState, undefined, undefined, this))
-      const columnProps = _.splitProps(column.getProps(finalState, undefined, column, this))
-      const columnFooterProps = _.splitProps(column.getFooterProps(finalState, undefined, column, this))
+      const show = typeof column.show === 'function'
+        ? column.show()
+        : column.show
+      const width = _.getFirstDefined(
+        resizedCol.value,
+        column.width,
+        column.minWidth
+      )
+      const maxWidth = _.getFirstDefined(
+        resizedCol.value,
+        column.width,
+        column.maxWidth
+      )
+      const tFootTdProps = _.splitProps(
+        getTfootTdProps(finalState, undefined, undefined, this)
+      )
+      const columnProps = _.splitProps(
+        column.getProps(finalState, undefined, column, this)
+      )
+      const columnFooterProps = _.splitProps(
+        column.getFooterProps(finalState, undefined, column, this)
+      )

      const classes = [
        tFootTdProps.className,
@@ -736,10 +877,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      return (
        <TdComponent
          key={i + '-' + column.id}
-          className={classnames(
-            classes,
-            !show && 'hidden'
-          )}
+          className={classnames(classes, !show && 'hidden')}
          style={{
            ...styles,
            flex: `${width} 0 auto`,
@@ -758,78 +896,95 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      )
    }

-    const rootProps = _.splitProps(getProps(finalState, undefined, undefined, this))
-    const tableProps = _.splitProps(getTableProps(finalState, undefined, undefined, this))
-    const tBodyProps = _.splitProps(getTbodyProps(finalState, undefined, undefined, this))
-    const paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
+    const makePagination = () => {
+      const paginationProps = _.splitProps(
+        getPaginationProps(finalState, undefined, undefined, this)
+      )
+      return (
+        <PaginationComponent
+          {...resolvedState}
+          pages={pages}
+          canPrevious={canPrevious}
+          canNext={canNext}
+          onPageChange={this.onPageChange}
+          onPageSizeChange={this.onPageSizeChange}
+          className={paginationProps.className}
+          style={paginationProps.style}
+          {...paginationProps.rest}
+        />
+      )
+    }
+
+    const rootProps = _.splitProps(
+      getProps(finalState, undefined, undefined, this)
+    )
+    const tableProps = _.splitProps(
+      getTableProps(finalState, undefined, undefined, this)
+    )
+    const tBodyProps = _.splitProps(
+      getTbodyProps(finalState, undefined, undefined, this)
+    )
    const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
    const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
    const resizerProps = getResizerProps(finalState, undefined, undefined, this)

-    const makeTable = () => (
-      <div
-        className={classnames(
-          'ReactTable',
-          className,
-          rootProps.className
-        )}
-        style={{
-          ...style,
-          ...rootProps.style
-        }}
-        {...rootProps.rest}
-      >
-        <TableComponent
-          className={classnames(
-            tableProps.className,
-            currentlyResizing ? 'rt-resizing' : ''
-          )}
-          style={tableProps.style}
-          {...tableProps.rest}
+    const makeTable = () => {
+      const pagination = makePagination()
+      return (
+        <div
+          className={classnames('ReactTable', className, rootProps.className)}
+          style={{
+            ...style,
+            ...rootProps.style
+          }}
+          {...rootProps.rest}
        >
-          {hasHeaderGroups ? makeHeaderGroups() : null}
-          {makeHeaders()}
-          {hasFilters ? makeFilters() : null}
-          <TbodyComponent
-            className={classnames(tBodyProps.className)}
-            style={{
-              ...tBodyProps.style,
-              minWidth: `${rowMinWidth}px`
-            }}
-            {...tBodyProps.rest}
+          {showPagination && showPaginationTop
+            ? <div className="pagination-top">
+                {pagination}
+              </div>
+            : null}
+          <TableComponent
+            className={classnames(
+              tableProps.className,
+              currentlyResizing ? 'rt-resizing' : ''
+            )}
+            style={tableProps.style}
+            {...tableProps.rest}
          >
-            {pageRows.map((d, i) => makePageRow(d, i))}
-            {padRows.map(makePadRow)}
-          </TbodyComponent>
-          {hasColumnFooter ? makeColumnFooters() : null}
-        </TableComponent>
-        {showPagination ? (
-          <PaginationComponent
-            {...resolvedState}
-            pages={pages}
-            canPrevious={canPrevious}
-            canNext={canNext}
-            onPageChange={this.onPageChange}
-            onPageSizeChange={this.onPageSizeChange}
-            className={paginationProps.className}
-            style={paginationProps.style}
-            {...paginationProps.rest}
+            {hasHeaderGroups ? makeHeaderGroups() : null}
+            {makeHeaders()}
+            {hasFilters ? makeFilters() : null}
+            <TbodyComponent
+              className={classnames(tBodyProps.className)}
+              style={{
+                ...tBodyProps.style,
+                minWidth: `${rowMinWidth}px`
+              }}
+              {...tBodyProps.rest}
+            >
+              {pageRows.map((d, i) => makePageRow(d, i))}
+              {padRows.map(makePadRow)}
+            </TbodyComponent>
+            {hasColumnFooter ? makeColumnFooters() : null}
+          </TableComponent>
+          {showPagination && showPaginationBottom
+            ? <div className="pagination-bottom">
+                {pagination}
+              </div>
+            : null}
+          {!pageRows.length &&
+            <NoDataComponent {...noDataProps}>
+              {_.normalizeComponent(noDataText)}
+            </NoDataComponent>}
+          <LoadingComponent
+            loading={loading}
+            loadingText={loadingText}
+            {...loadingProps}
          />
-        ) : null}
-        {!pageRows.length && (
-          <NoDataComponent
-            {...noDataProps}
-          >
-            {_.normalizeComponent(noDataText)}
-          </NoDataComponent>
-        )}
-        <LoadingComponent
-          loading={loading}
-          loadingText={loadingText}
-          {...loadingProps}
-        />
-      </div>
-    )
+        </div>
+      )
+    }

    // childProps are optionally passed to a function-as-a-child
    return children ? children(finalState, makeTable, this) : makeTable()
@@ -4,10 +4,13 @@ $expandSize = 7px

 .ReactTable
  position:relative
+  display: flex
+  flex-direction: column
  border: 1px solid alpha(black, .1)
  *
    box-sizing: border-box
  .rt-table
+    flex: 1
    display: flex
    flex-direction: column
    align-items: stretch
@@ -16,7 +19,9 @@ $expandSize = 7px
    overflow: auto

  .rt-thead
+    flex: 1 0 auto
    display: flex
+    // overflow-y: scroll
    flex-direction: column
    -webkit-user-select: none;
    -moz-user-select: none;
@@ -91,8 +96,10 @@ $expandSize = 7px
      margin-top: -10px

  .rt-tbody
+    flex: 99999 1 auto
    display: flex
    flex-direction: column
+    overflow: auto
    // z-index:0
    .rt-tr-group
      border-bottom: solid 1px alpha(black, .05)
@@ -105,10 +112,12 @@ $expandSize = 7px
    .rt-expandable
      cursor: pointer
  .rt-tr-group
+    flex: 1 0 auto
    display: flex
    flex-direction: column
    align-items: stretch
  .rt-tr
+    flex: 1 0 auto
    display: inline-flex
  .rt-th
  .rt-td
@@ -191,7 +200,7 @@ $expandSize = 7px
      appearance:none
      display:block
      width:100%
-      height: 100%
+      height:100%
      border: 0
      border-radius: 3px
      padding: 6px
@@ -296,6 +305,8 @@ $expandSize = 7px
  input:not([type="checkbox"]):not([type="radio"])
  select
    appearance: none
+    &::-ms-expand
+      display: none

  .select-wrap
    position:relative
@@ -1,100 +1,118 @@
-export default Base => class extends Base {
-  componentWillMount () {
-    this.setStateWithData(this.getDataModel(this.getResolvedState()))
-  }
-
-  componentDidMount () {
-    this.fireFetchData()
-  }
-
-  componentWillReceiveProps (nextProps, nextState) {
-    const oldState = this.getResolvedState()
-    const newState = this.getResolvedState(nextProps, nextState)
-
-    // Do a deep compare of new and old `defaultOption` and
-    // if they are different reset `option = defaultOption`
-    const defaultableOptions = ['sorted', 'filtered', 'resized', 'expanded']
-    defaultableOptions.forEach(x => {
-      const defaultName = `default${x.charAt(0).toUpperCase() + x.slice(1)}`
-      if (JSON.stringify(oldState[defaultName]) !== JSON.stringify(newState[defaultName])) {
-        newState[x] = newState[defaultName]
-      }
-    })
-
-    // If they change these table options, we need to reset defaults
-    // or else we could get into a state where the user has changed the UI
-    // and then disabled the ability to change it back.
-    // e.g. If `filterable` has changed, set `filtered = defaultFiltered`
-    const resettableOptions = ['sortable', 'filterable', 'resizable']
-    resettableOptions.forEach(x => {
-      if (oldState[x] !== newState[x]) {
-        const baseName = x.replace('able', '')
-        const optionName = `${baseName}ed`
-        const defaultName = `default${optionName.charAt(0).toUpperCase() + optionName.slice(1)}`
-        newState[optionName] = newState[defaultName]
-      }
-    })
-
-    // Props that trigger a data update
-    if (
-      oldState.data !== newState.data ||
-      oldState.columns !== newState.columns ||
-      oldState.pivotBy !== newState.pivotBy ||
-      oldState.sorted !== newState.sorted ||
-      oldState.filtered !== newState.filtered
-    ) {
-      this.setStateWithData(this.getDataModel(newState))
+export default Base =>
+  class extends Base {
+    componentWillMount () {
+      this.setStateWithData(this.getDataModel(this.getResolvedState()))
    }
-  }

-  setStateWithData (newState, cb) {
-    const oldState = this.getResolvedState()
-    const newResolvedState = this.getResolvedState({}, newState)
-    const {freezeWhenExpanded} = newResolvedState
+    componentDidMount () {
+      this.fireFetchData()
+    }

-    // Default to unfrozen state
-    newResolvedState.frozen = false
+    componentWillReceiveProps (nextProps, nextState) {
+      const oldState = this.getResolvedState()
+      const newState = this.getResolvedState(nextProps, nextState)

-    // If freezeWhenExpanded is set, check for frozen conditions
-    if (freezeWhenExpanded) {
-      // if any rows are expanded, freeze the existing data and sorting
-      const keys = Object.keys(newResolvedState.expanded)
-      for (var i = 0; i < keys.length; i++) {
-        if (newResolvedState.expanded[keys[i]]) {
-          newResolvedState.frozen = true
-          break
+      // Do a deep compare of new and old `defaultOption` and
+      // if they are different reset `option = defaultOption`
+      const defaultableOptions = ['sorted', 'filtered', 'resized', 'expanded']
+      defaultableOptions.forEach(x => {
+        const defaultName = `default${x.charAt(0).toUpperCase() + x.slice(1)}`
+        if (
+          JSON.stringify(oldState[defaultName]) !==
+          JSON.stringify(newState[defaultName])
+        ) {
+          newState[x] = newState[defaultName]
+        }
+      })
+
+      // If they change these table options, we need to reset defaults
+      // or else we could get into a state where the user has changed the UI
+      // and then disabled the ability to change it back.
+      // e.g. If `filterable` has changed, set `filtered = defaultFiltered`
+      const resettableOptions = ['sortable', 'filterable', 'resizable']
+      resettableOptions.forEach(x => {
+        if (oldState[x] !== newState[x]) {
+          const baseName = x.replace('able', '')
+          const optionName = `${baseName}ed`
+          const defaultName = `default${optionName.charAt(0).toUpperCase() +
+            optionName.slice(1)}`
+          newState[optionName] = newState[defaultName]
+        }
+      })
+
+      // Props that trigger a data update
+      if (
+        oldState.data !== newState.data ||
+        oldState.columns !== newState.columns ||
+        oldState.pivotBy !== newState.pivotBy ||
+        oldState.sorted !== newState.sorted ||
+        oldState.filtered !== newState.filtered
+      ) {
+        this.setStateWithData(this.getDataModel(newState))
+      }
+    }
+
+    setStateWithData (newState, cb) {
+      const oldState = this.getResolvedState()
+      const newResolvedState = this.getResolvedState({}, newState)
+      const { freezeWhenExpanded } = newResolvedState
+
+      // Default to unfrozen state
+      newResolvedState.frozen = false
+
+      // If freezeWhenExpanded is set, check for frozen conditions
+      if (freezeWhenExpanded) {
+        // if any rows are expanded, freeze the existing data and sorting
+        const keys = Object.keys(newResolvedState.expanded)
+        for (var i = 0; i < keys.length; i++) {
+          if (newResolvedState.expanded[keys[i]]) {
+            newResolvedState.frozen = true
+            break
+          }
        }
      }
-    }

-    // If the data isn't frozen and either the data or
-    // sorting model has changed, update the data
-    if (
-      (oldState.frozen && !newResolvedState.frozen) ||
-      oldState.sorted !== newResolvedState.sorted ||
-      oldState.filtered !== newResolvedState.filtered ||
-      oldState.showFilters !== newResolvedState.showFilters ||
-      (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData)
-    ) {
-      // Handle collapseOnsortedChange & collapseOnDataChange
+      // If the data isn't frozen and either the data or
+      // sorting model has changed, update the data
      if (
-        (oldState.sorted !== newResolvedState.sorted && this.props.collapseOnSortingChange) ||
-        (oldState.filtered !== newResolvedState.filtered) ||
-        (oldState.showFilters !== newResolvedState.showFilters) ||
-        (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnDataChange)
+        (oldState.frozen && !newResolvedState.frozen) ||
+        oldState.sorted !== newResolvedState.sorted ||
+        oldState.filtered !== newResolvedState.filtered ||
+        oldState.showFilters !== newResolvedState.showFilters ||
+        (!newResolvedState.frozen &&
+          oldState.resolvedData !== newResolvedState.resolvedData)
      ) {
-        newResolvedState.expanded = {}
+        // Handle collapseOnsortedChange & collapseOnDataChange
+        if (
+          (oldState.sorted !== newResolvedState.sorted &&
+            this.props.collapseOnSortingChange) ||
+          oldState.filtered !== newResolvedState.filtered ||
+          oldState.showFilters !== newResolvedState.showFilters ||
+          (!newResolvedState.frozen &&
+            oldState.resolvedData !== newResolvedState.resolvedData &&
+            this.props.collapseOnDataChange)
+        ) {
+          newResolvedState.expanded = {}
+        }
+
+        Object.assign(newResolvedState, this.getSortedData(newResolvedState))
      }

-      Object.assign(newResolvedState, this.getSortedData(newResolvedState))
-    }
+      // Calculate pageSize all the time
+      if (newResolvedState.sortedData) {
+        newResolvedState.pages = newResolvedState.manual
+          ? newResolvedState.pages
+          : Math.ceil(
+              newResolvedState.sortedData.length / newResolvedState.pageSize
+            )
+        newResolvedState.page = Math.max(
+          newResolvedState.page >= newResolvedState.pages
+            ? newResolvedState.pages - 1
+            : newResolvedState.page,
+          0
+        )
+      }

-    // Calculate pageSize all the time
-    if (newResolvedState.sortedData) {
-      newResolvedState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.sortedData.length / newResolvedState.pageSize)
-      newResolvedState.page = Math.max(newResolvedState.page >= newResolvedState.pages ? newResolvedState.pages - 1 : newResolvedState.page, 0)
+      return this.setState(newResolvedState, cb)
    }
-
-    return this.setState(newResolvedState, cb)
  }
-}
@@ -3,9 +3,8 @@ import classnames from 'classnames'
 //
 // import _ from './utils'

-const defaultButton = (props) => (
+const defaultButton = props =>
  <button type='button' {...props} className='-btn'>{props.children}</button>
-)

 export default class ReactTablePagination extends Component {
  constructor (props) {
@@ -16,12 +15,12 @@ export default class ReactTablePagination extends Component {
    this.applyPage = this.applyPage.bind(this)

    this.state = {
-      page: props.page
+      page: props.page,
    }
  }

  componentWillReceiveProps (nextProps) {
-    this.setState({page: nextProps.page})
+    this.setState({ page: nextProps.page })
  }

  getSafePage (page) {
@@ -33,7 +32,7 @@ export default class ReactTablePagination extends Component {

  changePage (page) {
    page = this.getSafePage(page)
-    this.setState({page})
+    this.setState({ page })
    if (this.props.page !== page) {
      this.props.onPageChange(page)
    }
@@ -60,7 +59,7 @@ export default class ReactTablePagination extends Component {
      onPageSizeChange,
      className,
      PreviousComponent = defaultButton,
-      NextComponent = defaultButton
+      NextComponent = defaultButton,
    } = this.props

    return (
@@ -70,7 +69,7 @@ export default class ReactTablePagination extends Component {
      >
        <div className='-previous'>
          <PreviousComponent
-            onClick={(e) => {
+            onClick={e => {
              if (!canPrevious) return
              this.changePage(page - 1)
            }}
@@ -81,53 +80,51 @@ export default class ReactTablePagination extends Component {
        </div>
        <div className='-center'>
          <span className='-pageInfo'>
-            {this.props.pageText} {showPageJump ? (
-              <div className='-pageJump'>
-                <input
-                  type={this.state.page === '' ? 'text' : 'number'}
-                  onChange={e => {
-                    const val = e.target.value
-                    const page = val - 1
-                    if (val === '') {
-                      return this.setState({page: val})
-                    }
-                    this.setState({page: this.getSafePage(page)})
-                  }}
-                  value={this.state.page === '' ? '' : this.state.page + 1}
-                  onBlur={this.applyPage}
-                  onKeyPress={e => {
-                    if (e.which === 13 || e.keyCode === 13) {
-                      this.applyPage()
-                    }
-                  }}
-                />
-              </div>
-            ) : (
-              <span className='-currentPage'>{page + 1}</span>
-            )} {this.props.ofText} <span className='-totalPages'>{pages || 1}</span>
+            {this.props.pageText}{' '}
+            {showPageJump
+              ? <div className='-pageJump'>
+                  <input
+                    type={this.state.page === '' ? 'text' : 'number'}
+                    onChange={e => {
+                      const val = e.target.value
+                      const page = val - 1
+                      if (val === '') {
+                        return this.setState({ page: val })
+                      }
+                      this.setState({ page: this.getSafePage(page) })
+                    }}
+                    value={this.state.page === '' ? '' : this.state.page + 1}
+                    onBlur={this.applyPage}
+                    onKeyPress={e => {
+                      if (e.which === 13 || e.keyCode === 13) {
+                        this.applyPage()
+                      }
+                    }}
+                  />
+                </div>
+              : <span className='-currentPage'>{page + 1}</span>}{' '}
+            {this.props.ofText}{' '}
+            <span className='-totalPages'>{pages || 1}</span>
          </span>
-          {showPageSizeOptions && (
+          {showPageSizeOptions &&
            <span className='select-wrap -pageSizeOptions'>
              <select
-                onChange={(e) => onPageSizeChange(Number(e.target.value))}
+                onChange={e => onPageSizeChange(Number(e.target.value))}
                value={pageSize}
              >
                {pageSizeOptions.map((option, i) => {
                  return (
-                    <option
-                      key={i}
-                      value={option}>
+                    <option key={i} value={option}>
                      {option} {this.props.rowsText}
                    </option>
                  )
                })}
              </select>
-            </span>
-          )}
+            </span>}
        </div>
        <div className='-next'>
          <NextComponent
-            onClick={(e) => {
+            onClick={e => {
              if (!canNext) return
              this.changePage(page + 1)
            }}
@@ -18,7 +18,7 @@ export default {
  splitProps,
  compactObject,
  isSortingDesc,
-  normalizeComponent
+  normalizeComponent,
 }

 function get (obj, path, def) {
@@ -94,12 +94,14 @@ function remove (a, b) {

 function clone (a) {
  try {
-    return JSON.parse(JSON.stringify(a, (key, value) => {
-      if (typeof value === 'function') {
-        return value.toString()
-      }
-      return value
-    }))
+    return JSON.parse(
+      JSON.stringify(a, (key, value) => {
+        if (typeof value === 'function') {
+          return value.toString()
+        }
+        return value
+      })
+    )
  } catch (e) {
    return a
  }
@@ -120,14 +122,10 @@ function sum (arr) {
 }

 function makeTemplateComponent (compClass) {
-  return ({children, className, ...rest}) => (
-    <div
-      className={classnames(compClass, className)}
-      {...rest}
-    >
+  return ({ children, className, ...rest }) =>
+    <div className={classnames(compClass, className)} {...rest}>
      {children}
    </div>
-  )
 }

 function groupBy (xs, key) {
@@ -149,10 +147,10 @@ function isArray (a) {

 function makePathArray (obj) {
  return flattenDeep(obj)
-      .join('.')
-      .replace('[', '.')
-      .replace(']', '')
-      .split('.')
+    .join('.')
+    .replace('[', '.')
+    .replace(']', '')
+    .split('.')
 }

 function flattenDeep (arr, newArr = []) {
@@ -166,18 +164,22 @@ function flattenDeep (arr, newArr = []) {
  return newArr
 }

-function splitProps ({className, style, ...rest}) {
+function splitProps ({ className, style, ...rest }) {
  return {
    className,
    style,
-    rest
+    rest,
  }
 }

 function compactObject (obj) {
  const newObj = {}
  for (var key in obj) {
-    if (obj.hasOwnProperty(key) && obj[key] !== undefined && typeof obj[key] !== 'undefined') {
+    if (
+      obj.hasOwnProperty(key) &&
+      obj[key] !== undefined &&
+      typeof obj[key] !== 'undefined'
+    ) {
      newObj[key] = obj[key]
    }
  }
@@ -189,11 +191,9 @@ function isSortingDesc (d) {
 }

 function normalizeComponent (Comp, params = {}, fallback = Comp) {
-  return typeof Comp === 'function' ? (
-    Object.getPrototypeOf(Comp).isReactComponent ? (
-      <Comp
-        {...params}
-      />
-    ) : Comp(params)
-  ) : fallback
+  return typeof Comp === 'function'
+    ? Object.getPrototypeOf(Comp).isReactComponent
+      ? <Comp {...params} />
+      : Comp(params)
+    : fallback
 }
@@ -49,10 +49,6 @@ align-text@^0.1.1, align-text@^0.1.3:
    longest "^1.0.1"
    repeat-string "^1.5.2"

-almost-equal@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/almost-equal/-/almost-equal-1.1.0.tgz#f851c631138757994276aa2efbe8dfa3066cccdd"
-
 amdefine@>=0.0.4:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
@@ -174,10 +170,6 @@ assert@^1.1.1:
  dependencies:
    util "0.10.3"

-ast-types@0.9.4:
-  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.4.tgz#410d1f81890aeb8e0a38621558ba5869ae53c91b"
-
 async-each@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
@@ -188,10 +180,6 @@ async@^2.1.2:
  dependencies:
    lodash "^4.14.0"

-async@~0.2.6:
-  version "0.2.10"
-  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
-
 asynckit@^0.4.0:
  version "0.4.0"
  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -1028,13 +1016,6 @@ callsites@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"

-camel-case@3.0.x:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
-  dependencies:
-    no-case "^2.2.0"
-    upper-case "^1.1.1"
-
 camelcase-keys@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
@@ -1118,12 +1099,6 @@ classnames@^2.2.5:
  version "2.2.5"
  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"

-clean-css@4.0.x:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.0.2.tgz#4a871d3cdada1b506b93eda43b704f904e289b63"
-  dependencies:
-    source-map "0.5.x"
-
 cli-cursor@^1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
@@ -1158,20 +1133,13 @@ code-point-at@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"

-color-space@^1.14.3:
-  version "1.14.7"
-  resolved "https://registry.yarnpkg.com/color-space/-/color-space-1.14.7.tgz#b7f5a31779427bb25f9927a69410d80c2eaaa71b"
-  dependencies:
-    husl "^5.0.0"
-    mumath "^3.0.0"
-
 combined-stream@^1.0.5, combined-stream@~1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
  dependencies:
    delayed-stream "~1.0.0"

-commander@2.9.x, commander@^2.8.1, commander@^2.9.0:
+commander@^2.8.1, commander@^2.9.0:
  version "2.9.0"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
  dependencies:
@@ -1519,13 +1487,6 @@ es6-symbol@3, es6-symbol@~3.1, es6-symbol@~3.1.0:
    d "~0.1.1"
    es5-ext "~0.10.11"

-es6-templates@^0.2.2:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/es6-templates/-/es6-templates-0.2.3.tgz#5cb9ac9fb1ded6eb1239342b81d792bbb4078ee4"
-  dependencies:
-    recast "~0.11.12"
-    through "~2.3.6"
-
 es6-weak-map@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.1.tgz#0d2bbd8827eb5fb4ba8f97fbfea50d43db21ea81"
@@ -1665,10 +1626,6 @@ esprima@^2.6.0:
  version "2.7.3"
  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"

-esprima@~3.1.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
-
 esquery@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
@@ -1757,10 +1714,6 @@ fast-levenshtein@~2.0.4:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"

-fastparse@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
-
 fbjs@^0.8.1, fbjs@^0.8.4:
  version "0.8.8"
  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.8.tgz#02f1b6e0ea0d46c24e0b51a2d24df069563a5ad6"
@@ -1773,6 +1726,18 @@ fbjs@^0.8.1, fbjs@^0.8.4:
    setimmediate "^1.0.5"
    ua-parser-js "^0.7.9"

+fbjs@^0.8.9:
+  version "0.8.12"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
 figures@^1.3.5:
  version "1.7.0"
  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
@@ -1948,10 +1913,6 @@ getpass@^0.1.1:
  dependencies:
    assert-plus "^1.0.0"

-github-markdown-css@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/github-markdown-css/-/github-markdown-css-2.4.1.tgz#b4736d84eea8367a03b3248cf546dda3e8dc55e3"
-
 glob-base@^0.3.0:
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -2074,10 +2035,6 @@ hawk@~3.1.3:
    hoek "2.x.x"
    sntp "1.x.x"

-he@1.1.x:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
-
 hoek@2.x.x:
  version "2.16.3"
  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
@@ -2093,29 +2050,6 @@ hosted-git-info@^2.1.4:
  version "2.1.5"
  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b"

-html-loader@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.4.4.tgz#f2b5b9acd5e035ff3ab5fd369c13c97a7bb014da"
-  dependencies:
-    es6-templates "^0.2.2"
-    fastparse "^1.1.1"
-    html-minifier "^3.0.1"
-    loader-utils "^0.2.15"
-    object-assign "^4.1.0"
-
-html-minifier@^3.0.1:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.3.0.tgz#a9b5b8eda501362d4c5699db02a8dc72013d1fab"
-  dependencies:
-    camel-case "3.0.x"
-    clean-css "4.0.x"
-    commander "2.9.x"
-    he "1.1.x"
-    ncname "1.0.x"
-    param-case "2.1.x"
-    relateurl "0.2.x"
-    uglify-js "2.7.x"
-
 http-signature@~1.1.0:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
@@ -2128,10 +2062,6 @@ https-browserify@0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"

-husl@^5.0.0:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/husl/-/husl-5.0.3.tgz#ee272aaff1bebe40df3588ed007b70de7e679788"
-
 iconv-lite@~0.4.13:
  version "0.4.15"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
@@ -2492,7 +2422,7 @@ loader-runner@^2.3.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"

-loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.7:
+loader-utils@^0.2.16:
  version "0.2.16"
  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
  dependencies:
@@ -2542,7 +2472,7 @@ longest@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"

-loose-envify@^1.0.0, loose-envify@^1.1.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
  dependencies:
@@ -2555,10 +2485,6 @@ loud-rejection@^1.0.0:
    currently-unhandled "^0.4.1"
    signal-exit "^3.0.0"

-lower-case@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.3.tgz#c92393d976793eee5ba4edb583cf8eae35bd9bfb"
-
 lru-cache@^4.0.1:
  version "4.0.2"
  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.2.tgz#1d17679c069cda5d040991a09dbc2c0db377e55e"
@@ -2574,18 +2500,6 @@ map-stream@~0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.1.0.tgz#e56aa94c4c8055a16404a0674b78f215f7c8e194"

-markdown-loader@^0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/markdown-loader/-/markdown-loader-0.1.7.tgz#2ab6616fd17652a7cbfe66540781b55e4f19e267"
-  dependencies:
-    loader-utils "^0.2.7"
-    marked "^0.3.2"
-    object-assign "^2.0.0"
-
-marked@^0.3.2:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
-
 memory-fs@^0.4.0, memory-fs@~0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -2675,20 +2589,10 @@ ms@0.7.2:
  version "0.7.2"
  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"

-mumath@^3.0.0:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/mumath/-/mumath-3.3.3.tgz#262e10fcc10699f7050dc707575d39db5c903181"
-  dependencies:
-    almost-equal "^1.1.0"
-
 mute-stream@0.0.5:
  version "0.0.5"
  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"

-namor@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/namor/-/namor-0.3.0.tgz#08fbffe2b7a772004bde5eb6dd3e0d558c8abaa1"
-
 nan@^2.3.0:
  version "2.5.1"
  resolved "https://registry.yarnpkg.com/nan/-/nan-2.5.1.tgz#d5b01691253326a97a2bbee9e61c55d8d60351e2"
@@ -2697,22 +2601,10 @@ natural-compare@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"

-ncname@1.0.x:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/ncname/-/ncname-1.0.0.tgz#5b57ad18b1ca092864ef62b0b1ed8194f383b71c"
-  dependencies:
-    xml-char-classes "^1.0.0"
-
 neo-async@^1.0.0:
  version "1.8.2"
  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-1.8.2.tgz#31795888b79dd04357a7c52113a65183e93b6735"

-no-case@^2.2.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.1.tgz#7aeba1c73a52184265554b7dc03baf720df80081"
-  dependencies:
-    lower-case "^1.1.1"
-
 node-fetch@^1.0.1:
  version "1.6.3"
  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
@@ -2821,10 +2713,6 @@ oauth-sign@~0.8.1:
  version "0.8.2"
  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"

-object-assign@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa"
-
 object-assign@^4.0.1, object-assign@^4.1.0:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -2925,12 +2813,6 @@ pako@~0.2.0:
  version "0.2.9"
  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"

-param-case@2.1.x:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.0.tgz#2619f90fd6c829ed0b958f1c84ed03a745a6d70a"
-  dependencies:
-    no-case "^2.2.0"
-
 parse-asn1@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.0.0.tgz#35060f6d5015d37628c770f4e091a0b5a278bc23"
@@ -3082,7 +2964,7 @@ preserve@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"

-private@^0.1.6, private@~0.1.5:
+private@^0.1.6:
  version "0.1.6"
  resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"

@@ -3104,6 +2986,13 @@ promise@^7.1.1:
  dependencies:
    asap "~2.0.3"

+prop-types@^15.5.8:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
 prr@~0.0.0:
  version "0.0.0"
  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
@@ -3163,10 +3052,6 @@ randombytes@^2.0.0, randombytes@^2.0.1:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.3.tgz#674c99760901c3c4112771a31e521dc349cc09ec"

-raw-loader@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
-
 rc@~1.1.6:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9"
@@ -3176,12 +3061,11 @@ rc@~1.1.6:
    minimist "^1.2.0"
    strip-json-comments "~1.0.4"

-react-base16-styling@^0.4.1:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.4.6.tgz#ac23cb19b278974d965003b88f06a038d790bc80"
+react-base16-styling@^0.5.1:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.5.3.tgz#3858f24e9c4dd8cbd3f702f3f74d581ca2917269"
  dependencies:
    base16 "^1.0.0"
-    color-space "^1.14.3"
    lodash.curry "^4.0.1"
    lodash.flow "^3.3.0"
    pure-color "^1.2.0"
@@ -3194,17 +3078,13 @@ react-dom@^15.4.2:
    loose-envify "^1.1.0"
    object-assign "^4.1.0"

-react-json-tree@^0.10.1:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/react-json-tree/-/react-json-tree-0.10.1.tgz#7f9eab36abf8adf329c7e5ad4091f5987bcbd5de"
+react-json-tree@^0.10.9:
+  version "0.10.9"
+  resolved "https://registry.yarnpkg.com/react-json-tree/-/react-json-tree-0.10.9.tgz#7263173a2cc8bf05eac63b0419c3ce75b232e284"
  dependencies:
    babel-runtime "^6.6.1"
-    react-base16-styling "^0.4.1"
-    react-pure-render "^1.0.2"
-
-react-pure-render@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/react-pure-render/-/react-pure-render-1.0.2.tgz#9d8a928c7f2c37513c2d064e57b3e3c356e9fabb"
+    prop-types "^15.5.8"
+    react-base16-styling "^0.5.1"

 react@^15.4.2:
  version "15.4.2"
@@ -3276,15 +3156,6 @@ readline2@^1.0.1:
    is-fullwidth-code-point "^1.0.0"
    mute-stream "0.0.5"

-recast@~0.11.12:
-  version "0.11.20"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.20.tgz#2cb9bec269c03b36d0598118a936cd0a293ca3f3"
-  dependencies:
-    ast-types "0.9.4"
-    esprima "~3.1.0"
-    private "~0.1.5"
-    source-map "~0.5.0"
-
 rechoir@^0.6.2:
  version "0.6.2"
  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@@ -3339,10 +3210,6 @@ regjsparser@^0.1.4:
  dependencies:
    jsesc "~0.5.0"

-relateurl@0.2.x:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
-
 repeat-element@^1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
@@ -3539,7 +3406,7 @@ source-map@0.1.x:
  dependencies:
    amdefine ">=0.0.4"

-source-map@0.5.x, 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:
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, 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"

@@ -3605,10 +3472,6 @@ standard@^10.0.2:
    eslint-plugin-standard "~3.0.1"
    standard-engine "~7.0.0"

-storybook@^0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/storybook/-/storybook-0.0.0.tgz#b3b9508fb99fd83615674917583cfe9e1532931d"
-
 stream-browserify@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
@@ -3758,7 +3621,7 @@ text-table@~0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"

-through@2, through@^2.3.6, through@~2.3, through@~2.3.1, through@~2.3.6:
+through@2, through@^2.3.6, through@~2.3, through@~2.3.1:
  version "2.3.8"
  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"

@@ -3820,15 +3683,6 @@ ua-parser-js@^0.7.9:
  version "0.7.12"
  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"

-uglify-js@2.7.x:
-  version "2.7.5"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.5.tgz#4612c0c7baaee2ba7c487de4904ae122079f2ca8"
-  dependencies:
-    async "~0.2.6"
-    source-map "~0.5.1"
-    uglify-to-browserify "~1.0.0"
-    yargs "~3.10.0"
-
 uglify-js@^2.8.5:
  version "2.8.22"
  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.22.tgz#d54934778a8da14903fa29a326fb24c0ab51a1a0"
@@ -3850,10 +3704,6 @@ uniq@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"

-upper-case@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
-
 url@^0.11.0:
  version "0.11.0"
  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
@@ -3925,9 +3775,9 @@ webpack-sources@^0.2.3:
    source-list-map "^1.1.1"
    source-map "~0.5.3"

-webpack@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.4.1.tgz#15a91dbe34966d8a4b99c7d656efd92a2e5a6f6a"
+webpack@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.5.1.tgz#61742f0cf8af555b87460a9cd8bba2f1e3ee2fce"
  dependencies:
    acorn "^5.0.0"
    acorn-dynamic-import "^2.0.0"
@@ -4004,10 +3854,6 @@ write@^0.2.1:
  dependencies:
    mkdirp "^0.5.1"

-xml-char-classes@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/xml-char-classes/-/xml-char-classes-1.0.0.tgz#64657848a20ffc5df583a42ad8a277b4512bbc4d"
-
 xtend@^4.0.0, xtend@^4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
Author	SHA1	Message	Date
Tanner Linsley	b76f9c956d	6.4.0	2017-06-19 11:34:29 -06:00
Tanner Linsley	2e3743b75f	Feature: PadRowComponent prop	2017-06-19 11:34:21 -06:00
Tanner Linsley	fdb3e77b00	6.3.0	2017-06-09 21:02:37 -06:00
Tanner Linsley	d9248cef2b	Added defaultSortDesc prop and formatted with prettier + project's eslint	2017-06-09 21:02:28 -06:00
Tanner Linsley	f4704b146c	6.2.0	2017-06-07 21:57:54 -06:00
Tanner Linsley	004186af24	No old storybook files	2017-06-07 21:57:37 -06:00
Mayank JethvaandTanner Linsley	0d0e239baa	Top and Bottom Pagination (#283 ) * added top and bottom pagination, included story * version bump * linting * fixes * PR fixes * lint and fixes * update story * removed unused attr	2017-06-05 17:45:04 -06:00
Stanislav DzhusandTanner Linsley	f61b19cb8a	fix property name (#290 )	2017-05-30 08:45:58 -06:00
stefaniapavelandTanner Linsley	e1a46fb77e	fix IE select visual bug (#301 )	2017-05-30 08:44:32 -06:00
ldsteinandTanner Linsley	a9db5b1ac6	Add minRows to list of available props (#295 ) * Added showPaddedRows prop * Added minRows to defaultProps, added to documentation. * Revert "Added showPaddedRows prop" This reverts commit be89c4913f11df8b322ac9f65e3500c9539f838f. * Removed minRows from defaultProps	2017-05-26 22:17:41 -06:00
Tanner Linsley	846fc0d84d	6.0.5	2017-05-19 16:27:53 -06:00
Tanner Linsley	87610c83fa	Revert overflow styles	2017-05-19 16:27:48 -06:00
Tanner Linsley	a58f5c4de2	Update docs	2017-05-19 16:26:48 -06:00
Tanner Linsley	1995bba652	6.0.4	2017-05-19 12:06:48 -06:00
Tanner Linsley	680747d1d0	Fixed: scrollbar no longer offsets flex widths, documentation deps fixed	2017-05-19 12:06:35 -06:00
Tanner Linsley	e70b29066b	6.0.3	2017-05-16 11:50:41 -06:00
Tanner Linsley	9d82cee707	Better vertical responsiveness & Fixed Header example	2017-05-16 11:50:34 -06:00
Tanner Linsley	db1edf119d	6.0.2	2017-05-16 11:16:34 -06:00
theCmakerandTanner Linsley	c5fa476b6d	Fixed issue #210 - Ignore filters on hidden columns. (#265 ) * Fixed issue #210 - Ignore filters on hidden columns. * Fixed issue #210 - Ignore filters on hidden columns	2017-05-16 09:17:36 -06:00
atkawa7andTanner Linsley	550a1f7107	Fix default sorting documentation (#270 )	2017-05-16 09:09:09 -06:00
Mark HatchandTanner Linsley	42e1a12ea9	Height on pagination button removed (#275 )	2017-05-15 22:36:42 -06:00