Fix source code in FixedHeader example

.eslintrc.js

@@ -4,14 +4,11 @@ module.exports = {
     ecmaFeatures: {
       experimentalObjectRestSpread: true,
       jsx: true,
-      node: false,
+      node: false
-      classes: true
     },
     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,

CHANGELOG.md

@@ -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 ` `

README.md

@@ -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
+  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]}
+    // 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
+    // row == the row of data supplied to the table
-    // 'column' == the column that the filter is on
+    // column == the column that the filter is on
-  filterAll: false
 }]
 ```
 
@@ -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.

docs/.eslintrc.js

@@ -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 }]
-  }
-}

docs/src/stories/ControlledTable.js

@@ -21,8 +21,7 @@ const columns = [{
   }, {
     Header: 'Last Name',
     id: 'lastName',
-    accessor: d => d.lastName,
+    accessor: d => d.lastName
-    width: 170
   }]
 }, {
   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.state = {
-    this.resetState = this.resetState.bind(this)
+      sorted: [],
-  }
+      page: 0,
-  resetState(){
+      pageSize: 10,
-    this.setState(makeDefaultState())
+      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>

docs/src/stories/Filtering.js

@@ -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 }),
+        firstName: namor.generate({words: 1, numbers: 0}),
-        lastName: 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() {
+  render () {
-    const columns = [
+    const columns = [{
-      {
+      Header: 'Name',
-        Header: 'Name',
+      columns: [{
-        columns: [
+        Header: 'First Name',
-          {
+        accessor: 'firstName',
-            Header: 'First Name',
+        filterMethod: (filter, row) => (row[filter.id].startsWith(filter.value) && row[filter.id].endsWith(filter.value))
-            accessor: 'firstName',
+      }, {
-            filterMethod: (filter, row) =>
+        Header: 'Last Name',
-              row[filter.id].startsWith(filter.value) &&
+        id: 'lastName',
-              row[filter.id].endsWith(filter.value)
+        accessor: d => d.lastName,
-          },
+        filterMethod: (filter, row) => (row[filter.id].includes(filter.value))
-          {
+      }]
-            Header: 'Last Name',
+    }, {
-            id: 'lastName',
+      Header: 'Info',
-            accessor: d => d.lastName,
+      columns: [{
-            filterMethod: (filter, rows) =>
+        Header: 'Age',
-              matchSorter(rows, filter.value, { keys: ['lastName'] }),
+        accessor: 'age'
-            filterAll: true
+      }, {
+        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
-      {
-        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>
           }
-        ]
+          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]
+                Object.keys(this.state.tableOptions).map(optionKey => {
-                return (
+                  const optionValue = this.state.tableOptions[optionKey]
-                  <tr key={optionKey}>
+                  return (
-                    <td>
+                    <tr key={optionKey}>
-                      {optionKey}
+                      <td>{optionKey}</td>
-                    </td>
+                      <td style={{paddingLeft: 10, paddingTop: 5}}>
-                    <td style={{ paddingLeft: 10, paddingTop: 5 }}>
+                        <input type='checkbox'
-                      <input
+                          name={optionKey}
-                        type="checkbox"
+                          checked={optionValue}
-                        name={optionKey}
+                          onChange={this.setTableOption}
-                        checked={optionValue}
+                        />
-                        onChange={this.setTableOption}
+                      </td>
-                      />
+                    </tr>
-                    </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) =>
+            defaultFilterMethod={(filter, row) => (String(row[filter.id]) === filter.value)}
-              String(row[filter.id]) === filter.value}
             {...this.state.tableOptions}
-            SubComponent={row => {
+            SubComponent={(row) => {
               return (
-                <div style={{ padding: '20px' }}>
+                <div style={{padding: '20px'}}>
-                  <em>
+                  <em>You can put any component you want here, even another React Table!</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>
+                          <CodeHighlight>{() => JSON.stringify(row, null, 2)}</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>
+          <p>The default filter for all columns of a table if it is not specified in the configuration is set to match
-            The default filter for all columns of a table if it is not specified
+          on values that start with the filter text. Example: age.startsWith("2").</p>
-            in the configuration is set to match on values that start with the
+          <p>This example overrides the default filter behavior by setting
-            filter text. Example: age.startsWith("2").
+            the <strong>defaultFilterMethod</strong> table option to match on values that are exactly equal to the
-          </p>
+          filter text. Example: age == "23")</p>
-          <p>
+          <p>Each column can also be customized with the column <strong>filterMethod</strong> option:</p>
-            This example overrides the default filter behavior by setting the{' '}
+          <p>In this example the firstName column filters on the value starting with and ending with the filter
-            <strong>defaultFilterMethod</strong> table option to match on values
+          value.</p>
-            that are exactly equal to the filter text. Example: age == "23")
+          <p>In this example the lastName column filters on the value including the filter value anywhere in its
-          </p>
+          text.</p>
-          <p>
+          <p>To completely override the filter that is shown, you can set the <strong>Filter</strong> column
-            Each column can also be customized with the column{' '}
+            option. Using this option you can specify the JSX that is shown. The option is passed
-            <strong>filterMethod</strong> option:
+            an <strong>onChange</strong> method that must be called with the value that you wan't to
-          </p>
+            pass to the <strong>filterMethod</strong> option whenever the filter has changed.</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>
         </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>
+    <CodeHighlight>{() => source}</CodeHighlight>
-      {() => source}
-    </CodeHighlight>
   </div>
+)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "6.5.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",
@@ -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",

src/defaultProps.js

@@ -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'),
+  TableComponent: _.makeTemplateComponent('rt-table'),
-  TheadComponent: _.makeTemplateComponent('rt-thead', 'Thead'),
+  TheadComponent: _.makeTemplateComponent('rt-thead'),
-  TbodyComponent: _.makeTemplateComponent('rt-tbody', 'Tbody'),
+  TbodyComponent: _.makeTemplateComponent('rt-tbody'),
-  TrGroupComponent: _.makeTemplateComponent('rt-tr-group', 'TrGroup'),
+  TrGroupComponent: _.makeTemplateComponent('rt-tr-group'),
-  TrComponent: _.makeTemplateComponent('rt-tr', 'Tr'),
+  TrComponent: _.makeTemplateComponent('rt-tr'),
   ThComponent: ({ toggleSort, className, children, ...rest }) => {
     return (
       <div
@@ -189,8 +188,8 @@ export default {
       </div>
     )
   },
-  TdComponent: _.makeTemplateComponent('rt-td', 'Td'),
+  TdComponent: _.makeTemplateComponent('rt-td'),
-  TfootComponent: _.makeTemplateComponent('rt-tfoot', 'Tfoot'),
+  TfootComponent: _.makeTemplateComponent('rt-tfoot'),
   FilterComponent: ({ filter, onChange }) =>
     <input
       type='text'
@@ -205,23 +204,16 @@ export default {
       &bull;
     </div>,
   PivotValueComponent: ({ subRows, value }) =>
-    <span>
+    <span>{value} {subRows && `(${subRows.length})`}</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]}
+          {row[column.id]}{i < subRows.length - 1 ? ', ' : ''}
-          {i < subRows.length - 1 ? ', ' : ''}
         </span>
       )
-    return (
+    return <span>{previewValues}</span>
-      <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'),
+  NoDataComponent: _.makeTemplateComponent('rt-noData'),
-  ResizerComponent: _.makeTemplateComponent('rt-resizer', 'Resizer'),
+  ResizerComponent: _.makeTemplateComponent('rt-resizer'),
   PadRowComponent: () => <span>&nbsp;</span>,
 }

src/index.js

@@ -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),
+        width: `${width}px`,
-        maxWidth: _.asPx(maxWidth),
+        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 =
+      const show = typeof column.show === 'function'
-        typeof column.show === 'function' ? column.show() : column.show
+        ? 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
+        ? <ResizerComponent
-          onMouseDown={e => this.resizeColumnStart(e, column, false)}
+            onMouseDown={e => this.resizeColumnStart(column, e, false)}
-          onTouchStart={e => this.resizeColumnStart(e, column, true)}
+            onTouchStart={e => this.resizeColumnStart(column, e, true)}
-          {...resizerProps}
+            {...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),
+            width: `${width}px`,
-            maxWidth: _.asPx(maxWidth),
+            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),
+            width: `${width}px`,
-            maxWidth: _.asPx(maxWidth),
+            maxWidth: `${maxWidth}px`
           }}
           {...rest}
         >
           {isFilterable
             ? _.normalizeComponent(
-              ResolvedFilterComponent,
+                ResolvedFilterComponent,
-              {
+                {
-                column,
+                  column,
-                filter,
+                  filter,
-                onChange: value => this.filterColumn(column, value),
+                  onChange: value => this.filterColumn(column, value)
-              },
+                },
-              defaultProps.column.Filter
+                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 =
+              const show = typeof column.show === 'function'
-                typeof column.show === 'function' ? column.show() : column.show
+                ? 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) {
+                if (cellInfo.pivoted) {
-                  cellInfo.expandable = false
+                  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,21 +695,6 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                 }
               }
 
-              // 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 = {}
-
-              if (tdProps.rest.onClick) {
-                interactionProps.onClick = e => {
-                  tdProps.rest.onClick(e, () => onExpanderClick(e))
-                }
-              }
-
-              if (columnProps.rest.onClick) {
-                interactionProps.onClick = e => {
-                  columnProps.rest.onClick(e, () => onExpanderClick(e))
-                }
-              }
-
               // Return the cell
               return (
                 <TdComponent
@@ -714,11 +708,10 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                   style={{
                     ...styles,
                     flex: `${width} 0 auto`,
-                    width: _.asPx(width),
+                    width: `${width}px`,
-                    maxWidth: _.asPx(maxWidth),
+                    maxWidth: `${maxWidth}px`
                   }}
                   {...tdProps.rest}
-                  {...columnProps.rest}
                   {...interactionProps}
                 >
                   {resolvedCell}
@@ -767,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 =
+      const show = typeof column.show === 'function'
-        typeof column.show === 'function' ? column.show() : column.show
+        ? column.show()
+        : column.show
       let width = _.getFirstDefined(
         resizedCol.value,
         column.width,
@@ -790,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 (
@@ -806,8 +800,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
           style={{
             ...styles,
             flex: `${flex} 0 auto`,
-            width: _.asPx(width),
+            width: `${width}px`,
-            maxWidth: _.asPx(maxWidth),
+            maxWidth: `${maxWidth}px`
           }}
           {...tdProps.rest}
         >
@@ -826,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}
         >
@@ -843,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 =
+      const show = typeof column.show === 'function'
-        typeof column.show === 'function' ? column.show() : column.show
+        ? column.show()
+        : column.show
       const width = _.getFirstDefined(
         resizedCol.value,
         column.width,
@@ -869,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 (
@@ -886,8 +881,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
           style={{
             ...styles,
             flex: `${width} 0 auto`,
-            width: _.asPx(width),
+            width: `${width}px`,
-            maxWidth: _.asPx(maxWidth),
+            maxWidth: `${maxWidth}px`
           }}
           {...columnProps.rest}
           {...tFootTdProps.rest}
@@ -895,7 +890,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
         >
           {_.normalizeComponent(column.Footer, {
             data: sortedData,
-            column: column,
+            column: column
           })}
         </TdComponent>
       )
@@ -940,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'>
+            ? <div className="pagination-top">
-              {pagination}
+                {pagination}
-            </div>
+              </div>
             : null}
           <TableComponent
             className={classnames(
@@ -964,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}
             >
@@ -974,9 +969,9 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
             {hasColumnFooter ? makeColumnFooters() : null}
           </TableComponent>
           {showPagination && showPaginationBottom
-            ? <div className='pagination-bottom'>
+            ? <div className="pagination-bottom">
-              {pagination}
+                {pagination}
-            </div>
+              </div>
             : null}
           {!pageRows.length &&
             <NoDataComponent {...noDataProps}>

src/index.styl

@@ -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

src/lifecycle.js

@@ -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, () => {
+      return this.setState(newResolvedState, cb)
-        cb && cb()
-        if (
-          oldState.page !== newResolvedState.page ||
-          oldState.pageSize !== newResolvedState.pageSize ||
-          oldState.sorted !== newResolvedState.sorted ||
-          oldState.filtered !== newResolvedState.filtered
-        ) {
-          this.fireFetchData()
-        }
-      })
     }
   }

src/methods.js

@@ -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 decorateAndAddToAll = col => {
-        const decoratedColumn = makeDecoratedColumn(column, parentColumn)
+        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(
+              this.filterData(
-              resolvedData,
+                resolvedData,
-              filtered,
+                filtered,
-              defaultFilterMethod,
+                defaultFilterMethod,
-              allVisibleColumns
+                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
+            column = allVisibleColumns.find(x => x.id === nextFilter.id)
-          if (!column || column.filterable === false) {
-            return filteredSoFar
-          }
 
-          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
+            const filterMethod = column.filterMethod || defaultFilterMethod
-          if (column.filterAll) {
+
-            return filterMethod(nextFilter, filteredSoFar, column)
+            return filterMethod(nextFilter, row, column)
-          } else {
+          })
-            return filteredSoFar.filter(row => {
-              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:
+          page: (!sorted.length && newSorted.length) || !additive
-            (!sorted.length && newSorted.length) || !additive
+            ? 0
-              ? 0
+            : this.state.page,
-              : 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) {
+    resizeColumnStart (column, event, isTouch) {
-      event.stopPropagation()
       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,
-        })
-      }
-    }
   }

src/pagination.js

@@ -4,9 +4,7 @@ import classnames from 'classnames'
 // import _ from './utils'
 
 const defaultButton = props =>
-  <button type='button' {...props} className='-btn'>
+  <button type='button' {...props} className='-btn'>{props.children}</button>
-    {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
+                  <input
-                  type={this.state.page === '' ? 'text' : 'number'}
+                    type={this.state.page === '' ? 'text' : 'number'}
-                  onChange={e => {
+                    onChange={e => {
-                    const val = e.target.value
+                      const val = e.target.value
-                    const page = val - 1
+                      const page = val - 1
-                    if (val === '') {
+                      if (val === '') {
-                      return this.setState({ page: val })
+                        return this.setState({ page: val })
-                    }
+                      }
-                    this.setState({ page: this.getSafePage(page) })
+                      this.setState({ page: this.getSafePage(page) })
-                  }}
+                    }}
-                  value={this.state.page === '' ? '' : this.state.page + 1}
+                    value={this.state.page === '' ? '' : this.state.page + 1}
-                  onBlur={this.applyPage}
+                    onBlur={this.applyPage}
-                  onKeyPress={e => {
+                    onKeyPress={e => {
-                    if (e.which === 13 || e.keyCode === 13) {
+                      if (e.which === 13 || e.keyCode === 13) {
-                      this.applyPage()
+                        this.applyPage()
-                    }
+                      }
-                  }}
+                    }}
-                />
+                  />
-              </div>
+                </div>
-              : <span className='-currentPage'>
+              : <span className='-currentPage'>{page + 1}</span>}{' '}
-                {page + 1}
-              </span>}{' '}
             {this.props.ofText}{' '}
             <span className='-totalPages'>{pages || 1}</span>
           </span>

src/utils.js

@@ -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) {
+function makeTemplateComponent (compClass) {
-  if (!displayName) {
+  return ({ children, className, ...rest }) =>
-    throw new Error('No displayName found for template component:', compClass)
-  }
-  const cmp = ({ 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('[', '.')
-    .replace(/\]/g, '')
+    .replace(']', '')
     .split('.')
 }
 
@@ -179,7 +168,7 @@ function splitProps ({ className, style, ...rest }) {
   return {
     className,
     style,
-    rest: rest || {},
+    rest,
   }
 }
 

yarn.lock

@@ -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:
+debug@*, debug@^2.1.1, debug@^2.2.0:
-  version "2.6.8"
+  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
+  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:
+esprima@^2.6.0:
-  version "3.1.3"
+  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+  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:
+globals@^9.0.0, globals@^9.14.0:
-  version "7.1.2"
+  version "9.14.0"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
-  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"
 
 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:
+iconv-lite@~0.4.13:
-  version "0.4.18"
+  version "0.4.15"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2"
+  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:
+ignore@^3.0.11, ignore@^3.0.9, ignore@^3.2.0:
-  version "3.3.3"
+  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
+  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:
+is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
-  version "2.16.0"
+  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.16.0.tgz#f079dd9bfdae65ee2038aae8acbc86ab109e3693"
+  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:
+js-yaml@^3.5.1:
-  version "3.8.4"
+  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.8.4.tgz#520b4564f86573ba96662af85a8cafa7b4b5a6f6"
+  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:
+ms@0.7.2:
-  version "2.0.0"
+  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  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"