5.4.1

* Add column filtering.

* Fix javascript warning from yarn test. Compile storybook and docs.

* Pass standard linting

* Add support for filtering pivot columns.

* Build distribution files.

* Set page to max page available if data changes and has less pages than before.

Closes #159

.gitignore

@@ -3,3 +3,5 @@ lib/
 react-table.js
 react-table.css
 *.log
+.idea
+.DS_Store

.storybook/config.js

@@ -24,6 +24,7 @@ import FunctionalRendering from '../stories/FunctionalRendering.js'
 import CustomExpanderPosition from '../stories/CustomExpanderPosition.js'
 import NoDataText from '../stories/NoDataText.js'
 import Footers from '../stories/Footers.js'
+import Filtering from '../stories/Filtering.js'
 //
 configure(() => {
   storiesOf('1. Docs')
@@ -53,4 +54,5 @@ configure(() => {
     .add('Custom Expander Position', CustomExpanderPosition)
     .add('Custom "No Data" Text', NoDataText)
     .add('Footers', Footers)
+    .add('Custom Filtering', Filtering)
 }, module)

.storybook/fonts.css

@@ -4,3 +4,14 @@ body {
   font-family: 'Open Sans', sans-serif;
   font-weight: 300;
 }
+
+h1 {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  margin-top: 5px;
+}
+
+p {
+  margin-bottom: 15px;
+}

ISSUE_TEMPLATE.md

@@ -0,0 +1,15 @@
+## Problem Description
+include a detailed explanation of the problem here...
+
+## Code Snippet(s)
+
+## Steps to Reproduce
+1. list the steps 
+2. to reproduce the issue
+
+## System Information
+**Browser & Browser Version:**
+**Node Version:**
+**OS Version:**
+**NPM Version:**
+**Yarn Version:**

README.md

@@ -47,7 +47,7 @@
 - [Props](#props)
 - [Columns](#columns)
 - [Column Header Groups](#column-header-groups)
-- [Custom Cell and Header Rendering](#custom-cell-and-header-rendering)
+- [Custom Cell and Header and Footer Rendering](#custom-cell-header-and-footer-rendering)
 - [Styles](#styles)
 - [Custom Props](#custom-props)
 - [Pivoting and Aggregation](#pivoting-and-aggregation)
@@ -56,6 +56,7 @@
 - [Fully Controlled Component](#fully-controlled-component)
 - [Functional Rendering](#functional-rendering)
 - [Multi-Sort](#multi-sort)
+- [Filtering](#filtering)
 - [Component Overrides](#component-overrides)
 - [Contributing](#contributing)
 - [Scripts](#scripts)
@@ -108,6 +109,7 @@ const columns = [{
   accessor: 'age',
   render: props => <span className='number'>{props.value}</span> // Custom cell components!
 }, {
+  id: 'friendName', // Required because our accessor is not a string
   header: 'Friend Name',
   accessor: d => d.friend.name // Custom value accessors!
 }, {
@@ -138,10 +140,17 @@ These are all of the available props (and their default values) for the main `<R
   defaultPageSize: 20,
   showPageJump: true,
   expanderColumnWidth: 35,
-  collapseOnSortingChange: false,
+  collapseOnSortingChange: true,
   collapseOnPageChange: true,
+  collapseOnDataChange: true,
   freezeWhenExpanded: false,
   defaultSorting: [],
+  showFilters: false,
+  defaultFiltering: [],
+  defaultFilterMethod: (filter, row, column) => {
+    const id = filter.pivotId || filter.id
+    return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true
+  },
 
   // Controlled State Overrides (see Fully Controlled Component section)
   page: undefined,
@@ -153,6 +162,7 @@ These are all of the available props (and their default values) for the main `<R
   onPageChange: undefined,
   onPageSizeChange: undefined,
   onSortingChange: undefined,
+  onFilteringChange: undefined,
 
   // Pivoting
   pivotBy: undefined,
@@ -183,6 +193,9 @@ These are all of the available props (and their default values) for the main `<R
   getTheadProps: () => ({}),
   getTheadTrProps: () => ({}),
   getTheadThProps: () => ({}),
+  getTheadFilterProps: () => ({}),
+  getTheadFilterTrProps: () => ({}),
+  getTheadFilterThProps: () => ({}),
   getTbodyProps: () => ({}),
   getTrGroupProps: () => ({}),
   getTrProps: () => ({}),
@@ -214,7 +227,9 @@ These are all of the available props (and their default values) for the main `<R
     footer: undefined,
     footerClassName: '',
     footerStyle: {},
-    getFooterProps: () => ({})
+    getFooterProps: () => ({}),
+    filterMethod: undefined,
+    hideFilter: false
   },
 
   // Text
@@ -256,16 +271,16 @@ Or just define them as props
 ```javascript
 [{
   // General
-  accessor: 'propertyName' // or Accessor eg. (row) => row.propertyName (see "Accessors" section for more details)
+  accessor: 'propertyName', // or Accessor eg. (row) => row.propertyName (see "Accessors" section for more details)
   id: 'myProperty', // Conditional - A unique ID is required if the accessor is not a string or if you would like to override the column name used in server-side calls
   sortable: true,
   show: true, // can be used to hide a column
   width: undefined, // A hardcoded width for the column. This overrides both min and max width options
-  minWidth: 100 // A minimum width for this column. If there is extra room, column will flex to fill available space (up to the max-width, if set)
-  maxWidth: undefined // A maximum width for this column.
+  minWidth: 100, // A minimum width for this column. If there is extra room, column will flex to fill available space (up to the max-width, if set)
+  maxWidth: undefined, // A maximum width for this column.
 
   // Special
-  expander: false // This option will override all data-related options and designates the column to be used
+  expander: false, // This option will override all data-related options and designates the column to be used
   // for pivoting and sub-component expansion
 
   // Cell Options
@@ -282,17 +297,23 @@ Or just define them as props
   header: 'Header Name', a function that returns a primitive, or JSX / React Component eg. ({data, column}) => <div>Header Name</div>,
   headerClassName: '', // Set the classname of the `th` element of the column
   headerStyle: {}, // Set the style of the `th` element of the column
-  getHeaderProps: (state, rowInfo, column, instance) => ({}) // a function that returns props to decorate the `th` element of the column
+  getHeaderProps: (state, rowInfo, column, instance) => ({}), // a function that returns props to decorate the `th` element of the column
 
   // Header Groups only
-  columns: [...] // See Header Groups section below
+  columns: [...], // See Header Groups section below
 
   // Footer
   footer: 'Header Name' or JSX eg. ({data, column}) => <div>Header Name</div>,
   footerClassName: '', // Set the classname of the `td` element of the column's footer
   footerStyle: {}, // Set the style of the `td` element of the column's footer
-  getFooterProps: (state, rowInfo, column, instance) => ({}) // a function that returns props to decorate the `td` element of the column's footer
+  getFooterProps: (state, rowInfo, column, instance) => ({}), // A function that returns props to decorate the `td` element of the column's footer
 
+  // Filtering
+  filterMethod: (filter, row, column) => {return true}, // A function returning a boolean that specifies the filtering logic for the column
+    // filter == an object specifying which filter is being applied. Format: {id: [the filter column's id], value: [the value the user typed in the filter field], pivotId: [if filtering on a pivot column, the pivotId will be set to the pivot column's id and the `id` field will be set to the top level pivoting column]}
+    // row == the row of data supplied to the table
+    // column == the column that the filter is on
+  hideFilter: false // If `showFilters` is set on the table, this option will let you selectively hide the filter on a particular row
 }]
 ```
 
@@ -307,6 +328,7 @@ Any values that contain bracket (`[]`) will be split.
 This array is then used as the path to the value to return.
 
 ("$" is the placeholder value that would be returned by the default accessor)
+
 | value        | path            | data                   |
 |--------------|-----------------|------------------------|
 | "a"          | ["a"]           | {"a": $}               |
@@ -418,11 +440,11 @@ Every single built-in component's props can be dynamically extended using any on
 />
 ```
 
-These callbacks are executed with each render of the element with three parameters:
-1. Table State
-1. RowInfo (undefined if not applicable)
-1. Column (undefined if not applicable)
-1. React Table Instance
+These callbacks are executed with each render of the element with four parameters:
+ 1. Table State
+ 2. RowInfo (undefined if not applicable)
+ 3. Column (undefined if not applicable)
+ 4. React Table Instance
 
 This makes it extremely easy to add, say... a row click callback!
 ```javascript
@@ -530,7 +552,7 @@ By adding a `SubComponent` props, you can easily add an expansion level to all r
 
 
 ## Server-side Data
-If you want to handle pagination, and sorting on the server, `react-table` makes it easy on you.
+If you want to handle pagination, sorting, and filtering on the server, `react-table` makes it easy on you.
 
 1. Feed React Table `data` from somewhere dynamic. eg. `state`, a redux store, etc...
 1. Add `manual` as a prop. This informs React Table that you'll be handling sorting and pagination server-side
@@ -553,7 +575,8 @@ If you want to handle pagination, and sorting on the server, `react-table` makes
     Axios.post('mysite.com/data', {
       page: state.page,
       pageSize: state.pageSize,
-      sorting: state.sorting
+      sorting: state.sorting,
+      filtering: state.filtering
     })
       .then((res) => {
         // Update react-table
@@ -599,6 +622,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
   onSortingChange={(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
   onExpandRow={(index, event) => {...}} // Called when an expander is clicked. Use this to manage `expandedRows`
+  onFilteringChange={(column, event) => {...}} // Called when a user enters a value into a filter input field. The event is the onChange event of the input field.
 />
 ```
 
@@ -642,6 +666,17 @@ The possibilities are endless!
 ## Multi-Sort
 When clicking on a column header, hold shift to multi-sort! You can toggle `ascending` `descending` and `none` for multi-sort columns. Clicking on a header without holding shift will clear the multi-sort and replace it with the single sort of that column. It's quite handy!
 
+## Filtering
+Filtering can be enabled by setting the `showFilters` option on the table.
+
+If you don't want particular column to be filtered you can set the `hideFilter` option on the column.
+
+By default the table tries to filter by checking if the row's value starts with the filter text. The default method for filtering the table can be set with the table's `defaultFilterMethod` option.
+
+If you want to override a particular column's filtering method, you can set the `filterMethod` option on a column.
+
+See <a href="http://react-table.js.org/?selectedKind=2.%20Demos&selectedStory=Custom%20Filtering&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel" target="\_parent">Custom Filtering</a> demo for examples.
+
 ## Component Overrides
 Though we confidently stand by the markup and architecture behind it, `react-table` does offer the ability to change the core componentry it uses to render everything. You can extend or override these internal components by passing a react component to it's corresponding prop on either the global props or on a one-off basis like so:
 ```javascript

docs/iframe.html

@@ -16,7 +16,7 @@
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="static/preview.437e4f72f80621de5f68.bundle.js"></script>
+        <script src="static/preview.1bf8468d20ff1a92c704.bundle.js"></script>
       </body>
     </html>
   

docs/index.html

@@ -38,7 +38,7 @@
       </head>
       <body style="margin: 0;">
         <div id="root"></div>
-        <script src="static/manager.3f690da6fe3fd9729ee0.bundle.js"></script>
+        <script src="static/manager.064c8fe6b78907f0a142.bundle.js"></script>
       </body>
     </html>
   

docs/static/manager.064c8fe6b78907f0a142.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/manager.064c8fe6b78907f0a142.bundle.js","sources":["webpack:///static/manager.064c8fe6b78907f0a142.bundle.js"],"mappings":"AAAA;AAkuDA;AA84DA;AAy8DA;AA00DA;AAsyEA;AA89CA;AA+rDA;AAsiDA;AAg6DA;AA2nDA;AA++CA;AAkvDA;AAsnEA;AA2oDA;AAivCA;AA+nDA;AAkpDA;AA6lEA;AAs4DA;AAquDA;AA+pDA;AAqxDA;AAsrDA;AA4yDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}

docs/static/manager.3f690da6fe3fd9729ee0.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/manager.3f690da6fe3fd9729ee0.bundle.js","sources":["webpack:///static/manager.3f690da6fe3fd9729ee0.bundle.js"],"mappings":"AAAA;AAkuDA;AA84DA;AA28DA;AA00DA;AAsyEA;AA89CA;AA+rDA;AAsiDA;AAg6DA;AA2nDA;AA++CA;AAkvDA;AAsnEA;AA2oDA;AAivCA;AA+nDA;AAkpDA;AA6lEA;AAs4DA;AAquDA;AA+pDA;AAoxDA;AAsrDA;AA4yDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}

docs/static/preview.1bf8468d20ff1a92c704.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.1bf8468d20ff1a92c704.bundle.js","sources":["webpack:///static/preview.1bf8468d20ff1a92c704.bundle.js"],"mappings":"AAAA;AAkuDA;AAm/DA;AA+qFA;AAmmFA;AA07OA;AAuwFA;AAwtDA;AA+jEA;AA4uDA;AAi8DA;AA+lDA;AA4yDA;AA28CA;AAw7DA;AAooDA;AA67CA;AAiqDA;AAynEA;AAwxDA;AA+rCA;AA+mDA;AA2lDA;AAkqEA;AAs2DA;AA2zDA;AAo4CA;AAosFA;AAmjGA;AA6sDA;AAw2CA;AAkoCA;AAq8CA;AAu8CA;AAoDA;AA+jFA","sourceRoot":""}

docs/static/preview.437e4f72f80621de5f68.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.437e4f72f80621de5f68.bundle.js","sources":["webpack:///static/preview.437e4f72f80621de5f68.bundle.js"],"mappings":"AAAA;AAkuDA;AAq5DA;AA8xFA;AA2+EA;AA++NA;AA06GA;AAgsDA;AA8/DA;AA4xDA;AAigEA;AAmjDA;AA4sDA;AAk8CA;AAu/DA;AA8lDA;AA09CA;AAqoDA;AAywEA;AAokDA;AAsvCA;AA2mDA;AA4tDA;AAqjEA;AAs2DA;AAmyDA;AAsnDA;AAszFA;AA65FA;AA4/CA;AAwzCA;AAmlCA;AAotDA;AAyrBA;AAkPA;AA84EA","sourceRoot":""}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "5.3.1",
+  "version": "5.4.1",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -24,13 +24,13 @@
   ],
   "scripts": {
     "build:node": "babel src --out-dir lib --source-maps inline",
-    "build:css": "rm -rf react-table.css && stylus src/index.styl --compress -o react-table.css && yarn run css:autoprefix",
+    "build:css": "rimraf react-table.css && stylus src/index.styl --compress -o react-table.css && yarn run css:autoprefix",
     "css:autoprefix": "postcss --use autoprefixer react-table.css -r",
     "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": "standard",
-    "umd": "rm -rf react-table.js && browserify lib/index.js -s reactTable -x react -t babelify -g uglifyify -o react-table.js",
+    "umd": "rimraf react-table.js && browserify lib/index.js -s reactTable -x react -t babelify -g uglifyify -o react-table.js",
     "prepublish": "npm-run-all build:* && npm run umd",
     "storybook": "start-storybook -p 8000 -c .storybook",
     "docs": "build-storybook -o docs && cp .storybook/CNAME docs/CNAME"
@@ -61,6 +61,7 @@
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-json-tree": "^0.10.1",
+    "rimraf": "^2.6.1",
     "standard": "^8.0.0",
     "storybook": "^0.0.0",
     "stylus": "^0.54.5",

src/defaultProps.js

@@ -16,10 +16,17 @@ export default {
   defaultPageSize: 20,
   showPageJump: true,
   expanderColumnWidth: 35,
-  collapseOnSortingChange: false,
+  collapseOnSortingChange: true,
   collapseOnPageChange: true,
+  collapseOnDataChange: true,
   freezeWhenExpanded: false,
   defaultSorting: [],
+  showFilters: false,
+  defaultFiltering: [],
+  defaultFilterMethod: (filter, row, column) => {
+    const id = filter.pivotId || filter.id
+    return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true
+  },
 
   // Controlled State Overrides
   // page: undefined,
@@ -31,6 +38,7 @@ export default {
   onPageChange: undefined,
   onPageSizeChange: undefined,
   onSortingChange: undefined,
+  onFilteringChange: undefined,
 
   // Pivoting
   pivotBy: undefined,
@@ -61,6 +69,9 @@ export default {
   getTheadProps: emptyObj,
   getTheadTrProps: emptyObj,
   getTheadThProps: emptyObj,
+  getTheadFilterProps: emptyObj,
+  getTheadFilterTrProps: emptyObj,
+  getTheadFilterThProps: emptyObj,
   getTbodyProps: emptyObj,
   getTrGroupProps: emptyObj,
   getTrProps: emptyObj,
@@ -91,7 +102,9 @@ export default {
     footer: undefined,
     footerClassName: '',
     footerStyle: {},
-    getFooterProps: emptyObj
+    getFooterProps: emptyObj,
+    filterMethod: undefined,
+    hideFilter: false
   },
 
   // Text

src/index.js

@@ -4,6 +4,9 @@ import classnames from 'classnames'
 import _ from './utils'
 import lifecycle from './lifecycle'
 import methods from './methods'
+import defaults from './defaultProps'
+
+export const ReactTableDefaults = defaults
 
 export default React.createClass({
   ...lifecycle,
@@ -23,6 +26,9 @@ export default React.createClass({
       getTheadProps,
       getTheadTrProps,
       getTheadThProps,
+      getTheadFilterProps,
+      getTheadFilterTrProps,
+      getTheadFilterThProps,
       getTbodyProps,
       getTrGroupProps,
       getTrProps,
@@ -38,11 +44,13 @@ export default React.createClass({
       manual,
       loadingText,
       noDataText,
+      showFilters,
       // State
       loading,
       pageSize,
       page,
       sorting,
+      filtering,
       pages,
       // Pivoting State
       pivotValKey,
@@ -77,9 +85,7 @@ export default React.createClass({
     const endRow = startRow + pageSize
     const pageRows = manual ? resolvedData : sortedData.slice(startRow, endRow)
     const minRows = this.getMinRows()
-    const padRows = pages > 1 ? _.range(pageSize - pageRows.length)
-      : minRows ? _.range(Math.max(minRows - pageRows.length, 0))
-      : []
+    const padRows = _.range(Math.max(minRows - pageRows.length, 0))
 
     const hasColumnFooter = allVisibleColumns.some(d => d.footer)
 
@@ -283,7 +289,7 @@ export default React.createClass({
                 'rt-pivot-header',
                 column.sortable && '-cursor-pointer',
                 classes,
-                pivotSort ? (pivotSort.desc ? '-sort-asc' : '-sort-desc') : ''
+                pivotSort ? (pivotSort.desc ? '-sort-desc' : '-sort-asc') : ''
               )}
               style={{
                 ...styles,
@@ -334,7 +340,7 @@ export default React.createClass({
           key={i}
           className={classnames(
             classes,
-            sort ? (sort.desc ? '-sort-asc' : '-sort-desc') : '',
+            sort ? (sort.desc ? '-sort-desc' : '-sort-asc') : '',
             column.sortable && '-cursor-pointer',
             !show && '-hidden',
           )}
@@ -357,6 +363,144 @@ export default React.createClass({
       )
     }
 
+    const makeFilters = () => {
+      const theadFilterProps = _.splitProps(getTheadFilterProps(finalState, undefined, undefined, this))
+      const theadFilterTrProps = _.splitProps(getTheadFilterTrProps(finalState, undefined, undefined, this))
+      return (
+        <TheadComponent
+          className={classnames('-filters', theadFilterProps.className)}
+          style={{
+            ...theadFilterProps.style,
+            minWidth: `${rowMinWidth}px`
+          }}
+          {...theadFilterProps.rest}
+        >
+          <TrComponent
+            className={theadFilterTrProps.className}
+            style={theadFilterTrProps.style}
+            {...theadFilterTrProps.rest}
+          >
+            {allVisibleColumns.map(makeFilter)}
+          </TrComponent>
+        </TheadComponent>
+      )
+    }
+
+    const makeFilter = (column, i) => {
+      const width = _.getFirstDefined(column.width, column.minWidth)
+      const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
+      const theadFilterThProps = _.splitProps(getTheadFilterThProps(finalState, undefined, column, this))
+      const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
+
+      const classes = [
+        column.headerClassName,
+        theadFilterThProps.className,
+        columnHeaderProps.className
+      ]
+
+      const styles = {
+        ...column.headerStyle,
+        ...theadFilterThProps.style,
+        ...columnHeaderProps.style
+      }
+
+      const rest = {
+        ...theadFilterThProps.rest,
+        ...columnHeaderProps.rest
+      }
+
+      if (column.expander) {
+        if (column.pivotColumns) {
+          const pivotCols = []
+          for (let i = 0; i < column.pivotColumns.length; i++) {
+            const col = column.pivotColumns[i]
+            const filter = filtering.find(filter => filter.id === column.id && filter.pivotId === col.id)
+            pivotCols.push(
+              <span key={col.id}
+                style={{display: 'flex', alignContent: 'flex-end', flex: 1}}>
+                {!col.hideFilter ? (
+                  <input type='text'
+                    style={{
+                      flex: 1,
+                      width: 20
+                    }}
+                    value={filter ? filter.value : ''}
+                    onChange={(event) => this.filterColumn(column, event, col)}
+                  />
+                ) : null}
+              </span>
+            )
+            if (i < column.pivotColumns.length - 1) {
+              pivotCols.push(<ExpanderComponent key={col.id + '-' + i} />)
+            }
+          }
+          return (
+            <ThComponent
+              key={i}
+              className={classnames(
+                'rt-pivot-header',
+                column.sortable && '-cursor-pointer',
+                classes
+              )}
+              style={{
+                ...styles,
+                flex: `${width} 0 auto`,
+                width: `${width}px`,
+                maxWidth: `${maxWidth}px`,
+                display: 'flex'
+              }}
+              {...rest}
+            >
+              {pivotCols}
+            </ThComponent>
+          )
+        }
+        return (
+          <ThComponent
+            key={i}
+            className={classnames(
+              'rt-expander-header',
+              classes
+            )}
+            style={{
+              ...styles,
+              flex: `0 0 auto`,
+              width: `${expanderColumnWidth}px`
+            }}
+            {...rest}
+          />
+        )
+      }
+
+      const filter = filtering.find(filter => filter.id === column.id)
+
+      return (
+        <ThComponent
+          key={i}
+          className={classnames(
+            classes
+          )}
+          style={{
+            ...styles,
+            flex: `${width} 0 auto`,
+            width: `${width}px`,
+            maxWidth: `${maxWidth}px`
+          }}
+          {...rest}
+        >
+          {!column.hideFilter ? (
+            <input type='text'
+              style={{
+                width: `100%`
+              }}
+              value={filter ? filter.value : ''}
+              onChange={(event) => this.filterColumn(column, event)}
+            />
+          ) : null}
+        </ThComponent>
+      )
+    }
+
     const makePageRow = (row, i, path = []) => {
       const rowInfo = {
         row: row.__original,
@@ -449,15 +593,15 @@ export default React.createClass({
                               {...rowInfo}
                               value={rowInfo.rowValues[pivotValKey]}
                             />
-                          ) : <span>{row[pivotValKey]} ({rowInfo.subRows.length})</span>}
+                            ) : <span>{row[pivotValKey]} ({rowInfo.subRows.length})</span>}
                         </span>
-                      ) : SubComponent ? (
-                        <span>
-                          <ExpanderComponent
-                            isExpanded={isExpanded}
-                          />
-                        </span>
-                      ) : null}
+                        ) : SubComponent ? (
+                          <span>
+                            <ExpanderComponent
+                              isExpanded={isExpanded}
+                            />
+                          </span>
+                          ) : null}
                     </TdComponent>
                   )
                 }
@@ -523,7 +667,6 @@ export default React.createClass({
     const makePadRow = (row, i) => {
       const trGroupProps = getTrGroupProps(finalState, undefined, undefined, this)
       const trProps = _.splitProps(getTrProps(finalState, undefined, undefined, this))
-      const tdProps = _.splitProps(getTdProps(finalState, undefined, undefined, this))
       return (
         <TrGroupComponent
           key={i}
@@ -536,20 +679,6 @@ export default React.createClass({
             )}
             style={trProps.style || {}}
           >
-            {SubComponent && (
-              <ThComponent
-                className={classnames(
-                  'rt-expander-header',
-                  tdProps.className
-                )}
-                style={{
-                  ...tdProps.style,
-                  flex: `0 0 auto`,
-                  width: `${expanderColumnWidth}px`
-                }}
-                {...tdProps.rest}
-              />
-            )}
             {allVisibleColumns.map((column, i2) => {
               const show = typeof column.show === 'function' ? column.show() : column.show
               const width = _.getFirstDefined(column.width, column.minWidth)
@@ -693,7 +822,10 @@ export default React.createClass({
                   {...tFootTdProps.rest}
                   {...columnFooterProps.rest}
                 >
-                  {_.normalizeComponent(column.footer)}
+                  {_.normalizeComponent(column.footer, {
+                    data: sortedData,
+                    column: column
+                  })}
                 </TdComponent>
               )
             })}
@@ -729,6 +861,7 @@ export default React.createClass({
         >
           {hasHeaderGroups ? makeHeaderGroups() : null}
           {makeHeaders()}
+          {showFilters ? makeFilters() : null}
           <TbodyComponent
             className={classnames(tBodyProps.className)}
             style={{
@@ -754,12 +887,14 @@ export default React.createClass({
             style={paginationProps.style}
             {...paginationProps.rest}
           />
-        ) : null}
-        <NoDataComponent
-          {...noDataProps}
-        >
-          {_.normalizeComponent(noDataText)}
-        </NoDataComponent>
+          ) : null}
+        {!pageRows.length && (
+          <NoDataComponent
+            {...noDataProps}
+          >
+            {_.normalizeComponent(noDataText)}
+          </NoDataComponent>
+        )}
         <LoadingComponent
           loading={loading}
           loadingText={loadingText}

src/index.styl

@@ -22,6 +22,12 @@ $expandSize = 7px
       background: alpha(black, .03)
       border-bottom: 1px solid alpha(black, .05)
 
+    &.-filters
+      border-bottom: 1px solid alpha(black, 0.05)
+
+      .rt-th
+        border-right: 1px solid alpha(black, 0.02)
+
     &.-header
       box-shadow: 0 2px 15px 0px alpha(black, .15)
 

src/lifecycle.js

@@ -11,7 +11,8 @@ export default {
       page: 0,
       pageSize: this.props.defaultPageSize || 10,
       sorting: this.props.defaultSorting,
-      expandedRows: {}
+      expandedRows: {},
+      filtering: this.props.defaultFiltering
     }
   },
 
@@ -26,7 +27,7 @@ export default {
   },
 
   componentWillMount () {
-    this.setStateWithData(this.getDataModel())
+    this.setStateWithData(this.getDataModel(this.getResolvedState()))
   },
 
   componentDidMount () {
@@ -37,21 +38,32 @@ export default {
     const oldState = this.getResolvedState()
     const newState = this.getResolvedState(nextProps, nextState)
 
+    if (oldState.defaultSorting !== newState.defaultSorting) {
+      newState.sorting = newState.defaultSorting
+    }
+
+    if ((oldState.showFilters !== newState.showFilters) ||
+      (oldState.showFilters !== newState.showFilters)) {
+      newState.filtering = newState.defaultFiltering
+    }
+
     // Props that trigger a data update
     if (
       oldState.data !== newState.data ||
       oldState.columns !== newState.columns ||
       oldState.pivotBy !== newState.pivotBy ||
-      oldState.sorting !== newState.sorting
+      oldState.sorting !== newState.sorting ||
+      oldState.showFilters !== newState.showFilters ||
+      oldState.filtering !== newState.filtering
     ) {
-      this.setStateWithData(this.getDataModel(nextProps, nextState))
+      this.setStateWithData(this.getDataModel(newState))
     }
   },
 
   setStateWithData (newState, cb) {
     const oldState = this.getResolvedState()
     const newResolvedState = this.getResolvedState({}, newState)
-    const { freezeWhenExpanded } = newResolvedState
+    const {freezeWhenExpanded} = newResolvedState
 
     // Default to unfrozen state
     newResolvedState.frozen = false
@@ -73,12 +85,16 @@ export default {
     if (
       (oldState.frozen && !newResolvedState.frozen) ||
       oldState.sorting !== newResolvedState.sorting ||
+      oldState.filtering !== newResolvedState.filtering ||
+      oldState.showFilters !== newResolvedState.showFilters ||
       (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData)
     ) {
-      // Handle collapseOnSortingChange & collapseOnPageChange
+      // Handle collapseOnSortingChange & collapseOnDataChange
       if (
         (oldState.sorting !== newResolvedState.sorting && this.props.collapseOnSortingChange) ||
-        (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnPageChange)
+        (oldState.filtering !== newResolvedState.filtering) ||
+        (oldState.showFilters !== newResolvedState.showFilters) ||
+        (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnDataChange)
       ) {
         newResolvedState.expandedRows = {}
       }
@@ -87,8 +103,9 @@ export default {
     }
 
     // Calculate pageSize all the time
-    if (newResolvedState.resolvedData) {
-      newResolvedState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize)
+    if (newResolvedState.sortedData) {
+      newResolvedState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.sortedData.length / newResolvedState.pageSize)
+      newResolvedState.page = Math.max(newResolvedState.page >= newResolvedState.pages ? newResolvedState.pages - 1 : newResolvedState.page, 0)
     }
 
     return this.setState(newResolvedState, cb)

src/methods.js

@@ -1,7 +1,7 @@
 import _ from './utils'
 
 export default {
-  getDataModel (nextProps, nextState) {
+  getDataModel (newState) {
     const {
       columns,
       pivotBy = [],
@@ -10,11 +10,8 @@ export default {
       pivotValKey,
       subRowsKey,
       expanderColumnWidth,
-      SubComponent,
-      page,
-      pages,
-      pageSize
-    } = this.getResolvedState(nextProps, nextState)
+      SubComponent
+    } = newState
 
     // Determine Header Groups
     let hasHeaderGroups = false
@@ -192,15 +189,14 @@ export default {
         // Group the rows together for this level
         let groupedRows = Object.entries(
           _.groupBy(rows, keys[i]))
-            .map(([key, value]) => {
-              return {
-                [pivotIDKey]: keys[i],
-                [pivotValKey]: key,
-                [keys[i]]: key,
-                [subRowsKey]: value
-              }
+          .map(([key, value]) => {
+            return {
+              [pivotIDKey]: keys[i],
+              [pivotValKey]: key,
+              [keys[i]]: key,
+              [subRowsKey]: value
             }
-        )
+          })
         // Recurse into the subRows
         groupedRows = groupedRows.map(rowGroup => {
           let subRows = groupRecursively(rowGroup[subRowsKey], keys, i + 1)
@@ -215,32 +211,32 @@ export default {
       resolvedData = groupRecursively(resolvedData, pivotBy)
     }
 
-    const newPages = _.getFirstDefined(pages, Math.ceil(resolvedData.length / pageSize))
-    const newPage = page > newPages ? newPage - 1 : page
-
     return {
+      ...newState,
       resolvedData,
       pivotColumn,
       allVisibleColumns,
       headerGroups,
       allDecoratedColumns,
-      hasHeaderGroups,
-      page: Math.max(newPage, 0)
+      hasHeaderGroups
     }
   },
   getSortedData (resolvedState) {
     const {
       manual,
       sorting,
-      resolvedData
+      filtering,
+      showFilters,
+      defaultFilterMethod,
+      resolvedData,
+      allVisibleColumns
     } = resolvedState
 
     // Resolve the data from either manual data or sorted data
     return {
-      sortedData: manual ? resolvedData : this.sortData(resolvedData, sorting)
+      sortedData: manual ? resolvedData : this.sortData(this.filterData(resolvedData, showFilters, filtering, defaultFilterMethod, allVisibleColumns), sorting)
     }
   },
-
   fireOnChange () {
     this.props.onChange(this.getResolvedState(), this)
   },
@@ -250,10 +246,56 @@ export default {
   getStateOrProp (key) {
     return _.getFirstDefined(this.state[key], this.props[key])
   },
+  filterData (data, showFilters, filtering, defaultFilterMethod, allVisibleColumns) {
+    let filteredData = data
+
+    if (showFilters && filtering.length) {
+      filteredData = filtering.reduce(
+        (filteredSoFar, nextFilter) => {
+          return filteredSoFar.filter(
+            (row) => {
+              let column
+
+              if (nextFilter.pivotId) {
+                const parentColumn = allVisibleColumns.find(x => x.id === nextFilter.id)
+                column = parentColumn.pivotColumns.find(x => x.id === nextFilter.pivotId)
+              } else {
+                column = allVisibleColumns.find(x => x.id === nextFilter.id)
+              }
+
+              const filterMethod = column.filterMethod || defaultFilterMethod
+
+              return filterMethod(nextFilter, row, column)
+            })
+        }
+        , filteredData
+      )
+
+      // Apply the filter to the subrows if we are pivoting, and then
+      // filter any rows without subcolumns because it would be strange to show
+      filteredData = filteredData.map(row => {
+        if (!row[this.props.subRowsKey]) {
+          return row
+        }
+        return {
+          ...row,
+          [this.props.subRowsKey]: this.filterData(row[this.props.subRowsKey], showFilters, filtering, defaultFilterMethod, allVisibleColumns)
+        }
+      }).filter(row => {
+        if (!row[this.props.subRowsKey]) {
+          return true
+        }
+        return row[this.props.subRowsKey].length > 0
+      })
+    }
+
+    return filteredData
+  },
   sortData (data, sorting) {
     if (!sorting.length) {
       return data
     }
+
     const sorted = _.orderBy(data, sorting.map(sort => {
       return row => {
         if (row[sort.id] === null || row[sort.id] === undefined) {
@@ -280,20 +322,23 @@ export default {
 
   // User actions
   onPageChange (page) {
-    const { onPageChange } = this.props
+    const {onPageChange, collapseOnPageChange} = this.props
     if (onPageChange) {
       return onPageChange(page)
     }
-    this.setStateWithData({
-      expandedRows: {},
-      page
-    }, () => {
-      this.fireOnChange()
-    })
+    const newState = {page}
+    if (collapseOnPageChange) {
+      newState.expandedRows = {}
+    }
+    this.setStateWithData(
+      newState
+      , () => {
+        this.fireOnChange()
+      })
   },
   onPageSizeChange (newPageSize) {
-    const { onPageSizeChange } = this.props
-    const { pageSize, page } = this.getResolvedState()
+    const {onPageSizeChange} = this.props
+    const {pageSize, page} = this.getResolvedState()
 
     // Normalize the page to display
     const currentRow = pageSize * page
@@ -311,8 +356,8 @@ export default {
     })
   },
   sortColumn (column, additive) {
-    const { sorting } = this.getResolvedState()
-    const { onSortingChange } = this.props
+    const {sorting} = this.getResolvedState()
+    const {onSortingChange} = this.props
     if (onSortingChange) {
       return onSortingChange(column, additive)
     }
@@ -394,5 +439,40 @@ export default {
     }, () => {
       this.fireOnChange()
     })
+  },
+  filterColumn (column, event, pivotColumn) {
+    const {filtering} = this.getResolvedState()
+    const {onFilteringChange} = this.props
+
+    if (onFilteringChange) {
+      return onFilteringChange(column, event)
+    }
+
+    // Remove old filter first if it exists
+    const newFiltering = (filtering || []).filter(x => {
+      if (x.id !== column.id) {
+        return true
+      }
+      if (x.pivotId) {
+        if (pivotColumn) {
+          return x.pivotId !== pivotColumn.id
+        }
+        return true
+      }
+    })
+
+    if (event.target.value !== '') {
+      newFiltering.push({
+        id: column.id,
+        value: event.target.value,
+        pivotId: pivotColumn ? pivotColumn.id : undefined
+      })
+    }
+
+    this.setStateWithData({
+      filtering: newFiltering
+    }, () => {
+      this.fireOnChange()
+    })
   }
 }

src/pagination.js

@@ -4,7 +4,7 @@ import classnames from 'classnames'
 // import _ from './utils'
 
 const defaultButton = (props) => (
-  <button {...props} className='-btn'>{props.children}</button>
+  <button type='button' {...props} className='-btn'>{props.children}</button>
 )
 
 export default React.createClass({
@@ -66,9 +66,7 @@ export default React.createClass({
         <div className='-center'>
           <span className='-pageInfo'>
             {this.props.pageText} {showPageJump ? (
-              <form className='-pageJump'
-                onSubmit={this.applyPage}
-              >
+              <div className='-pageJump'>
                 <input
                   type={this.state.page === '' ? 'text' : 'number'}
                   onChange={e => {
@@ -81,8 +79,13 @@ export default React.createClass({
                   }}
                   value={this.state.page === '' ? '' : this.state.page + 1}
                   onBlur={this.applyPage}
+                  onKeyPress={e => {
+                    if (e.which === 13 || e.keyCode === 13) {
+                      this.applyPage()
+                    }
+                  }}
                 />
-              </form>
+              </div>
             ) : (
               <span className='-currentPage'>{page + 1}</span>
             )} {this.props.ofText} <span className='-totalPages'>{pages}</span>

src/utils.js

@@ -193,7 +193,7 @@ function isSortingDesc (d) {
 
 function normalizeComponent (Comp, params = {}, fallback = Comp) {
   return typeof Comp === 'function' ? (
-    Comp.prototype.isReactComponent ? (
+    Object.getPrototypeOf(Comp).isReactComponent ? (
       <Comp
         {...params}
       />

stories/Filtering.js

@@ -0,0 +1,206 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+class Filtering extends React.Component {
+
+  constructor(props) {
+    super(props)
+
+    const data = _.map(_.range(5553), d => {
+      return {
+        firstName: namor.generate({words: 1, numLen: 0}),
+        lastName: namor.generate({words: 1, numLen: 0}),
+        age: Math.floor(Math.random() * 30)
+      }
+    })
+
+    this.state = {
+      tableOptions: {
+        loading: false,
+        showPagination: true,
+        showPageSizeOptions: true,
+        showPageJump: true,
+        collapseOnSortingChange: true,
+        collapseOnPageChange: true,
+        collapseOnDataChange: true,
+        freezeWhenExpanded: false,
+        showFilters: true
+      },
+      data: data
+    }
+
+    this.setTableOption = this.setTableOption.bind(this);
+  }
+
+  render() {
+    const columns = [{
+      header: 'Name',
+      columns: [{
+        header: 'First Name',
+        accessor: 'firstName',
+        filterMethod: (filter, row) => (row[filter.id].startsWith(filter.value) && row[filter.id].endsWith(filter.value))
+      }, {
+        header: 'Last Name',
+        id: 'lastName',
+        accessor: d => d.lastName,
+        filterMethod: (filter, row) => (row[filter.id].includes(filter.value))
+      }]
+    }, {
+      header: 'Info',
+      columns: [{
+        header: 'Age',
+        accessor: 'age'
+      }]
+    }]
+
+    return (
+      <div>
+        <div style={{float: "left"}}>
+          <h1>Table Options</h1>
+          <table>
+            <tbody>
+            {
+              Object.keys(this.state.tableOptions).map(optionKey => {
+                const optionValue = this.state.tableOptions[optionKey];
+                return (
+                  <tr key={optionKey}>
+                    <td>{optionKey}</td>
+                    <td style={{paddingLeft: 10, paddingTop: 5}}>
+                      <input type="checkbox"
+                             name={optionKey}
+                             checked={optionValue}
+                             onChange={this.setTableOption}
+                      />
+                    </td>
+                  </tr>
+                )
+              })
+            }
+            </tbody>
+          </table>
+        </div>
+        <div className='table-wrap' style={{paddingLeft: 240}}>
+          <ReactTable
+            className='-striped -highlight'
+            data={this.state.data}
+            columns={columns}
+            defaultPageSize={10}
+            defaultFilterMethod={(filter, row) => (String(row[filter.id]) === filter.value)}
+            {...this.state.tableOptions}
+            SubComponent={(row) => {
+              return (
+                <div style={{padding: '20px'}}>
+                  <em>You can put any component you want here, even another React Table!</em>
+                  <br />
+                  <br />
+                  <ReactTable
+                    data={this.state.data}
+                    columns={columns}
+                    defaultPageSize={3}
+                    showPagination={false}
+                    SubComponent={(row) => {
+                      return (
+                        <div style={{padding: '20px'}}>
+                          <em>It even has access to the row data: </em>
+                          <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
+                        </div>
+                      )
+                    }}
+                  />
+                </div>
+              )
+            }}
+          />
+        </div>
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: Hold shift when sorting to multi-sort!</em>
+        </div>
+        <div>
+          <h1>Custom Filters In This Example</h1>
+          <p>The default filter for all columns of a table if it is not specified in the configuration is set to match on values that start with the filter text. Example: age.startsWith("2").</p>
+          <p>This example overrides the default filter behavior by setting the <strong>defaultFilterMethod</strong> table option to match on values that are exactly equal to the filter text. Example: age == "23")</p>
+          <p>Each column can also be customized with the column <strong>filterMethod</strong> option:</p>
+          <p>In this example the firstName column filters on the value starting with and ending with the filter value.</p>
+          <p>In this example the lastName column filters on the value including the filter value anywhere in its text.</p>
+        </div>
+        <CodeHighlight>{() => this.getCode()}</CodeHighlight>
+      </div>
+    )
+  }
+
+  setTableOption(event) {
+    const target = event.target;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const name = target.name;
+    this.setState({
+      tableOptions: {
+        ...this.state.tableOptions,
+        [name]: value
+      }
+    })
+  }
+
+  getCode() {
+    return `
+const columns = [{
+  header: 'Name',
+  columns: [{
+    header: 'First Name',
+    accessor: 'firstName',
+    filterMethod: (filter, row) => (row[filter.id].startsWith(filter.value) && row[filter.id].endsWith(filter.value))
+  }, {
+    header: 'Last Name',
+    id: 'lastName',
+    accessor: d => d.lastName,
+    filterMethod: (filter, row) => (row[filter.id].includes(filter.value))
+  }]
+}, {
+  header: 'Info',
+  columns: [{
+    header: 'Age',
+    accessor: 'age'
+  }]
+}]
+
+export default (
+  <ReactTable
+    data={data}
+    columns={columns}
+    defaultPageSize={10}
+    defaultFilterMethod={(filter, row) => (String(row[filter.id]) === filter.value)}
+    {...otherOptions}
+    SubComponent={(row) => {
+      return (
+        <div style={{padding: '20px'}}>
+          <em>You can put any component you want here, even another React Table!</em>
+          <br />
+          <br />
+          <ReactTable
+            data={data}
+            columns={columns}
+            defaultPageSize={3}
+            showPagination={false}
+            SubComponent={(row) => {
+              return (
+                <div style={{padding: '20px'}}>
+                  <em>It even has access to the row data: </em>
+                  <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
+                </div>
+              )
+            }}
+          />
+        </div>
+      )
+    }}
+  />
+)
+  `
+  }
+}
+
+export default () => <Filtering/>

stories/PivotingSubComponents.js

@@ -33,11 +33,13 @@ export default () => {
       aggregate: vals => _.round(_.mean(vals)),
       render: row => {
         return <span>{row.aggregated ? `${row.value} (avg)` : row.value}</span>
-      }
+      },
+      filterMethod: (filter, row) => (filter.value == `${row[filter.id]} (avg)`)
     }, {
       header: 'Visits',
       accessor: 'visits',
-      aggregate: vals => _.sum(vals)
+      aggregate: vals => _.sum(vals),
+      hideFilter: true
     }]
   }]
 
@@ -50,6 +52,7 @@ export default () => {
           defaultPageSize={10}
           className='-striped -highlight'
           pivotBy={['firstName', 'lastName']}
+          showFilters={true}
           SubComponent={(row) => {
             return (
               <div style={{padding: '20px'}}>
@@ -104,11 +107,13 @@ const columns = [{
     aggregate: vals => _.round(_.mean(vals)),
     render: row => {
       return <span>{row.aggregated ? \`\${row.value} (avg)\` : row.value}</span>
-    }
+    },
+    filterMethod: (filter, row) => (filter.value == \`\${row[filter.id]} (avg)\`) 
   }, {
     header: 'Visits',
     accessor: 'visits',
-    aggregate: vals => _.sum(vals)
+    aggregate: vals => _.sum(vals),
+    hideFilter: true
   }]
 }]
 
@@ -119,6 +124,7 @@ return (
     defaultPageSize={10}
     className='-striped -highlight'
     pivotBy={['firstName', 'lastName']}
+    showFilters={true}
     SubComponent={(row) => {
       return (
         <div style={{padding: '20px'}}>

stories/ServerSide.js

@@ -14,23 +14,34 @@ const rawData = _.map(_.range(3424), d => {
 })
 
 // Now let's mock the server.  It's job is simple: use the table model to sort and return the page data
-const requestData = (pageSize, page, sorting) => {
+const requestData = (pageSize, page, sorting, filtering) => {
   return new Promise((resolve, reject) => {
     // On the server, you'll likely use SQL or noSQL or some other query language to do this.
     // For this mock, we'll just use lodash
-    const sortedData = _.orderBy(rawData, sorting.map(sort => {
+    let filteredData = rawData;
+    if (filtering.length) {
+      filteredData = filtering.reduce(
+        (filteredSoFar, nextFilter) => {
+          return filteredSoFar.filter(
+            (row) => {
+              return (row[nextFilter.id]+"").includes(nextFilter.value)
+            })
+        }
+        , filteredData)
+    }
+    const sortedData = _.orderBy(filteredData, sorting.map(sort => {
       return row => {
         if (row[sort.id] === null || row[sort.id] === undefined) {
           return -Infinity
         }
         return typeof row[sort.id] === 'string' ? row[sort.id].toLowerCase() : row[sort.id]
       }
-    }), sorting.map(d => d.asc ? 'asc' : 'desc'))
+    }), sorting.map(d => d.desc ? 'desc' : 'asc'))
 
     // Be sure to send back the rows to be displayed and any other pertinent information, like how many pages there are total.
     const res = {
       rows: sortedData.slice(pageSize * page, (pageSize * page) + pageSize),
-      pages: Math.ceil(rawData.length / pageSize)
+      pages: Math.ceil(filteredData.length / pageSize)
     }
 
     // Here we'll simulate a server response with 500ms of delay.
@@ -48,13 +59,13 @@ const ServerSide = React.createClass({
     }
   },
   fetchData (state, instance) {
-    console.log(state, instance)
     // Whenever the table model changes, or the user sorts or changes pages, this method gets called and passed the current table model.
     // You can set the `loading` prop of the table to true to use the built-in one or show you're own loading bar if you want.
     this.setState({loading: true})
     // Request the data however you want.  Here, we'll use our mocked service we created earlier
-    requestData(state.pageSize, state.page, state.sorting)
+    requestData(state.pageSize, state.page, state.sorting, state.filtering)
       .then((res) => {
+        console.log(res.rows)
         // Now just get the rows of data to your React Table (and update anything else like total pages or loading)
         this.setState({
           data: res.rows,
@@ -82,6 +93,7 @@ const ServerSide = React.createClass({
             }]}
             manual // Forces table not to paginate or sort automatically, so we can handle it server-side
             defaultPageSize={10}
+            showFilters={true}
             data={this.state.data} // Set the rows to be displayed
             pages={this.state.pages} // Display the total number of pages
             loading={this.state.loading} // Display the loading overlay when we need it
@@ -124,7 +136,8 @@ export default React.createClass({
     Axios.post('mysite.com/data', {
       pageSize: state.pageSize,
       page: state.page,
-      sorting: state.sorting
+      sorting: state.sorting,
+      filtering: state.filtering
     })
       .then((res) => {
         // Now update your state!
@@ -151,6 +164,7 @@ export default React.createClass({
         }]}
         manual // Forces table not to paginate or sort automatically, so we can handle it server-side
         defaultPageSize={10}
+        showFilters={true}
         data={this.state.data} // Set the rows to be displayed
         pages={this.state.pages} // Display the total number of pages
         loading={this.state.loading} // Display the loading overlay when we need it

stories/SubComponents.js

@@ -5,77 +5,139 @@ import namor from 'namor'
 import CodeHighlight from './components/codeHighlight'
 import ReactTable from '../src/index'
 
-export default () => {
-  const data = _.map(_.range(5553), d => {
-    return {
-      firstName: namor.generate({ words: 1, numLen: 0 }),
-      lastName: namor.generate({ words: 1, numLen: 0 }),
-      age: Math.floor(Math.random() * 30)
+class SubComponents extends React.Component {
+
+  constructor(props) {
+    super(props)
+
+    const data = _.map(_.range(5553), d => {
+      return {
+        firstName: namor.generate({words: 1, numLen: 0}),
+        lastName: namor.generate({words: 1, numLen: 0}),
+        age: Math.floor(Math.random() * 30)
+      }
+    })
+
+    this.state = {
+      tableOptions: {
+        loading: false,
+        showPagination: true,
+        showPageSizeOptions: true,
+        showPageJump: true,
+        collapseOnSortingChange: true,
+        collapseOnPageChange: true,
+        collapseOnDataChange: true,
+        freezeWhenExpanded: false,
+        showFilters: false
+      },
+      data: data
     }
-  })
 
-  const columns = [{
-    header: 'Name',
-    columns: [{
-      header: 'First Name',
-      accessor: 'firstName'
+    this.setTableOption = this.setTableOption.bind(this);
+  }
+
+  render() {
+
+
+    const columns = [{
+      header: 'Name',
+      columns: [{
+        header: 'First Name',
+        accessor: 'firstName'
+      }, {
+        header: 'Last Name',
+        id: 'lastName',
+        accessor: d => d.lastName
+      }]
     }, {
-      header: 'Last Name',
-      id: 'lastName',
-      accessor: d => d.lastName
+      header: 'Info',
+      columns: [{
+        header: 'Age',
+        accessor: 'age'
+      }]
     }]
-  }, {
-    header: 'Info',
-    columns: [{
-      header: 'Age',
-      accessor: 'age'
-    }]
-  }]
 
-  return (
-    <div>
-      <div className='table-wrap'>
-        <ReactTable
-          className='-striped -highlight'
-          data={data}
-          columns={columns}
-          defaultPageSize={10}
-          SubComponent={(row) => {
-            return (
-              <div style={{padding: '20px'}}>
-                <em>You can put any component you want here, even another React Table!</em>
-                <br />
-                <br />
-                <ReactTable
-                  data={data}
-                  columns={columns}
-                  defaultPageSize={3}
-                  showPagination={false}
-                  SubComponent={(row) => {
-                    return (
-                      <div style={{padding: '20px'}}>
-                        <em>It even has access to the row data: </em>
-                        <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
-                      </div>
-                    )
-                  }}
-                />
-              </div>
-            )
-          }}
-        />
+    return (
+      <div>
+        <div style={{float: "left"}}>
+          <h1>Table Options</h1>
+          <table>
+            <tbody>
+            {
+              Object.keys(this.state.tableOptions).map(optionKey => {
+                const optionValue = this.state.tableOptions[optionKey];
+                return (
+                  <tr key={optionKey}>
+                    <td>{optionKey}</td>
+                    <td style={{paddingLeft: 10, paddingTop: 5}}>
+                      <input type="checkbox"
+                             name={optionKey}
+                             checked={optionValue}
+                             onChange={this.setTableOption}
+                      />
+                    </td>
+                  </tr>
+                )
+              })
+            }
+            </tbody>
+          </table>
+        </div>
+        <div className='table-wrap' style={{paddingLeft: 240}}>
+          <ReactTable
+            className='-striped -highlight'
+            data={this.state.data}
+            columns={columns}
+            defaultPageSize={10}
+            {...this.state.tableOptions}
+            SubComponent={(row) => {
+              return (
+                <div style={{padding: '20px'}}>
+                  <em>You can put any component you want here, even another React Table!</em>
+                  <br />
+                  <br />
+                  <ReactTable
+                    data={this.state.data}
+                    columns={columns}
+                    defaultPageSize={3}
+                    showPagination={false}
+                    SubComponent={(row) => {
+                      return (
+                        <div style={{padding: '20px'}}>
+                          <em>It even has access to the row data: </em>
+                          <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
+                        </div>
+                      )
+                    }}
+                  />
+                </div>
+              )
+            }}
+          />
+        </div>
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: Hold shift when sorting to multi-sort!</em>
+        </div>
+        <CodeHighlight>{() => this.getCode()}</CodeHighlight>
       </div>
-      <div style={{textAlign: 'center'}}>
-        <br />
-        <em>Tip: Hold shift when sorting to multi-sort!</em>
-      </div>
-      <CodeHighlight>{() => getCode()}</CodeHighlight>
-    </div>
-  )
-}
+    )
+  }
 
-function getCode () {
-  return `
+  setTableOption(event) {
+    const target = event.target;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const name = target.name;
+    this.setState({
+      tableOptions: {
+        ...this.state.tableOptions,
+        [name]: value
+      }
+    })
+  }
+
+  getCode() {
+    return `
 const columns = [{
   header: 'Name',
   columns: [{
@@ -99,6 +161,7 @@ export default (
     data={data}
     columns={columns}
     defaultPageSize={10}
+    {...otherOptions}
     SubComponent={(row) => {
       return (
         <div style={{padding: '20px'}}>
@@ -125,4 +188,7 @@ export default (
   />
 )
   `
-}
+  }
+}
+
+export default () => <SubComponents/>

yarn.lock

@@ -2998,7 +2998,7 @@ indexof@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
 
-inflight@^1.0.4, inflight@^1.0.6:
+inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
   dependencies:
@@ -4964,6 +4964,12 @@ rimraf@2, rimraf@^2.2.8, rimraf@~2.5.1, rimraf@~2.5.4:
   dependencies:
     glob "^7.0.5"
 
+rimraf@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
+  dependencies:
+    glob "^7.0.5"
+
 ripemd160@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-0.2.0.tgz#2bf198bde167cacfa51c0a928e84b68bbe171fce"