5.3.3

.storybook/config.js

@@ -23,6 +23,7 @@ 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'
 //
 configure(() => {
   storiesOf('1. Docs')
@@ -51,4 +52,5 @@ configure(() => {
     .add('Functional Rendering', FunctionalRendering)
     .add('Custom Expander Position', CustomExpanderPosition)
     .add('Custom "No Data" Text', NoDataText)
+    .add('Footers', Footers)
 }, module)

.storybook/layout.css

@@ -1,3 +1,7 @@
 body{
 	padding: 20px;
 }
+
+strong {
+	font-weight: bold
+}

README.md

@@ -24,6 +24,9 @@
 <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
 
@@ -99,7 +102,7 @@ const data = [{
 
 const columns = [{
   header: 'Name',
-  accessor: 'name' // String-based value accessors !
+  accessor: 'name' // String-based value accessors!
 }, {
   header: 'Age',
   accessor: 'age',
@@ -185,6 +188,9 @@ These are all of the available props (and their default values) for the main `<R
   getTrProps: () => ({}),
   getThProps: () => ({}),
   getTdProps: () => ({}),
+  getTfootProps: () => ({}),
+  getTfootTrProps: () => ({}),
+  getTfootThProps: () => ({}),
   getPaginationProps: () => ({}),
   getLoadingProps: () => ({}),
   getNoDataProps: () => ({}),
@@ -204,6 +210,11 @@ 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: () => ({})
   },
 
   // Text
@@ -245,7 +256,7 @@ Or just define them as props
 ```javascript
 [{
   // General
-  accessor: 'propertyName' or Accessor eg. (row) => row.propertyName,
+  accessor: 'propertyName' // or Accessor eg. (row) => row.propertyName (see "Accessors" section for more details)
   id: 'myProperty', // Conditional - A unique ID is required if the accessor is not a string or if you would like to override the column name used in server-side calls
   sortable: true,
   show: true, // can be used to hide a column
@@ -268,16 +279,45 @@ Or just define them as props
     // viewIndex == the index of the row in the current page
 
   // Header & HeaderGroup Options
-  header: 'Header Name' or JSX eg. ({data, column}) => <div>Header Name</div>,
+  header: 'Header Name', a function that returns a primitive, or JSX / React Component eg. ({data, column}) => <div>Header Name</div>,
   headerClassName: '', // Set the classname of the `th` element of the column
   headerStyle: {}, // Set the style of the `th` element of the column
+  getHeaderProps: (state, rowInfo, column, instance) => ({}) // a function that returns props to decorate the `th` element of the column
 
   // 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
+
 }]
 ```
 
+## 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
@@ -297,8 +337,8 @@ const columns = [{
 }]
 ```
 
-## Custom Cell and 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:
+## 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):
 - `row` - Original row from your data
 - `rowValues` - The post-accessed values from the original row
 - `index` - The index of the row
@@ -340,17 +380,19 @@ const columns = [{
 ```
 
 ## Styles
-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`.
+- 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.
 
-#### Built-in Styles
+#### Classes
 - 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 Styles
+#### CSS
 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 support classes (powered by `classname` and js styles.
+Every single react-table element and `get[ComponentName]Props` callback supports `classname` and `style` props.
 
 ## Custom Props
 
@@ -376,11 +418,11 @@ Every single built-in component's props can be dynamically extended using any on
 />
 ```
 
-These callbacks are executed with each render of the element with three parameters:
-1. Table State
-1. RowInfo (undefined if not applicable)
-1. Column (undefined if not applicable)
-1. React Table Instance
+These callbacks are executed with each render of the element with four parameters:
+ 1. Table State
+ 2. RowInfo (undefined if not applicable)
+ 3. Column (undefined if not applicable)
+ 4. React Table Instance
 
 This makes it extremely easy to add, say... a row click callback!
 ```javascript
@@ -561,51 +603,42 @@ Here are the props and their corresponding callbacks that control the state of t
 ```
 
 ## Functional Rendering
-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 />`.
+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 />`.
 
 The function you pass will be called with the following items:
 - Fully-resolved state of the table
-- The standard table generator
+- A function that returns the standard table component
 - 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 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 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
 
-Example:
+Accessing internal state and wrapping with more UI:
 ```javascript
 <ReactTable
-  columns={columns}
   data={data}
-  ...
+  columns={columns}
 >
   {(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>
-        <customPivotBySelect />
-        <customColumnHideShow />
-        <customAnything />
+      <div style={{
+        background: '#ffcf00',
+        borderRadius: '5px',
+        overflow: 'hidden',
+        padding: '5px'
+      }}>
+        <pre><code>state.allVisibleColumns === {JSON.stringify(state.allVisibleColumns, null, 4)}</code></pre>
         {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!
 
@@ -615,18 +648,20 @@ 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,
-  PaginationComponent: Component,
-  PreviousComponent: Component,
-  NextComponent: Component,
-  LoadingComponent: Component,
-  ExpanderComponent: Component
+  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,
 })
 
 // Or change per instance

docs/iframe.html

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

docs/index.html

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

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

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

docs/static/manager.d3baea6e6f08c3c0279c.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/manager.d3baea6e6f08c3c0279c.bundle.js","sources":["webpack:///static/manager.d3baea6e6f08c3c0279c.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;AAyyDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}

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

@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.1dfdb2ebd0085aa535c8.bundle.js","sources":["webpack:///static/preview.1dfdb2ebd0085aa535c8.bundle.js"],"mappings":"AAAA;AAkuDA;AAu+CA;AA0+FA;AAmpFA;AAkxLA;AA7sBA;AAojOA;AAkjEA;AAivDA;AAy7DA;AAqlDA;AAmvDA;AAu8CA;AA6+DA;AAwlDA;AA2+CA;AAimDA;AA29DA;AA04DA;AAsxCA;AAynDA;AAurDA;AAgiEA;AA03DA;AAwwCA;AA8tDA;AA02FA;AA+tGA;AAy+CA;AAuzCA;AAkuCA;AAikDA;AA8dA;AA+jFA","sourceRoot":""}

docs/static/preview.e4c12816d598a43b6a84.bundle.js.map

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "5.2.0",
+  "version": "5.3.3",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",

src/defaultProps.js

@@ -0,0 +1,152 @@
+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: 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,
+  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
+  },
+
+  // 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')
+}

src/index.js

@@ -2,257 +2,15 @@ import React from 'react'
 import classnames from 'classnames'
 //
 import _ from './utils'
+import lifecycle from './lifecycle'
+import methods from './methods'
+import defaults from './defaultProps'
 
-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,
-  getNoDataProps: 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...',
-  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'),
-  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')
-}
+export const ReactTableDefaults = defaults
 
 export default React.createClass({
-  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
-  },
+  ...lifecycle,
+  ...methods,
 
   render () {
     const resolvedState = this.getResolvedState()
@@ -271,8 +29,10 @@ export default React.createClass({
       getTbodyProps,
       getTrGroupProps,
       getTrProps,
-      getThProps,
       getTdProps,
+      getTfootProps,
+      getTfootTrProps,
+      getTfootTdProps,
       getPaginationProps,
       getLoadingProps,
       getNoDataProps,
@@ -300,6 +60,7 @@ export default React.createClass({
       TrComponent,
       ThComponent,
       TdComponent,
+      TfootComponent,
       ExpanderComponent,
       PaginationComponent,
       LoadingComponent,
@@ -314,9 +75,6 @@ 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
@@ -326,6 +84,8 @@ export default React.createClass({
       : 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) => {
         index++
@@ -354,6 +114,7 @@ export default React.createClass({
       pageRows,
       minRows,
       padRows,
+      hasColumnFooter,
       canPrevious,
       canNext,
       rowMinWidth
@@ -765,7 +526,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))
+      const tdProps = _.splitProps(getTdProps(finalState, undefined, undefined, this))
       return (
         <TrGroupComponent
           key={i}
@@ -782,14 +543,14 @@ export default React.createClass({
               <ThComponent
                 className={classnames(
                   'rt-expander-header',
-                  thProps.className
+                  tdProps.className
                 )}
                 style={{
-                  ...thProps.style,
+                  ...tdProps.style,
                   flex: `0 0 auto`,
                   width: `${expanderColumnWidth}px`
                 }}
-                {...thProps.rest}
+                {...tdProps.rest}
               />
             )}
             {allVisibleColumns.map((column, i2) => {
@@ -835,79 +596,184 @@ export default React.createClass({
       )
     }
 
-    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)
-      const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
+    const makeColumnFooters = () => {
+      const tFootProps = getTfootProps(finalState, undefined, undefined, this)
+      const tFootTrProps = _.splitProps(getTfootTrProps(finalState, undefined, undefined, this))
       return (
-        <div
-          className={classnames(
-            'ReactTable',
-            className,
-            rootProps.className
-          )}
+        <TfootComponent
+          className={tFootProps.className}
           style={{
-            ...style,
-            ...rootProps.style
+            ...tFootProps.style,
+            minWidth: `${rowMinWidth}px`
           }}
-          {...rootProps.rest}
+          {...tFootProps.rest}
         >
-          <TableComponent
-            className={classnames(tableProps.className)}
-            style={tableProps.style}
-            {...tableProps.rest}
+          <TrComponent
+            className={classnames(
+              tFootTrProps.className
+            )}
+            style={tFootTrProps.style}
+            {...tFootTrProps.rest}
           >
-            {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}
-            />
-          )}
-          {!pageRows.length && (
-            <NoDataComponent
-              {...noDataProps}
-            >
-              {_.normalizeComponent(noDataText)}
-            </NoDataComponent>
-          )}
-          <LoadingComponent
-            loading={loading}
-            loadingText={loadingText}
-            {...loadingProps}
-          />
-        </div>
+            {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)}
+                </TdComponent>
+              )
+            })}
+          </TrComponent>
+        </TfootComponent>
       )
     }
 
+    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()}
+          <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
-
+  }
 })

src/index.styl

@@ -30,7 +30,6 @@ $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
@@ -100,6 +99,15 @@ $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
@@ -117,6 +125,7 @@ $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

src/lifecycle.js

@@ -0,0 +1,96 @@
+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: {}
+    }
+  },
+
+  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)
+  }
+}

src/utils.js

@@ -191,7 +191,7 @@ function isSortingDesc (d) {
   return !!(d.sort === 'desc' || d.desc === true || d.asc === false)
 }
 
-function normalizeComponent (Comp, params, fallback = Comp) {
+function normalizeComponent (Comp, params = {}, fallback = Comp) {
   return typeof Comp === 'function' ? (
     Comp.prototype.isReactComponent ? (
       <Comp

stories/Footers.js

@@ -0,0 +1,114 @@
+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}
+  />
+)
+  `
+}

stories/FunctionalRendering.js

@@ -40,22 +40,89 @@ export default () => {
     header: 'Name',
     columns: [{
       header: 'First Name',
-      accessor: 'firstName'
+      accessor: 'firstName',
+      footer: 'Footer'
     }, {
       header: 'Last Name',
       id: 'lastName',
-      accessor: d => d.lastName
+      accessor: d => d.lastName,
+      footer: 'Footer'
     }]
   }, {
     header: 'Info',
     columns: [{
       header: 'Age',
-      accessor: 'age'
+      accessor: 'age',
+      footer: 'Footer'
     }]
   }]
 
   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'
@@ -63,54 +130,23 @@ export default () => {
           columns={columns}
           defaultPageSize={10}
         >
-          {(state, makeTable, instance) => {
-            console.log(state)
+          {(state, StandardTable, instance) => {
             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>{() => getCode()}</CodeHighlight>
-    </div>
-  )
-}
-
-function getCode () {
-  return `
+      <CodeHighlight>{() => `
 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'
@@ -118,23 +154,20 @@ return (
     columns={columns}
     defaultPageSize={10}
   >
-    {(state, makeTable, instance) => {
-      console.log(state)
+    {(state, StandardTable, instance) => {
       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>
+  )
 }