Added "noData" component

Fixes #78

.storybook/config.js

@@ -22,6 +22,7 @@ import PivotingSubComponents from '../stories/PivotingSubComponents.js'
 import OneHundredKRows from '../stories/OneHundredKRows.js'
 import FunctionalRendering from '../stories/FunctionalRendering.js'
 import CustomExpanderPosition from '../stories/CustomExpanderPosition.js'
+import NoDataText from '../stories/NoDataText.js'
 //
 configure(() => {
   storiesOf('1. Docs')
@@ -49,4 +50,5 @@ configure(() => {
     .add('100k Rows w/ Pivoting & Sub Components', OneHundredKRows)
     .add('Functional Rendering', FunctionalRendering)
     .add('Custom Expander Position', CustomExpanderPosition)
+    .add('Custom "No Data" Text', NoDataText)
 }, module)

README.md

@@ -187,6 +187,7 @@ These are all of the available props (and their default values) for the main `<R
   getTdProps: () => ({}),
   getPaginationProps: () => ({}),
   getLoadingProps: () => ({}),
+  getNoDataProps: () => ({}),
 
   // Global Column Defaults
   column: {
@@ -209,6 +210,7 @@ These are all of the available props (and their default values) for the main `<R
   previousText: 'Previous',
   nextText: 'Next',
   loadingText: 'Loading...',
+  noDataText: 'No rows found',  
   pageText: 'Page',
   ofText: 'of',
   rowsText: 'rows',

src/index.js

@@ -70,6 +70,7 @@ export const ReactTableDefaults = {
   getTdProps: emptyObj,
   getPaginationProps: emptyObj,
   getLoadingProps: emptyObj,
+  getNoDataProps: emptyObj,
 
   // Global Column Defaults
   column: {
@@ -92,6 +93,7 @@ export const ReactTableDefaults = {
   previousText: 'Previous',
   nextText: 'Next',
   loadingText: 'Loading...',
+  noDataText: 'No rows found',
   pageText: 'Page',
   ofText: 'of',
   rowsText: 'rows',
@@ -139,7 +141,8 @@ export const ReactTableDefaults = {
         {loadingText}
       </div>
     </div>
-  )
+  ),
+  NoDataComponent: _.makeTemplateComponent('rt-noData')
 }
 
 export default React.createClass({
@@ -272,10 +275,12 @@ export default React.createClass({
       getTdProps,
       getPaginationProps,
       getLoadingProps,
+      getNoDataProps,
       showPagination,
       expanderColumnWidth,
       manual,
       loadingText,
+      noDataText,
       // State
       loading,
       pageSize,
@@ -299,6 +304,7 @@ export default React.createClass({
       PaginationComponent,
       LoadingComponent,
       SubComponent,
+      NoDataComponent,
       // Data model
       resolvedData,
       allVisibleColumns,
@@ -835,6 +841,7 @@ export default React.createClass({
       const tBodyProps = _.splitProps(getTbodyProps(finalState, undefined, undefined, this))
       const paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
       const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
+      const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
       return (
         <div
           className={classnames(
@@ -880,6 +887,13 @@ export default React.createClass({
               {...paginationProps.rest}
             />
           )}
+          {!pageRows.length && (
+            <NoDataComponent
+              {...noDataProps}
+            >
+              {_.normalizeComponent(noDataText)}
+            </NoDataComponent>
+          )}
           <LoadingComponent
             loading={loading}
             loadingText={loadingText}

src/index.styl

@@ -170,6 +170,18 @@ $expandSize = 7px
     .-pageSizeOptions
       margin: 3px 10px
 
+  .rt-noData
+    display:block
+    position:absolute
+    left:50%
+    top:50%
+    transform: translate(-50%, -50%)
+    background: alpha(white, .8)
+    transition: all .3s ease
+    z-index: 1
+    pointer-events: none
+    padding: 20px
+    color: alpha(black, .5)
 
   .-loading
     display:block

stories/NoDataText.js

@@ -0,0 +1,92 @@
+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>
+      <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>
+      <CodeHighlight>{() => getCode()}</CodeHighlight>
+    </div>
+  )
+}
+
+function getCode () {
+  return `
+import ReactTable from 'react-table'
+
+// 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}
+  />
+)
+  `
+}

stories/Simple.js

@@ -40,13 +40,6 @@ export default () => {
           data={data}
           columns={columns}
           defaultPageSize={10}
-          getTdProps={() => {
-            return {
-              onClick: () => {
-                console.log('clicked')
-              }
-            }
-          }}
         />
       </div>
       <div style={{textAlign: 'center'}}>