diff --git a/stories/CellRenderers.js b/stories/CellRenderers.js
index fa54fe7..15275c2 100644
--- a/stories/CellRenderers.js
+++ b/stories/CellRenderers.js
@@ -2,170 +2,107 @@ 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 => {
-    const statusChance = Math.random()
-    return {
-      firstName: namor.generate({ words: 1, numLen: 0 }),
-      lastName: namor.generate({ words: 1, numLen: 0 }),
-      progress: Math.floor(Math.random() * 100),
-      status: statusChance > 0.66 ? 'relationship'
-        : statusChance > 0.33 ? 'complicated'
-        : 'single'
-    }
-  })
+class Story extends React.Component {
+  render () {
+    const data = _.map(_.range(5553), d => {
+      const statusChance = Math.random()
+      return {
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
+        progress: Math.floor(Math.random() * 100),
+        status: statusChance > 0.66 ? 'relationship'
+          : statusChance > 0.33 ? 'complicated'
+          : 'single'
+      }
+    })
 
-  const columns = [{
-    Header: 'Name',
-    columns: [{
-      Header: 'First Name',
-      accessor: 'firstName'
+    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: 'Profile Progress',
-      accessor: 'progress',
-      Cell: row => (
-        <div
-          style={{
-            width: '100%',
-            height: '100%',
-            backgroundColor: '#dadada',
-            borderRadius: '2px'
-          }}
-        >
+      Header: 'Info',
+      columns: [{
+        Header: 'Profile Progress',
+        accessor: 'progress',
+        Cell: row => (
           <div
             style={{
-              width: `${row.value}%`,
+              width: '100%',
               height: '100%',
-              backgroundColor: row.value > 66 ? '#85cc00'
-                : row.value > 33 ? '#ffbf00'
-                : '#ff2e00',
-              borderRadius: '2px',
-              transition: 'all .2s ease-out'
+              backgroundColor: '#dadada',
+              borderRadius: '2px'
             }}
+          >
+            <div
+              style={{
+                width: `${row.value}%`,
+                height: '100%',
+                backgroundColor: row.value > 66 ? '#85cc00'
+                  : row.value > 33 ? '#ffbf00'
+                  : '#ff2e00',
+                borderRadius: '2px',
+                transition: 'all .2s ease-out'
+              }}
+            />
+          </div>
+        )
+      }, {
+        Header: 'Status',
+        accessor: 'status',
+        Cell: row => (
+          <span>
+            <span style={{
+              color: row.value === 'relationship' ? '#ff2e00'
+                : row.value === 'complicated' ? '#ffbf00'
+                : '#57d500',
+              transition: 'all .3s ease'
+            }}>
+              &#x25cf;
+            </span> {
+              row.value === 'relationship' ? 'In a relationship'
+              : row.value === 'complicated' ? `It's complicated`
+              : 'Single'
+            }
+          </span>
+        )
+      }]
+    }]
+
+    return (
+      <div>
+        <div className='table-wrap'>
+          <ReactTable
+            className='-striped -highlight'
+            data={data}
+            columns={columns}
+            defaultPageSize={10}
           />
         </div>
-      )
-    }, {
-      Header: 'Status',
-      accessor: 'status',
-      Cell: row => (
-        <span>
-          <span style={{
-            color: row.value === 'relationship' ? '#ff2e00'
-              : row.value === 'complicated' ? '#ffbf00'
-              : '#57d500',
-            transition: 'all .3s ease'
-          }}>
-            &#x25cf;
-          </span> {
-            row.value === 'relationship' ? 'In a relationship'
-            : row.value === 'complicated' ? `It's complicated`
-            : 'Single'
-          }
-        </span>
-      )
-    }]
-  }]
-
-  return (
-    <div>
-      <div className='table-wrap'>
-        <ReactTable
-          className='-striped -highlight'
-          data={data}
-          columns={columns}
-          defaultPageSize={10}
-        />
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: Hold shift when sorting to multi-sort!</em>
+        </div>
       </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'
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./CellRenderers')
 
-const columns = [{
-  Header: 'Name',
-  columns: [{
-    Header: 'First Name',
-    accessor: 'firstName'
-  }, {
-    Header: 'Last Name',
-    id: 'lastName',
-    accessor: d => d.lastName
-  }]
-}, {
-  Header: 'Info',
-  columns: [{
-    Header: 'Profile Progress',
-    accessor: 'progress',
-    Cell: row => (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          backgroundColor: '#dadada',
-          borderRadius: '2px'
-        }}
-      >
-        <div
-          style={{
-            width: \`$\{row.value}%\`,
-            height: '100%',
-            backgroundColor: row.value > 66 ? '#85cc00'
-              : row.value > 33 ? '#ffbf00'
-              : '#ff2e00',
-            borderRadius: '2px',
-            transition: 'all .2s ease-out'
-          }}
-        />
-      </div>
-    )
-  }, {
-    Header: 'Status',
-    accessor: 'status',
-    Cell: row => (
-      <span>
-        <span style={{
-          color: row.value === 'relationship' ? '#ff2e00'
-            : row.value === 'complicated' ? '#ffbf00'
-            : '#57d500',
-          transition: 'all .3s ease'
-        }}>
-          &#x25cf;
-        </span> {
-          row.value === 'relationship' ? 'In a relationship'
-          : row.value === 'complicated' ? \`It's complicated\`
-          : 'Single'
-        }
-      </span>
-    )
-  }]
-}]
-
-return (
-  <ReactTable
-    className='-striped -highlight'
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-  />
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
 )
-  `
-}
diff --git a/stories/ControlledTable.js b/stories/ControlledTable.js
index 9782762..94318d5 100644
--- a/stories/ControlledTable.js
+++ b/stories/ControlledTable.js
@@ -2,7 +2,6 @@ import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import CodeHighlight from './components/codeHighlight'
 import ReactTable from '../src/index'
 
 const data = _.map(_.range(5553), d => {
@@ -31,7 +30,7 @@ const columns = [{
   }]
 }]
 
-class ControlledTable extends React.Component {
+class Story extends React.Component {
   constructor () {
     super()
     this.state = {
@@ -72,79 +71,18 @@ class ControlledTable extends React.Component {
         <br />
         <pre><code><strong>this.state ===</strong> {JSON.stringify(this.state, null, 2)}</code></pre>
         <br />
-        <CodeHighlight>{() => getCode()}</CodeHighlight>
       </div>
     )
   }
 }
 
-function getCode () {
-  return `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)
-  }
-})
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./ControlledTable')
 
-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'
-  }]
-}]
-
-class ControlledTable extends React.Component {
-  constructor() {
-    super()
-    this.sortChange = this.sortChange.bind(this)
-    this.state = {
-      sorting: [],
-      page: 0,
-      pageSize: 10
-    }
-  }
-
-  sortChange(column, shift) {
-    if(shift)
-      alert('Shift click not implemented in this demo')
-    var sort = {id: column.id}
-    if(this.state.sorting.length && this.state.sorting[0].id == column.id)
-      this.state.sorting[0].asc ? sort.desc = true : sort.asc = true
-    else
-      sort.asc = true
-    this.setState({
-      sorting: [sort]
-    })
-  }
-
-  render() {
-    return (
-      <ReactTable
-        className='-striped -highlight'
-        data={data}
-        columns={columns}
-        sorting={this.state.sorting}
-        onSortingChange={this.sortChange}
-        page={this.state.page}
-        onPageChange={page => this.setState({page})}
-        pageSize={this.state.pageSize}
-        onPageSizeChange={(pageSize, page) => this.setState({page, pageSize})}
-      />
-    )
-  }
-}`
-}
-
-export default () => <ControlledTable />
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)
diff --git a/stories/CustomComponentProps.js b/stories/CustomComponentProps.js
index 3631cd2..eab573d 100644
--- a/stories/CustomComponentProps.js
+++ b/stories/CustomComponentProps.js
@@ -2,105 +2,74 @@ import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import CodeHighlight from './components/codeHighlight'
 import ReactTable from '../src/index'
 
-export default () => {
-  const data = _.map(_.range(5553), d => {
-    return {
-      firstName: namor.generate({ words: 1, numLen: 0 }),
-      lastName: namor.generate({ words: 1, numLen: 0 }),
-      age: Math.floor(Math.random() * 30)
-    }
-  })
-
-  const columns = [{
-    Header: 'Name',
-    columns: [{
-      Header: 'First Name',
-      accessor: 'firstName'
-    }, {
-      Header: 'Last Name',
-      id: 'lastName',
-      accessor: d => d.lastName
-    }]
-  }, {
-    Header: 'Info',
-    columns: [{
-      Header: 'Age',
-      accessor: 'age'
-    }]
-  }]
-
-  return (
-    <div>
-      <strong>Hey!</strong> Open your console! :)
-      <div className='table-wrap'>
-        <ReactTable
-          className='-striped -highlight'
-          data={data}
-          columns={columns}
-          defaultPageSize={10}
-          getTdProps={(state, rowInfo, column, instance) => {
-            return {
-              onMouseEnter: e => console.log('Cell - onMouseEnter', {
-                state,
-                rowInfo,
-                column,
-                instance,
-                event: e
-              })
-            }
-          }}
-        />
-      </div>
-      <div style={{textAlign: 'center'}}>
-        <br />
-        <em>Tip: Hold shift when sorting to multi-sort!</em>
-      </div>
-      <CodeHighlight>{() => getCode()}</CodeHighlight>
-    </div>
-  )
-}
-
-function getCode () {
-  return `
-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 (
-  <ReactTable
-    className='-striped -highlight'
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-    getTdProps={(state, rowInfo, column, instance) => {
+class Story extends React.Component {
+  render () {
+    const data = _.map(_.range(5553), d => {
       return {
-        onMouseEnter: e => console.log('Cell - onMouseEnter', {
-          state,
-          rowInfo,
-          column,
-          instance,
-          event: e
-        })
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
+        age: Math.floor(Math.random() * 30)
       }
-    }}
-  />
-)
-  `
+    })
+
+    const columns = [{
+      Header: 'Name',
+      columns: [{
+        Header: 'First Name',
+        accessor: 'firstName'
+      }, {
+        Header: 'Last Name',
+        id: 'lastName',
+        accessor: d => d.lastName
+      }]
+    }, {
+      Header: 'Info',
+      columns: [{
+        Header: 'Age',
+        accessor: 'age'
+      }]
+    }]
+
+    return (
+      <div>
+        <strong>Hey!</strong> Open your console! :)
+        <div className='table-wrap'>
+          <ReactTable
+            className='-striped -highlight'
+            data={data}
+            columns={columns}
+            defaultPageSize={10}
+            getTdProps={(state, rowInfo, column, instance) => {
+              return {
+                onMouseEnter: e => console.log('Cell - onMouseEnter', {
+                  state,
+                  rowInfo,
+                  column,
+                  instance,
+                  event: e
+                })
+              }
+            }}
+          />
+        </div>
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: Hold shift when sorting to multi-sort!</em>
+        </div>
+      </div>
+    )
+  }
 }
+
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./CustomComponentProps')
+
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)
diff --git a/stories/CustomExpanderPosition.js b/stories/CustomExpanderPosition.js
index 6796136..3384284 100644
--- a/stories/CustomExpanderPosition.js
+++ b/stories/CustomExpanderPosition.js
@@ -2,70 +2,79 @@ import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import CodeHighlight from './components/codeHighlight'
 import ReactTable from '../src/index'
 
-import source from '!raw-loader!./CustomExpanderPosition'
+class Story extends React.Component {
+  render () {
+    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)
+      }
+    })
 
-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: () => <div style={{textAlign: 'center'}}>First Name</div>
+    const columns = [{
+      Header: 'Name',
+      columns: [{
+        Header: 'First Name',
+        accessor: 'firstName',
+        Footer: () => <div style={{textAlign: 'center'}}>First Name</div>
+      }, {
+        Header: 'Last Name',
+        accessor: 'lastName',
+        Footer: () => <div style={{textAlign: 'center'}}>Last Name</div>
+      }]
     }, {
-      Header: 'Last Name',
-      accessor: 'lastName',
-      Footer: () => <div style={{textAlign: 'center'}}>Last Name</div>
+      Header: 'Info',
+      columns: [{
+        Header: 'Age',
+        accessor: 'age',
+        Footer: () => <div style={{textAlign: 'center'}}>Age</div>
+      }]
+    }, {
+      Header: 'Expand',
+      columns: [{
+        expander: true,
+        Header: () => (<strong>More</strong>),
+        width: 65,
+        Expander: ({isExpanded, ...rest}) => (
+          <div>
+            {isExpanded ? <span>&#x2299;</span> : <span>&#x2295;</span>}
+          </div>
+        ),
+        style: {cursor: 'pointer', fontSize: 25, padding: '0', textAlign: 'center', userSelect: 'none'},
+        Footer: () => <span>&hearts;</span>
+      }]
     }]
-  }, {
-    Header: 'Info',
-    columns: [{
-      Header: 'Age',
-      accessor: 'age',
-      Footer: () => <div style={{textAlign: 'center'}}>Age</div>
-    }]
-  }, {
-    Header: 'Expand',
-    columns: [{
-      expander: true,
-      Header: () => (<strong>More</strong>),
-      width: 65,
-      Expander: ({isExpanded, ...rest}) => (
-        <div>
-          {isExpanded ? <span>&#x2299;</span> : <span>&#x2295;</span>}
-        </div>
-      ),
-      style: {cursor: 'pointer', fontSize: 25, padding: '0', textAlign: 'center', userSelect: 'none'},
-      Footer: () => <span>&hearts;</span>
-    }]
-  }]
 
-  return (
-    <div>
-      <div className='table-wrap'>
-        <ReactTable
-          className='-striped -highlight'
-          data={data}
-          columns={columns}
-          defaultPageSize={10}
-          SubComponent={() => <span>Hello</span>}
-        />
+    return (
+      <div>
+        <div className='table-wrap'>
+          <ReactTable
+            className='-striped -highlight'
+            data={data}
+            columns={columns}
+            defaultPageSize={10}
+            SubComponent={() => <span>Hello</span>}
+          />
+        </div>
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: Hold shift when sorting to multi-sort!</em>
+        </div>
       </div>
-      <div style={{textAlign: 'center'}}>
-        <br />
-        <em>Tip: Hold shift when sorting to multi-sort!</em>
-      </div>
-      <CodeHighlight>{() => source}</CodeHighlight>
-    </div>
-  )
+    )
+  }
 }
+
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./CustomExpanderPosition')
+
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)
diff --git a/stories/CustomSorting.js b/stories/CustomSorting.js
index 3333fc6..d113154 100644
--- a/stories/CustomSorting.js
+++ b/stories/CustomSorting.js
@@ -2,100 +2,76 @@ 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 (Sorted by Length, A-Z)',
-      accessor: 'firstName',
-      sortMethod: (a, b) => {
-        if (a.length === b.length) {
-          return a > b ? 1 : -1
-        }
-        return a.length > b.length ? 1 : -1
+class Story extends React.Component {
+  render () {
+    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 (Sorted by Length, A-Z)',
+        accessor: 'firstName',
+        sortMethod: (a, b) => {
+          if (a.length === b.length) {
+            return a > b ? 1 : -1
+          }
+          return a.length > b.length ? 1 : -1
+        }
+      }, {
+        Header: 'Last Name (Sorted in reverse, A-Z)',
+        id: 'lastName',
+        accessor: d => d.lastName,
+        sortMethod: (a, b) => {
+          if (a === b) {
+            return 0
+          }
+          const aReverse = a.split('').reverse().join('')
+          const bReverse = b.split('').reverse().join('')
+          return aReverse > bReverse ? 1 : -1
+        }
+      }]
     }, {
-      Header: 'Last Name (Sorted in reverse, A-Z)',
-      id: 'lastName',
-      accessor: d => d.lastName,
-      sortMethod: (a, b) => {
-        if (a === b) {
-          return 0
-        }
-        const aReverse = a.split('').reverse().join('')
-        const bReverse = b.split('').reverse().join('')
-        return aReverse > bReverse ? 1 : -1
-      }
+      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}
-        />
+    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>
       </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'
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./CustomSorting')
 
-// 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'
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-  />
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
 )
-  `
-}
diff --git a/stories/CustomWidths.js b/stories/CustomWidths.js
index 49da440..25206ad 100644
--- a/stories/CustomWidths.js
+++ b/stories/CustomWidths.js
@@ -2,90 +2,65 @@ 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)
-    }
-  })
+class Story extends React.Component {
+  render () {
+    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',
-      maxWidth: 200
+    const columns = [{
+      Header: 'Name',
+      columns: [{
+        Header: 'First Name',
+        accessor: 'firstName',
+        maxWidth: 200
+      }, {
+        Header: 'Last Name',
+        id: 'lastName',
+        accessor: d => d.lastName,
+        width: 300
+      }]
     }, {
-      Header: 'Last Name',
-      id: 'lastName',
-      accessor: d => d.lastName,
-      width: 300
+      Header: 'Info',
+      columns: [{
+        Header: 'Age',
+        accessor: 'age',
+        minWidth: 400
+      }]
     }]
-  }, {
-    Header: 'Info',
-    columns: [{
-      Header: 'Age',
-      accessor: 'age',
-      minWidth: 400
-    }]
-  }]
 
-  return (
-    <div>
-      <div className='table-wrap'>
-        <ReactTable
-          className='-striped -highlight'
-          data={data}
-          columns={columns}
-          defaultPageSize={10}
-        />
+    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>
       </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'
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./CustomWidths')
 
-const columns = [{
-  Header: 'Name',
-  columns: [{
-    Header: 'First Name',
-    accessor: 'firstName',
-    maxWidth: 200
-  }, {
-    Header: 'Last Name',
-    id: 'lastName',
-    accessor: d => d.lastName,
-    width: 300
-  }]
-}, {
-  Header: 'Info',
-  columns: [{
-    Header: 'Age',
-    accessor: 'age',
-    minWidth: 400
-  }]
-}]
-
-return (
-  <ReactTable
-    className='-striped -highlight'
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-  />
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
 )
-  `
-}
diff --git a/stories/DefaultSorting.js b/stories/DefaultSorting.js
index cdfc489..68b9f4f 100644
--- a/stories/DefaultSorting.js
+++ b/stories/DefaultSorting.js
@@ -2,90 +2,66 @@ 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)
-    }
-  })
+class Story extends React.Component {
+  render () {
+    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'
+    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}
-          defaultSorting={[{
-            id: 'age',
-            desc: true
-          }]}
-        />
+    return (
+      <div>
+        <div className='table-wrap'>
+          <ReactTable
+            className='-striped -highlight'
+            data={data}
+            columns={columns}
+            defaultPageSize={10}
+            defaultSorting={[{
+              id: 'age',
+              desc: true
+            }]}
+          />
+        </div>
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: Hold shift when sorting to multi-sort!</em>
+        </div>
       </div>
-      <div style={{textAlign: 'center'}}>
-        <br />
-        <em>Tip: Hold shift when sorting to multi-sort!</em>
-      </div>
-      <CodeHighlight>{() => getCode()}</CodeHighlight>
-    </div>
-  )
+    )
+  }
 }
 
-function getCode () {
-  return `
-  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'
-    }]
-  }]
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./DefaultSorting')
 
-  return (
-    <ReactTable
-      className='-striped -highlight'
-      data={data}
-      columns={columns}
-      defaultPageSize={10}
-      defaultSorting={[{
-        id: 'age',
-        desc: true
-      }]}
-    />
-  )
-  `
-}
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)
diff --git a/stories/EditableTable.js b/stories/EditableTable.js
index f0358dc..36a47cf 100644
--- a/stories/EditableTable.js
+++ b/stories/EditableTable.js
@@ -1,9 +1,8 @@
 import React from 'react'
 
-import CodeHighlight from './components/codeHighlight'
 import ReactTable from '../src/index'
 
-class MyTable extends React.Component {
+class Story extends React.Component {
   constructor (props, context) {
     super(props, context)
     this.renderEditable = this.renderEditable.bind(this)
@@ -43,79 +42,28 @@ class MyTable extends React.Component {
   }
 
   render () {
-    return (<ReactTable
-      data={this.state.data}
-      columns={this.columns}
-      defaultPageSize={2}
-      showPageSizeOptions={false}
-      showPagination={false}
-    />)
-  }
-}
-
-function getCode () {
-  return `
-class MyTable extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-    this.renderEditable = this.renderEditable.bind(this);
-
-    this.state = {
-      data: [
-        { firstName: 'Lucy', lastName: 'Marks' },
-        { firstName: 'Bejamin', lastName: 'Pike' }
-      ]
-    };
-
-    this.columns = [
-      {
-        Header: 'First Name',
-        accessor: 'firstName',
-        Cell: this.renderEditable
-      },
-      {
-        Header: 'Last Name',
-        accessor: 'lastName',
-        Cell: this.renderEditable
-      },
-      {
-        Header: 'Full Name',
-        id: 'full',
-        accessor: d => d.firstName + ' ' + d.lastName
-      }
-    ];
-  }
-
-  renderEditable(cellInfo) {
-    return (<div style={{ backgroundColor: '#fafafa' }} contentEditable suppressContentEditableWarning onBlur={(e) => {
-      const data = [...this.state.data];
-      data[cellInfo.index][cellInfo.column.id] = e.target.textContent;
-      this.setState({data: data});
-    }}>{this.state.data[cellInfo.index][cellInfo.column.id]}</div>);
-  }
-
-  render() {
-    return (<ReactTable
-      data={this.state.data}
-      columns={this.columns}
-      defaultPageSize={2}
-      showPageSizeOptions={false}
-      showPagination={false}
-    />);
-  }
-}
-`
-}
-
-export default () => {
-  return (
-    <div>
-      <p>First two columns are editable just by clicking into them using the <code>contentEditable</code> attribute. Last column (Full Name) is computed from the first two.</p>
+    return (
       <div className='table-wrap' style={{marginBottom: '20px'}}>
-        <MyTable />
+        <p>First two columns are editable just by clicking into them using the <code>contentEditable</code> attribute. Last column (Full Name) is computed from the first two.</p>
+        <ReactTable
+          data={this.state.data}
+          columns={this.columns}
+          defaultPageSize={2}
+          showPageSizeOptions={false}
+          showPagination={false}
+        />
       </div>
-
-      <CodeHighlight>{() => getCode()}</CodeHighlight>
-    </div>
-  )
+    )
+  }
 }
+
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./EditableTable')
+
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)
diff --git a/stories/Filtering.js b/stories/Filtering.js
index 8967ac9..b5c40d0 100644
--- a/stories/Filtering.js
+++ b/stories/Filtering.js
@@ -3,12 +3,10 @@ import _ from 'lodash'
 import namor from 'namor'
 
 import CodeHighlight from './components/codeHighlight'
+
 import ReactTable from '../src/index'
 
-import source from '!raw-loader!./Filtering'
-
-class Filtering extends React.Component {
-
+class Story extends React.Component {
   constructor (props) {
     super(props)
 
@@ -91,23 +89,23 @@ class Filtering extends React.Component {
           <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>
-                )
-              })
-            }
+              {
+                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>
@@ -151,21 +149,20 @@ class Filtering extends React.Component {
         <div>
           <h1>Custom Filters In This Example</h1>
           <p>The default filter for all columns of a table if it is not specified in the configuration is set to match
-            on values that start with the filter text. Example: age.startsWith("2").</p>
+          on values that start with the filter text. Example: age.startsWith("2").</p>
           <p>This example overrides the default filter behavior by setting
             the <strong>defaultFilterMethod</strong> table option to match on values that are exactly equal to the
-            filter text. Example: age == "23")</p>
+          filter text. Example: age == "23")</p>
           <p>Each column can also be customized with the column <strong>filterMethod</strong> option:</p>
           <p>In this example the firstName column filters on the value starting with and ending with the filter
-            value.</p>
+          value.</p>
           <p>In this example the lastName column filters on the value including the filter value anywhere in its
-            text.</p>
+          text.</p>
           <p>To completely override the filter that is shown, you can set the <strong>Filter</strong> column
             option. Using this option you can specify the JSX that is shown. The option is passed
             an <strong>onChange</strong> method that must be called with the value that you wan't to
             pass to the <strong>filterMethod</strong> option whenever the filter has changed.</p>
         </div>
-        <CodeHighlight>{() => source}</CodeHighlight>
       </div>
     )
   }
@@ -183,4 +180,12 @@ class Filtering extends React.Component {
   }
 }
 
-export default () => <Filtering />
+// Source Code
+const source = require('!raw-loader!./Filtering')
+
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)
diff --git a/stories/Footers.js b/stories/Footers.js
index e40b7b9..9b908ca 100644
--- a/stories/Footers.js
+++ b/stories/Footers.js
@@ -2,142 +2,90 @@ 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)
-    }
-  })
+class Story extends React.Component {
+  render () {
+    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(
+    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.firstName
-                )
+                  data, d => d.lastName
+                ),
+                (d, key) => key
               ),
               (a, b) => a.length > b.length ? a : b
-            )
-          ).firstName}
-        </span>
-      )
+            )}
+          </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>
+      }]
     }]
-  }, {
-    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}
-        />
+    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>
       </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'
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./Footers')
 
-// Create some column definitions
-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>
-  }]
-}]
-
-// Display your table!
-return (
-  <ReactTable
-    className='-striped -highlight'
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-  />
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
 )
-  `
-}
diff --git a/stories/FunctionalRendering.js b/stories/FunctionalRendering.js
index 6ecbe72..a7110a2 100644
--- a/stories/FunctionalRendering.js
+++ b/stories/FunctionalRendering.js
@@ -3,7 +3,6 @@ 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 = {
@@ -27,147 +26,111 @@ const JSONtheme = {
   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)
-    }
-  })
+class Story extends React.Component {
+  render () {
+    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: 'Footer'
+    const columns = [{
+      Header: 'Name',
+      columns: [{
+        Header: 'First Name',
+        accessor: 'firstName',
+        Footer: 'Footer'
+      }, {
+        Header: 'Last Name',
+        id: 'lastName',
+        accessor: d => d.lastName,
+        Footer: 'Footer'
+      }]
     }, {
-      Header: 'Last Name',
-      id: 'lastName',
-      accessor: d => d.lastName,
-      Footer: 'Footer'
+      Header: 'Info',
+      columns: [{
+        Header: 'Age',
+        accessor: 'age',
+        Footer: 'Footer'
+      }]
     }]
-  }, {
-    Header: 'Info',
-    columns: [{
-      Header: '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.
+    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 />
+        <br />
+        <br />
+        <br />
+        <br />
 
-      <strong>Decorating the standard table output</strong>
-      <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 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>
-      )
-    }}
-  </ReactTable>
-)
-      `}</CodeHighlight>
 
-      <br />
-      <br />
+        <br />
+        <br />
 
-      <strong>Need more control? This is the entire table state and component instance at your disposal!</strong>
-      <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'
-          data={data}
-          columns={columns}
-          defaultPageSize={10}
-        >
-          {(state, StandardTable, instance) => {
-            return (
-              <div>
-                <JSONTree
-                  data={Object.assign({}, state, {children: 'function () {...}'})}
-                  theme={JSONtheme}
-                  invertTheme
-                />
-              </div>
-            )
-          }}
-        </ReactTable>
-      </div>
-      <br />
-      <CodeHighlight>{() => `
-import ReactTable from 'react-table'
-
-return (
-  <ReactTable
-    className='-striped -highlight'
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-  >
-    {(state, StandardTable, instance) => {
-      return (
-        <div>
-          <JSONTree
-            data={Object.assign({}, state, {children: 'function () {...}'})}
-            theme={JSONtheme}
-            invertTheme
-          />
+        <div className='table-wrap'>
+          <ReactTable
+            className='-striped -highlight'
+            data={data}
+            columns={columns}
+            defaultPageSize={10}
+          >
+            {(state, StandardTable, instance) => {
+              return (
+                <div>
+                  <JSONTree
+                    data={Object.assign({}, state, {children: 'function () {...}'})}
+                    theme={JSONtheme}
+                    invertTheme
+                  />
+                </div>
+              )
+            }}
+          </ReactTable>
         </div>
-      )
-    }}
-  </ReactTable>
-)
-      `}</CodeHighlight>
-    </div>
-  )
+        <br />
+      </div>
+    )
+  }
 }
+
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./FunctionalRendering')
+
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)
diff --git a/stories/NoDataText.js b/stories/NoDataText.js
index 1c4e5e1..0948a63 100644
--- a/stories/NoDataText.js
+++ b/stories/NoDataText.js
@@ -1,82 +1,56 @@
 import React from 'react'
 
-import CodeHighlight from './components/codeHighlight'
 import ReactTable from '../src/index'
 
-export default () => {
-  const columns = [{
-    Header: 'Name',
-    columns: [{
-      Header: 'First Name',
-      accessor: 'firstName'
+class Story extends React.Component {
+  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={[]}
-          noDataText='Oh Noes!'
-          // noDataText={() => 'Oh Noes!'} // Supports functions
-          // noDataText={() => <span>Oh Noes!</span>} // Supports JSX / React Components
-          columns={columns}
-          defaultPageSize={10}
-        />
+    return (
+      <div>
+        <div className='table-wrap'>
+          <ReactTable
+            className='-striped -highlight'
+            data={[]}
+            noDataText='Oh Noes!'
+            // noDataText={() => 'Oh Noes!'} // Supports functions
+            // noDataText={() => <span>Oh Noes!</span>} // Supports JSX / React Components
+            columns={columns}
+            defaultPageSize={10}
+          />
+        </div>
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: Hold shift when sorting to multi-sort!</em>
+        </div>
       </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'
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./NoDataText')
 
-// Create some column definitions
-const columns = [{
-  Header: 'Name',
-  columns: [{
-    Header: 'First Name',
-    accessor: 'firstName'
-  }, {
-    Header: 'Last Name',
-    id: 'lastName',
-    accessor: d => d.lastName
-  }]
-}, {
-  Header: 'Info',
-  columns: [{
-    Header: 'Age',
-    accessor: 'age'
-  }]
-}]
-
-// Display your table!
-return (
-  <ReactTable
-    data={[]}
-    noDataText='Oh Noes!'
-    // noDataText={() => 'Oh Noes!'} // Supports functions
-    // noDataText={() => <span>Oh Noes!</span>} // Supports JSX / React Components
-    columns={columns}
-    defaultPageSize={10}
-  />
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
 )
-  `
-}
diff --git a/stories/OneHundredKRows.js b/stories/OneHundredKRows.js
index 7200b31..b9aa019 100644
--- a/stories/OneHundredKRows.js
+++ b/stories/OneHundredKRows.js
@@ -2,147 +2,95 @@ 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(100000), d => {
-    return {
-      firstName: namor.generate({ words: 1, numLen: 0 }),
-      lastName: namor.generate({ words: 1, numLen: 0 }),
-      age: Math.floor(Math.random() * 30),
-      visits: Math.floor(Math.random() * 100)
-    }
-  })
-
-  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',
-      aggregate: vals => _.round(_.mean(vals)),
-      Aggregated: row => {
-        return <span>{row.value} (avg)</span>
+class Story extends React.Component {
+  render () {
+    const data = _.map(_.range(100000), d => {
+      return {
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
+        age: Math.floor(Math.random() * 30),
+        visits: Math.floor(Math.random() * 100)
       }
+    })
+
+    const columns = [{
+      Header: 'Name',
+      columns: [{
+        Header: 'First Name',
+        accessor: 'firstName'
+      }, {
+        Header: 'Last Name',
+        id: 'lastName',
+        accessor: d => d.lastName
+      }]
     }, {
-      Header: 'Visits',
-      accessor: 'visits',
-      aggregate: vals => _.sum(vals)
+      Header: 'Info',
+      columns: [{
+        Header: 'Age',
+        accessor: 'age',
+        aggregate: vals => _.round(_.mean(vals)),
+        Aggregated: row => {
+          return <span>{row.value} (avg)</span>
+        }
+      }, {
+        Header: 'Visits',
+        accessor: 'visits',
+        aggregate: vals => _.sum(vals)
+      }]
     }]
-  }]
 
-  return (
-    <div>
-      <div className='table-wrap'>
-        <ReactTable
-          data={data}
-          columns={columns}
-          className='-striped -highlight'
-          defaultPageSize={10}
-          pivotBy={['firstName', 'lastName']}
-          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>
-  )
-}
-
-function getCode () {
-  return `
-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',
-    aggregate: vals => _.round(_.mean(vals)),
-    Cell: row => {
-      return <span>{row.aggregated ? \`\${row.value} (avg)\` : row.value}</span>
-    }
-  }, {
-    Header: 'Visits',
-    accessor: 'visits',
-    aggregate: vals => _.sum(vals)
-  }]
-}]
-
-return (
-  <ReactTable
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-    className='-striped -highlight'
-    pivotBy={['firstName', 'lastName']}
-    SubComponent={(row) => {
-      return (
-        <div style={{padding: '20px'}}>
-          <em>You can put any component you want here, even another React Table!</em>
-          <br />
-          <br />
+    return (
+      <div>
+        <div className='table-wrap'>
           <ReactTable
             data={data}
             columns={columns}
-            defaultPageSize={3}
-            showPagination={false}
+            className='-striped -highlight'
+            defaultPageSize={10}
+            pivotBy={['firstName', 'lastName']}
             SubComponent={(row) => {
               return (
                 <div style={{padding: '20px'}}>
-                  <em>It even has access to the row data: </em>
-                  <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
+                  <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>
+      </div>
+    )
+  }
 }
+
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./OneHundredKRows')
+
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)
diff --git a/stories/Pivoting.js b/stories/Pivoting.js
index 37d2c4f..bf70f65 100644
--- a/stories/Pivoting.js
+++ b/stories/Pivoting.js
@@ -2,101 +2,72 @@ 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(1000), d => {
-    return {
-      firstName: namor.generate({ words: 1, numLen: 0 }),
-      lastName: namor.generate({ words: 1, numLen: 0 }),
-      age: Math.floor(Math.random() * 30),
-      visits: Math.floor(Math.random() * 100)
-    }
-  })
-
-  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',
-      aggregate: vals => _.round(_.mean(vals)),
-      Aggregated: row => {
-        return <span>{row.value} (avg)</span>
+class Story extends React.Component {
+  render () {
+    const data = _.map(_.range(1000), d => {
+      return {
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
+        age: Math.floor(Math.random() * 30),
+        visits: Math.floor(Math.random() * 100)
       }
+    })
+
+    const columns = [{
+      Header: 'Name',
+      columns: [{
+        Header: 'First Name',
+        accessor: 'firstName'
+      }, {
+        Header: 'Last Name',
+        id: 'lastName',
+        accessor: d => d.lastName
+      }]
     }, {
-      Header: 'Visits',
-      accessor: 'visits',
-      aggregate: vals => _.sum(vals)
+      Header: 'Info',
+      columns: [{
+        Header: 'Age',
+        accessor: 'age',
+        aggregate: vals => _.round(_.mean(vals)),
+        Aggregated: row => {
+          return <span>{row.value} (avg)</span>
+        }
+      }, {
+        Header: 'Visits',
+        accessor: 'visits',
+        aggregate: vals => _.sum(vals)
+      }]
     }]
-  }]
 
-  return (
-    <div>
-      <div className='table-wrap'>
-        <ReactTable
-          data={data}
-          columns={columns}
-          className='-striped -highlight'
-          defaultPageSize={10}
-          pivotBy={['firstName', 'lastName']}
-        />
+    return (
+      <div>
+        <div className='table-wrap'>
+          <ReactTable
+            data={data}
+            columns={columns}
+            className='-striped -highlight'
+            defaultPageSize={10}
+            pivotBy={['firstName', 'lastName']}
+          />
+        </div>
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: Hold shift when sorting to multi-sort!</em>
+        </div>
       </div>
-      <div style={{textAlign: 'center'}}>
-        <br />
-        <em>Tip: Hold shift when sorting to multi-sort!</em>
-      </div>
-      <CodeHighlight>{() => getCode()}</CodeHighlight>
-    </div>
-  )
+    )
+  }
 }
 
-function getCode () {
-  return `
-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',
-    aggregate: vals => _.round(_.mean(vals)),
-    Cell: row => {
-      return <span>{row.aggregated ? \`\${row.value} (avg)\` : row.value}</span>
-    }
-  }, {
-    Header: 'Visits',
-    accessor: 'visits',
-    aggregate: vals => _.sum(vals)
-  }]
-}]
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./Pivoting')
 
-return (
-  <ReactTable
-    data={data}
-    columns={columns}
-    className='-striped -highlight'
-    defaultPageSize={10}
-    pivotBy={['firstName', 'lastName']}
-  />
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
 )
-  `
-}
diff --git a/stories/PivotingOptions.js b/stories/PivotingOptions.js
index 6b1132e..1dd2265 100644
--- a/stories/PivotingOptions.js
+++ b/stories/PivotingOptions.js
@@ -2,121 +2,130 @@ import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import CodeHighlight from './components/codeHighlight'
 import ReactTable from '../src/index'
 
-import source from '!raw-loader!./PivotingOptions'
+class Story extends React.Component {
+  render () {
+    const data = _.map(_.range(1000), d => {
+      return {
+        firstName: namor.generate({words: 1, numLen: 0}),
+        lastName: namor.generate({words: 1, numLen: 0}),
+        age: Math.floor(Math.random() * 30),
+        visits: Math.floor(Math.random() * 100)
+      }
+    })
 
-export default () => {
-  const data = _.map(_.range(1000), d => {
-    return {
-      firstName: namor.generate({words: 1, numLen: 0}),
-      lastName: namor.generate({words: 1, numLen: 0}),
-      age: Math.floor(Math.random() * 30),
-      visits: Math.floor(Math.random() * 100)
-    }
-  })
+    const columns = [{
+      Header: 'Name',
+      columns: [{
+        Header: 'First Name',
+        accessor: 'firstName',
+        PivotValue: ({value}) => <span style={{color: 'darkred'}}>{value}</span>
+      }, {
+        Header: 'Last Name',
+        id: 'lastName',
+        accessor: d => d.lastName,
+        PivotValue: ({value}) => <span style={{color: 'darkblue'}}>{value}</span>,
+        Footer: () => <div style={{textAlign: 'center'}}><strong>Pivot Column Footer</strong></div>
+      }]
+    }, {
+      Header: 'Info',
+      columns: [{
+        Header: 'Age',
+        accessor: 'age',
+        aggregate: vals => {
+          return _.round(_.mean(vals))
+        },
+        Aggregated: row => <span>{row.value} (avg)</span>
+      }, {
+        Header: 'Visits',
+        accessor: 'visits',
+        aggregate: vals => _.sum(vals),
+        hideFilter: true
+      }]
+    }, {
+      pivot: true,
+      Header: () => <strong>Overridden Pivot Column Header Group</strong>
+    }, {
+      expander: true
+    }]
 
-  const columns = [{
-    Header: 'Name',
-    columns: [{
-      Header: 'First Name',
-      accessor: 'firstName',
-      PivotValue: ({value}) => <span style={{color: 'darkred'}}>{value}</span>
+    const subtableColumns = [{
+      Header: 'Name',
+      columns: [{
+        Header: 'First Name',
+        accessor: 'firstName'
+      }, {
+        Header: 'Last Name',
+        id: 'lastName'
+      }]
     }, {
-      Header: 'Last Name',
-      id: 'lastName',
-      accessor: d => d.lastName,
-      PivotValue: ({value}) => <span style={{color: 'darkblue'}}>{value}</span>,
-      Footer: () => <div style={{textAlign: 'center'}}><strong>Pivot Column Footer</strong></div>
+      Header: 'Info',
+      columns: [{
+        Header: 'Age',
+        accessor: 'age'
+      }, {
+        Header: 'Visits',
+        accessor: 'visits'
+      }]
     }]
-  }, {
-    Header: 'Info',
-    columns: [{
-      Header: 'Age',
-      accessor: 'age',
-      aggregate: vals => {
-        return _.round(_.mean(vals))
-      },
-      Aggregated: row => <span>{row.value} (avg)</span>
-    }, {
-      Header: 'Visits',
-      accessor: 'visits',
-      aggregate: vals => _.sum(vals),
-      hideFilter: true
-    }]
-  }, {
-    pivot: true,
-    Header: () => <strong>Overridden Pivot Column Header Group</strong>
-  }, {
-    expander: true
-  }]
 
-  const subtableColumns = [{
-    Header: 'Name',
-    columns: [{
-      Header: 'First Name',
-      accessor: 'firstName'
-    }, {
-      Header: 'Last Name',
-      id: 'lastName'
-    }]
-  }, {
-    Header: 'Info',
-    columns: [{
-      Header: 'Age',
-      accessor: 'age'
-    }, {
-      Header: 'Visits',
-      accessor: 'visits'
-    }]
-  }]
-
-  return (
-    <div>
-      <div className='table-wrap'>
-        <ReactTable
-          data={data}
-          columns={columns}
-          defaultPageSize={10}
-          className='-striped -highlight'
-          pivotBy={['firstName', 'lastName']}
-          defaultSorting={[{id: 'firstName', desc: false}, {id: 'lastName', desc: true}]}
-          collapseOnSortingChange={false}
-          showFilters
-          ExpanderComponent={({isExpanded, ...rest}) => (
-            isExpanded ? <span> &#10136; </span> : <span> &#10137; </span>
-          )}
-          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={subtableColumns}
-                  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 className='table-wrap'>
+          <ReactTable
+            data={data}
+            columns={columns}
+            defaultPageSize={10}
+            className='-striped -highlight'
+            pivotBy={['firstName', 'lastName']}
+            defaultSorting={[{id: 'firstName', desc: false}, {id: 'lastName', desc: true}]}
+            collapseOnSortingChange={false}
+            showFilters
+            ExpanderComponent={({isExpanded, ...rest}) => (
+              isExpanded ? <span> &#10136; </span> : <span> &#10137; </span>
+            )}
+            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={subtableColumns}
+                    defaultPageSize={3}
+                    showPagination={false}
+                    SubComponent={(row) => {
+                      return (
+                        <div style={{padding: '20px'}}>
+                          <em>It even has access to the row data: </em>
+                          <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
+                        </div>
+                      )
+                    }}
+                  />
+                </div>
+              )
+            }}
+          />
+        </div>
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: Hold shift when sorting to multi-sort!</em>
+        </div>
       </div>
-      <div style={{textAlign: 'center'}}>
-        <br />
-        <em>Tip: Hold shift when sorting to multi-sort!</em>
-      </div>
-      <CodeHighlight>{() => source}</CodeHighlight>
-    </div>
-  )
+    )
+  }
 }
+
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./EditableTable')
+
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)
diff --git a/stories/PivotingSubComponents.js b/stories/PivotingSubComponents.js
index 0fc8b46..5100dc8 100644
--- a/stories/PivotingSubComponents.js
+++ b/stories/PivotingSubComponents.js
@@ -2,153 +2,98 @@ 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(1000), d => {
-    return {
-      firstName: namor.generate({ words: 1, numLen: 0 }),
-      lastName: namor.generate({ words: 1, numLen: 0 }),
-      age: Math.floor(Math.random() * 30),
-      visits: Math.floor(Math.random() * 100)
-    }
-  })
+class Story extends React.Component {
+  render () {
+    const data = _.map(_.range(1000), d => {
+      return {
+        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
+        age: Math.floor(Math.random() * 30),
+        visits: Math.floor(Math.random() * 100)
+      }
+    })
 
-  const columns = [{
-    Header: 'Name',
-    columns: [{
-      Header: 'First Name',
-      accessor: 'firstName'
+    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',
+        aggregate: vals => _.round(_.mean(vals)),
+        Aggregated: row => {
+          return <span>{row.value} (avg)</span>
+        },
+        filterMethod: (filter, row) => (filter.value === `${row[filter.id]} (avg)`)
+      }, {
+        Header: 'Visits',
+        accessor: 'visits',
+        aggregate: vals => _.sum(vals),
+        hideFilter: true
+      }]
     }]
-  }, {
-    Header: 'Info',
-    columns: [{
-      Header: 'Age',
-      accessor: 'age',
-      aggregate: vals => _.round(_.mean(vals)),
-      Aggregated: row => {
-        return <span>{row.value} (avg)</span>
-      },
-      filterMethod: (filter, row) => (filter.value === `${row[filter.id]} (avg)`)
-    }, {
-      Header: 'Visits',
-      accessor: 'visits',
-      aggregate: vals => _.sum(vals),
-      hideFilter: true
-    }]
-  }]
 
-  return (
-    <div>
-      <div className='table-wrap'>
-        <ReactTable
-          data={data}
-          columns={columns}
-          defaultPageSize={10}
-          className='-striped -highlight'
-          pivotBy={['firstName', 'lastName']}
-          showFilters
-          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>
-  )
-}
-
-function getCode () {
-  return `
-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',
-    aggregate: vals => _.round(_.mean(vals)),
-    Cell: row => {
-      return <span>{row.aggregated ? \`\${row.value} (avg)\` : row.value}</span>
-    },
-    filterMethod: (filter, row) => (filter.value == \`\${row[filter.id]} (avg)\`)
-  }, {
-    Header: 'Visits',
-    accessor: 'visits',
-    aggregate: vals => _.sum(vals),
-    hideFilter: true
-  }]
-}]
-
-return (
-  <ReactTable
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-    className='-striped -highlight'
-    pivotBy={['firstName', 'lastName']}
-    showFilters={true}
-    SubComponent={(row) => {
-      return (
-        <div style={{padding: '20px'}}>
-          <em>You can put any component you want here, even another React Table!</em>
-          <br />
-          <br />
+    return (
+      <div>
+        <div className='table-wrap'>
           <ReactTable
             data={data}
             columns={columns}
-            defaultPageSize={3}
-            showPagination={false}
+            defaultPageSize={10}
+            className='-striped -highlight'
+            pivotBy={['firstName', 'lastName']}
+            showFilters
             SubComponent={(row) => {
               return (
                 <div style={{padding: '20px'}}>
-                  <em>It even has access to the row data: </em>
-                  <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
+                  <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>
+      </div>
+    )
+  }
 }
+
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./PivotingSubComponents')
+
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)
diff --git a/stories/ServerSide.js b/stories/ServerSide.js
index 783c9cb..3854ffb 100644
--- a/stories/ServerSide.js
+++ b/stories/ServerSide.js
@@ -2,7 +2,6 @@ import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import CodeHighlight from './components/codeHighlight'
 import ReactTable from '../src/index'
 
 const rawData = _.map(_.range(3424), d => {
@@ -49,15 +48,16 @@ const requestData = (pageSize, page, sorting, filters) => {
   })
 }
 
-const ServerSide = React.createClass({
-  getInitialState () {
-    // To handle our data server-side, we need a few things in the state to help us out:
-    return {
+class Story extends React.Component {
+  constructor () {
+    super()
+    this.state = {
       data: [],
       pages: null,
       loading: true
     }
-  },
+    this.fetchData = this.fetchData.bind(this)
+  }
   fetchData (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.
@@ -72,7 +72,7 @@ const ServerSide = React.createClass({
           loading: false
         })
       })
-  },
+  }
   render () {
     return (
       <div>
@@ -103,73 +103,18 @@ const ServerSide = React.createClass({
           <br />
           <em>Tip: Hold shift when sorting to multi-sort!</em>
         </div>
-        <CodeHighlight>{() => getCode()}</CodeHighlight>
       </div>
     )
   }
-})
+}
+
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./ServerSide')
 
 export default () => (
-  <ServerSide />
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
 )
-
-function getCode () {
-  return `
-import ReactTable from 'react-table'
-import Axios from 'axios'
-
-export default React.createClass({
-  getInitialState () {
-    // To handle our data server-side, we need to keep track of our table state
-    return {
-      data: [],
-      pages: null,
-      loading: true
-    }
-  },
-  fetchData (state, instance) {
-    // Whenever the table model changes (sorting, pagination, etc), 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 loading notice, or show you're own loading bar if you want.
-    this.setState({loading: true})
-    // Request the data from a server however you want! Be sure to send the bits of the table model that it may neeed.
-    Axios.post('mysite.com/data', {
-      pageSize: state.pageSize,
-      page: state.page,
-      sorting: state.sorting,
-      filters: state.filters
-    })
-      .then((res) => {
-        // Now update your state!
-        this.setState({
-          data: res.rows,
-          pages: res.pages,
-          loading: false
-        })
-      })
-  },
-  render () {
-    return (
-      <ReactTable
-        columns={[{
-          Header: 'First Name',
-          accessor: 'firstName'
-        }, {
-          Header: 'Last Name',
-          id: 'lastName',
-          accessor: d => d.lastName
-        }, {
-          Header: 'Age',
-          accessor: 'age'
-        }]}
-        manual // Forces table not to paginate or sort automatically, so we can handle it server-side
-        defaultPageSize={10}
-        showFilters={true}
-        data={this.state.data} // Set the rows to be displayed
-        pages={this.state.pages} // Display the total number of pages
-        loading={this.state.loading} // Display the loading overlay when we need it
-        onFetchData={this.fetchData} // Request new data when things change
-      />
-  }
-})
-  `
-}
diff --git a/stories/Simple.js b/stories/Simple.js
index 7e0e336..63c24b8 100644
--- a/stories/Simple.js
+++ b/stories/Simple.js
@@ -2,93 +2,68 @@ 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),
-      children: _.map(_.range(10), d => {
-        return {
-          firstName: namor.generate({ words: 1, numLen: 0 }),
-          lastName: namor.generate({ words: 1, numLen: 0 }),
-          age: Math.floor(Math.random() * 30)
-        }
-      })
-    }
-  })
+class Story extends React.Component {
+  render () {
+    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),
+        children: _.map(_.range(10), 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'
+    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}
-        />
+    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>
       </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'
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./Simple')
 
-// 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'
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-  />
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
 )
-  `
-}
diff --git a/stories/SubComponents.js b/stories/SubComponents.js
index 1eae145..0a75e48 100644
--- a/stories/SubComponents.js
+++ b/stories/SubComponents.js
@@ -2,10 +2,9 @@ import React from 'react'
 import _ from 'lodash'
 import namor from 'namor'
 
-import CodeHighlight from './components/codeHighlight'
 import ReactTable from '../src/index'
 
-class SubComponents extends React.Component {
+class Story extends React.Component {
   constructor (props) {
     super(props)
 
@@ -131,60 +130,15 @@ class SubComponents extends React.Component {
       }
     })
   }
-
-  getCode () {
-    return `
-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'
-  }]
-}]
-
-export default (
-  <ReactTable
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-    {...otherOptions}
-    SubComponent={(row) => {
-      return (
-        <div style={{padding: '20px'}}>
-          <em>You can put any component you want here, even another React Table!</em>
-          <br />
-          <br />
-          <ReactTable
-            data={data}
-            columns={columns}
-            defaultPageSize={3}
-            showPagination={false}
-            SubComponent={(row) => {
-              return (
-                <div style={{padding: '20px'}}>
-                  <em>It even has access to the row data: </em>
-                  <CodeHighlight>{() => JSON.stringify(row, null, 2)}</CodeHighlight>
-                </div>
-              )
-            }}
-          />
-        </div>
-      )
-    }}
-  />
-)
-  `
-  }
 }
 
-export default () => <SubComponents />
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./SubComponents')
+
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
+)
diff --git a/stories/SubRows.js b/stories/SubRows.js
index d35bb3f..747a4c4 100644
--- a/stories/SubRows.js
+++ b/stories/SubRows.js
@@ -2,100 +2,76 @@ 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 => {
-    const children = _.map(_.range(10), d => {
-      const grandChildren = _.map(_.range(10), d => {
+class Story extends React.Component {
+  render () {
+    const data = _.map(_.range(5553), d => {
+      const children = _.map(_.range(10), d => {
+        const grandChildren = _.map(_.range(10), d => {
+          return {
+            age: Math.floor(Math.random() * 30)
+          }
+        })
         return {
-          age: Math.floor(Math.random() * 30)
+          firstName: namor.generate({ words: 1, numLen: 0 }),
+          age: Math.floor(Math.random() * 30),
+          children: grandChildren
         }
       })
       return {
-        firstName: namor.generate({ words: 1, numLen: 0 }),
+        lastName: namor.generate({ words: 1, numLen: 0 }),
+        firstName: children.map(d => d.firstName),
         age: Math.floor(Math.random() * 30),
-        children: grandChildren
+        children
       }
     })
-    return {
-      lastName: namor.generate({ words: 1, numLen: 0 }),
-      firstName: children.map(d => d.firstName),
-      age: Math.floor(Math.random() * 30),
-      children
-    }
-  })
 
-  const columns = [{
-    Header: 'Name',
-    columns: [{
-      Header: 'First Name',
-      accessor: 'firstName',
-      expander: true
+    const columns = [{
+      Header: 'Name',
+      columns: [{
+        Header: 'First Name',
+        accessor: 'firstName',
+        expander: true
+      }, {
+        Header: 'Last Name',
+        accessor: 'lastName'
+      }]
     }, {
-      Header: 'Last Name',
-      accessor: '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}
-          subRowsKey='children'
-        />
+    return (
+      <div>
+        <div className='table-wrap'>
+          <ReactTable
+            className='-striped -highlight'
+            data={data}
+            columns={columns}
+            defaultPageSize={10}
+            subRowsKey='children'
+          />
+        </div>
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: Hold shift when sorting to multi-sort!</em>
+        </div>
       </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'
+// Source Code
+const CodeHighlight = require('./components/codeHighlight').default
+const source = require('!raw-loader!./SubRows')
 
-// 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'
-    data={data}
-    columns={columns}
-    defaultPageSize={10}
-  />
+export default () => (
+  <div>
+    <Story />
+    <CodeHighlight>{() => source}</CodeHighlight>
+  </div>
 )
-  `
-}