diff --git a/.storybook/config.js b/.storybook/config.js
index f8c8754..ccdf258 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -18,6 +18,7 @@ import SubComponents from '../stories/SubComponents.js'
import Pivoting from '../stories/Pivoting.js'
import PivotingSubComponents from '../stories/PivotingSubComponents.js'
import OneHundredKRows from '../stories/OneHundredKRows.js'
+import FunctionalRendering from '../stories/FunctionalRendering.js'
//
configure(() => {
storiesOf('1. Docs')
@@ -41,4 +42,5 @@ configure(() => {
.add('Pivoting & Aggregation', Pivoting)
.add('Pivoting & Aggregation w/ Sub Components', PivotingSubComponents)
.add('100k Rows w/ Pivoting & Sub Components', OneHundredKRows)
+ .add('Functional Rendering', FunctionalRendering)
}, module)
diff --git a/README.md b/README.md
index 2328dd5..62ab7f8 100644
--- a/README.md
+++ b/README.md
@@ -49,7 +49,8 @@
- [Sub Tables & Sub Components](#sub-tables--sub-components)
- [Server-side Data](#server-side-data)
- [Fully Controlled Component](#fully-controlled-component)
-- [Multi-sort](#multi-sort)
+- [Functional Rendering](#functional-rendering)
+- [Multi-Sort](#multi-sort)
- [Component Overrides](#component-overrides)
## Installation
@@ -376,6 +377,52 @@ 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 ``.
+
+The function you pass will be called with the following items:
+- Fully-resolved state of the table
+- The standard table generator
+- The instance of the component
+
+You can then return any JSX or react you want! This turns out to be perfect for:
+- Accessing the internal state of the table 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
+
+Example:
+```javascript
+
+ {(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 (
+
+
+
+
+ {makeTable()}
+
+ )
+
+ // 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!
diff --git a/package.json b/package.json
index 493a178..669a97c 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
"postcss-cli": "^2.6.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
+ "react-json-tree": "^0.10.1",
"standard": "^8.0.0",
"stylus": "^0.54.5",
"uglifyify": "3.0.3"
diff --git a/src/index.js b/src/index.js
index 9ba5e3f..52b5bd9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -208,6 +208,7 @@ export default React.createClass({
render () {
const resolvedProps = this.getResolvedState()
const {
+ children,
className,
style,
tableClassName,
@@ -585,7 +586,7 @@ export default React.createClass({
)
}
- return (
+ const makeTable = () => (
)
+
+ // childProps are optionally passed to a function-as-a-child
+ const childState = {
+ ...resolvedProps,
+ startRow,
+ endRow,
+ pageRows,
+ minRows,
+ padRows,
+ canPrevious,
+ canNext,
+ rowWidth
+ }
+
+ return children ? children(childState, makeTable, this) : makeTable()
},
// Helpers
diff --git a/stories/FunctionalRendering.js b/stories/FunctionalRendering.js
new file mode 100644
index 0000000..15ac442
--- /dev/null
+++ b/stories/FunctionalRendering.js
@@ -0,0 +1,140 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+import JSONTree from 'react-json-tree'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+const JSONtheme = {
+ scheme: 'monokai',
+ author: 'wimer hazenberg (http://www.monokai.nl)',
+ base00: '#272822',
+ base01: '#383830',
+ base02: '#49483e',
+ base03: '#75715e',
+ base04: '#a59f85',
+ base05: '#f8f8f2',
+ base06: '#f5f4f1',
+ base07: '#f9f8f5',
+ base08: '#f92672',
+ base09: '#fd971f',
+ base0A: '#f4bf75',
+ base0B: '#a6e22e',
+ base0C: '#a1efe4',
+ base0D: '#66d9ef',
+ base0E: '#ae81ff',
+ base0F: '#cc6633'
+}
+
+export default () => {
+ const data = _.map(_.range(5553), d => {
+ return {
+ firstName: namor.generate({ words: 1, numLen: 0 }),
+ lastName: namor.generate({ words: 1, numLen: 0 }),
+ age: Math.floor(Math.random() * 30)
+ }
+ })
+
+ const columns = [{
+ header: 'Name',
+ columns: [{
+ header: 'First Name',
+ accessor: 'firstName'
+ }, {
+ header: 'Last Name',
+ id: 'lastName',
+ accessor: d => d.lastName
+ }]
+ }, {
+ header: 'Info',
+ columns: [{
+ header: 'Age',
+ accessor: 'age'
+ }]
+ }]
+
+ return (
+