Fix source code in FixedHeader example

2026-08-19 08:20:30 +00:00 · 2017-06-26 10:51:52 -07:00
16 changed files with 380 additions and 778 deletions
@@ -4,14 +4,11 @@ module.exports = {
    ecmaFeatures: {
      experimentalObjectRestSpread: true,
      jsx: true,
-      node: false,
-      classes: true
+      node: false
    },
    sourceType: 'module'
  },

-  parser: 'babel-eslint',
-
  extends: ['standard'],

  plugins: ['react'],
@@ -51,7 +48,7 @@ module.exports = {
    'react/no-did-update-set-state': 2,
    'react/no-unknown-property': 2,
    'react/react-in-jsx-scope': 2,
-    'react/jsx-closing-bracket-location': [0, 'tag-aligned'],
+    '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,
@@ -1,7 +1,3 @@
-## 6.5.0
-##### New Features
- `column.filterAll` - defaults to `false`, but when set to `true` will provide the entire array of rows to `filterMethod` as opposed to one row at a time. This allows for more fine-grained filtering using any method you can dream up. See the [Custom Filtering example](https://react-table.js.org/#/story/custom-filtering) for more info.
-
 ## 6.4.0
 ##### New Features
 - `PadRowComponent` - the content rendered inside of a padding row. Defaults to a react component that renders `&nbsp;`
@@ -28,11 +28,6 @@
  <img alt="" src="https://img.shields.io/badge/%24-Donate-brightgreen.svg" />
 </a>

-<br />
-<br />
-
-[![Sponsor](https://app.codesponsor.io/embed/zpmS8V9r31sBSCeVzP7Wm6Sr/tannerlinsley/react-table.svg)](https://app.codesponsor.io/link/zpmS8V9r31sBSCeVzP7Wm6Sr/tannerlinsley/react-table)
-
 ## Versions
 This document refers to version 6.x.x of react-table.

@@ -292,7 +287,6 @@ These are all of the available props (and their default values) for the main `<R
    footerClassName: '',
    footerStyle: {},
    getFooterProps: () => ({}),
-    filterAll: false,
    filterMethod: undefined,
    sortMethod: undefined,
    defaultSortDesc: undefined,
@@ -403,11 +397,10 @@ Or just define them as props
  getFooterProps: (state, rowInfo, column, instance) => ({}), // A function that returns props to decorate the `td` element of the column's footer

  // Filtering
-  filterMethod: (filter, row || rows, column) => {return true}, // A function returning a boolean that specifies the filtering logic for the column
-    // 'filter' == an object specifying which filter is being applied. Format: {id: [the filter column's id], value: [the value the user typed in the filter field], pivotId: [if filtering on a pivot column, the pivotId will be set to the pivot column's id and the `id` field will be set to the top level pivoting column]}
-    // 'row' || 'rows' == the row (or rows, if filterAll is set to true) of data supplied to the table
-    // 'column' == the column that the filter is on
-  filterAll: false
+  filterMethod: (filter, row, column) => {return true}, // A function returning a boolean that specifies the filtering logic for the column
+    // filter == an object specifying which filter is being applied. Format: {id: [the filter column's id], value: [the value the user typed in the filter field], pivotId: [if filtering on a pivot column, the pivotId will be set to the pivot column's id and the `id` field will be set to the top level pivoting column]}
+    // row == the row of data supplied to the table
+    // column == the column that the filter is on
 }]
 ```

@@ -593,21 +586,12 @@ This makes it extremely easy to add, say... a row click callback!
 <ReactTable
  getTdProps={(state, rowInfo, column, instance) => {
    return {
-      onClick: (e, handleOriginal) => {
+      onClick: e => {
        console.log('A Td Element was clicked!')
        console.log('it produced this event:', e)
        console.log('It was in this column:', column)
        console.log('It was in this row:', rowInfo)
        console.log('It was in this table instance:', instance)
-
-        // IMPORTANT! React-Table uses onClick internally to trigger
-        // events like expanding SubComponents and pivots.
-        // By default a custom 'onClick' handler will override this functionality.
-        // If you want to fire the original onClick handler, call the
-        // 'handleOriginal' function.
-        if (handleOriginal) {
-          handleOriginal()
-        }
      }
    }
  }}
@@ -780,7 +764,7 @@ Here are the props and their corresponding callbacks that control the state of t
  onPageSizeChange={(pageSize, pageIndex) => {...}} // Called when the pageSize is changed by the user. The resolve page is also sent to maintain approximate position in the data
  onSortedChange={(newSorted, column, shiftKey) => {...}} // Called when a sortable column header is clicked with the column itself and if the shiftkey was held. If the column is a pivoted column, `column` will be an array of columns
  onExpandedChange={(newExpanded, index, event) => {...}} // Called when an expander is clicked. Use this to manage `expandedRows`
-  onFilteredChange={(column, value) => {...}} // Called when a user enters a value into a filter input field or the value passed to the onFiltersChange handler by the Filter option.
+  onFilteredChange={(column, value) => {...}} // Called when a user enters a value into a filter input field or the value passed to the onFiltersChange handler by the filterRender option.
  onResizedChange={(newResized, event) => {...}} // Called when a user clicks on a resizing component (the right edge of a column header)
 />
 ```
@@ -870,10 +854,6 @@ By default the table tries to filter by checking if the row's value starts with

 If you want to override a particular column's filtering method, you can set the `filterMethod` option on a column.

-By default, `filterMethod` is passed a single row of data at a time, and you are responsible for returning `true` or `false`, indicating whether it should be shown.
-
-Alternatively, you can set `filterAll` to `true`, and `filterMethod` will be passed the entire array of rows to be filtered, and you will then be responsible for returning the new filtered array. This is extremely handy when you need to utilize a utility like fuzzy matching that requires the entire array of items.
-
 To completely override the filter that is shown, you can set the `Filter` column option. Using this option you can specify the JSX that is shown. The option is passed an `onChange` method which must be called with the the value that you wan't to pass to the `filterMethod` option whenever the filter has changed.

 See <a href="http://react-table.js.org/#/story/custom-filtering" target="\_parent">Custom Filtering</a> demo for examples.
@@ -1,77 +0,0 @@
-module.exports = {
-  parserOptions: {
-    ecmaVersion: 8,
-    ecmaFeatures: {
-      experimentalObjectRestSpread: true,
-      jsx: true,
-      node: false,
-      classes: true
-    },
-    sourceType: 'module'
-  },
-
-  parser: 'babel-eslint',
-
-  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': [0, '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 }]
-  }
-}
@@ -21,8 +21,7 @@ const columns = [{
  }, {
    Header: 'Last Name',
    id: 'lastName',
-    accessor: d => d.lastName,
-    width: 170
+    accessor: d => d.lastName
  }]
 }, {
  Header: 'Info',
@@ -32,31 +31,21 @@ const columns = [{
  }]
 }]

-function makeDefaultState()
-{
-  return {
-    sorted: [],
-    page: 0,
-    pageSize: 10,
-    expanded: {},
-    resized: [],
-    filtered: []
-  }
-}
-
 class Story extends React.PureComponent {
  constructor () {
    super()
-    this.state = makeDefaultState()
-    this.resetState = this.resetState.bind(this)
-  }
-  resetState(){
-    this.setState(makeDefaultState())
+    this.state = {
+      sorted: [],
+      page: 0,
+      pageSize: 10,
+      expanded: {},
+      resized: [],
+      filtered: []
+    }
  }
  render () {
    return (
      <div>
-
        <div className='table-wrap'>
          <ReactTable
            className='-striped -highlight'
@@ -81,7 +70,6 @@ class Story extends React.PureComponent {
          />
        </div>
        <br />
-        <div style={{float:'right'}}><button onClick={this.resetState}>Reset State</button></div>
        <pre><code><strong>this.state ===</strong> {JSON.stringify(this.state, null, 2)}</code></pre>
        <br />
      </div>
@@ -2,20 +2,19 @@
 import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
-import matchSorter from 'match-sorter'

 import CodeHighlight from './components/codeHighlight'

 import ReactTable from '../../../lib/index'

 class Story extends React.PureComponent {
-  constructor(props) {
+  constructor (props) {
    super(props)

    const data = _.map(_.range(5553), d => {
      return {
-        firstName: namor.generate({ words: 1, numbers: 0 }),
-        lastName: namor.generate({ words: 1, numbers: 0 }),
+        firstName: namor.generate({words: 1, numbers: 0}),
+        lastName: namor.generate({words: 1, numbers: 0}),
        age: Math.floor(Math.random() * 30)
      }
    })
@@ -40,63 +39,52 @@ class Story extends React.PureComponent {
    this.setTableOption = this.setTableOption.bind(this)
  }

-  render() {
-    const columns = [
-      {
-        Header: 'Name',
-        columns: [
-          {
-            Header: 'First Name',
-            accessor: 'firstName',
-            filterMethod: (filter, row) =>
-              row[filter.id].startsWith(filter.value) &&
-              row[filter.id].endsWith(filter.value)
-          },
-          {
-            Header: 'Last Name',
-            id: 'lastName',
-            accessor: d => d.lastName,
-            filterMethod: (filter, rows) =>
-              matchSorter(rows, filter.value, { keys: ['lastName'] }),
-            filterAll: true
+  render () {
+    const columns = [{
+      Header: 'Name',
+      columns: [{
+        Header: 'First Name',
+        accessor: 'firstName',
+        filterMethod: (filter, row) => (row[filter.id].startsWith(filter.value) && row[filter.id].endsWith(filter.value))
+      }, {
+        Header: 'Last Name',
+        id: 'lastName',
+        accessor: d => d.lastName,
+        filterMethod: (filter, row) => (row[filter.id].includes(filter.value))
+      }]
+    }, {
+      Header: 'Info',
+      columns: [{
+        Header: 'Age',
+        accessor: 'age'
+      }, {
+        Header: 'Over 21',
+        accessor: 'age',
+        id: 'over',
+        Cell: ({value}) => (value >= 21 ? 'Yes' : 'No'),
+        filterMethod: (filter, row) => {
+          if (filter.value === 'all') {
+            return true
          }
-        ]
-      },
-      {
-        Header: 'Info',
-        columns: [
-          {
-            Header: 'Age',
-            accessor: 'age'
-          },
-          {
-            Header: 'Over 21',
-            accessor: 'age',
-            id: 'over',
-            Cell: ({ value }) => (value >= 21 ? 'Yes' : 'No'),
-            filterMethod: (filter, row) => {
-              if (filter.value === 'all') {
-                return true
-              }
-              if (filter.value === 'true') {
-                return row[filter.id] >= 21
-              }
-              return row[filter.id] < 21
-            },
-            Filter: ({ filter, onChange }) =>
-              <select
-                onChange={event => onChange(event.target.value)}
-                style={{ width: '100%' }}
-                value={filter ? filter.value : 'all'}
-              >
-                <option value="all" />
-                <option value="true">Can Drink</option>
-                <option value="false">Can't Drink</option>
-              </select>
+          if (filter.value === 'true') {
+            return row[filter.id] >= 21
          }
-        ]
+          return row[filter.id] < 21
+        },
+        Filter: ({filter, onChange}) => (
+          <select
+            onChange={event => onChange(event.target.value)}
+            style={{width: '100%'}}
+            value={filter ? filter.value : 'all'}
+          >
+            <option value='all' />
+            <option value='true'>Can Drink</option>
+            <option value='false'>Can't Drink</option>
+          </select>
+        )
      }
-    ]
+      ]
+    }]

    return (
      <div>
@@ -104,43 +92,38 @@ class Story extends React.PureComponent {
          <h1>Table Options</h1>
          <table>
            <tbody>
-              {Object.keys(this.state.tableOptions).map(optionKey => {
-                const optionValue = this.state.tableOptions[optionKey]
-                return (
-                  <tr key={optionKey}>
-                    <td>
-                      {optionKey}
-                    </td>
-                    <td style={{ paddingLeft: 10, paddingTop: 5 }}>
-                      <input
-                        type="checkbox"
-                        name={optionKey}
-                        checked={optionValue}
-                        onChange={this.setTableOption}
-                      />
-                    </td>
-                  </tr>
-                )
-              })}
+              {
+                Object.keys(this.state.tableOptions).map(optionKey => {
+                  const optionValue = this.state.tableOptions[optionKey]
+                  return (
+                    <tr key={optionKey}>
+                      <td>{optionKey}</td>
+                      <td style={{paddingLeft: 10, paddingTop: 5}}>
+                        <input type='checkbox'
+                          name={optionKey}
+                          checked={optionValue}
+                          onChange={this.setTableOption}
+                        />
+                      </td>
+                    </tr>
+                  )
+                })
+              }
            </tbody>
          </table>
        </div>
-        <div className="table-wrap">
+        <div className='table-wrap'>
          <ReactTable
-            className="-striped -highlight"
+            className='-striped -highlight'
            data={this.state.data}
            columns={columns}
            defaultPageSize={10}
-            defaultFilterMethod={(filter, row) =>
-              String(row[filter.id]) === filter.value}
+            defaultFilterMethod={(filter, row) => (String(row[filter.id]) === filter.value)}
            {...this.state.tableOptions}
-            SubComponent={row => {
+            SubComponent={(row) => {
              return (
-                <div style={{ padding: '20px' }}>
-                  <em>
-                    You can put any component you want here, even another React
-                    Table!
-                  </em>
+                <div style={{padding: '20px'}}>
+                  <em>You can put any component you want here, even another React Table!</em>
                  <br />
                  <br />
                  <ReactTable
@@ -148,13 +131,11 @@ class Story extends React.PureComponent {
                    columns={columns}
                    defaultPageSize={3}
                    showPagination={false}
-                    SubComponent={row => {
+                    SubComponent={(row) => {
                      return (
-                        <div style={{ padding: '20px' }}>
+                        <div style={{padding: '20px'}}>
                          <em>It even has access to the row data: </em>
-                          <CodeHighlight>
-                            {() => JSON.stringify(row, null, 2)}
-                          </CodeHighlight>
+                          <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
                        </div>
                      )
                    }}
@@ -164,54 +145,32 @@ class Story extends React.PureComponent {
            }}
          />
        </div>
-        <div style={{ textAlign: 'center' }}>
+        <div style={{textAlign: 'center'}}>
          <br />
          <em>Tip: Hold shift when sorting to multi-sort!</em>
        </div>
        <div>
          <h1>Custom Filters In This Example</h1>
-          <p>
-            The default filter for all columns of a table if it is not specified
-            in the configuration is set to match on values that start with the
-            filter text. Example: age.startsWith("2").
-          </p>
-          <p>
-            This example overrides the default filter behavior by setting the{' '}
-            <strong>defaultFilterMethod</strong> table option to match on values
-            that are exactly equal to the filter text. Example: age == "23")
-          </p>
-          <p>
-            Each column can also be customized with the column{' '}
-            <strong>filterMethod</strong> option:
-          </p>
-          <p>
-            In this example the firstName column filters on the value starting
-            with and ending with the filter value.
-          </p>
-          <p>
-            In this example the lastName column filters using{' '}
-            <a href="https://github.com/kentcdodds">Kent C. Dodd</a>'s{' '}
-            <a href="https://github.com/kentcdodds/match-sorter">
-              match-sorter
-            </a>{' '}
-            fuzzy search module. Note that 'filterAll' is set to true, which
-            allows us to filter using the entire dataset instead of just one row
-            at a time.
-          </p>
-          <p>
-            To completely override the filter that is shown, you can set the{' '}
-            <strong>Filter</strong> column option. Using this option you can
-            specify the JSX that is shown. The option is passed an{' '}
-            <strong>onChange</strong> method that must be called with the value
-            that you wan't to pass to the <strong>filterMethod</strong> option
-            whenever the filter has changed.
-          </p>
+          <p>The default filter for all columns of a table if it is not specified in the configuration is set to match
+          on values that start with the filter text. Example: age.startsWith("2").</p>
+          <p>This example overrides the default filter behavior by setting
+            the <strong>defaultFilterMethod</strong> table option to match on values that are exactly equal to the
+          filter text. Example: age == "23")</p>
+          <p>Each column can also be customized with the column <strong>filterMethod</strong> option:</p>
+          <p>In this example the firstName column filters on the value starting with and ending with the filter
+          value.</p>
+          <p>In this example the lastName column filters on the value including the filter value anywhere in its
+          text.</p>
+          <p>To completely override the filter that is shown, you can set the <strong>Filter</strong> column
+            option. Using this option you can specify the JSX that is shown. The option is passed
+            an <strong>onChange</strong> method that must be called with the value that you wan't to
+            pass to the <strong>filterMethod</strong> option whenever the filter has changed.</p>
        </div>
      </div>
    )
  }

-  setTableOption(event) {
+  setTableOption (event) {
    const target = event.target
    const value = target.type === 'checkbox' ? target.checked : target.value
    const name = target.name
@@ -227,10 +186,9 @@ class Story extends React.PureComponent {
 // Source Code
 const source = require('!raw!./Filtering')

-export default () =>
+export default () => (
  <div>
    <Story />
-    <CodeHighlight>
-      {() => source}
-    </CodeHighlight>
+    <CodeHighlight>{() => source}</CodeHighlight>
  </div>
+)
@@ -1,6 +1,6 @@
 {
  "name": "react-table",
-  "version": "6.5.3",
+  "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",
@@ -29,7 +29,7 @@
    "watch": "npm-run-all --parallel watch:*",
    "watch:node": "onchange 'src/**/*.js' -i -- npm run build:node",
    "watch:css": "onchange 'src/**/*.styl' -i -- npm run build:css",
-    "test": "eslint src",
+    "test": "standard",
    "umd": "rimraf react-table.js && webpack --config umd.webpack.js",
    "build": "npm-run-all build:*",
    "prepublish": "npm run build && npm run umd",
@@ -38,7 +38,8 @@
    "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,19 +51,28 @@
    "babel-preset-es2015": "6.14.0",
    "babel-preset-react": "6.11.1",
    "babel-preset-stage-2": "6.13.0",
-    "eslint": "^4.1.1",
-    "match-sorter": "^1.8.0",
    "npm-run-all": "^3.1.1",
    "onchange": "^3.0.2",
    "postcss-cli": "^2.6.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
-    "react-json-tree": "^0.10.9",
    "rimraf": "^2.6.1",
    "standard": "^10.0.2",
    "stylus": "^0.54.5",
    "webpack": "^2.5.1"
  },
+  "standard": {
+    "parser": "babel-eslint",
+    "ignore": [
+      "node_modules",
+      "dist",
+      "lib",
+      "example",
+      "react-table.js",
+      "stories",
+      "docs"
+    ]
+  },
  "babel": {
    "presets": [
      "es2015",
@@ -145,7 +145,6 @@ export default {
    footerStyle: {},
    getFooterProps: emptyObj,
    filterMethod: undefined,
-    filterAll: false,
    sortMethod: undefined,
  },

@@ -171,11 +170,11 @@ export default {
  rowsText: 'rows',

  // Components
-  TableComponent: _.makeTemplateComponent('rt-table', 'Table'),
-  TheadComponent: _.makeTemplateComponent('rt-thead', 'Thead'),
-  TbodyComponent: _.makeTemplateComponent('rt-tbody', 'Tbody'),
-  TrGroupComponent: _.makeTemplateComponent('rt-tr-group', 'TrGroup'),
-  TrComponent: _.makeTemplateComponent('rt-tr', 'Tr'),
+  TableComponent: _.makeTemplateComponent('rt-table'),
+  TheadComponent: _.makeTemplateComponent('rt-thead'),
+  TbodyComponent: _.makeTemplateComponent('rt-tbody'),
+  TrGroupComponent: _.makeTemplateComponent('rt-tr-group'),
+  TrComponent: _.makeTemplateComponent('rt-tr'),
  ThComponent: ({ toggleSort, className, children, ...rest }) => {
    return (
      <div
@@ -189,8 +188,8 @@ export default {
      </div>
    )
  },
-  TdComponent: _.makeTemplateComponent('rt-td', 'Td'),
-  TfootComponent: _.makeTemplateComponent('rt-tfoot', 'Tfoot'),
+  TdComponent: _.makeTemplateComponent('rt-td'),
+  TfootComponent: _.makeTemplateComponent('rt-tfoot'),
  FilterComponent: ({ filter, onChange }) =>
    <input
      type='text'
@@ -205,23 +204,16 @@ export default {
      &bull;
    </div>,
  PivotValueComponent: ({ subRows, value }) =>
-    <span>
-      {value} {subRows && `(${subRows.length})`}
-    </span>,
+    <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 ? ', ' : ''}
+          {row[column.id]}{i < subRows.length - 1 ? ', ' : ''}
        </span>
      )
-    return (
-      <span>
-        {previewValues}
-      </span>
-    )
+    return <span>{previewValues}</span>
  },
  PivotComponent: undefined, // this is a computed default generated using
  // the ExpanderComponent and PivotValueComponent at run-time in methods.js
@@ -237,7 +229,7 @@ export default {
        {loadingText}
      </div>
    </div>,
-  NoDataComponent: _.makeTemplateComponent('rt-noData', 'NoData'),
-  ResizerComponent: _.makeTemplateComponent('rt-resizer', 'Resizer'),
+  NoDataComponent: _.makeTemplateComponent('rt-noData'),
+  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)
@@ -39,11 +39,11 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      filtered: props.defaultFiltered,
      resized: props.defaultResized,
      currentlyResizing: false,
-      skipNextSort: false,
+      skipNextSort: false
    }
  }

-  render () {
+  render() {
    const resolvedState = this.getResolvedState()
    const {
      children,
@@ -126,7 +126,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      hasHeaderGroups,
      // Sorted Data
      sortedData,
-      currentlyResizing,
+      currentlyResizing
    } = resolvedState

    // Pagination
@@ -145,7 +145,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          index++
          const rowWithViewIndex = {
            ...row,
-            _viewIndex: index,
+            _viewIndex: index
          }
          const newPath = path.concat([i])
          if (rowWithViewIndex[subRowsKey] && _.get(expanded, newPath)) {
@@ -157,7 +157,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          }
          return rowWithViewIndex
        }),
-        index,
+        index
      ]
    }
    ;[pageRows] = recurseRowsViewIndex(pageRows)
@@ -184,7 +184,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      hasColumnFooter,
      canPrevious,
      canNext,
-      rowMinWidth,
+      rowMinWidth
    }

    // Visual Components
@@ -201,7 +201,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          className={classnames('-headerGroups', theadGroupProps.className)}
          style={{
            ...theadGroupProps.style,
-            minWidth: `${rowMinWidth}px`,
+            minWidth: `${rowMinWidth}px`
          }}
          {...theadGroupProps.rest}
        >
@@ -245,24 +245,24 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      const classes = [
        column.headerClassName,
        theadGroupThProps.className,
-        columnHeaderProps.className,
+        columnHeaderProps.className
      ]

      const styles = {
        ...column.headerStyle,
        ...theadGroupThProps.style,
-        ...columnHeaderProps.style,
+        ...columnHeaderProps.style
      }

      const rest = {
        ...theadGroupThProps.rest,
-        ...columnHeaderProps.rest,
+        ...columnHeaderProps.rest
      }

      const flexStyles = {
        flex: `${flex} 0 auto`,
-        width: _.asPx(width),
-        maxWidth: _.asPx(maxWidth),
+        width: `${width}px`,
+        maxWidth: `${maxWidth}px`
      }

      return (
@@ -271,13 +271,13 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          className={classnames(classes)}
          style={{
            ...styles,
-            ...flexStyles,
+            ...flexStyles
          }}
          {...rest}
        >
          {_.normalizeComponent(column.Header, {
            data: sortedData,
-            column: column,
+            column: column
          })}
        </ThComponent>
      )
@@ -295,7 +295,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          className={classnames('-header', theadProps.className)}
          style={{
            ...theadProps.style,
-            minWidth: `${rowMinWidth}px`,
+            minWidth: `${rowMinWidth}px`
          }}
          {...theadProps.rest}
        >
@@ -313,8 +313,9 @@ 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 show = typeof column.show === 'function'
+        ? column.show()
+        : column.show
      const width = _.getFirstDefined(
        resizedCol.value,
        column.width,
@@ -335,27 +336,27 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      const classes = [
        column.headerClassName,
        theadThProps.className,
-        columnHeaderProps.className,
+        columnHeaderProps.className
      ]

      const styles = {
        ...column.headerStyle,
        ...theadThProps.style,
-        ...columnHeaderProps.style,
+        ...columnHeaderProps.style
      }

      const rest = {
        ...theadThProps.rest,
-        ...columnHeaderProps.rest,
+        ...columnHeaderProps.rest
      }

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

      const isSortable = _.getFirstDefined(column.sortable, sortable, false)
@@ -376,18 +377,18 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          style={{
            ...styles,
            flex: `${width} 0 auto`,
-            width: _.asPx(width),
-            maxWidth: _.asPx(maxWidth),
+            width: `${width}px`,
+            maxWidth: `${maxWidth}px`
          }}
          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,
+              column: column
            })}
          </div>
          {resizer}
@@ -407,7 +408,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          className={classnames('-filters', theadFilterProps.className)}
          style={{
            ...theadFilterProps.style,
-            minWidth: `${rowMinWidth}px`,
+            minWidth: `${rowMinWidth}px`
          }}
          {...theadFilterProps.rest}
        >
@@ -444,18 +445,18 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      const classes = [
        column.headerClassName,
        theadFilterThProps.className,
-        columnHeaderProps.className,
+        columnHeaderProps.className
      ]

      const styles = {
        ...column.headerStyle,
        ...theadFilterThProps.style,
-        ...columnHeaderProps.style,
+        ...columnHeaderProps.style
      }

      const rest = {
        ...theadFilterThProps.rest,
-        ...columnHeaderProps.rest,
+        ...columnHeaderProps.rest
      }

      const filter = filtered.find(filter => filter.id === column.id)
@@ -475,21 +476,21 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          style={{
            ...styles,
            flex: `${width} 0 auto`,
-            width: _.asPx(width),
-            maxWidth: _.asPx(maxWidth),
+            width: `${width}px`,
+            maxWidth: `${maxWidth}px`
          }}
          {...rest}
        >
          {isFilterable
            ? _.normalizeComponent(
-              ResolvedFilterComponent,
-              {
-                column,
-                filter,
-                onChange: value => this.filterColumn(column, value),
-              },
-              defaultProps.column.Filter
-            )
+                ResolvedFilterComponent,
+                {
+                  column,
+                  filter,
+                  onChange: value => this.filterColumn(column, value)
+                },
+                defaultProps.column.Filter
+              )
            : null}
        </ThComponent>
      )
@@ -505,7 +506,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
        nestingPath: path.concat([i]),
        aggregated: row[aggregatedKey],
        groupedByPivot: row[groupedByPivotKey],
-        subRows: row[subRowsKey],
+        subRows: row[subRowsKey]
      }
      const isExpanded = _.get(expanded, rowInfo.nestingPath)
      const trGroupProps = getTrGroupProps(finalState, rowInfo, undefined, this)
@@ -524,8 +525,9 @@ 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 show = typeof column.show === 'function'
+                ? column.show()
+                : column.show
              const width = _.getFirstDefined(
                resizedCol.value,
                column.width,
@@ -546,13 +548,13 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
              const classes = [
                tdProps.className,
                column.className,
-                columnProps.className,
+                columnProps.className
              ]

              const styles = {
                ...tdProps.style,
                ...column.style,
-                ...columnProps.style,
+                ...columnProps.style
              }

              const cellInfo = {
@@ -569,12 +571,12 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                tdProps,
                columnProps,
                classes,
-                styles,
+                styles
              }

              const value = cellInfo.value

-              let useOnExpanderClick
+              let interactionProps
              let isBranch
              let isPreview

@@ -588,7 +590,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {

                return this.setStateWithData(
                  {
-                    expanded: newExpanded,
+                    expanded: newExpanded
                  },
                  () => {
                    onExpandedChange &&
@@ -626,10 +628,17 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
              if (cellInfo.pivoted || cellInfo.expander) {
                // Make it expandable by defualt
                cellInfo.expandable = true
-                useOnExpanderClick = true
+                interactionProps = {
+                  onClick: onExpanderClick
+                }
                // If pivoted, has no subRows, and does not have a subComponent, do not make expandable
-                if (cellInfo.pivoted && !cellInfo.subRows && !SubComponent) {
-                  cellInfo.expandable = false
+                if (cellInfo.pivoted) {
+                  if (!cellInfo.subRows) {
+                    if (!SubComponent) {
+                      cellInfo.expandable = false
+                      interactionProps = {}
+                    }
+                  }
                }
              }

@@ -648,7 +657,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                    ResolvedPivotComponent,
                    {
                      ...cellInfo,
-                      value: row[pivotValKey],
+                      value: row[pivotValKey]
                    },
                    row[pivotValKey]
                  )
@@ -686,27 +695,6 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                }
              }

-              const resolvedOnExpanderClick = useOnExpanderClick
-                ? onExpanderClick
-                : () => {}
-
-              // If there are multiple onClick events, make sure they don't override eachother. This should maybe be expanded to handle all function attributes
-              const interactionProps = {
-                onClick: resolvedOnExpanderClick,
-              }
-
-              if (tdProps.rest.onClick) {
-                interactionProps.onClick = e => {
-                  tdProps.rest.onClick(e, () => resolvedOnExpanderClick(e))
-                }
-              }
-
-              if (columnProps.rest.onClick) {
-                interactionProps.onClick = e => {
-                  columnProps.rest.onClick(e, () => resolvedOnExpanderClick(e))
-                }
-              }
-
              // Return the cell
              return (
                <TdComponent
@@ -720,11 +708,10 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                  style={{
                    ...styles,
                    flex: `${width} 0 auto`,
-                    width: _.asPx(width),
-                    maxWidth: _.asPx(maxWidth),
+                    width: `${width}px`,
+                    maxWidth: `${maxWidth}px`
                  }}
                  {...tdProps.rest}
-                  {...columnProps.rest}
                  {...interactionProps}
                >
                  {resolvedCell}
@@ -773,8 +760,9 @@ 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
+      const show = typeof column.show === 'function'
+        ? column.show()
+        : column.show
      let width = _.getFirstDefined(
        resizedCol.value,
        column.width,
@@ -796,13 +784,13 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
      const classes = [
        tdProps.className,
        column.className,
-        columnProps.className,
+        columnProps.className
      ]

      const styles = {
        ...tdProps.style,
        ...column.style,
-        ...columnProps.style,
+        ...columnProps.style
      }

      return (
@@ -812,8 +800,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          style={{
            ...styles,
            flex: `${flex} 0 auto`,
-            width: _.asPx(width),
-            maxWidth: _.asPx(maxWidth),
+            width: `${width}px`,
+            maxWidth: `${maxWidth}px`
          }}
          {...tdProps.rest}
        >
@@ -832,7 +820,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          className={tFootProps.className}
          style={{
            ...tFootProps.style,
-            minWidth: `${rowMinWidth}px`,
+            minWidth: `${rowMinWidth}px`
          }}
          {...tFootProps.rest}
        >
@@ -849,8 +837,9 @@ 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 show = typeof column.show === 'function'
+        ? column.show()
+        : column.show
      const width = _.getFirstDefined(
        resizedCol.value,
        column.width,
@@ -875,14 +864,14 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
        tFootTdProps.className,
        column.className,
        columnProps.className,
-        columnFooterProps.className,
+        columnFooterProps.className
      ]

      const styles = {
        ...tFootTdProps.style,
        ...column.style,
        ...columnProps.style,
-        ...columnFooterProps.style,
+        ...columnFooterProps.style
      }

      return (
@@ -892,8 +881,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          style={{
            ...styles,
            flex: `${width} 0 auto`,
-            width: _.asPx(width),
-            maxWidth: _.asPx(maxWidth),
+            width: `${width}px`,
+            maxWidth: `${maxWidth}px`
          }}
          {...columnProps.rest}
          {...tFootTdProps.rest}
@@ -901,7 +890,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
        >
          {_.normalizeComponent(column.Footer, {
            data: sortedData,
-            column: column,
+            column: column
          })}
        </TdComponent>
      )
@@ -946,14 +935,14 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
          className={classnames('ReactTable', className, rootProps.className)}
          style={{
            ...style,
-            ...rootProps.style,
+            ...rootProps.style
          }}
          {...rootProps.rest}
        >
          {showPagination && showPaginationTop
-            ? <div className='pagination-top'>
-              {pagination}
-            </div>
+            ? <div className="pagination-top">
+                {pagination}
+              </div>
            : null}
          <TableComponent
            className={classnames(
@@ -970,7 +959,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
              className={classnames(tBodyProps.className)}
              style={{
                ...tBodyProps.style,
-                minWidth: `${rowMinWidth}px`,
+                minWidth: `${rowMinWidth}px`
              }}
              {...tBodyProps.rest}
            >
@@ -980,9 +969,9 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
            {hasColumnFooter ? makeColumnFooters() : null}
          </TableComponent>
          {showPagination && showPaginationBottom
-            ? <div className='pagination-bottom'>
-              {pagination}
-            </div>
+            ? <div className="pagination-bottom">
+                {pagination}
+              </div>
            : null}
          {!pageRows.length &&
            <NoDataComponent {...noDataProps}>
@@ -21,6 +21,7 @@ $expandSize = 7px
  .rt-thead
    flex: 1 0 auto
    display: flex
+    // overflow-y: scroll
    flex-direction: column
    -webkit-user-select: none;
    -moz-user-select: none;
@@ -269,7 +270,7 @@ $expandSize = 7px
    bottom:0
    background: alpha(white, .8)
    transition: all .3s ease
-    z-index: -1
+    z-index: 2
    opacity: 0
    pointer-events: none

@@ -287,7 +288,6 @@ $expandSize = 7px

    &.-active
      opacity: 1
-      z-index: 2
      pointer-events: all
      > div
        transform: translateY(50%)
@@ -302,6 +302,28 @@ $expandSize = 7px
    font-weight: normal
    outline:none

+  input:not([type="checkbox"]):not([type="radio"])
+  select
+    appearance: none
+    &::-ms-expand
+      display: none
+
+  .select-wrap
+    position:relative
+    display:inline-block
+    select
+      padding: 5px 15px 5px 7px
+      min-width:100px
+    &:after
+      content: ''
+      position: absolute
+      right: 8px
+      top: 50%
+      transform: translate(0, -50%)
+      border-color: #999 transparent transparent
+      border-style: solid
+      border-width: 5px 5px 2.5px
+
  .rt-resizing
    .rt-th
    .rt-td
@@ -88,8 +88,7 @@ export default Base =>
            this.props.collapseOnSortingChange) ||
          oldState.filtered !== newResolvedState.filtered ||
          oldState.showFilters !== newResolvedState.showFilters ||
-          (oldState.sortedData &&
-            !newResolvedState.frozen &&
+          (!newResolvedState.frozen &&
            oldState.resolvedData !== newResolvedState.resolvedData &&
            this.props.collapseOnDataChange)
        ) {
@@ -99,18 +98,13 @@ export default Base =>
        Object.assign(newResolvedState, this.getSortedData(newResolvedState))
      }

-      // Set page to 0 if filters change
-      if (oldState.filtered !== newResolvedState.filtered) {
-        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.sortedData.length / newResolvedState.pageSize
+            )
        newResolvedState.page = Math.max(
          newResolvedState.page >= newResolvedState.pages
            ? newResolvedState.pages - 1
@@ -119,16 +113,6 @@ export default Base =>
        )
      }

-      return this.setState(newResolvedState, () => {
-        cb && cb()
-        if (
-          oldState.page !== newResolvedState.page ||
-          oldState.pageSize !== newResolvedState.pageSize ||
-          oldState.sorted !== newResolvedState.sorted ||
-          oldState.filtered !== newResolvedState.filtered
-        ) {
-          this.fireFetchData()
-        }
-      })
+      return this.setState(newResolvedState, cb)
    }
  }
@@ -55,7 +55,7 @@ export default Base =>
        columnsWithExpander = [expanderColumn, ...columnsWithExpander]
      }

-      const makeDecoratedColumn = (column, parentColumn) => {
+      const makeDecoratedColumn = column => {
        let dcol
        if (column.expander) {
          dcol = {
@@ -70,16 +70,6 @@ export default Base =>
          }
        }

-        // Ensure minWidth is not greater than maxWidth if set
-        if (dcol.maxWidth < dcol.minWidth) {
-          dcol.minWidth = dcol.maxWidth
-        }
-
-        if (parentColumn) {
-          dcol.parentColumn = parentColumn
-        }
-
-        // First check for string accessor
        if (typeof dcol.accessor === 'string') {
          dcol.id = dcol.id || dcol.accessor
          const accessorString = dcol.accessor
@@ -87,7 +77,6 @@ export default Base =>
          return dcol
        }

-        // Fall back to functional accessor (but require an ID)
        if (dcol.accessor && !dcol.id) {
          console.warn(dcol)
          throw new Error(
@@ -95,26 +84,30 @@ export default Base =>
          )
        }

-        // Fall back to an undefined accessor
        if (!dcol.accessor) {
          dcol.accessor = d => undefined
        }

+        // Ensure minWidth is not greater than maxWidth if set
+        if (dcol.maxWidth < dcol.minWidth) {
+          dcol.minWidth = dcol.maxWidth
+        }
+
        return dcol
      }

      // Decorate the columns
-      const decorateAndAddToAll = (column, parentColumn) => {
-        const decoratedColumn = makeDecoratedColumn(column, parentColumn)
+      const decorateAndAddToAll = col => {
+        const decoratedColumn = makeDecoratedColumn(col)
        allDecoratedColumns.push(decoratedColumn)
        return decoratedColumn
      }
-      const allDecoratedColumns = []
+      let allDecoratedColumns = []
      const decoratedColumns = columnsWithExpander.map((column, i) => {
        if (column.columns) {
          return {
            ...column,
-            columns: column.columns.map(d => decorateAndAddToAll(d, column)),
+            columns: column.columns.map(decorateAndAddToAll),
          }
        } else {
          return decorateAndAddToAll(column)
@@ -163,17 +156,8 @@ export default Base =>
          }
        })

-        let PivotParentColumn = pivotColumns.reduce(
-          (prev, current) =>
-            prev && prev === current.parentColumn && current.parentColumn,
-          pivotColumns[0].parentColumn
-        )
-
-        let PivotGroupHeader = hasHeaderGroups && PivotParentColumn.Header
-        PivotGroupHeader = PivotGroupHeader || (() => <strong>Pivoted</strong>)
-
        let pivotColumnGroup = {
-          Header: PivotGroupHeader,
+          header: () => <strong>Group</strong>,
          columns: pivotColumns.map(col => ({
            ...this.props.pivotDefaults,
            ...col,
@@ -325,15 +309,15 @@ export default Base =>
        sortedData: manual
          ? resolvedData
          : this.sortData(
-            this.filterData(
-              resolvedData,
-              filtered,
-              defaultFilterMethod,
-              allVisibleColumns
+              this.filterData(
+                resolvedData,
+                filtered,
+                defaultFilterMethod,
+                allVisibleColumns
+              ),
+              sorted,
+              sortMethodsByColumnID
            ),
-            sorted,
-            sortMethodsByColumnID
-          ),
      }
    }

@@ -354,23 +338,20 @@ export default Base =>

      if (filtered.length) {
        filteredData = filtered.reduce((filteredSoFar, nextFilter) => {
-          const column = allVisibleColumns.find(x => x.id === nextFilter.id)
+          return filteredSoFar.filter(row => {
+            let column

-          // Don't filter hidden columns or columns that have had their filters disabled
-          if (!column || column.filterable === false) {
-            return filteredSoFar
-          }
+            column = allVisibleColumns.find(x => x.id === nextFilter.id)

-          const filterMethod = column.filterMethod || defaultFilterMethod
+            // Don't filter hidden columns or columns that have had their filters disabled
+            if (!column || column.filterable === false) {
+              return true
+            }

-          // If 'filterAll' is set to true, pass the entire dataset to the filter method
-          if (column.filterAll) {
-            return filterMethod(nextFilter, filteredSoFar, column)
-          } else {
-            return filteredSoFar.filter(row => {
-              return filterMethod(nextFilter, row, column)
-            })
-          }
+            const filterMethod = column.filterMethod || defaultFilterMethod
+
+            return filterMethod(nextFilter, row, column)
+          })
        }, filteredData)

        // Apply the filter to the subrows if we are pivoting, and then
@@ -454,6 +435,7 @@ export default Base =>
      }
      this.setStateWithData(newState, () => {
        onPageChange && onPageChange(page)
+        this.fireFetchData()
      })
    }

@@ -472,6 +454,7 @@ export default Base =>
        },
        () => {
          onPageSizeChange && onPageSizeChange(newPageSize, newPage)
+          this.fireFetchData()
        }
      )
    }
@@ -576,14 +559,14 @@ export default Base =>

      this.setStateWithData(
        {
-          page:
-            (!sorted.length && newSorted.length) || !additive
-              ? 0
-              : this.state.page,
+          page: (!sorted.length && newSorted.length) || !additive
+            ? 0
+            : this.state.page,
          sorted: newSorted,
        },
        () => {
          onSortedChange && onSortedChange(newSorted, column, additive)
+          this.fireFetchData()
        }
      )
    }
@@ -612,12 +595,12 @@ export default Base =>
        },
        () => {
          onFilteredChange && onFilteredChange(newFiltering, column, value)
+          this.fireFetchData()
        }
      )
    }

-    resizeColumnStart (event, column, isTouch) {
-      event.stopPropagation()
+    resizeColumnStart (column, event, isTouch) {
      const parentWidth = event.target.parentElement.getBoundingClientRect()
        .width

@@ -628,7 +611,6 @@ export default Base =>
        pageX = event.pageX
      }

-      this.trapEvents = true
      this.setStateWithData(
        {
          currentlyResizing: {
@@ -651,8 +633,33 @@ export default Base =>
      )
    }

+    resizeColumnEnd (event) {
+      let isTouch = event.type === 'touchend' || event.type === 'touchcancel'
+
+      if (isTouch) {
+        document.removeEventListener('touchmove', this.resizeColumnMoving)
+        document.removeEventListener('touchcancel', this.resizeColumnEnd)
+        document.removeEventListener('touchend', this.resizeColumnEnd)
+      }
+
+      // If its a touch event clear the mouse one's as well because sometimes
+      // the mouseDown event gets called as well, but the mouseUp event doesn't
+      document.removeEventListener('mousemove', this.resizeColumnMoving)
+      document.removeEventListener('mouseup', this.resizeColumnEnd)
+      document.removeEventListener('mouseleave', this.resizeColumnEnd)
+
+      // The touch events don't propagate up to the sorting's onMouseDown event so
+      // no need to prevent it from happening or else the first click after a touch
+      // event resize will not sort the column.
+      if (!isTouch) {
+        this.setStateWithData({
+          skipNextSort: true,
+          currentlyResizing: false,
+        })
+      }
+    }
+
    resizeColumnMoving (event) {
-      event.stopPropagation()
      const { onResizedChange } = this.props
      const { resized, currentlyResizing } = this.getResolvedState()

@@ -687,31 +694,4 @@ export default Base =>
        }
      )
    }
-
-    resizeColumnEnd (event) {
-      event.stopPropagation()
-      let isTouch = event.type === 'touchend' || event.type === 'touchcancel'
-
-      if (isTouch) {
-        document.removeEventListener('touchmove', this.resizeColumnMoving)
-        document.removeEventListener('touchcancel', this.resizeColumnEnd)
-        document.removeEventListener('touchend', this.resizeColumnEnd)
-      }
-
-      // If its a touch event clear the mouse one's as well because sometimes
-      // the mouseDown event gets called as well, but the mouseUp event doesn't
-      document.removeEventListener('mousemove', this.resizeColumnMoving)
-      document.removeEventListener('mouseup', this.resizeColumnEnd)
-      document.removeEventListener('mouseleave', this.resizeColumnEnd)
-
-      // The touch events don't propagate up to the sorting's onMouseDown event so
-      // no need to prevent it from happening or else the first click after a touch
-      // event resize will not sort the column.
-      if (!isTouch) {
-        this.setStateWithData({
-          skipNextSort: true,
-          currentlyResizing: false,
-        })
-      }
-    }
  }
@@ -4,9 +4,7 @@ import classnames from 'classnames'
 // import _ from './utils'

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

 export default class ReactTablePagination extends Component {
  constructor (props) {
@@ -85,28 +83,26 @@ export default class ReactTablePagination extends Component {
            {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>}{' '}
+                  <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>
@@ -19,7 +19,6 @@ export default {
  compactObject,
  isSortingDesc,
  normalizeComponent,
-  asPx,
 }

 function get (obj, path, def) {
@@ -122,16 +121,11 @@ function sum (arr) {
  }, 0)
 }

-function makeTemplateComponent (compClass, displayName) {
-  if (!displayName) {
-    throw new Error('No displayName found for template component:', compClass)
-  }
-  const cmp = ({ children, className, ...rest }) =>
+function makeTemplateComponent (compClass) {
+  return ({ children, className, ...rest }) =>
    <div className={classnames(compClass, className)} {...rest}>
      {children}
    </div>
-  cmp.displayName = displayName
-  return cmp
 }

 function groupBy (xs, key) {
@@ -143,11 +137,6 @@ function groupBy (xs, key) {
  }, {})
 }

-function asPx (value) {
-  value = Number(value)
-  return Number.isNaN(value) ? null : value + 'px'
-}
-
 function isArray (a) {
  return Array.isArray(a)
 }
@@ -159,8 +148,8 @@ function isArray (a) {
 function makePathArray (obj) {
  return flattenDeep(obj)
    .join('.')
-    .replace(/\[/g, '.')
-    .replace(/\]/g, '')
+    .replace('[', '.')
+    .replace(']', '')
    .split('.')
 }

@@ -179,7 +168,7 @@ function splitProps ({ className, style, ...rest }) {
  return {
    className,
    style,
-    rest: rest || {},
+    rest,
  }
 }

@@ -57,10 +57,6 @@ ansi-escapes@^1.1.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"

-ansi-escapes@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"
-
 ansi-regex@^2.0.0:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -856,10 +852,6 @@ balanced-match@^0.4.1:
  version "0.4.2"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"

-balanced-match@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
-
 base16@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
@@ -920,13 +912,6 @@ brace-expansion@^1.0.0:
    balanced-match "^0.4.1"
    concat-map "0.0.1"

-brace-expansion@^1.1.7:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
-  dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
 braces@^1.8.2:
  version "1.8.5"
  resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
@@ -1120,12 +1105,6 @@ cli-cursor@^1.0.1:
  dependencies:
    restore-cursor "^1.0.1"

-cli-cursor@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
-  dependencies:
-    restore-cursor "^2.0.0"
-
 cli-width@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
@@ -1170,7 +1149,7 @@ concat-map@0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"

-concat-stream@^1.5.2, concat-stream@^1.6.0:
+concat-stream@^1.5.2:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
  dependencies:
@@ -1293,11 +1272,11 @@ debug-log@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/debug-log/-/debug-log-1.0.1.tgz#2307632d4c04382b8df8a32f70b895046d52745f"

-debug@*, debug@^2.1.1, debug@^2.2.0, debug@^2.6.8:
-  version "2.6.8"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+debug@*, debug@^2.1.1, debug@^2.2.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.0.tgz#bc596bcabe7617f11d9fa15361eded5608b8499b"
  dependencies:
-    ms "2.0.0"
+    ms "0.7.2"

 debug@2.2.0, debug@~2.2.0:
  version "2.2.0"
@@ -1368,10 +1347,6 @@ detect-indent@^4.0.0:
  dependencies:
    repeating "^2.0.0"

-diacritic@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/diacritic/-/diacritic-0.0.2.tgz#fc2a887b5a5bc0a0a854fb614c7c2f209061ee04"
-
 diffie-hellman@^5.0.0:
  version "5.0.2"
  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
@@ -1600,51 +1575,6 @@ eslint-plugin-standard@~3.0.1:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-3.0.1.tgz#34d0c915b45edc6f010393c7eef3823b08565cf2"

-eslint-scope@^3.7.1:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
-  dependencies:
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
-
-eslint@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.1.1.tgz#facbdfcfe3e0facd3a8b80dc98c4e6c13ae582df"
-  dependencies:
-    babel-code-frame "^6.22.0"
-    chalk "^1.1.3"
-    concat-stream "^1.6.0"
-    debug "^2.6.8"
-    doctrine "^2.0.0"
-    eslint-scope "^3.7.1"
-    espree "^3.4.3"
-    esquery "^1.0.0"
-    estraverse "^4.2.0"
-    esutils "^2.0.2"
-    file-entry-cache "^2.0.0"
-    glob "^7.1.2"
-    globals "^9.17.0"
-    ignore "^3.3.3"
-    imurmurhash "^0.1.4"
-    inquirer "^3.0.6"
-    is-my-json-valid "^2.16.0"
-    is-resolvable "^1.0.0"
-    js-yaml "^3.8.4"
-    json-stable-stringify "^1.0.1"
-    levn "^0.3.0"
-    lodash "^4.17.4"
-    minimatch "^3.0.2"
-    mkdirp "^0.5.1"
-    natural-compare "^1.4.0"
-    optionator "^0.8.2"
-    path-is-inside "^1.0.2"
-    pluralize "^4.0.0"
-    progress "^2.0.0"
-    require-uncached "^1.0.3"
-    strip-json-comments "~2.0.1"
-    table "^4.0.1"
-    text-table "~0.2.0"
-
 eslint@~3.19.0:
  version "3.19.0"
  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.19.0.tgz#c8fc6201c7f40dd08941b87c085767386a679acc"
@@ -1685,16 +1615,16 @@ eslint@~3.19.0:
    text-table "~0.2.0"
    user-home "^2.0.0"

-espree@^3.4.0, espree@^3.4.3:
+espree@^3.4.0:
  version "3.4.3"
  resolved "https://registry.yarnpkg.com/espree/-/espree-3.4.3.tgz#2910b5ccd49ce893c2ffffaab4fd8b3a31b82374"
  dependencies:
    acorn "^5.0.1"
    acorn-jsx "^3.0.0"

-esprima@^3.1.1:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+esprima@^2.6.0:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"

 esquery@^1.0.0:
  version "1.0.0"
@@ -1770,14 +1700,6 @@ extend@~3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.0.tgz#5a474353b9f3353ddd8176dfd37b91c83a46f1d4"

-external-editor@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.0.4.tgz#1ed9199da9cbfe2ef2f7a31b2fde8b0d12368972"
-  dependencies:
-    iconv-lite "^0.4.17"
-    jschardet "^1.4.2"
-    tmp "^0.0.31"
-
 extglob@^0.3.1:
  version "0.3.2"
  resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
@@ -1823,12 +1745,6 @@ figures@^1.3.5:
    escape-string-regexp "^1.0.5"
    object-assign "^4.1.0"

-figures@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
 file-entry-cache@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
@@ -2010,7 +1926,7 @@ glob-parent@^2.0.0:
  dependencies:
    is-glob "^2.0.0"

-glob@7.0.x:
+glob@7.0.x, glob@^7.0.0, glob@^7.0.3, glob@^7.0.5:
  version "7.0.6"
  resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
  dependencies:
@@ -2041,24 +1957,9 @@ glob@^6.0.1:
    once "^1.3.0"
    path-is-absolute "^1.0.0"

-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-global-object@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/global-object/-/global-object-1.0.0.tgz#2a1b45e901d55e4773154f12f0cec1ef9aba5f9f"
-
-globals@^9.0.0, globals@^9.14.0, globals@^9.17.0:
-  version "9.18.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+globals@^9.0.0, globals@^9.14.0:
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"

 globby@^4.1.0:
  version "4.1.0"
@@ -2161,17 +2062,17 @@ https-browserify@0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"

-iconv-lite@^0.4.17, iconv-lite@~0.4.13:
-  version "0.4.18"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2"
+iconv-lite@~0.4.13:
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"

 ieee754@^1.1.4:
  version "1.1.8"
  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"

-ignore@^3.0.11, ignore@^3.0.9, ignore@^3.2.0, ignore@^3.3.3:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
+ignore@^3.0.11, ignore@^3.0.9, ignore@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.0.tgz#8d88f03c3002a0ac52114db25d2c673b0bf1e435"

 imurmurhash@^0.1.4:
  version "0.1.4"
@@ -2224,25 +2125,6 @@ inquirer@^0.12.0:
    strip-ansi "^3.0.0"
    through "^2.3.6"

-inquirer@^3.0.6:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.1.1.tgz#87621c4fba4072f48a8dd71c9f9df6f100b2d534"
-  dependencies:
-    ansi-escapes "^2.0.0"
-    chalk "^1.0.0"
-    cli-cursor "^2.1.0"
-    cli-width "^2.0.0"
-    external-editor "^2.0.4"
-    figures "^2.0.0"
-    lodash "^4.3.0"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rx-lite "^4.0.8"
-    rx-lite-aggregates "^4.0.8"
-    string-width "^2.0.0"
-    strip-ansi "^3.0.0"
-    through "^2.3.6"
-
 interpret@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c"
@@ -2325,9 +2207,9 @@ is-glob@^2.0.0, is-glob@^2.0.1:
  dependencies:
    is-extglob "^1.0.0"

-is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4, is-my-json-valid@^2.16.0:
-  version "2.16.0"
-  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.16.0.tgz#f079dd9bfdae65ee2038aae8acbc86ab109e3693"
+is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz#936edda3ca3c211fd98f3b2d3e08da43f7b2915b"
  dependencies:
    generate-function "^2.0.0"
    generate-object-property "^1.1.0"
@@ -2364,10 +2246,6 @@ is-primitive@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"

-is-promise@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
-
 is-property@^1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
@@ -2437,21 +2315,17 @@ js-tokens@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.0.tgz#a2f2a969caae142fb3cd56228358c89366957bd1"

-js-yaml@^3.5.1, js-yaml@^3.8.4:
-  version "3.8.4"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.8.4.tgz#520b4564f86573ba96662af85a8cafa7b4b5a6f6"
+js-yaml@^3.5.1:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
  dependencies:
    argparse "^1.0.7"
-    esprima "^3.1.1"
+    esprima "^2.6.0"

 jsbn@~0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.0.tgz#650987da0dd74f4ebf5a11377a2aa2d273e97dfd"

-jschardet@^1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/jschardet/-/jschardet-1.4.2.tgz#2aa107f142af4121d145659d44f50830961e699a"
-
 jsesc@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
@@ -2584,7 +2458,7 @@ lodash.pickby@^4.0.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"

-lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
+lodash@^4.0.0, lodash@^4.14.0, lodash@^4.2.0, lodash@^4.3.0:
  version "4.17.4"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"

@@ -2626,13 +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"

-match-sorter@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-1.8.0.tgz#29a2732fd6ea1ae7d3f02e592a533597fee5a38f"
-  dependencies:
-    diacritic "0.0.2"
-    global-object "1.0.0"
-
 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"
@@ -2690,26 +2557,16 @@ mime-types@^2.1.12, mime-types@~2.1.7:
  dependencies:
    mime-db "~1.26.0"

-mimic-fn@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
-
 minimalistic-assert@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"

-"minimatch@2 || 3", minimatch@^3.0.2:
+"minimatch@2 || 3", minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.3.tgz#2a4e4090b96b2db06a9d7df01055a62a77c9b774"
  dependencies:
    brace-expansion "^1.0.0"

-minimatch@^3.0.0, minimatch@^3.0.3, minimatch@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  dependencies:
-    brace-expansion "^1.1.7"
-
 minimist@0.0.8:
  version "0.0.8"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
@@ -2728,18 +2585,14 @@ ms@0.7.1:
  version "0.7.1"
  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"

-ms@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+ms@0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"

 mute-stream@0.0.5:
  version "0.0.5"
  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"

-mute-stream@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
-
 nan@^2.3.0:
  version "2.5.1"
  resolved "https://registry.yarnpkg.com/nan/-/nan-2.5.1.tgz#d5b01691253326a97a2bbee9e61c55d8d60351e2"
@@ -2909,12 +2762,6 @@ onetime@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"

-onetime@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
-  dependencies:
-    mimic-fn "^1.0.0"
-
 optionator@^0.8.2:
  version "0.8.2"
  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
@@ -2940,7 +2787,7 @@ os-locale@^1.4.0:
  dependencies:
    lcid "^1.0.0"

-os-tmpdir@^1.0.1, os-tmpdir@~1.0.1:
+os-tmpdir@^1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"

@@ -3013,7 +2860,7 @@ path-is-absolute@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"

-path-is-inside@^1.0.1, path-is-inside@^1.0.2:
+path-is-inside@^1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"

@@ -3082,10 +2929,6 @@ pluralize@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"

-pluralize@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-4.0.0.tgz#59b708c1c0190a2f692f1c7618c446b052fd1762"
-
 postcss-cli@^2.6.0:
  version "2.6.0"
  resolved "https://registry.yarnpkg.com/postcss-cli/-/postcss-cli-2.6.0.tgz#f0de393caa026fcfc1b1479822989af508ed515d"
@@ -3137,10 +2980,6 @@ progress@^1.1.8:
  version "1.1.8"
  resolved "https://registry.yarnpkg.com/progress/-/progress-1.1.8.tgz#e260c78f6161cdd9b0e56cc3e0a85de17c7a57be"

-progress@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
-
 promise@^7.1.1:
  version "7.1.1"
  resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
@@ -3418,7 +3257,7 @@ require-main-filename@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"

-require-uncached@^1.0.2, require-uncached@^1.0.3:
+require-uncached@^1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
  dependencies:
@@ -3440,13 +3279,6 @@ restore-cursor@^1.0.1:
    exit-hook "^1.0.0"
    onetime "^1.0.0"

-restore-cursor@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
-  dependencies:
-    onetime "^2.0.0"
-    signal-exit "^3.0.2"
-
 right-align@^0.1.1:
  version "0.1.3"
  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
@@ -3475,26 +3307,10 @@ run-async@^0.1.0:
  dependencies:
    once "^1.3.0"

-run-async@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
-  dependencies:
-    is-promise "^2.1.0"
-
 run-parallel@^1.1.2:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.6.tgz#29003c9a2163e01e2d2dfc90575f2c6c1d61a039"

-rx-lite-aggregates@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
-  dependencies:
-    rx-lite "*"
-
-rx-lite@*, rx-lite@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
-
 rx-lite@^3.1.2:
  version "3.1.2"
  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
@@ -3556,7 +3372,7 @@ shelljs@^0.7.5:
    interpret "^1.0.0"
    rechoir "^0.6.2"

-signal-exit@^3.0.0, signal-exit@^3.0.2:
+signal-exit@^3.0.0:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"

@@ -3776,17 +3592,6 @@ table@^3.7.8:
    slice-ansi "0.0.4"
    string-width "^2.0.0"

-table@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/table/-/table-4.0.1.tgz#a8116c133fac2c61f4a420ab6cdf5c4d61f0e435"
-  dependencies:
-    ajv "^4.7.0"
-    ajv-keywords "^1.0.0"
-    chalk "^1.1.1"
-    lodash "^4.0.0"
-    slice-ansi "0.0.4"
-    string-width "^2.0.0"
-
 tapable@^0.2.5, tapable@~0.2.5:
  version "0.2.6"
  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.6.tgz#206be8e188860b514425375e6f1ae89bfb01fd8d"
@@ -3826,12 +3631,6 @@ timers-browserify@^2.0.2:
  dependencies:
    setimmediate "^1.0.4"

-tmp@^0.0.31:
-  version "0.0.31"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
-  dependencies:
-    os-tmpdir "~1.0.1"
-
 to-arraybuffer@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"