5.1.0

2026-08-19 16:30:21 +00:00 · 2017-02-10 16:47:09 -07:00
33 changed files with 647 additions and 1619 deletions
@@ -3,5 +3,3 @@ lib/
 react-table.js
 react-table.css
 *.log
-.idea
-.DS_Store
@@ -22,9 +22,6 @@ import PivotingSubComponents from '../stories/PivotingSubComponents.js'
 import OneHundredKRows from '../stories/OneHundredKRows.js'
 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')
@@ -52,7 +49,4 @@ configure(() => {
    .add('100k Rows w/ Pivoting & Sub Components', OneHundredKRows)
    .add('Functional Rendering', FunctionalRendering)
    .add('Custom Expander Position', CustomExpanderPosition)
-    .add('Custom "No Data" Text', NoDataText)
-    .add('Footers', Footers)
-    .add('Custom Filtering', Filtering)
 }, module)
@@ -4,14 +4,3 @@ 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;
-}
@@ -1,7 +1,3 @@
 body{
 	padding: 20px;
 }
-
-strong {
-	font-weight: bold
-}
@@ -24,9 +24,6 @@
 <a href="https://twitter.com/tannerlinsley" target="\_parent">
  <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
 </a>
-<a href="https://cash.me/$tannerlinsley" target="\_parent">
-  <img alt="" src="https://img.shields.io/badge/%24-Donate-brightgreen.svg" />
-</a>

 ## Features

@@ -47,11 +44,11 @@
 - [Props](#props)
 - [Columns](#columns)
 - [Column Header Groups](#column-header-groups)
- [Custom Cell and Header Rendering](#custom-cell-and-header-rendering)
+- [Custom Cell & Header Rendering](#custom-cell--and-header-rendering)
 - [Styles](#styles)
 - [Custom Props](#custom-props)
- [Pivoting and Aggregation](#pivoting-and-aggregation)
- [Sub Tables and Sub Components](#sub-tables-and-sub-components)
+- [Pivoting & Aggregation](#pivoting--aggregation)
+- [Sub Tables & Sub Components](#sub-tables--sub-components)
 - [Server-side Data](#server-side-data)
 - [Fully Controlled Component](#fully-controlled-component)
 - [Functional Rendering](#functional-rendering)
@@ -102,7 +99,7 @@ const data = [{

 const columns = [{
  header: 'Name',
-  accessor: 'name' // String-based value accessors!
+  accessor: 'name' // String-based value accessors !
 }, {
  header: 'Age',
  accessor: 'age',
@@ -138,14 +135,10 @@ These are all of the available props (and their default values) for the main `<R
  defaultPageSize: 20,
  showPageJump: true,
  expanderColumnWidth: 35,
-  collapseOnSortingChange: true,
+  collapseOnSortingChange: false,
  collapseOnPageChange: true,
-  collapseOnDataChange: true,
  freezeWhenExpanded: false,
  defaultSorting: [],
-  showFilters: false,
-  defaultFiltering: [],
-  defaultFilterMethod: (filter, row) => (row[filter.id] == filter.value),

  // Controlled State Overrides (see Fully Controlled Component section)
  page: undefined,
@@ -157,7 +150,6 @@ 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,
@@ -188,20 +180,13 @@ These are all of the available props (and their default values) for the main `<R
  getTheadProps: () => ({}),
  getTheadTrProps: () => ({}),
  getTheadThProps: () => ({}),
-  getTheadFilterProps: () => ({}),
-  getTheadFilterTrProps: () => ({}),
-  getTheadFilterThProps: () => ({}),
  getTbodyProps: () => ({}),
  getTrGroupProps: () => ({}),
  getTrProps: () => ({}),
  getThProps: () => ({}),
  getTdProps: () => ({}),
-  getTfootProps: () => ({}),
-  getTfootTrProps: () => ({}),
-  getTfootThProps: () => ({}),
  getPaginationProps: () => ({}),
  getLoadingProps: () => ({}),
-  getNoDataProps: () => ({}),

  // Global Column Defaults
  column: {
@@ -218,19 +203,12 @@ These are all of the available props (and their default values) for the main `<R
    headerClassName: '',
    headerStyle: {},
    getHeaderProps: () => ({})
-    // Footers only
-    footer: undefined,
-    footerClassName: '',
-    footerStyle: {},
-    getFooterProps: () => ({}),
-    filterMethod: undefined
  },

  // Text
  previousText: 'Previous',
  nextText: 'Next',
  loadingText: 'Loading...',
-  noDataText: 'No rows found',  
  pageText: 'Page',
  ofText: 'of',
  rowsText: 'rows',
@@ -265,7 +243,7 @@ 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,
  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
@@ -288,51 +266,16 @@ Or just define them as props
    // viewIndex == the index of the row in the current page

  // Header & HeaderGroup Options
-  header: 'Header Name', a function that returns a primitive, or JSX / React Component eg. ({data, column}) => <div>Header Name</div>,
+  header: 'Header Name' or JSX 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

  // Header Groups only
  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
-
-  // 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]}
-    // row == the row of data supplied to the table
-    // column == the column that the filter is on
 }]
 ```

-## Accessors
-Accessors are functions that return the value to populate the row's value for the column.
-This lets the render function not have to worry about accessing the correct data, the value is automatically populated in it's props.
-
-If a `string` or `array` is passed the default accessor is used.
-The default accessor will parse the input into an array and recursively flatten it.
-Any values that contain a dot (`.`) will be split.
-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": $}               |
-| "a.b"        | ["a", "b"]      | {"a": {"b": $}}        |
-| "a[0]"       | ["a", "0"]      | {"a": [$]}             |
-| ["a.b", "c"] | ["a", "b", "c"] | {"a": {"b": {"c": $}}} |
-
-*NOTE*
-If your data has a field/key with a dot (`.`) you will need to supply a custom accessor.
-
-
 ## Column Header Groups
 To group columns with another header column, just nest your columns in a header column.  Header columns utilize the same header properties as regular columns.
 ```javascript
@@ -352,8 +295,8 @@ const columns = [{
 }]
 ```

-## Custom Cell, Header and Footer Rendering
-You can use any react component or JSX to display content in column headers, cells and footers. Any component you use will be passed the following props (if available):
+## Custom Cell & Header Rendering
+You can use any react component or JSX to display column headers or cells. Any component you use will be passed the following props:
 - `row` - Original row from your data
 - `rowValues` - The post-accessed values from the original row
 - `index` - The index of the row
@@ -395,19 +338,17 @@ const columns = [{
 ```

 ## Styles
- React-table ships with a minimal and clean stylesheet to get you on your feet quickly.
- The stylesheet is located at `react-table/react-table.css`.
- There are countless ways to import a stylesheet. If you have questions on how to do so, consult the documentation of your build system.
+React-table ships with a minimal and clean stylesheet to get you on your feet quickly. It's located at `react-table/react-table.css`.

-#### Classes
+#### Built-in Styles
 - Adding a `-striped` className to ReactTable will slightly color odd numbered rows for legibility
 - Adding a `-highlight` className to ReactTable will highlight any row as you hover over it

-#### CSS
+#### CSS Styles
 We think the default styles looks great! But, if you prefer a more custom look, all of the included styles are easily overridable. Every single component contains a unique class that makes it super easy to customize. Just go for it!

 #### JS Styles
-Every single react-table element and `get[ComponentName]Props` callback supports `classname` and `style` props.
+Every single react-table element and `get[ComponentName]Props` callback support classes (powered by `classname` and js styles.

 ## Custom Props

@@ -433,11 +374,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 four parameters:
- 1. Table State
- 2. RowInfo (undefined if not applicable)
- 3. Column (undefined if not applicable)
- 4. React Table Instance
+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

 This makes it extremely easy to add, say... a row click callback!
 ```javascript
@@ -496,7 +437,7 @@ const columns = [{
 }]
 ```

-## Pivoting and Aggregation
+## Pivoting & Aggregation
 Pivoting the table will group records together based on their accessed values and allow the rows in that group to be expanded underneath it.
 To pivot, pass an array of `columnID`'s to `pivotBy`. Remember, a column's `id` is either the one that you assign it (when using a custom accessors) or its `accessor` string.
 ```javascript
@@ -526,7 +467,7 @@ const columns = [{

 Pivoted columns can be sorted just like regular columns, but not independently of each other.  For instance, if you click to sort the pivot column in ascending order, it will sort by each pivot recursively in ascending order together.

-## Sub Tables and Sub Components
+## Sub Tables & Sub Components
 By adding a `SubComponent` props, you can easily add an expansion level to all root-level rows:
 ```javascript
 <ReactTable
@@ -545,7 +486,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, sorting, and filtering on the server, `react-table` makes it easy on you.
+If you want to handle pagination, and sorting 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
@@ -568,8 +509,7 @@ If you want to handle pagination, sorting, and filtering on the server, `react-t
    Axios.post('mysite.com/data', {
      page: state.page,
      pageSize: state.pageSize,
-      sorting: state.sorting,
-      filtering: state.filtering
+      sorting: state.sorting
    })
      .then((res) => {
        // Update react-table
@@ -615,47 +555,55 @@ 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.
 />
 ```

 ## Functional Rendering
-Possibly one of the coolest features of React-Table is its ability to expose internal components and state for custom render logic. The easiest way to do this is to pass a function as the child of `<ReactTable />`.
+Possibly one of the coolest features of React-Table is its ability to expose internal state for custom render logic. The easiest way to do this is to optionally pass a function as a child of `<ReactTable />`.

 The function you pass will be called with the following items:
 - Fully-resolved state of the table
- A function that returns the standard table component
+- The standard table generator
 - The instance of the component

 You can then return any JSX or react you want! This turns out to be perfect for:
- Accessing the internal state of the table without a `ref`
- Decorating the table or extending it with your own UI
- Building your own custom display logic
+- Accessing the internal state of the table before rendering the table
+- Decorating the table with more UI
+- Building your own 100% custom display logic, while utilizing the state and methods of the table component

-Accessing internal state and wrapping with more UI:
+Example:
 ```javascript
 <ReactTable
-  data={data}
  columns={columns}
+  data={data}
+  ...
 >
  {(state, makeTable, instance) => {
+    // Now you have full access to the state of the table!
+    state.decoratedColumns === [...] // all of the columns (with id's and meta)
+    state.visibleColumns === [...] // all of the columns (with id's and meta)
+    state.visibleColumns === [...] // all of the columns (with id's and meta)
+    // etc.
+
+    // `makeTable` is a function that returns the standard table markup
+    return makeTable()
+
+    // So add some decoration!
    return (
-      <div style={{
-        background: '#ffcf00',
-        borderRadius: '5px',
-        overflow: 'hidden',
-        padding: '5px'
-      }}>
-        <pre><code>state.allVisibleColumns === {JSON.stringify(state.allVisibleColumns, null, 4)}</code></pre>
+      <div>
+        <customPivotBySelect />
+        <customColumnHideShow />
+        <customAnything />
        {makeTable()}
      </div>
    )
+
+    // The possibilities are endless!!!
+
  }}
 </ReactTable>
 ```

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

@@ -665,20 +613,18 @@ Though we confidently stand by the markup and architecture behind it, `react-tab
 // Change the global default
 import { ReactTableDefaults } from 'react-table'
 Object.assign(ReactTableDefaults, {
-  TableComponent: component,
-  TheadComponent: component,
-  TbodyComponent: component,
-  TrGroupComponent: component,
-  TrComponent: component,
-  ThComponent: component
-  TdComponent: component,
-  TfootComponent: component,
-  ExpanderComponent: component,
-  PaginationComponent: component,
-  PreviousComponent: undefined,
-  NextComponent: undefined,
-  LoadingComponent: component,
-  NoDataComponent: component,
+  TableComponent: Component,
+  TheadComponent: Component,
+  TbodyComponent: Component,
+  TrGroupComponent: Component,
+  TrComponent: Component,
+  ThComponent: Component,
+  TdComponent: Component,
+  PaginationComponent: Component,
+  PreviousComponent: Component,
+  NextComponent: Component,
+  LoadingComponent: Component,
+  ExpanderComponent: Component
 })

 // Or change per instance
@@ -16,7 +16,7 @@
      <body>
        <div id="root"></div>
        <div id="error-display"></div>
-        <script src="static/preview.ea1bdf726a82703c8f6f.bundle.js"></script>
+        <script src="static/preview.2624d4fc5e8e37cbc8cc.bundle.js"></script>
      </body>
    </html>
  
@@ -38,7 +38,7 @@
      </head>
      <body style="margin: 0;">
        <div id="root"></div>
-        <script src="static/manager.064c8fe6b78907f0a142.bundle.js"></script>
+        <script src="static/manager.f127c5ae855df8d8558a.bundle.js"></script>
      </body>
    </html>
  
@@ -1 +0,0 @@
-{"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":""}
@@ -0,0 +1 @@
+{"version":3,"file":"static/manager.f127c5ae855df8d8558a.bundle.js","sources":["webpack:///static/manager.f127c5ae855df8d8558a.bundle.js"],"mappings":"AAAA;AAkuDA;AA84DA;AA28DA;AA00DA;AAsyEA;AA89CA;AA8rDA;AAsiDA;AAg6DA;AA2nDA;AA++CA;AAkvDA;AAsnEA;AA2oDA;AAivCA;AA+nDA;AAkpDA;AA6lEA;AAs4DA;AAquDA;AA+pDA;AAqxDA;AAsrDA;AAwyDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}
@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.2624d4fc5e8e37cbc8cc.bundle.js","sources":["webpack:///static/preview.2624d4fc5e8e37cbc8cc.bundle.js"],"mappings":"AAAA;AAkuDA;AAkyDA;AA01EA;AA+gGA;AAo4IA;AAt5NA;AA4udA;AA2hEA;AA2uDA;AA29DA;AA2gDA;AAosDA;AAuhDA;AA+6DA;AAioDA;AA4+CA;AAwpDA;AAisEA;AAqoDA;AAqwCA;AA2oDA;AAowDA;AAokEA;AA0vDA;AA2rDA;AA8nDA;AAwsFA;AAyiGA;AA++CA;AA8yCA;AAgzCA;AAwhDA;AAiPA;AA+jFA","sourceRoot":""}
@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.ea1bdf726a82703c8f6f.bundle.js","sources":["webpack:///static/preview.ea1bdf726a82703c8f6f.bundle.js"],"mappings":"AAAA;AAkuDA;AAo/DA;AAgrFA;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;AAksFA;AAmjGA;AAksDA;AA02CA;AAgoCA;AAm/CA;AA+4CA;AAsCA;AA+jFA","sourceRoot":""}
@@ -1,6 +1,6 @@
 {
  "name": "react-table",
-  "version": "5.3.4",
+  "version": "5.1.0",
  "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": "rimraf react-table.css && stylus src/index.styl --compress -o react-table.css && yarn run css:autoprefix",
+    "build:css": "rm -rf 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": "rimraf react-table.js && browserify lib/index.js -s reactTable -x react -t babelify -g uglifyify -o react-table.js",
+    "umd": "rm -rf 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,7 +61,6 @@
    "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",
@@ -1,7 +1,7 @@
 import _ from './utils'

 export default {
-  getDataModel (newState) {
+  getDataModel (nextProps, nextState) {
    const {
      columns,
      pivotBy = [],
@@ -12,9 +12,8 @@ export default {
      expanderColumnWidth,
      SubComponent,
      page,
-      pages,
      pageSize
-    } = newState
+    } = this.getResolvedState(nextProps, nextState)

    // Determine Header Groups
    let hasHeaderGroups = false
@@ -192,14 +191,15 @@ 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)
@@ -214,34 +214,28 @@ export default {
      resolvedData = groupRecursively(resolvedData, pivotBy)
    }

-    const newPages = _.getFirstDefined(pages, Math.ceil(resolvedData.length / pageSize))
-    const newPage = page > newPages ? newPage - 1 : page
+    const newPages = Math.ceil(resolvedData.length / pageSize)

    return {
-      ...newState,
      resolvedData,
      pivotColumn,
      allVisibleColumns,
      headerGroups,
      allDecoratedColumns,
      hasHeaderGroups,
-      page: Math.max(newPage, 0)
+      page: (page + 1) > newPages ? newPages - 1 : page
    }
  },
  getSortedData (resolvedState) {
    const {
      manual,
      sorting,
-      filtering,
-      showFilters,
-      defaultFilterMethod,
-      resolvedData,
-      allVisibleColumns
+      resolvedData
    } = resolvedState

    // Resolve the data from either manual data or sorted data
    return {
-      sortedData: manual ? resolvedData : this.sortData(resolvedData, sorting, showFilters, filtering, defaultFilterMethod, allVisibleColumns)
+      sortedData: manual ? resolvedData : this.sortData(resolvedData, sorting)
    }
  },

@@ -254,28 +248,11 @@ export default {
  getStateOrProp (key) {
    return _.getFirstDefined(this.state[key], this.props[key])
  },
-  sortData (data, sorting, showFilters, filtering, defaultFilterMethod, allVisibleColumns) {
-    let filteredData = data
-
-    if (showFilters && filtering.length) {
-      filteredData = filtering.reduce(
-        (filteredSoFar, nextFilter) => {
-          return filteredSoFar.filter(
-            (row) => {
-              const column = allVisibleColumns.find(x => x.id === nextFilter.id) || {}
-              const filterMethod = column.filterMethod || defaultFilterMethod
-              return filterMethod(nextFilter, row, column)
-            })
-        }
-        , filteredData
-      )
-    }
-
+  sortData (data, sorting) {
    if (!sorting.length) {
-      return filteredData
+      return data
    }
-
-    const sorted = _.orderBy(filteredData, sorting.map(sort => {
+    const sorted = _.orderBy(data, sorting.map(sort => {
      return row => {
        if (row[sort.id] === null || row[sort.id] === undefined) {
          return -Infinity
@@ -301,23 +278,20 @@ export default {

  // User actions
  onPageChange (page) {
-    const {onPageChange, collapseOnPageChange} = this.props
+    const { onPageChange } = this.props
    if (onPageChange) {
      return onPageChange(page)
    }
-    const newState = {page}
-    if (collapseOnPageChange) {
-      newState.expandedRows = {}
-    }
-    this.setStateWithData(
-      newState
-      , () => {
-        this.fireOnChange()
-      })
+    this.setStateWithData({
+      expandedRows: {},
+      page
+    }, () => {
+      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
@@ -335,8 +309,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)
    }
@@ -418,30 +392,5 @@ export default {
    }, () => {
      this.fireOnChange()
    })
-  },
-  filterColumn (column, event) {
-    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 => x.id !== column.id)
-
-    if (event.target.value !== '') {
-      newFiltering.push({
-        id: column.id,
-        value: event.target.value
-      })
-    }
-
-    this.setStateWithData({
-      page: 0,
-      filtering: newFiltering
-    }, () => {
-      this.fireOnChange()
-    })
  }
 }
@@ -1,161 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-//
-import _ from './utils'
-import Pagination from './pagination'
-
-const emptyObj = () => ({})
-
-export default {
-  // General
-  data: [],
-  loading: false,
-  showPagination: true,
-  showPageSizeOptions: true,
-  pageSizeOptions: [5, 10, 20, 25, 50, 100],
-  defaultPageSize: 20,
-  showPageJump: true,
-  expanderColumnWidth: 35,
-  collapseOnSortingChange: true,
-  collapseOnPageChange: true,
-  collapseOnDataChange: true,
-  freezeWhenExpanded: false,
-  defaultSorting: [],
-  showFilters: false,
-  defaultFiltering: [],
-  defaultFilterMethod: (filter, row, column) => (row[filter.id] === filter.value),
-
-  // Controlled State Overrides
-  // page: undefined,
-  // pageSize: undefined,
-  // sorting: undefined,
-
-  // Controlled State Callbacks
-  onExpandSubComponent: undefined,
-  onPageChange: undefined,
-  onPageSizeChange: undefined,
-  onSortingChange: undefined,
-  onFilteringChange: undefined,
-
-  // Pivoting
-  pivotBy: undefined,
-  pivotColumnWidth: 200,
-  pivotValKey: '_pivotVal',
-  pivotIDKey: '_pivotID',
-  subRowsKey: '_subRows',
-
-  // Pivoting State Overrides
-  // expandedRows: {},
-
-  // Pivoting State Callbacks
-  onExpandRow: undefined,
-
-  // General Callbacks
-  onChange: () => null,
-
-  // Classes
-  className: '',
-  style: {},
-
-  // Component decorators
-  getProps: emptyObj,
-  getTableProps: emptyObj,
-  getTheadGroupProps: emptyObj,
-  getTheadGroupTrProps: emptyObj,
-  getTheadGroupThProps: emptyObj,
-  getTheadProps: emptyObj,
-  getTheadTrProps: emptyObj,
-  getTheadThProps: emptyObj,
-  getTheadFilterProps: emptyObj,
-  getTheadFilterTrProps: emptyObj,
-  getTheadFilterThProps: emptyObj,
-  getTbodyProps: emptyObj,
-  getTrGroupProps: emptyObj,
-  getTrProps: emptyObj,
-  getTdProps: emptyObj,
-  getTfootProps: emptyObj,
-  getTfootTrProps: emptyObj,
-  getTfootTdProps: emptyObj,
-  getPaginationProps: emptyObj,
-  getLoadingProps: emptyObj,
-  getNoDataProps: emptyObj,
-
-  // Global Column Defaults
-  column: {
-    sortable: true,
-    show: true,
-    minWidth: 100,
-    // Cells only
-    render: undefined,
-    className: '',
-    style: {},
-    getProps: emptyObj,
-    // Headers only
-    header: undefined,
-    headerClassName: '',
-    headerStyle: {},
-    getHeaderProps: emptyObj,
-    // Footers only
-    footer: undefined,
-    footerClassName: '',
-    footerStyle: {},
-    getFooterProps: emptyObj,
-    filterMethod: undefined
-  },
-
-  // Text
-  previousText: 'Previous',
-  nextText: 'Next',
-  loadingText: 'Loading...',
-  noDataText: 'No rows found',
-  pageText: 'Page',
-  ofText: 'of',
-  rowsText: 'rows',
-
-  // Components
-  TableComponent: _.makeTemplateComponent('rt-table'),
-  TheadComponent: _.makeTemplateComponent('rt-thead'),
-  TbodyComponent: _.makeTemplateComponent('rt-tbody'),
-  TrGroupComponent: _.makeTemplateComponent('rt-tr-group'),
-  TrComponent: _.makeTemplateComponent('rt-tr'),
-  ThComponent: ({toggleSort, className, children, ...rest}) => {
-    return (
-      <div
-        className={classnames(className, 'rt-th')}
-        onClick={e => {
-          toggleSort && toggleSort(e)
-        }}
-        {...rest}
-      >
-        {children}
-      </div>
-    )
-  },
-  TdComponent: _.makeTemplateComponent('rt-td'),
-  TfootComponent: _.makeTemplateComponent('rt-tfoot'),
-  ExpanderComponent: ({isExpanded, ...rest}) => {
-    return (
-      <div
-        className={classnames('rt-expander', isExpanded && '-open')}
-        {...rest}
-      >&bull;</div>
-    )
-  },
-  PaginationComponent: Pagination,
-  PreviousComponent: undefined,
-  NextComponent: undefined,
-  LoadingComponent: ({className, loading, loadingText, ...rest}) => (
-    <div className={classnames(
-      '-loading',
-      {'-active': loading},
-      className
-    )}
-      {...rest}
-    >
-      <div className='-loading-inner'>
-        {loadingText}
-      </div>
-    </div>
-  ),
-  NoDataComponent: _.makeTemplateComponent('rt-noData')
-}
@@ -2,15 +2,254 @@ import React from 'react'
 import classnames from 'classnames'
 //
 import _ from './utils'
-import lifecycle from './lifecycle'
-import methods from './methods'
-import defaults from './defaultProps'

-export const ReactTableDefaults = defaults
+import componentMethods from './componentMethods'
+import Pagination from './pagination'
+
+const emptyObj = () => ({})
+
+export const ReactTableDefaults = {
+  // General
+  data: [],
+  loading: false,
+  showPagination: true,
+  showPageSizeOptions: true,
+  pageSizeOptions: [5, 10, 20, 25, 50, 100],
+  defaultPageSize: 20,
+  showPageJump: true,
+  expanderColumnWidth: 35,
+  collapseOnSortingChange: false,
+  collapseOnPageChange: true,
+  freezeWhenExpanded: false,
+  defaultSorting: [],
+
+  // Controlled State Overrides
+  // page: undefined,
+  // pageSize: undefined,
+  // sorting: undefined,
+
+  // Controlled State Callbacks
+  onExpandSubComponent: undefined,
+  onPageChange: undefined,
+  onPageSizeChange: undefined,
+  onSortingChange: undefined,
+
+  // Pivoting
+  pivotBy: undefined,
+  pivotColumnWidth: 200,
+  pivotValKey: '_pivotVal',
+  pivotIDKey: '_pivotID',
+  subRowsKey: '_subRows',
+
+  // Pivoting State Overrides
+  // expandedRows: {},
+
+  // Pivoting State Callbacks
+  onExpandRow: undefined,
+
+  // General Callbacks
+  onChange: () => null,
+
+  // Classes
+  className: '',
+  style: {},
+
+  // Component decorators
+  getProps: emptyObj,
+  getTableProps: emptyObj,
+  getTheadGroupProps: emptyObj,
+  getTheadGroupTrProps: emptyObj,
+  getTheadGroupThProps: emptyObj,
+  getTheadProps: emptyObj,
+  getTheadTrProps: emptyObj,
+  getTheadThProps: emptyObj,
+  getTbodyProps: emptyObj,
+  getTrGroupProps: emptyObj,
+  getTrProps: emptyObj,
+  getThProps: emptyObj,
+  getTdProps: emptyObj,
+  getPaginationProps: emptyObj,
+  getLoadingProps: emptyObj,
+
+  // Global Column Defaults
+  column: {
+    sortable: true,
+    show: true,
+    minWidth: 100,
+    // Cells only
+    render: undefined,
+    className: '',
+    style: {},
+    getProps: () => ({}),
+    // Headers only
+    header: undefined,
+    headerClassName: '',
+    headerStyle: {},
+    getHeaderProps: () => ({})
+  },
+
+  // Text
+  previousText: 'Previous',
+  nextText: 'Next',
+  loadingText: 'Loading...',
+  pageText: 'Page',
+  ofText: 'of',
+  rowsText: 'rows',
+
+  // Components
+  TableComponent: _.makeTemplateComponent('rt-table'),
+  TheadComponent: _.makeTemplateComponent('rt-thead'),
+  TbodyComponent: _.makeTemplateComponent('rt-tbody'),
+  TrGroupComponent: _.makeTemplateComponent('rt-tr-group'),
+  TrComponent: _.makeTemplateComponent('rt-tr'),
+  ThComponent: ({toggleSort, className, children, ...rest}) => {
+    return (
+      <div
+        className={classnames(className, 'rt-th')}
+        onClick={e => {
+          toggleSort && toggleSort(e)
+        }}
+        {...rest}
+      >
+        {children}
+      </div>
+    )
+  },
+  TdComponent: _.makeTemplateComponent('rt-td'),
+  ExpanderComponent: ({isExpanded, ...rest}) => {
+    return (
+      <div
+        className={classnames('rt-expander', isExpanded && '-open')}
+        {...rest}
+      >&bull;</div>
+    )
+  },
+  PaginationComponent: Pagination,
+  PreviousComponent: undefined,
+  NextComponent: undefined,
+  LoadingComponent: ({className, loading, loadingText, ...rest}) => (
+    <div className={classnames(
+      '-loading',
+      {'-active': loading},
+      className
+    )}
+      {...rest}
+    >
+      <div className='-loading-inner'>
+        {loadingText}
+      </div>
+    </div>
+  )
+}

 export default React.createClass({
-  ...lifecycle,
-  ...methods,
+  getDefaultProps () {
+    return ReactTableDefaults
+  },
+
+  getInitialState () {
+    return {
+      page: 0,
+      pageSize: this.props.defaultPageSize || 10,
+      sorting: this.props.defaultSorting,
+      expandedRows: {}
+    }
+  },
+
+  getResolvedState (props, state) {
+    const resolvedState = {
+      ..._.compactObject(this.state),
+      ..._.compactObject(state),
+      ..._.compactObject(this.props),
+      ..._.compactObject(props)
+    }
+    return resolvedState
+  },
+
+  componentWillMount () {
+    this.setStateWithData(this.getDataModel())
+  },
+
+  componentDidMount () {
+    this.fireOnChange()
+  },
+
+  componentWillReceiveProps (nextProps, nextState) {
+    const oldState = this.getResolvedState()
+    const newState = this.getResolvedState(nextProps, nextState)
+
+    // Props that trigger a data update
+    if (
+      oldState.data !== newState.data ||
+      oldState.columns !== newState.columns ||
+      oldState.pivotBy !== newState.pivotBy ||
+      oldState.sorting !== newState.sorting
+    ) {
+      this.setStateWithData(this.getDataModel(nextProps, nextState))
+    }
+  },
+
+  setStateWithData (newState, cb) {
+    const oldState = this.getResolvedState()
+    const newResolvedState = this.getResolvedState({}, newState)
+    const { freezeWhenExpanded } = newResolvedState
+
+    // Default to unfrozen state
+    newResolvedState.frozen = false
+
+    // If freezeWhenExpanded is set, check for frozen conditions
+    if (freezeWhenExpanded) {
+      // if any rows are expanded, freeze the existing data and sorting
+      const keys = Object.keys(newResolvedState.expandedRows)
+      for (var i = 0; i < keys.length; i++) {
+        if (newResolvedState.expandedRows[keys[i]]) {
+          newResolvedState.frozen = true
+          break
+        }
+      }
+    }
+
+    // If the data isn't frozen and either the data or
+    // sorting model has changed, update the data
+    if (
+      (oldState.frozen && !newResolvedState.frozen) ||
+      oldState.sorting !== newResolvedState.sorting ||
+      (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData)
+    ) {
+      // Handle collapseOnSortingChange & collapseOnPageChange
+      if (
+        (oldState.sorting !== newResolvedState.sorting && this.props.collapseOnSortingChange) ||
+        (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnPageChange)
+      ) {
+        newResolvedState.expandedRows = {}
+      }
+
+      Object.assign(newResolvedState, this.getSortedData(newResolvedState))
+    }
+
+    // Calculate pageSize all the time
+    if (newResolvedState.resolvedData) {
+      newResolvedState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize)
+    }
+
+    return this.setState(newResolvedState, cb)
+  },
+
+  shouldComponentUpdate (nextProps, nextState) {
+    const oldState = this.getResolvedState()
+    const newState = this.getResolvedState(nextProps, nextState)
+
+    // State changes that trigger a render
+    if (
+      oldState.sortedData !== newState.sortedData ||
+      oldState.page !== newState.page ||
+      oldState.pageSize !== newState.pageSize ||
+      oldState.expandedRows !== newState.expandedRows
+    ) {
+      return true
+    }
+    return false
+  },

  render () {
    const resolvedState = this.getResolvedState()
@@ -26,31 +265,22 @@ export default React.createClass({
      getTheadProps,
      getTheadTrProps,
      getTheadThProps,
-      getTheadFilterProps,
-      getTheadFilterTrProps,
-      getTheadFilterThProps,
      getTbodyProps,
      getTrGroupProps,
      getTrProps,
+      getThProps,
      getTdProps,
-      getTfootProps,
-      getTfootTrProps,
-      getTfootTdProps,
      getPaginationProps,
      getLoadingProps,
-      getNoDataProps,
      showPagination,
      expanderColumnWidth,
      manual,
      loadingText,
-      noDataText,
-      showFilters,
      // State
      loading,
      pageSize,
      page,
      sorting,
-      filtering,
      pages,
      // Pivoting State
      pivotValKey,
@@ -65,12 +295,10 @@ export default React.createClass({
      TrComponent,
      ThComponent,
      TdComponent,
-      TfootComponent,
      ExpanderComponent,
      PaginationComponent,
      LoadingComponent,
      SubComponent,
-      NoDataComponent,
      // Data model
      resolvedData,
      allVisibleColumns,
@@ -80,6 +308,9 @@ export default React.createClass({
      sortedData
    } = resolvedState

+    // Determine the flex percentage for each column
+    // const columnPercentage = 100 / allVisibleColumns.length
+
    // Pagination
    const startRow = pageSize * page
    const endRow = startRow + pageSize
@@ -87,9 +318,7 @@ export default React.createClass({
    const minRows = this.getMinRows()
    const padRows = pages > 1 ? _.range(pageSize - pageRows.length)
      : minRows ? _.range(Math.max(minRows - pageRows.length, 0))
-        : []
-
-    const hasColumnFooter = allVisibleColumns.some(d => d.footer)
+      : []

    const recurseRowsViewIndex = (rows, path = [], index = -1) => {
      rows.forEach((row, i) => {
@@ -119,7 +348,6 @@ export default React.createClass({
      pageRows,
      minRows,
      padRows,
-      hasColumnFooter,
      canPrevious,
      canNext,
      rowMinWidth
@@ -225,10 +453,12 @@ export default React.createClass({
          }}
          {...rest}
        >
-          {_.normalizeComponent(column.header, {
-            data: sortedData,
-            column: column
-          })}
+          {typeof column.header === 'function' ? (
+            <column.header
+              data={sortedData}
+              column={column}
+            />
+          ) : column.header}
        </ThComponent>
      )
    }
@@ -291,7 +521,7 @@ export default React.createClass({
                'rt-pivot-header',
                column.sortable && '-cursor-pointer',
                classes,
-                pivotSort ? (pivotSort.desc ? '-sort-desc' : '-sort-asc') : ''
+                pivotSort ? (pivotSort.desc ? '-sort-asc' : '-sort-desc') : ''
              )}
              style={{
                ...styles,
@@ -307,10 +537,12 @@ export default React.createClass({
              {column.pivotColumns.map((pivotColumn, i) => {
                return (
                  <span key={pivotColumn.id}>
-                    {_.normalizeComponent(pivotColumn.header, {
-                      data: sortedData,
-                      column: column
-                    })}
+                    {typeof pivotColumn.header === 'function' ? (
+                      <pivotColumn.header
+                        data={sortedData}
+                        column={pivotColumn}
+                      />
+                    ) : pivotColumn.header}
                    {i < column.pivotColumns.length - 1 && (
                      <ExpanderComponent />
                    )}
@@ -342,7 +574,7 @@ export default React.createClass({
          key={i}
          className={classnames(
            classes,
-            sort ? (sort.desc ? '-sort-desc' : '-sort-asc') : '',
+            sort ? (sort.desc ? '-sort-asc' : '-sort-desc') : '',
            column.sortable && '-cursor-pointer',
            !show && '-hidden',
          )}
@@ -357,146 +589,12 @@ export default React.createClass({
          }}
          {...rest}
        >
-          {_.normalizeComponent(column.header, {
-            data: sortedData,
-            column: column
-          })}
-        </ThComponent>
-      )
-    }
-
-    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 === col.id)
-            pivotCols.push(
-              <span key={col.id}
-                style={{display: 'flex', alignContent: 'flex-end', flex: 1}}>
-                <input type='text'
-                  style={{
-                    flex: 1,
-                    width: 20,
-                    backgroundColor: i > 0 ? '#f3f3f3' : '#fff'
-                  }}
-                  value={filter ? filter.value : ''}
-                  disabled={i > 0}
-                  onChange={(event) => this.filterColumn(col, event)}
-                />
-              </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}
-        >
-          <input type='text'
-            style={{
-              width: `100%`
-            }}
-            value={filter ? filter.value : ''}
-            onChange={(event) => this.filterColumn(column, event)}
-          />
+          {typeof column.header === 'function' ? (
+            <column.header
+              data={sortedData}
+              column={column}
+            />
+          ) : column.header}
        </ThComponent>
      )
    }
@@ -529,6 +627,7 @@ export default React.createClass({
            {...trProps.rest}
          >
            {allVisibleColumns.map((column, i2) => {
+              const Cell = column.render
              const show = typeof column.show === 'function' ? column.show() : column.show
              const width = _.getFirstDefined(column.width, column.minWidth)
              const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
@@ -593,15 +692,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>
                  )
                }
@@ -646,10 +745,13 @@ export default React.createClass({
                  }}
                  {...tdProps.rest}
                >
-                  {_.normalizeComponent(column.render, {
-                    ...rowInfo,
-                    value: rowInfo.rowValues[column.id]
-                  }, rowInfo.rowValues[column.id])}
+                  {typeof Cell === 'function' ? (
+                    <Cell
+                      {...rowInfo}
+                      value={rowInfo.rowValues[column.id]}
+                    />
+                  ) : typeof Cell !== 'undefined' ? Cell
+                  : rowInfo.rowValues[column.id]}
                </TdComponent>
              )
            })}
@@ -667,6 +769,7 @@ export default React.createClass({
    const makePadRow = (row, i) => {
      const trGroupProps = getTrGroupProps(finalState, undefined, undefined, this)
      const trProps = _.splitProps(getTrProps(finalState, undefined, undefined, this))
+      const thProps = _.splitProps(getThProps(finalState, undefined, undefined, this))
      return (
        <TrGroupComponent
          key={i}
@@ -679,6 +782,20 @@ export default React.createClass({
            )}
            style={trProps.style || {}}
          >
+            {SubComponent && (
+              <ThComponent
+                className={classnames(
+                  'rt-expander-header',
+                  thProps.className
+                )}
+                style={{
+                  ...thProps.style,
+                  flex: `0 0 auto`,
+                  width: `${expanderColumnWidth}px`
+                }}
+                {...thProps.rest}
+              />
+            )}
            {allVisibleColumns.map((column, i2) => {
              const show = typeof column.show === 'function' ? column.show() : column.show
              const width = _.getFirstDefined(column.width, column.minWidth)
@@ -722,188 +839,71 @@ export default React.createClass({
      )
    }

-    const makeColumnFooters = () => {
-      const tFootProps = getTfootProps(finalState, undefined, undefined, this)
-      const tFootTrProps = _.splitProps(getTfootTrProps(finalState, undefined, undefined, this))
+    const makeTable = () => {
+      const rootProps = _.splitProps(getProps(finalState, undefined, undefined, this))
+      const tableProps = _.splitProps(getTableProps(finalState, undefined, undefined, this))
+      const tBodyProps = _.splitProps(getTbodyProps(finalState, undefined, undefined, this))
+      const paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
+      const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
      return (
-        <TfootComponent
-          className={tFootProps.className}
+        <div
+          className={classnames(
+            'ReactTable',
+            className,
+            rootProps.className
+          )}
          style={{
-            ...tFootProps.style,
-            minWidth: `${rowMinWidth}px`
+            ...style,
+            ...rootProps.style
          }}
-          {...tFootProps.rest}
+          {...rootProps.rest}
        >
-          <TrComponent
-            className={classnames(
-              tFootTrProps.className
-            )}
-            style={tFootTrProps.style}
-            {...tFootTrProps.rest}
+          <TableComponent
+            className={classnames(tableProps.className)}
+            style={tableProps.style}
+            {...tableProps.rest}
          >
-            {allVisibleColumns.map((column, i2) => {
-              const show = typeof column.show === 'function' ? column.show() : column.show
-              const width = _.getFirstDefined(column.width, column.minWidth)
-              const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
-              const tFootTdProps = _.splitProps(getTfootTdProps(finalState, undefined, undefined, this))
-              const columnProps = _.splitProps(column.getProps(finalState, undefined, column, this))
-              const columnFooterProps = _.splitProps(column.getFooterProps(finalState, undefined, column, this))
-
-              const classes = [
-                tFootTdProps.className,
-                column.className,
-                columnProps.className,
-                columnFooterProps.className
-              ]
-
-              const styles = {
-                ...tFootTdProps.style,
-                ...column.style,
-                ...columnProps.style,
-                ...columnFooterProps.style
-              }
-
-              if (column.expander) {
-                if (column.pivotColumns) {
-                  return (
-                    <TdComponent
-                      key={i2}
-                      className={classnames(
-                        'rt-pivot',
-                        classes
-                      )}
-                      style={{
-                        ...styles,
-                        flex: `${width} 0 auto`,
-                        width: `${width}px`,
-                        maxWidth: `${maxWidth}px`
-                      }}
-                      {...columnProps.rest}
-                      {...tFootTdProps.rest}
-                      {...columnFooterProps.rest}
-                    >
-                      {_.normalizeComponent(column.footer)}
-                    </TdComponent>
-                  )
-                }
-
-                // Return the regular expander cell
-                return (
-                  <TdComponent
-                    key={i2}
-                    className={classnames(
-                      classes,
-                      {hidden: !show}
-                    )}
-                    style={{
-                      ...styles,
-                      flex: `0 0 auto`,
-                      width: `${expanderColumnWidth}px`
-                    }}
-                  />
-                )
-              }
-
-              // Return regular cell
-              return (
-                <TdComponent
-                  key={i2}
-                  className={classnames(
-                    classes,
-                    !show && 'hidden'
-                  )}
-                  style={{
-                    ...styles,
-                    flex: `${width} 0 auto`,
-                    width: `${width}px`,
-                    maxWidth: `${maxWidth}px`
-                  }}
-                  {...columnProps.rest}
-                  {...tFootTdProps.rest}
-                  {...columnFooterProps.rest}
-                >
-                  {_.normalizeComponent(column.footer, {
-                    data: sortedData,
-                    column: column
-                  })}
-                </TdComponent>
-              )
-            })}
-          </TrComponent>
-        </TfootComponent>
+            {hasHeaderGroups && makeHeaderGroups()}
+            {makeHeaders()}
+            <TbodyComponent
+              className={classnames(tBodyProps.className)}
+              style={{
+                ...tBodyProps.style,
+                minWidth: `${rowMinWidth}px`
+              }}
+              {...tBodyProps.rest}
+            >
+              {pageRows.map((d, i) => makePageRow(d, i))}
+              {padRows.map(makePadRow)}
+            </TbodyComponent>
+          </TableComponent>
+          {showPagination && (
+            <PaginationComponent
+              {...resolvedState}
+              pages={pages}
+              canPrevious={canPrevious}
+              canNext={canNext}
+              onPageChange={this.onPageChange}
+              onPageSizeChange={this.onPageSizeChange}
+              className={paginationProps.className}
+              style={paginationProps.style}
+              {...paginationProps.rest}
+            />
+          )}
+          <LoadingComponent
+            loading={loading}
+            loadingText={loadingText}
+            {...loadingProps}
+          />
+        </div>
      )
    }

-    const rootProps = _.splitProps(getProps(finalState, undefined, undefined, this))
-    const tableProps = _.splitProps(getTableProps(finalState, undefined, undefined, this))
-    const tBodyProps = _.splitProps(getTbodyProps(finalState, undefined, undefined, this))
-    const paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
-    const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
-    const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
-
-    const makeTable = () => (
-      <div
-        className={classnames(
-          'ReactTable',
-          className,
-          rootProps.className
-        )}
-        style={{
-          ...style,
-          ...rootProps.style
-        }}
-        {...rootProps.rest}
-      >
-        <TableComponent
-          className={classnames(tableProps.className)}
-          style={tableProps.style}
-          {...tableProps.rest}
-        >
-          {hasHeaderGroups ? makeHeaderGroups() : null}
-          {makeHeaders()}
-          {showFilters ? makeFilters() : null}
-          <TbodyComponent
-            className={classnames(tBodyProps.className)}
-            style={{
-              ...tBodyProps.style,
-              minWidth: `${rowMinWidth}px`
-            }}
-            {...tBodyProps.rest}
-          >
-            {pageRows.map((d, i) => makePageRow(d, i))}
-            {padRows.map(makePadRow)}
-          </TbodyComponent>
-          {hasColumnFooter ? makeColumnFooters() : null}
-        </TableComponent>
-        {showPagination ? (
-          <PaginationComponent
-            {...resolvedState}
-            pages={pages}
-            canPrevious={canPrevious}
-            canNext={canNext}
-            onPageChange={this.onPageChange}
-            onPageSizeChange={this.onPageSizeChange}
-            className={paginationProps.className}
-            style={paginationProps.style}
-            {...paginationProps.rest}
-          />
-          ) : null}
-        {!pageRows.length && (
-          <NoDataComponent
-            {...noDataProps}
-          >
-            {_.normalizeComponent(noDataText)}
-          </NoDataComponent>
-        )}
-        <LoadingComponent
-          loading={loading}
-          loadingText={loadingText}
-          {...loadingProps}
-        />
-      </div>
-    )
-
    // childProps are optionally passed to a function-as-a-child
    return children ? children(finalState, makeTable, this) : makeTable()
-  }
+  },
+
+  // Helpers
+  ...componentMethods
+
 })
@@ -22,12 +22,6 @@ $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)

@@ -36,6 +30,7 @@ $expandSize = 7px

    .rt-th
    .rt-td
+      color: black
      border-right: 1px solid alpha(black, .05)
      transition box-shadow .3s $easeOutBack
      box-shadow:inset 0 0 0 0 transparent
@@ -105,15 +100,6 @@ $expandSize = 7px
      cursor: pointer
    &.-open:after
        transform: translate(-50%, -50%) rotate(0deg)
-  .rt-tfoot
-    display: flex
-    flex-direction: column
-    box-shadow: 0 0px 15px 0px alpha(black, .15)
-
-    .rt-td
-      border-right:1px solid alpha(black, .05)
-      &:last-child
-        border-right:0

  &.-striped
    .rt-tr.-odd
@@ -131,7 +117,6 @@ $expandSize = 7px
    flex-wrap: wrap
    padding: 3px
    box-shadow: 0 0px 15px 0px alpha(black, .1)
-    border-top: 2px solid alpha(black, .1)

    .-btn
      appearance:none
@@ -185,18 +170,6 @@ $expandSize = 7px
    .-pageSizeOptions
      margin: 3px 10px

-  .rt-noData
-    display:block
-    position:absolute
-    left:50%
-    top:50%
-    transform: translate(-50%, -50%)
-    background: alpha(white, .8)
-    transition: all .3s ease
-    z-index: 1
-    pointer-events: none
-    padding: 20px
-    color: alpha(black, .5)

  .-loading
    display:block
@@ -1,112 +0,0 @@
-import _ from './utils'
-import defaultProps from './defaultProps'
-
-export default {
-  getDefaultProps () {
-    return defaultProps
-  },
-
-  getInitialState () {
-    return {
-      page: 0,
-      pageSize: this.props.defaultPageSize || 10,
-      sorting: this.props.defaultSorting,
-      expandedRows: {},
-      filtering: this.props.defaultFiltering
-    }
-  },
-
-  getResolvedState (props, state) {
-    const resolvedState = {
-      ..._.compactObject(this.state),
-      ..._.compactObject(state),
-      ..._.compactObject(this.props),
-      ..._.compactObject(props)
-    }
-    return resolvedState
-  },
-
-  componentWillMount () {
-    this.setStateWithData(this.getDataModel(this.getResolvedState()))
-  },
-
-  componentDidMount () {
-    this.fireOnChange()
-  },
-
-  componentWillReceiveProps (nextProps, nextState) {
-    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.showFilters !== newState.showFilters ||
-      oldState.filtering !== newState.filtering
-    ) {
-      this.setStateWithData(this.getDataModel(newState))
-    }
-  },
-
-  setStateWithData (newState, cb) {
-    const oldState = this.getResolvedState()
-    const newResolvedState = this.getResolvedState({}, newState)
-    const {freezeWhenExpanded} = newResolvedState
-
-    // Default to unfrozen state
-    newResolvedState.frozen = false
-
-    // If freezeWhenExpanded is set, check for frozen conditions
-    if (freezeWhenExpanded) {
-      // if any rows are expanded, freeze the existing data and sorting
-      const keys = Object.keys(newResolvedState.expandedRows)
-      for (var i = 0; i < keys.length; i++) {
-        if (newResolvedState.expandedRows[keys[i]]) {
-          newResolvedState.frozen = true
-          break
-        }
-      }
-    }
-
-    // If the data isn't frozen and either the data or
-    // sorting model has changed, update the data
-    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 & collapseOnDataChange
-      if (
-        (oldState.sorting !== newResolvedState.sorting && this.props.collapseOnSortingChange) ||
-        (oldState.filtering !== newResolvedState.filtering) ||
-        (oldState.showFilters !== newResolvedState.showFilters) ||
-        (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnDataChange)
-      ) {
-        newResolvedState.expandedRows = {}
-      }
-
-      Object.assign(newResolvedState, this.getSortedData(newResolvedState))
-    }
-
-    // Calculate pageSize all the time
-    if (newResolvedState.sortedData) {
-      newResolvedState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.sortedData.length / newResolvedState.pageSize)
-    }
-
-    return this.setState(newResolvedState, cb)
-  }
-}
@@ -4,7 +4,7 @@ import classnames from 'classnames'
 // import _ from './utils'

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

 export default React.createClass({
@@ -66,7 +66,9 @@ export default React.createClass({
        <div className='-center'>
          <span className='-pageInfo'>
            {this.props.pageText} {showPageJump ? (
-              <div className='-pageJump'>
+              <form className='-pageJump'
+                onSubmit={this.applyPage}
+              >
                <input
                  type={this.state.page === '' ? 'text' : 'number'}
                  onChange={e => {
@@ -79,13 +81,8 @@ 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()
-                    }
-                  }}
                />
-              </div>
+              </form>
            ) : (
              <span className='-currentPage'>{page + 1}</span>
            )} {this.props.ofText} <span className='-totalPages'>{pages}</span>
@@ -17,8 +17,7 @@ export default {
  isArray,
  splitProps,
  compactObject,
-  isSortingDesc,
-  normalizeComponent
+  isSortingDesc
 }

 function get (obj, path, def) {
@@ -190,13 +189,3 @@ function compactObject (obj) {
 function isSortingDesc (d) {
  return !!(d.sort === 'desc' || d.desc === true || d.asc === false)
 }
-
-function normalizeComponent (Comp, params = {}, fallback = Comp) {
-  return typeof Comp === 'function' ? (
-    Object.getPrototypeOf(Comp).isReactComponent ? (
-      <Comp
-        {...params}
-      />
-    ) : Comp(params)
-  ) : fallback
-}
@@ -1,206 +0,0 @@
-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) => ((row[filter.id] + "").startsWith(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 be an exact match. Example: age == "23".</p>
-          <p>This example overrides the default filter behavior by setting the <strong>defaultFilterMethod</strong> table option to match on values that start with the filter text. Example: age.startsWith("2")</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) => ((row[filter.id] + \"\").startsWith(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/>
@@ -1,114 +0,0 @@
-import React from 'react'
-import _ from 'lodash'
-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)
-    }
-  })
-
-  const columns = [{
-    header: 'Name',
-    columns: [{
-      header: 'First Name',
-      accessor: 'firstName',
-      footer: (
-        <span><strong>Popular:</strong> {
-          _.first(
-            _.reduce(
-              _.map(
-                _.groupBy(
-                  data, d => d.firstName
-                )
-              ),
-              (a, b) => a.length > b.length ? a : b
-            )
-          ).firstName}
-        </span>
-      )
-    }, {
-      header: 'Last Name',
-      id: 'lastName',
-      accessor: d => d.lastName,
-      footer: (
-        <span><strong>Longest:</strong> {
-          _.reduce(
-            _.map(
-              _.groupBy(
-                data, d => d.lastName
-              ),
-              (d, key) => key
-            ),
-            (a, b) => a.length > b.length ? a : b
-          )}
-        </span>
-      )
-    }]
-  }, {
-    header: 'Info',
-    columns: [{
-      header: 'Age',
-      accessor: 'age',
-      footer: <span><strong>Average:</strong> {_.round(_.mean(_.map(data, d => d.age)))}</span>
-    }]
-  }]
-
-  return (
-    <div>
-      <div className='table-wrap'>
-        <ReactTable
-          className='-striped -highlight'
-          data={data}
-          columns={columns}
-          defaultPageSize={10}
-        />
-      </div>
-      <div style={{textAlign: 'center'}}>
-        <br />
-        <em>Tip: Hold shift when sorting to multi-sort!</em>
-      </div>
-      <CodeHighlight>{() => getCode()}</CodeHighlight>
-    </div>
-  )
-}
-
-function getCode () {
-  return `
-import ReactTable from 'react-table'
-
-// Create some column definitions
-const columns = [{
-  header: 'Name',
-  columns: [{
-    header: 'First Name',
-    accessor: 'firstName'
-  }, {
-    header: 'Last Name',
-    id: 'lastName',
-    accessor: d => d.lastName
-  }]
-}, {
-  header: 'Info',
-  columns: [{
-    header: 'Age',
-    accessor: 'age'
-  }]
-}]
-
-// Display your table!
-return (
-  <ReactTable
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-  />
-)
-  `
-}
@@ -40,89 +40,22 @@ export default () => {
    header: 'Name',
    columns: [{
      header: 'First Name',
-      accessor: 'firstName',
-      footer: 'Footer'
+      accessor: 'firstName'
    }, {
      header: 'Last Name',
      id: 'lastName',
-      accessor: d => d.lastName,
-      footer: 'Footer'
+      accessor: d => d.lastName
    }]
  }, {
    header: 'Info',
    columns: [{
      header: 'Age',
-      accessor: 'age',
-      footer: 'Footer'
+      accessor: 'age'
    }]
  }]

  return (
    <div>
-      <strong>Functional rendering</strong> simply means that you have all of the building blocks to render your own React Table however you'd like.
-
-      <br />
-      <br />
-      <br />
-      <br />
-
-      <strong>Decorating the standard table output</strong>
-      <br />
-      <br />
-
-      <div className='table-wrap'>
-        <ReactTable
-          data={data}
-          columns={columns}
-        >
-          {(state, makeTable, instance) => {
-            return (
-              <div style={{
-                background: '#ffcf00',
-                borderRadius: '5px',
-                overflow: 'hidden',
-                padding: '5px'
-              }}>
-                <pre><code>state.allVisibleColumns === {JSON.stringify(state.allVisibleColumns, null, 4)}</code></pre>
-                {makeTable()}
-              </div>
-            )
-          }}
-        </ReactTable>
-      </div>
-
-      <CodeHighlight>{() => `
-import ReactTable from 'react-table'
-
-return (
-  <ReactTable
-    data={data}
-    columns={columns}
-  >
-    {(state, Table, instance) => {
-      return (
-        <div style={{
-          background: '#ffcf00',
-          borderRadius: '5px',
-          overflow: 'hidden',
-          padding: '5px'
-        }}>
-          <pre><code>state.allVisibleColumns === {JSON.stringify(state.allVisibleColumns, null, 4)}</code></pre>
-          <Table />
-        </div>
-      )
-    }}
-  </ReactTable>
-)
-      `}</CodeHighlight>
-
-      <br />
-      <br />
-
-      <strong>Need more control? This is the entire table state and component instance at your disposal!</strong>
-      <br />
-      <br />
-
      <div className='table-wrap'>
        <ReactTable
          className='-striped -highlight'
@@ -130,23 +63,54 @@ return (
          columns={columns}
          defaultPageSize={10}
        >
-          {(state, StandardTable, instance) => {
+          {(state, makeTable, instance) => {
+            console.log(state)
            return (
              <div>
+                Look! This is the entire table state and component instance at your disposal!
                <JSONTree
                  data={Object.assign({}, state, {children: 'function () {...}'})}
                  theme={JSONtheme}
                  invertTheme
                />
+                <br />
+                <br />
+                {makeTable()}
              </div>
            )
          }}
        </ReactTable>
      </div>
      <br />
-      <CodeHighlight>{() => `
+      <CodeHighlight>{() => getCode()}</CodeHighlight>
+    </div>
+  )
+}
+
+function getCode () {
+  return `
 import ReactTable from 'react-table'

+// Create some column definitions
+const columns = [{
+  header: 'Name',
+  columns: [{
+    header: 'First Name',
+    accessor: 'firstName'
+  }, {
+    header: 'Last Name',
+    id: 'lastName',
+    accessor: d => d.lastName
+  }]
+}, {
+  header: 'Info',
+  columns: [{
+    header: 'Age',
+    accessor: 'age'
+  }]
+}]
+
+// Display your table!
 return (
  <ReactTable
    className='-striped -highlight'
@@ -154,20 +118,23 @@ return (
    columns={columns}
    defaultPageSize={10}
  >
-    {(state, StandardTable, instance) => {
+    {(state, makeTable, instance) => {
+      console.log(state)
      return (
        <div>
+          Look! This is the entire table state and component instance at your disposal!
          <JSONTree
            data={Object.assign({}, state, {children: 'function () {...}'})}
            theme={JSONtheme}
            invertTheme
          />
+          <br />
+          <br />
+          {makeTable()}
        </div>
      )
    }}
  </ReactTable>
 )
-      `}</CodeHighlight>
-    </div>
-  )
+  `
 }
@@ -1,92 +0,0 @@
-import React from 'react'
-import _ from 'lodash'
-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)
-    }
-  })
-
-  const columns = [{
-    header: 'Name',
-    columns: [{
-      header: 'First Name',
-      accessor: 'firstName'
-    }, {
-      header: 'Last Name',
-      id: 'lastName',
-      accessor: d => d.lastName
-    }]
-  }, {
-    header: 'Info',
-    columns: [{
-      header: 'Age',
-      accessor: 'age'
-    }]
-  }]
-
-  return (
-    <div>
-      <div className='table-wrap'>
-        <ReactTable
-          className='-striped -highlight'
-          data={[]}
-          noDataText='Oh Noes!'
-          // noDataText={() => 'Oh Noes!'} // Supports functions
-          // noDataText={() => <span>Oh Noes!</span>} // Supports JSX / React Components
-          columns={columns}
-          defaultPageSize={10}
-        />
-      </div>
-      <div style={{textAlign: 'center'}}>
-        <br />
-        <em>Tip: Hold shift when sorting to multi-sort!</em>
-      </div>
-      <CodeHighlight>{() => getCode()}</CodeHighlight>
-    </div>
-  )
-}
-
-function getCode () {
-  return `
-import ReactTable from 'react-table'
-
-// Create some column definitions
-const columns = [{
-  header: 'Name',
-  columns: [{
-    header: 'First Name',
-    accessor: 'firstName'
-  }, {
-    header: 'Last Name',
-    id: 'lastName',
-    accessor: d => d.lastName
-  }]
-}, {
-  header: 'Info',
-  columns: [{
-    header: 'Age',
-    accessor: 'age'
-  }]
-}]
-
-// Display your table!
-return (
-  <ReactTable
-    data={[]}
-    noDataText='Oh Noes!'
-    // noDataText={() => 'Oh Noes!'} // Supports functions
-    // noDataText={() => <span>Oh Noes!</span>} // Supports JSX / React Components
-    columns={columns}
-    defaultPageSize={10}
-  />
-)
-  `
-}
@@ -33,8 +33,7 @@ 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',
@@ -51,7 +50,6 @@ export default () => {
          defaultPageSize={10}
          className='-striped -highlight'
          pivotBy={['firstName', 'lastName']}
-          showFilters={true}
          SubComponent={(row) => {
            return (
              <div style={{padding: '20px'}}>
@@ -106,8 +104,7 @@ 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',
@@ -122,7 +119,6 @@ return (
    defaultPageSize={10}
    className='-striped -highlight'
    pivotBy={['firstName', 'lastName']}
-    showFilters={true}
    SubComponent={(row) => {
      return (
        <div style={{padding: '20px'}}>
@@ -14,34 +14,23 @@ 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, filtering) => {
+const requestData = (pageSize, page, sorting) => {
  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
-    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 => {
+    const sortedData = _.orderBy(rawData, 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.desc ? 'desc' : 'asc'))
+    }), sorting.map(d => d.asc ? 'asc' : 'desc'))

    // 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(filteredData.length / pageSize)
+      pages: Math.ceil(rawData.length / pageSize)
    }

    // Here we'll simulate a server response with 500ms of delay.
@@ -59,13 +48,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, state.filtering)
+    requestData(state.pageSize, state.page, state.sorting)
      .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,
@@ -93,7 +82,6 @@ const ServerSide = React.createClass({
            }]}
            manual // Forces table not to paginate or sort automatically, so we can handle it server-side
            defaultPageSize={10}
-            showFilters
            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
@@ -136,8 +124,7 @@ export default React.createClass({
    Axios.post('mysite.com/data', {
      pageSize: state.pageSize,
      page: state.page,
-      sorting: state.sorting,
-      filtering: state.filtering
+      sorting: state.sorting
    })
      .then((res) => {
        // Now update your state!
@@ -164,7 +151,6 @@ 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
@@ -40,6 +40,13 @@ export default () => {
          data={data}
          columns={columns}
          defaultPageSize={10}
+          getTdProps={() => {
+            return {
+              onClick: () => {
+                console.log('clicked')
+              }
+            }
+          }}
        />
      </div>
      <div style={{textAlign: 'center'}}>
@@ -5,139 +5,77 @@ import namor from 'namor'
 import CodeHighlight from './components/codeHighlight'
 import ReactTable from '../src/index'

-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
+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)
    }
+  })

-    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
-      }]
+  const columns = [{
+    header: 'Name',
+    columns: [{
+      header: 'First Name',
+      accessor: 'firstName'
    }, {
-      header: 'Info',
-      columns: [{
-        header: 'Age',
-        accessor: 'age'
-      }]
+      header: 'Last Name',
+      id: 'lastName',
+      accessor: d => d.lastName
    }]
+  }, {
+    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}
-            {...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>
+  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>
+            )
+          }}
+        />
      </div>
-    )
-  }
+      <div style={{textAlign: 'center'}}>
+        <br />
+        <em>Tip: Hold shift when sorting to multi-sort!</em>
+      </div>
+      <CodeHighlight>{() => 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 `
+function getCode () {
+  return `
 const columns = [{
  header: 'Name',
  columns: [{
@@ -161,7 +99,6 @@ export default (
    data={data}
    columns={columns}
    defaultPageSize={10}
-    {...otherOptions}
    SubComponent={(row) => {
      return (
        <div style={{padding: '20px'}}>
@@ -188,7 +125,4 @@ export default (
  />
 )
  `
-  }
-}
-
-export default () => <SubComponents/>
+}
@@ -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.4, inflight@^1.0.6:
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
  dependencies:
@@ -4964,12 +4964,6 @@ 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"
				`@@ -1 +0,0 @@`
				`{"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":""}`
				`@@ -0,0 +1 @@`
				`{"version":3,"file":"static/manager.f127c5ae855df8d8558a.bundle.js","sources":["webpack:///static/manager.f127c5ae855df8d8558a.bundle.js"],"mappings":"AAAA;AAkuDA;AA84DA;AA28DA;AA00DA;AAsyEA;AA89CA;AA8rDA;AAsiDA;AAg6DA;AA2nDA;AA++CA;AAkvDA;AAsnEA;AA2oDA;AAivCA;AA+nDA;AAkpDA;AA6lEA;AAs4DA;AAquDA;AA+pDA;AAqxDA;AAsrDA;AAwyDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}`
				`@@ -0,0 +1 @@`
				`{"version":3,"file":"static/preview.2624d4fc5e8e37cbc8cc.bundle.js","sources":["webpack:///static/preview.2624d4fc5e8e37cbc8cc.bundle.js"],"mappings":"AAAA;AAkuDA;AAkyDA;AA01EA;AA+gGA;AAo4IA;AAt5NA;AA4udA;AA2hEA;AA2uDA;AA29DA;AA2gDA;AAosDA;AAuhDA;AA+6DA;AAioDA;AA4+CA;AAwpDA;AAisEA;AAqoDA;AAqwCA;AA2oDA;AAowDA;AAokEA;AA0vDA;AA2rDA;AA8nDA;AAwsFA;AAyiGA;AA++CA;AA8yCA;AAgzCA;AAwhDA;AAiPA;AA+jFA","sourceRoot":""}`
				`@@ -1 +0,0 @@`
				`{"version":3,"file":"static/preview.ea1bdf726a82703c8f6f.bundle.js","sources":["webpack:///static/preview.ea1bdf726a82703c8f6f.bundle.js"],"mappings":"AAAA;AAkuDA;AAo/DA;AAgrFA;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;AAksFA;AAmjGA;AAksDA;AA02CA;AAgoCA;AAm/CA;AA+4CA;AAsCA;AA+jFA","sourceRoot":""}`