Merge pull request #1 from react-tools/master

Update to 6.7.4 from original
2026-03-31 09:54:30 +00:00 · 2017-11-03 21:47:52 +11:00
parent 2630161222 adc07de817
commit d0bd56729b
14 changed files with 1892 additions and 992 deletions
--- a/.eslintrc.js
+++ b/.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'
 }
--- a/README.md
+++ b/README.md
@@ -5,7 +5,6 @@
 # React Table
 `react-table` is a **lightweight, fast and extendable datagrid** built for React

-
 <a href="https://travis-ci.org/react-tools/react-table" target="\_parent">
  <img alt="" src="https://travis-ci.org/react-tools/react-table.svg?branch=master" />
 </a>
@@ -75,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
@@ -179,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
@@ -309,7 +312,7 @@ These are all of the available props (and their default values) for the main `<R
  previousText: 'Previous',
  nextText: 'Next',
  loadingText: 'Loading...',
-  noDataText: 'No rows found',  
+  noDataText: 'No rows found',
  pageText: 'Page',
  ofText: 'of',
  rowsText: 'rows',
@@ -487,7 +490,7 @@ const columns = [{
  }, {
    Header: 'Food',
    accessor: 'favorites.food'
-  } {
+  }, {
    Header: 'Actor',
    accessor: 'favorites.actor'
  }]
@@ -577,6 +580,8 @@ Every single built-in component's props can be dynamically extended using any on
 />
 ```

+If used, **a callback prop must return an valid object**, even if it's an empty one.
+
 These callbacks are executed with each render of the element with four parameters:
 1. Table State
 2. RowInfo (undefined if not applicable)
@@ -754,7 +759,7 @@ Here are the props and their corresponding callbacks that control the state of t
      id: 'firstName',
      desc: true
  }]}
-  expandedRows={{ // The nested row indexes on the current page that should appear expanded
+  expanded={{ // The nested row indexes on the current page that should appear expanded
    1: true,
    4: true,
    5: {
@@ -766,7 +771,7 @@ Here are the props and their corresponding callbacks that control the state of t
    id: 'lastName',
    value: 'linsley'
  }]}
-  resizing={[{ // the current resized column model
+  resized={[{ // the current resized column model
    "id": "lastName",
    "value": 446.25
  }]}
@@ -775,7 +780,7 @@ Here are the props and their corresponding callbacks that control the state of t
  onPageChange={(pageIndex) => {...}} // Called when the page index is changed by the user
  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`
+  onExpandedChange={(newExpanded, index, event) => {...}} // Called when an expander is clicked. Use this to manage `expanded`
  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.
  onResizedChange={(newResized, event) => {...}} // Called when a user clicks on a resizing component (the right edge of a column header)
 />
@@ -836,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
@@ -870,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.

@@ -885,7 +890,7 @@ Object.assign(ReactTableDefaults, {
  TbodyComponent: component,
  TrGroupComponent: component,
  TrComponent: component,
-  ThComponent: component
+  ThComponent: component,
  TdComponent: component,
  TfootComponent: component,
  ExpanderComponent: component,
--- a/docs/package.json
+++ b/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": {
--- a/docs/src/App.js
+++ b/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}
      />
    )
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-table",
-  "version": "6.5.3",
+  "version": "6.7.4",
  "description": "A fast, lightweight, opinionated table and datagrid built on React",
  "license": "MIT",
  "homepage": "https://github.com/react-tools/react-table#readme",
@@ -35,13 +35,14 @@
    "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"
  },
  "peerDependencies": {
-    "react": "^15.x.x"
+    "react": "^15.x.x || ^16.x.x",
+    "eslint-config-react-tools": "^1.0.10"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.0",
@@ -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",
--- a/src/defaultProps.js
+++ b/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>,
--- a/src/index.js
+++ b/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

--- a/src/index.styl
+++ b/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)

@@ -168,6 +181,7 @@ $expandSize = 7px
    z-index: 10

  .rt-tfoot
+    flex: 1 0 auto
    display: flex
    flex-direction: column
    box-shadow: 0 0px 15px 0px alpha(black, .15)
@@ -195,6 +209,10 @@ $expandSize = 7px
    box-shadow: 0 0px 15px 0px alpha(black, .1)
    border-top: 2px solid alpha(black, .1)

+    input
+    select
+      input-select-style()
+
    .-btn
      appearance:none
      display:block
@@ -292,16 +310,6 @@ $expandSize = 7px
      > div
        transform: translateY(50%)

-  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
-
  .rt-resizing
    .rt-th
    .rt-td
--- a/src/methods.js
+++ b/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),
--- a/src/pagination.js
+++ b/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) {
--- a/src/propTypes.js
+++ b/src/propTypes.js
@@ -0,0 +1,193 @@
+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.func,
+  getTableProps: PropTypes.func,
+  getTheadGroupProps: PropTypes.func,
+  getTheadGroupTrProps: PropTypes.func,
+  getTheadGroupThProps: PropTypes.func,
+  getTheadProps: PropTypes.func,
+  getTheadTrProps: PropTypes.func,
+  getTheadThProps: PropTypes.func,
+  getTheadFilterProps: PropTypes.func,
+  getTheadFilterTrProps: PropTypes.func,
+  getTheadFilterThProps: PropTypes.func,
+  getTbodyProps: PropTypes.func,
+  getTrGroupProps: PropTypes.func,
+  getTrProps: PropTypes.func,
+  getTdProps: PropTypes.func,
+  getTfootProps: PropTypes.func,
+  getTfootTrProps: PropTypes.func,
+  getTfootTdProps: PropTypes.func,
+  getPaginationProps: PropTypes.func,
+  getLoadingProps: PropTypes.func,
+  getNoDataProps: PropTypes.func,
+  getResizerProps: PropTypes.func,
+
+  // Global Column Defaults
+  columns: PropTypes.arrayOf(
+    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.func,
+
+      // Pivot only
+      aggregate: PropTypes.func,
+
+      // Headers only
+      headerClassName: PropTypes.string,
+      headerStyle: PropTypes.object,
+      getHeaderProps: PropTypes.func,
+
+      // 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.node,
+  nextText: PropTypes.node,
+  loadingText: PropTypes.node,
+  noDataText: PropTypes.node,
+  pageText: PropTypes.node,
+  ofText: PropTypes.node,
+  rowsText: PropTypes.node,
+
+  // Components
+  TableComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  TheadComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  TbodyComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  TrGroupComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  TrComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  ThComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  TdComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  TfootComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  FilterComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  ExpanderComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  PivotValueComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  AggregatedComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  PivotComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]), // this is a computed default generated using
+  // the ExpanderComponent and PivotValueComponent at run-time in methods.js
+  PaginationComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  PreviousComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  NextComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  LoadingComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  NoDataComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  ResizerComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  PadRowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element])
+};
--- a/src/utils.js
+++ b/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
 }
--- a/yarn.lock
+++ b/yarn.lock