5.3.5

Closes #126

.gitignore

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

.storybook/fonts.css

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

README.md

@@ -102,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',
@@ -138,8 +138,9 @@ These are all of the available props (and their default values) for the main `<R
   defaultPageSize: 20,
   showPageJump: true,
   expanderColumnWidth: 35,
-  collapseOnSortingChange: false,
+  collapseOnSortingChange: true,
   collapseOnPageChange: true,
+  collapseOnDataChange: true,
   freezeWhenExpanded: false,
   defaultSorting: [],
 
@@ -256,7 +257,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
@@ -296,6 +297,29 @@ Or just define them as props
 }]
 ```
 
+## 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
@@ -396,11 +420,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
@@ -585,56 +609,21 @@ Possibly one of the coolest features of React-Table is its ability to expose int
 
 The function you pass will be called with the following items:
 - Fully-resolved state of the table
-- The standard table component (including individual partials as properties of this component)
+- 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:
-- Reordering the internal components of the table
 - 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
 
-Custom pagination order:
-```javascript
-<ReactTable
-  data={data}
-  columns={columns}
->
-  {(state, {
-    Root,
-    Table,
-    HeaderGroups,
-    Headers,
-    Rows,
-    Footers,
-    Pagination,
-    NoData,
-    Loading
-  }, instance) => {
-    return (
-      <Root>
-        <Pagination />
-        <Table>
-          <HeaderGroups />
-          <Headers />
-          <Rows />
-          <Footers />
-        </Table>
-        <NoData />
-        <Loading />
-      </Root>
-    )
-  }}
-</ReactTable>
-```
-
 Accessing internal state and wrapping with more UI:
 ```javascript
 <ReactTable
   data={data}
   columns={columns}
 >
-  {(state, Table, instance) => {
+  {(state, makeTable, instance) => {
     return (
       <div style={{
         background: '#ffcf00',
@@ -643,7 +632,7 @@ Accessing internal state and wrapping with more UI:
         padding: '5px'
       }}>
         <pre><code>state.allVisibleColumns === {JSON.stringify(state.allVisibleColumns, null, 4)}</code></pre>
-        <Table />
+        {makeTable()}
       </div>
     )
   }}
@@ -661,18 +650,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.fe48f7ea9cf295bed07c.bundle.js"></script>
+        <script src="static/preview.742092f25ec9b6802477.bundle.js"></script>
       </body>
     </html>
   

docs/index.html

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

docs/static/manager.1e44a83b81ae02b691ef.bundle.js.map

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

docs/static/preview.742092f25ec9b6802477.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.742092f25ec9b6802477.bundle.js","sources":["webpack:///static/preview.742092f25ec9b6802477.bundle.js"],"mappings":"AAAA;AAkuDA;AAo8CA;AA8uGA;AA++EA;AAi9NA;AAo5GA;AAmvDA;AAmgEA;AA4xDA;AAigEA;AAmjDA;AA4sDA;AAk8CA;AAu/DA;AA8lDA;AA09CA;AAqoDA;AAywEA;AAokDA;AAsvCA;AA2mDA;AA4tDA;AAqjEA;AAs2DA;AAmyDA;AAsnDA;AAk1EA;AAmjGA;AAiuDA;AA+2CA;AAq5BA;AA4zDA;AA26BA;AAuOA;AAw5EA","sourceRoot":""}

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

@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.fe48f7ea9cf295bed07c.bundle.js","sources":["webpack:///static/preview.fe48f7ea9cf295bed07c.bundle.js"],"mappings":"AAAA;AAkuDA;AA48CA;AA0sGA;AAigFA;AAyiNA;AA0rFA;AAk4FA;AAsiEA;AAwuDA;AAu9DA;AA6gDA;AAixDA;AA69CA;AAk+DA;AAqoDA;AAs9CA;AAgoDA;AAwsEA;AAuoDA;AAmvCA;AAioDA;AAkpDA;AA6lEA;AAs4DA;AAuyDA;AAokDA;AA0mFA;AAyiGA;AA2gDA;AAm2CA;AAy/BA;AA4uDA;AAy4BA;AA0XA;AA6zEA","sourceRoot":""}

package.json

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

src/defaultProps.js

@@ -16,8 +16,9 @@ export default {
   defaultPageSize: 20,
   showPageJump: true,
   expanderColumnWidth: 35,
-  collapseOnSortingChange: false,
+  collapseOnSortingChange: true,
   collapseOnPageChange: true,
+  collapseOnDataChange: true,
   freezeWhenExpanded: false,
   defaultSorting: [],
 

src/index.js

@@ -4,6 +4,9 @@ import classnames from 'classnames'
 import _ from './utils'
 import lifecycle from './lifecycle'
 import methods from './methods'
+import defaults from './defaultProps'
+
+export const ReactTableDefaults = defaults
 
 export default React.createClass({
   ...lifecycle,
@@ -283,7 +286,7 @@ export default React.createClass({
                 'rt-pivot-header',
                 column.sortable && '-cursor-pointer',
                 classes,
-                pivotSort ? (pivotSort.desc ? '-sort-asc' : '-sort-desc') : ''
+                pivotSort ? (pivotSort.desc ? '-sort-desc' : '-sort-asc') : ''
               )}
               style={{
                 ...styles,
@@ -334,7 +337,7 @@ export default React.createClass({
           key={i}
           className={classnames(
             classes,
-            sort ? (sort.desc ? '-sort-asc' : '-sort-desc') : '',
+            sort ? (sort.desc ? '-sort-desc' : '-sort-asc') : '',
             column.sortable && '-cursor-pointer',
             !show && '-hidden',
           )}
@@ -693,7 +696,10 @@ export default React.createClass({
                   {...tFootTdProps.rest}
                   {...columnFooterProps.rest}
                 >
-                  {_.normalizeComponent(column.footer)}
+                  {_.normalizeComponent(column.footer, {
+                    data: sortedData,
+                    column: column
+                  })}
                 </TdComponent>
               )
             })}
@@ -709,110 +715,68 @@ export default React.createClass({
     const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
     const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
 
-    const Root = ({children}) => {
-      return (
-        <div
-          className={classnames(
-            'ReactTable',
-            className,
-            rootProps.className
-          )}
-          style={{
-            ...style,
-            ...rootProps.style
-          }}
-          {...rootProps.rest}
-        >
-          {children}
-        </div>
-      )
-    }
-
-    const Table = ({children}) => (
-      <TableComponent
-        className={classnames(tableProps.className)}
-        style={tableProps.style}
-        {...tableProps.rest}
-      >
-        {children}
-      </TableComponent>
-    )
-
-    const HeaderGroups = () => hasHeaderGroups ? makeHeaderGroups() : null
-    const Headers = () => makeHeaders()
-    const Rows = ({children}) => (
-      <TbodyComponent
-        className={classnames(tBodyProps.className)}
+    const makeTable = () => (
+      <div
+        className={classnames(
+          'ReactTable',
+          className,
+          rootProps.className
+        )}
         style={{
-          ...tBodyProps.style,
-          minWidth: `${rowMinWidth}px`
+          ...style,
+          ...rootProps.style
         }}
-        {...tBodyProps.rest}
+        {...rootProps.rest}
       >
-        {pageRows.map((d, i) => makePageRow(d, i))}
-        {padRows.map(makePadRow)}
-      </TbodyComponent>
+        <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>
     )
 
-    const Footers = () => hasColumnFooter ? makeColumnFooters() : null
-
-    const Pagination = () => showPagination ? (
-      <PaginationComponent
-        {...resolvedState}
-        pages={pages}
-        canPrevious={canPrevious}
-        canNext={canNext}
-        onPageChange={this.onPageChange}
-        onPageSizeChange={this.onPageSizeChange}
-        className={paginationProps.className}
-        style={paginationProps.style}
-        {...paginationProps.rest}
-      />
-    ) : null
-
-    const NoData = () => !pageRows.length ? (
-      <NoDataComponent
-        {...noDataProps}
-      >
-        {_.normalizeComponent(noDataText)}
-      </NoDataComponent>
-    ) : null
-
-    const Loading = () => (
-      <LoadingComponent
-        loading={loading}
-        loadingText={loadingText}
-        {...loadingProps}
-      />
-    )
-
-    const StandardTable = () => (
-      <Root>
-        <Table>
-          <HeaderGroups />
-          <Headers />
-          <Rows />
-          <Footers />
-        </Table>
-        <Pagination />
-        <NoData />
-        <Loading />
-      </Root>
-    )
-
-    Object.assign(StandardTable, {
-      Root,
-      Table,
-      HeaderGroups,
-      Headers,
-      Rows,
-      Footers,
-      Pagination,
-      NoData,
-      Loading
-    })
-
     // childProps are optionally passed to a function-as-a-child
-    return children ? children(finalState, StandardTable, this) : <StandardTable />
+    return children ? children(finalState, makeTable, this) : makeTable()
   }
 })

src/lifecycle.js

@@ -26,7 +26,7 @@ export default {
   },
 
   componentWillMount () {
-    this.setStateWithData(this.getDataModel())
+    this.setStateWithData(this.getDataModel(this.getResolvedState()))
   },
 
   componentDidMount () {
@@ -37,6 +37,10 @@ export default {
     const oldState = this.getResolvedState()
     const newState = this.getResolvedState(nextProps, nextState)
 
+    if (oldState.defaultSorting !== newState.defaultSorting) {
+      newState.sorting = newState.defaultSorting
+    }
+
     // Props that trigger a data update
     if (
       oldState.data !== newState.data ||
@@ -44,7 +48,7 @@ export default {
       oldState.pivotBy !== newState.pivotBy ||
       oldState.sorting !== newState.sorting
     ) {
-      this.setStateWithData(this.getDataModel(nextProps, nextState))
+      this.setStateWithData(this.getDataModel(newState))
     }
   },
 
@@ -75,10 +79,10 @@ export default {
       oldState.sorting !== newResolvedState.sorting ||
       (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData)
     ) {
-      // Handle collapseOnSortingChange & collapseOnPageChange
+      // Handle collapseOnSortingChange & collapseOnDataChange
       if (
         (oldState.sorting !== newResolvedState.sorting && this.props.collapseOnSortingChange) ||
-        (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnPageChange)
+        (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnDataChange)
       ) {
         newResolvedState.expandedRows = {}
       }

src/methods.js

@@ -1,7 +1,7 @@
 import _ from './utils'
 
 export default {
-  getDataModel (nextProps, nextState) {
+  getDataModel (newState) {
     const {
       columns,
       pivotBy = [],
@@ -14,7 +14,7 @@ export default {
       page,
       pages,
       pageSize
-    } = this.getResolvedState(nextProps, nextState)
+    } = newState
 
     // Determine Header Groups
     let hasHeaderGroups = false
@@ -219,6 +219,7 @@ export default {
     const newPage = page > newPages ? newPage - 1 : page
 
     return {
+      ...newState,
       resolvedData,
       pivotColumn,
       allVisibleColumns,
@@ -280,14 +281,17 @@ export default {
 
   // User actions
   onPageChange (page) {
-    const { onPageChange } = this.props
+    const { onPageChange, collapseOnPageChange } = this.props
     if (onPageChange) {
       return onPageChange(page)
     }
-    this.setStateWithData({
-      expandedRows: {},
-      page
-    }, () => {
+    const newState = { page }
+    if (collapseOnPageChange) {
+      newState.expandedRows = {}
+    }
+    this.setStateWithData(
+      newState
+    , () => {
       this.fireOnChange()
     })
   },

src/pagination.js

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

src/utils.js

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

stories/FunctionalRendering.js

@@ -60,16 +60,13 @@ export default () => {
   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 />
-      Whether it's <strong>completely custom</strong>, or even just <strong>rearranging the order of the table's elements</strong>, this is how you can do it.
 
       <br />
       <br />
       <br />
       <br />
 
-      <strong>Pagination at the top using partials:</strong>
+      <strong>Decorating the standard table output</strong>
       <br />
       <br />
 
@@ -78,84 +75,7 @@ export default () => {
           data={data}
           columns={columns}
         >
-          {(state, {
-            Root,
-            Table,
-            HeaderGroups,
-            Headers,
-            Rows,
-            Footers,
-            Pagination,
-            NoData,
-            Loading
-          }, instance) => {
-            return (
-              <Root>
-                <Pagination />
-                <Table>
-                  <HeaderGroups />
-                  <Headers />
-                  <Rows />
-                  <Footers />
-                </Table>
-                <NoData />
-                <Loading />
-              </Root>
-            )
-          }}
-        </ReactTable>
-      </div>
-
-      <CodeHighlight>{() => `
-import ReactTable from 'react-table'
-
-return (
-  <ReactTable
-    data={data}
-    columns={columns}
-  >
-    {(state, {
-      Root,
-      Table,
-      HeaderGroups,
-      Headers,
-      Rows,
-      Footers,
-      Pagination,
-      NoData,
-      Loading
-    }, instance) => {
-      return (
-        <Root>
-          <Pagination />
-          <Table>
-            <HeaderGroups />
-            <Headers />
-            <Rows />
-            <Footers />
-          </Table>
-          <NoData />
-          <Loading />
-        </Root>
-      )
-    }}
-  </ReactTable>
-)
-      `}</CodeHighlight>
-
-      <br />
-      <br />
-
-      <strong>Wrapping the standard table output</strong>
-      <br />
-      <br />
-
-      <div className='table-wrap'>
-        <ReactTable
-          data={data}
-          columns={columns}
-        >
-          {(state, Table, instance) => {
+          {(state, makeTable, instance) => {
             return (
               <div style={{
                 background: '#ffcf00',
@@ -164,7 +84,7 @@ return (
                 padding: '5px'
               }}>
                 <pre><code>state.allVisibleColumns === {JSON.stringify(state.allVisibleColumns, null, 4)}</code></pre>
-                <Table />
+                {makeTable()}
               </div>
             )
           }}

stories/ServerSide.js

@@ -48,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)
       .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,

stories/SubComponents.js

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

yarn.lock

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