diff --git a/package.json b/package.json
index fc7a208..577ac64 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,8 @@
"docs": "build-storybook -o docs && cp .storybook/CNAME docs/CNAME"
},
"dependencies": {
- "classnames": "^2.2.5"
+ "classnames": "^2.2.5",
+ "raw-loader": "^0.5.1"
},
"peerDependencies": {
"react": "^15.x.x"
diff --git a/stories/CustomExpanderPosition.js b/stories/CustomExpanderPosition.js
index d2705fb..6796136 100644
--- a/stories/CustomExpanderPosition.js
+++ b/stories/CustomExpanderPosition.js
@@ -5,6 +5,8 @@ import namor from 'namor'
import CodeHighlight from './components/codeHighlight'
import ReactTable from '../src/index'
+import source from '!raw-loader!./CustomExpanderPosition'
+
export default () => {
const data = _.map(_.range(5553), d => {
return {
@@ -38,7 +40,7 @@ export default () => {
expander: true,
Header: () => (More),
width: 65,
- Cell: ({isExpanded, ...rest}) => (
+ Expander: ({isExpanded, ...rest}) => (
{isExpanded ? ⊙ : ⊕}
@@ -63,58 +65,7 @@ export default () => {
Tip: Hold shift when sorting to multi-sort!
- {() => getCode()}
+ {() => source}
)
}
-
-function getCode () {
- return `
-import ReactTable from 'react-table'
-
-// Create some column definitions
-const columns = [{
- Header: 'Name',
- columns: [{
- Header: 'First Name',
- accessor: 'firstName',
- Footer: () => First Name
- }, {
- Header: 'Last Name',
- accessor: 'lastName',
- Footer: () => Last Name
- }]
-}, {
- Header: 'Info',
- columns: [{
- Header: 'Age',
- accessor: 'age',
- Footer: () => Age
- }]
-}, {
- Header: 'Expand',
- columns: [{
- expander: true,
- Header: () => (More),
- width: 65,
- Cell: ({isExpanded, ...rest}) => (
-
- {isExpanded ? ⊙ : ⊕}
-
- ),
- style: {cursor: 'pointer', fontSize: 25, padding: '0', textAlign: 'center', userSelect: 'none'},
- Footer: () => ♥
- }]
-}]
-
-return (
- Hello}
- />
-)
- `
-}
diff --git a/stories/Filtering.js b/stories/Filtering.js
index 1b6301a..8967ac9 100644
--- a/stories/Filtering.js
+++ b/stories/Filtering.js
@@ -5,6 +5,8 @@ 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 {
constructor (props) {
@@ -68,9 +70,9 @@ class Filtering extends React.Component {
}
return row[filter.id] < 21
},
- filterRender: ({filter, onFilterChange}) => (
+ Filter: ({filter, onChange}) => (