6.7.0

* add npm as option for installing

* Update README.md

.eslintrc.js

@@ -1,77 +1,3 @@
 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 }]
-  }
+  extends: 'react-tools'
 }

README.md

@@ -74,7 +74,11 @@
 ## Installation
 1. Install React Table as a dependency
 ```bash
+# Yarn
 $ yarn add react-table
+
+# NPM
+$ npm install react-table
 ```
 2. Import the `react-table` module
 ```javascript
@@ -178,7 +182,7 @@ These are all of the available props (and their default values) for the main `<R
     const id = filter.pivotId || filter.id
     return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true
   },
-  defaultSortMethod: (a, b) => {
+  defaultSortMethod: (a, b, desc) => {
     // force null and undefined to the bottom
     a = (a === null || a === undefined) ? -Infinity : a
     b = (b === null || b === undefined) ? -Infinity : b
@@ -486,7 +490,7 @@ const columns = [{
   }, {
     Header: 'Food',
     accessor: 'favorites.food'
-  } {
+  }, {
     Header: 'Actor',
     accessor: 'favorites.actor'
   }]
@@ -837,9 +841,9 @@ To override the sorting algorithm for a single column, use the `sortMethod` colu
 Supply a function that implements the native javascript [`Array.sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) interface. This is React Table's default sorting algorithm:
 - `a` the first value to compare
 - `b` the second value to compare
-- `dir` the
+- `desc` true if sort is descending, false if ascending
 ```javascript
-defaultSortMethod = (a, b) => {
+defaultSortMethod = (a, b, desc) => {
   // force null and undefined to the bottom
   a = (a === null || a === undefined) ? -Infinity : a
   b = (b === null || b === undefined) ? -Infinity : b
@@ -871,7 +875,7 @@ By default, `filterMethod` is passed a single row of data at a time, and you are
 
 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.
+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 want 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.
 
@@ -886,7 +890,7 @@ Object.assign(ReactTableDefaults, {
   TbodyComponent: component,
   TrGroupComponent: component,
   TrComponent: component,
-  ThComponent: component
+  ThComponent: component,
   TdComponent: component,
   TfootComponent: component,
   ExpanderComponent: component,

docs/package.json

@@ -3,8 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "react-scripts": "0.9.5",
-    "standard": "^10.0.2",
     "autoprefixer": "^6.7.0",
     "babel-cli": "6.14.0",
     "babel-eslint": "6.1.2",
@@ -21,10 +19,10 @@
     "react-json-tree": "^0.10.9",
     "rimraf": "^2.6.1",
     "standard": "^10.0.2",
-    "stylus": "^0.54.5",
-    "webpack": "^2.5.1"
+    "stylus": "^0.54.5"
   },
   "dependencies": {
+    "eslint-config-react-tools": "^1.0.10",
     "github-markdown-css": "^2.6.0",
     "marked": "^0.3.6",
     "namor": "^1.0.1",
@@ -32,6 +30,8 @@
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-json-tree": "^0.10.9",
+    "react-script": "^2.0.5",
+    "react-scripts": "^0.9.5",
     "react-story": "^0.0.10"
   },
   "scripts": {

docs/src/App.js

@@ -63,7 +63,7 @@ export default class App extends React.Component {
           height: '100%',
         }}
         pathPrefix='story/'
-        StoryWrapper={props =>
+        StoryWrapper={props => (
           <defaultProps.StoryWrapper
             css={{
               padding: 0,
@@ -95,7 +95,8 @@ export default class App extends React.Component {
                 position: 'relative',
               }}
             />
-          </defaultProps.StoryWrapper>}
+          </defaultProps.StoryWrapper>
+        )}
         stories={stories}
       />
     )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "6.5.3",
+  "version": "6.7.0",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/react-tools/react-table#readme",
@@ -35,10 +35,11 @@
     "prepublish": "npm run build && npm run umd",
     "postpublish": "git push --tags",
     "docs": "yarn watch & cd docs && yarn && yarn start",
-    "docs:build": "yarn build && cd docs && yarn && yarn run build"
+    "docs:build": "yarn build && cd docs && yarn && yarn build"
   },
   "dependencies": {
-    "classnames": "^2.2.5"
+    "classnames": "^2.2.5",
+    "eslint-config-react-tools": "^1.0.10"
   },
   "peerDependencies": {
     "react": "^15.x.x || ^16.x.x"
@@ -51,10 +52,16 @@
     "babel-preset-react": "6.11.1",
     "babel-preset-stage-2": "6.13.0",
     "eslint": "^4.1.1",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-react": "^7.4.0",
+    "eslint-plugin-standard": "^3.0.1",
     "match-sorter": "^1.8.0",
     "npm-run-all": "^3.1.1",
     "onchange": "^3.0.2",
     "postcss-cli": "^2.6.0",
+    "prop-types": "^15.6.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-json-tree": "^0.10.9",

src/defaultProps.js

@@ -35,7 +35,7 @@ export default {
       ? String(row[id]).startsWith(filter.value)
       : true
   },
-  defaultSortMethod: (a, b) => {
+  defaultSortMethod: (a, b, desc) => {
     // force null and undefined to the bottom
     a = a === null || a === undefined ? '' : a
     b = b === null || b === undefined ? '' : b
@@ -191,7 +191,7 @@ export default {
   },
   TdComponent: _.makeTemplateComponent('rt-td', 'Td'),
   TfootComponent: _.makeTemplateComponent('rt-tfoot', 'Tfoot'),
-  FilterComponent: ({ filter, onChange }) =>
+  FilterComponent: ({ filter, onChange }) => (
     <input
       type='text'
       style={{
@@ -199,24 +199,27 @@ export default {
       }}
       value={filter ? filter.value : ''}
       onChange={event => onChange(event.target.value)}
-    />,
-  ExpanderComponent: ({ isExpanded }) =>
+    />
+  ),
+  ExpanderComponent: ({ isExpanded }) => (
     <div className={classnames('rt-expander', isExpanded && '-open')}>
       &bull;
-    </div>,
-  PivotValueComponent: ({ subRows, value }) =>
+    </div>
+  ),
+  PivotValueComponent: ({ subRows, value }) => (
     <span>
       {value} {subRows && `(${subRows.length})`}
-    </span>,
+    </span>
+  ),
   AggregatedComponent: ({ subRows, column }) => {
     const previewValues = subRows
       .filter(d => typeof d[column.id] !== 'undefined')
-      .map((row, i) =>
+      .map((row, i) => (
         <span key={i}>
           {row[column.id]}
           {i < subRows.length - 1 ? ', ' : ''}
         </span>
-      )
+      ))
     return (
       <span>
         {previewValues}
@@ -228,7 +231,7 @@ export default {
   PaginationComponent: Pagination,
   PreviousComponent: undefined,
   NextComponent: undefined,
-  LoadingComponent: ({ className, loading, loadingText, ...rest }) =>
+  LoadingComponent: ({ className, loading, loadingText, ...rest }) => (
     <div
       className={classnames('-loading', { '-active': loading }, className)}
       {...rest}
@@ -236,7 +239,8 @@ export default {
       <div className='-loading-inner'>
         {loadingText}
       </div>
-    </div>,
+    </div>
+  ),
   NoDataComponent: _.makeTemplateComponent('rt-noData', 'NoData'),
   ResizerComponent: _.makeTemplateComponent('rt-resizer', 'Resizer'),
   PadRowComponent: () => <span>&nbsp;</span>,

src/index.js

@@ -5,10 +5,12 @@ import _ from './utils'
 import Lifecycle from './lifecycle'
 import Methods from './methods'
 import defaultProps from './defaultProps'
+import propTypes from './propTypes'
 
 export const ReactTableDefaults = defaultProps
 
 export default class ReactTable extends Methods(Lifecycle(Component)) {
+  static propTypes = propTypes
   static defaultProps = defaultProps
 
   constructor (props) {
@@ -501,6 +503,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
         row: row,
         index: row[indexKey],
         viewIndex: ++rowIndex,
+        pageSize: pageSize,
+        page: page,
         level: path.length,
         nestingPath: path.concat([i]),
         aggregated: row[aggregatedKey],
@@ -614,11 +618,12 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
                 column.PivotValue || PivotValueComponent
               const DefaultResolvedPivotComponent =
                 PivotComponent ||
-                (props =>
+                (props => (
                   <div>
                     <ResolvedExpanderComponent {...props} />
                     <ResolvedPivotValueComponent {...props} />
-                  </div>)
+                  </div>
+                ))
               const ResolvedPivotComponent =
                 column.Pivot || DefaultResolvedPivotComponent
 

src/index.styl

@@ -2,6 +2,15 @@ $easeOutQuad = cubic-bezier(0.250, 0.460, 0.450, 0.940)
 $easeOutBack = cubic-bezier(0.175,  0.885, 0.320, 1.275)
 $expandSize = 7px
 
+input-select-style()
+  border: 1px solid rgba(0,0,0,0.1)
+  background: white
+  padding: 5px 7px
+  font-size: inherit
+  border-radius: 3px
+  font-weight: normal
+  outline:none
+
 .ReactTable
   position:relative
   display: flex
@@ -10,7 +19,7 @@ $expandSize = 7px
   *
     box-sizing: border-box
   .rt-table
-    flex: 1
+    flex: auto 1
     display: flex
     flex-direction: column
     align-items: stretch
@@ -34,6 +43,10 @@ $expandSize = 7px
     &.-filters
       border-bottom: 1px solid alpha(black, 0.05)
 
+      input
+      select
+        input-select-style();
+
       .rt-th
         border-right: 1px solid alpha(black, 0.02)
 
@@ -198,13 +211,7 @@ $expandSize = 7px
 
     input
     select
-      border: 1px solid rgba(0,0,0,0.1)
-      background: white
-      padding: 5px 7px
-      font-size: inherit
-      border-radius: 3px
-      font-weight: normal
-      outline:none
+      input-select-style()
 
     .-btn
       appearance:none

src/methods.js

@@ -412,11 +412,11 @@ export default Base =>
           // Support custom sorting methods for each column
           if (sortMethodsByColumnID[sort.id]) {
             return (a, b) => {
-              return sortMethodsByColumnID[sort.id](a[sort.id], b[sort.id])
+              return sortMethodsByColumnID[sort.id](a[sort.id], b[sort.id], sort.desc)
             }
           }
           return (a, b) => {
-            return this.props.defaultSortMethod(a[sort.id], b[sort.id])
+            return this.props.defaultSortMethod(a[sort.id], b[sort.id], sort.desc)
           }
         }),
         sorted.map(d => !d.desc),

src/pagination.js

@@ -3,10 +3,11 @@ import classnames from 'classnames'
 //
 // import _ from './utils'
 
-const defaultButton = props =>
+const defaultButton = props => (
   <button type='button' {...props} className='-btn'>
     {props.children}
   </button>
+)
 
 export default class ReactTablePagination extends Component {
   constructor (props) {

src/propTypes.js

@@ -0,0 +1,194 @@
+import PropTypes from 'prop-types'
+
+export default {
+  // General
+  data: PropTypes.array,
+  loading: PropTypes.bool,
+  showPagination: PropTypes.bool,
+  showPaginationTop: PropTypes.bool,
+  showPaginationBottom: PropTypes.bool,
+  showPageSizeOptions: PropTypes.bool,
+  pageSizeOptions: PropTypes.array,
+  defaultPageSize: PropTypes.number,
+  showPageJump: PropTypes.bool,
+  collapseOnSortingChange: PropTypes.bool,
+  collapseOnPageChange: PropTypes.bool,
+  collapseOnDataChange: PropTypes.bool,
+  freezeWhenExpanded: PropTypes.bool,
+  sortable: PropTypes.bool,
+  resizable: PropTypes.bool,
+  filterable: PropTypes.bool,
+  defaultSortDesc: PropTypes.bool,
+  defaultSorted: PropTypes.array,
+  defaultFiltered: PropTypes.array,
+  defaultResized: PropTypes.array,
+  defaultExpanded: PropTypes.object,
+  defaultFilterMethod: PropTypes.func,
+  defaultSortMethod: PropTypes.func,
+
+  // Controlled State Callbacks
+  onPageChange: PropTypes.func,
+  onPageSizeChange: PropTypes.func,
+  onSortedChange: PropTypes.func,
+  onFilteredChange: PropTypes.func,
+  onResizedChange: PropTypes.func,
+  onExpandedChange: PropTypes.func,
+
+  // Pivoting
+  pivotBy: PropTypes.array,
+
+  // Key Constants
+  pivotValKey: PropTypes.string,
+  pivotIDKey: PropTypes.string,
+  subRowsKey: PropTypes.string,
+  aggregatedKey: PropTypes.string,
+  nestingLevelKey: PropTypes.string,
+  originalKey: PropTypes.string,
+  indexKey: PropTypes.string,
+  groupedByPivotKey: PropTypes.string,
+
+  // Server-side Callbacks
+  onFetchData: PropTypes.func,
+
+  // Classes
+  className: PropTypes.string,
+  style: PropTypes.object,
+
+  // Component decorators
+  getProps: PropTypes.object,
+  getTableProps: PropTypes.object,
+  getTheadGroupProps: PropTypes.object,
+  getTheadGroupTrProps: PropTypes.object,
+  getTheadGroupThProps: PropTypes.object,
+  getTheadProps: PropTypes.object,
+  getTheadTrProps: PropTypes.object,
+  getTheadThProps: PropTypes.object,
+  getTheadFilterProps: PropTypes.object,
+  getTheadFilterTrProps: PropTypes.object,
+  getTheadFilterThProps: PropTypes.object,
+  getTbodyProps: PropTypes.object,
+  getTrGroupProps: PropTypes.object,
+  getTrProps: PropTypes.object,
+  getTdProps: PropTypes.object,
+  getTfootProps: PropTypes.object,
+  getTfootTrProps: PropTypes.object,
+  getTfootTdProps: PropTypes.object,
+  getPaginationProps: PropTypes.object,
+  getLoadingProps: PropTypes.object,
+  getNoDataProps: PropTypes.object,
+  getResizerProps: PropTypes.object,
+
+  // Global Column Defaults
+  columns: PropTypes.shape({
+    // Renderers
+    Cell: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string,
+      PropTypes.func,
+    ]),
+    Header: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string,
+      PropTypes.func,
+    ]),
+    Footer: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string,
+      PropTypes.func,
+    ]),
+    Aggregated: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string,
+      PropTypes.func,
+    ]),
+    Pivot: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string,
+      PropTypes.func,
+    ]),
+    PivotValue: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string,
+      PropTypes.func,
+    ]),
+    Expander: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string,
+      PropTypes.func,
+    ]),
+    Filter: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.func,
+    ]),
+
+    // All Columns
+    sortable: PropTypes.bool, // use table default
+    resizable: PropTypes.bool, // use table default
+    filterable: PropTypes.bool, // use table default
+    show: PropTypes.bool,
+    minWidth: PropTypes.number,
+
+    // Cells only
+    className: PropTypes.string,
+    style: PropTypes.object,
+    getProps: PropTypes.object,
+
+    // Pivot only
+    aggregate: PropTypes.func,
+
+    // Headers only
+    headerClassName: PropTypes.string,
+    headerStyle: PropTypes.object,
+    getHeaderProps: PropTypes.object,
+
+    // Footers only
+    footerClassName: PropTypes.string,
+    footerStyle: PropTypes.object,
+    getFooterProps: PropTypes.object,
+    filterMethod: PropTypes.func,
+    filterAll: PropTypes.bool,
+    sortMethod: PropTypes.func,
+  }),
+
+  // Global Expander Column Defaults
+  expanderDefaults: PropTypes.shape({
+    sortable: PropTypes.bool,
+    resizable: PropTypes.bool,
+    filterable: PropTypes.bool,
+    width: PropTypes.number,
+  }),
+
+  pivotDefaults: PropTypes.object,
+
+  // Text
+  previousText: PropTypes.string,
+  nextText: PropTypes.string,
+  loadingText: PropTypes.string,
+  noDataText: PropTypes.string,
+  pageText: PropTypes.string,
+  ofText: PropTypes.string,
+  rowsText: PropTypes.string,
+
+  // Components
+  TableComponent: PropTypes.element,
+  TheadComponent: PropTypes.element,
+  TbodyComponent: PropTypes.element,
+  TrGroupComponent: PropTypes.element,
+  TrComponent: PropTypes.element,
+  ThComponent: PropTypes.element,
+  TdComponent: PropTypes.element,
+  TfootComponent: PropTypes.element,
+  FilterComponent: PropTypes.element,
+  ExpanderComponent: PropTypes.element,
+  PivotValueComponent: PropTypes.element,
+  AggregatedComponent: PropTypes.element,
+  PivotComponent: PropTypes.element, // this is a computed default generated using
+  // the ExpanderComponent and PivotValueComponent at run-time in methods.js
+  PaginationComponent: PropTypes.element,
+  PreviousComponent: PropTypes.element,
+  NextComponent: PropTypes.element,
+  LoadingComponent: PropTypes.element,
+  NoDataComponent: PropTypes.element,
+  ResizerComponent: PropTypes.element,
+  PadRowComponent: PropTypes.element,
+}

src/utils.js

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