5.3.0

.gitignore

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

.storybook/fonts.css

@@ -4,10 +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;
-}

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,9 +138,8 @@ 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: [],
 
@@ -257,7 +256,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
@@ -297,28 +296,6 @@ 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
@@ -419,11 +396,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
@@ -608,21 +585,56 @@ 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
-- A function that returns the standard table component
+- The standard table component (including individual partials as properties of this 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, makeTable, instance) => {
+  {(state, Table, instance) => {
     return (
       <div style={{
         background: '#ffcf00',
@@ -631,7 +643,7 @@ Accessing internal state and wrapping with more UI:
         padding: '5px'
       }}>
         <pre><code>state.allVisibleColumns === {JSON.stringify(state.allVisibleColumns, null, 4)}</code></pre>
-        {makeTable()}
+        <Table />
       </div>
     )
   }}
@@ -649,20 +661,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

docs/iframe.html

@@ -16,7 +16,7 @@
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="static/preview.742092f25ec9b6802477.bundle.js"></script>
+        <script src="static/preview.fe48f7ea9cf295bed07c.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.1e44a83b81ae02b691ef.bundle.js"></script>
+        <script src="static/manager.3f690da6fe3fd9729ee0.bundle.js"></script>
       </body>
     </html>
   

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

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

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

@@ -1 +0,0 @@
-{"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

@@ -0,0 +1 @@
+{"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.4",
+  "version": "5.3.0",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",

src/defaultProps.js

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

src/index.js

@@ -4,9 +4,6 @@ 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,
@@ -712,68 +709,110 @@ export default React.createClass({
     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}
+    const Root = ({children}) => {
+      return (
+        <div
+          className={classnames(
+            'ReactTable',
+            className,
+            rootProps.className
+          )}
+          style={{
+            ...style,
+            ...rootProps.style
+          }}
+          {...rootProps.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>
+          {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)}
+        style={{
+          ...tBodyProps.style,
+          minWidth: `${rowMinWidth}px`
+        }}
+        {...tBodyProps.rest}
+      >
+        {pageRows.map((d, i) => makePageRow(d, i))}
+        {padRows.map(makePadRow)}
+      </TbodyComponent>
+    )
+
+    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, makeTable, this) : makeTable()
+    return children ? children(finalState, StandardTable, this) : <StandardTable />
   }
 })

src/lifecycle.js

@@ -26,7 +26,7 @@ export default {
   },
 
   componentWillMount () {
-    this.setStateWithData(this.getDataModel(this.getResolvedState()))
+    this.setStateWithData(this.getDataModel())
   },
 
   componentDidMount () {
@@ -37,10 +37,6 @@ 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 ||
@@ -48,7 +44,7 @@ export default {
       oldState.pivotBy !== newState.pivotBy ||
       oldState.sorting !== newState.sorting
     ) {
-      this.setStateWithData(this.getDataModel(newState))
+      this.setStateWithData(this.getDataModel(nextProps, nextState))
     }
   },
 
@@ -79,10 +75,10 @@ export default {
       oldState.sorting !== newResolvedState.sorting ||
       (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData)
     ) {
-      // Handle collapseOnSortingChange & collapseOnDataChange
+      // Handle collapseOnSortingChange & collapseOnPageChange
       if (
         (oldState.sorting !== newResolvedState.sorting && this.props.collapseOnSortingChange) ||
-        (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnDataChange)
+        (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnPageChange)
       ) {
         newResolvedState.expandedRows = {}
       }

src/methods.js

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

stories/FunctionalRendering.js

@@ -60,13 +60,16 @@ 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>Decorating the standard table output</strong>
+      <strong>Pagination at the top using partials:</strong>
       <br />
       <br />
 
@@ -75,7 +78,84 @@ export default () => {
           data={data}
           columns={columns}
         >
-          {(state, makeTable, instance) => {
+          {(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) => {
             return (
               <div style={{
                 background: '#ffcf00',
@@ -84,7 +164,7 @@ export default () => {
                 padding: '5px'
               }}>
                 <pre><code>state.allVisibleColumns === {JSON.stringify(state.allVisibleColumns, null, 4)}</code></pre>
-                {makeTable()}
+                <Table />
               </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,138 +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
-      },
-      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: [{
@@ -160,7 +99,6 @@ export default (
     data={data}
     columns={columns}
     defaultPageSize={10}
-    {...otherOptions}
     SubComponent={(row) => {
       return (
         <div style={{padding: '20px'}}>
@@ -187,7 +125,4 @@ export default (
   />
 )
   `
-  }
-}
-
-export default () => <SubComponents/>
+}