5.2.0

Update Docs
Fixes #80
2026-08-19 08:20:30 +00:00 · 2017-02-15 10:07:33 -07:00 · 2017-02-15 10:07:14 -07:00 · 2017-02-15 09:55:42 -07:00 · 2017-02-15 09:54:57 -07:00
16 changed files with 224 additions and 112 deletions
@@ -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)
@@ -44,11 +44,11 @@
 - [Props](#props)
 - [Columns](#columns)
 - [Column Header Groups](#column-header-groups)
- [Custom Cell & Header Rendering](#custom-cell--and-header-rendering)
+- [Custom Cell and Header Rendering](#custom-cell-and-header-rendering)
 - [Styles](#styles)
 - [Custom Props](#custom-props)
- [Pivoting & Aggregation](#pivoting--aggregation)
- [Sub Tables & Sub Components](#sub-tables--sub-components)
+- [Pivoting and Aggregation](#pivoting-and-aggregation)
+- [Sub Tables and Sub Components](#sub-tables-and-sub-components)
 - [Server-side Data](#server-side-data)
 - [Fully Controlled Component](#fully-controlled-component)
 - [Functional Rendering](#functional-rendering)
@@ -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',
@@ -295,7 +297,7 @@ const columns = [{
 }]
 ```

-## Custom Cell & Header Rendering
+## Custom Cell and Header Rendering
 You can use any react component or JSX to display column headers or cells. Any component you use will be passed the following props:
 - `row` - Original row from your data
 - `rowValues` - The post-accessed values from the original row
@@ -437,7 +439,7 @@ const columns = [{
 }]
 ```

-## Pivoting & Aggregation
+## Pivoting and Aggregation
 Pivoting the table will group records together based on their accessed values and allow the rows in that group to be expanded underneath it.
 To pivot, pass an array of `columnID`'s to `pivotBy`. Remember, a column's `id` is either the one that you assign it (when using a custom accessors) or its `accessor` string.
 ```javascript
@@ -467,7 +469,7 @@ const columns = [{

 Pivoted columns can be sorted just like regular columns, but not independently of each other.  For instance, if you click to sort the pivot column in ascending order, it will sort by each pivot recursively in ascending order together.

-## Sub Tables & Sub Components
+## Sub Tables and Sub Components
 By adding a `SubComponent` props, you can easily add an expansion level to all root-level rows:
 ```javascript
 <ReactTable
@@ -16,7 +16,7 @@
      <body>
        <div id="root"></div>
        <div id="error-display"></div>
-        <script src="static/preview.2624d4fc5e8e37cbc8cc.bundle.js"></script>
+        <script src="static/preview.1dfdb2ebd0085aa535c8.bundle.js"></script>
      </body>
    </html>
  
@@ -38,7 +38,7 @@
      </head>
      <body style="margin: 0;">
        <div id="root"></div>
-        <script src="static/manager.f127c5ae855df8d8558a.bundle.js"></script>
+        <script src="static/manager.d3baea6e6f08c3c0279c.bundle.js"></script>
      </body>
    </html>
  
@@ -1 +1 @@
-{"version":3,"file":"static/manager.f127c5ae855df8d8558a.bundle.js","sources":["webpack:///static/manager.f127c5ae855df8d8558a.bundle.js"],"mappings":"AAAA;AAkuDA;AA84DA;AA28DA;AA00DA;AAsyEA;AA89CA;AA8rDA;AAsiDA;AAg6DA;AA2nDA;AA++CA;AAkvDA;AAsnEA;AA2oDA;AAivCA;AA+nDA;AAkpDA;AA6lEA;AAs4DA;AAquDA;AA+pDA;AAqxDA;AAsrDA;AAwyDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}
+{"version":3,"file":"static/manager.d3baea6e6f08c3c0279c.bundle.js","sources":["webpack:///static/manager.d3baea6e6f08c3c0279c.bundle.js"],"mappings":"AAAA;AAkuDA;AA84DA;AA28DA;AA00DA;AAsyEA;AA89CA;AA8rDA;AAsiDA;AAg6DA;AA2nDA;AA++CA;AAkvDA;AAsnEA;AA2oDA;AAivCA;AA+nDA;AAkpDA;AA6lEA;AAs4DA;AAquDA;AA+pDA;AAqxDA;AAsrDA;AAyyDA;AA88GA;AAj6CA;AAopGA;AAsuFA;AA+zEA;AAtMA;AAizEA","sourceRoot":""}
@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.1dfdb2ebd0085aa535c8.bundle.js","sources":["webpack:///static/preview.1dfdb2ebd0085aa535c8.bundle.js"],"mappings":"AAAA;AAkuDA;AAu+CA;AA0+FA;AAmpFA;AAkxLA;AA7sBA;AAojOA;AAkjEA;AAivDA;AAy7DA;AAqlDA;AAmvDA;AAu8CA;AA6+DA;AAwlDA;AA2+CA;AAimDA;AA29DA;AA04DA;AAsxCA;AAynDA;AAurDA;AAgiEA;AA03DA;AAwwCA;AA8tDA;AA02FA;AA+tGA;AAy+CA;AAuzCA;AAkuCA;AAikDA;AA8dA;AA+jFA","sourceRoot":""}
@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.2624d4fc5e8e37cbc8cc.bundle.js","sources":["webpack:///static/preview.2624d4fc5e8e37cbc8cc.bundle.js"],"mappings":"AAAA;AAkuDA;AAkyDA;AA01EA;AA+gGA;AAo4IA;AAt5NA;AA4udA;AA2hEA;AA2uDA;AA29DA;AA2gDA;AAosDA;AAuhDA;AA+6DA;AAioDA;AA4+CA;AAwpDA;AAisEA;AAqoDA;AAqwCA;AA2oDA;AAowDA;AAokEA;AA0vDA;AA2rDA;AA8nDA;AAwsFA;AAyiGA;AA++CA;AA8yCA;AAgzCA;AAwhDA;AAiPA;AA+jFA","sourceRoot":""}
@@ -1,6 +1,6 @@
 {
  "name": "react-table",
-  "version": "5.1.1",
+  "version": "5.2.0",
  "description": "A fast, lightweight, opinionated table and datagrid built on React",
  "license": "MIT",
  "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -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,
@@ -453,12 +459,10 @@ export default React.createClass({
          }}
          {...rest}
        >
-          {typeof column.header === 'function' ? (
-            <column.header
-              data={sortedData}
-              column={column}
-            />
-          ) : column.header}
+          {_.normalizeComponent(column.header, {
+            data: sortedData,
+            column: column
+          })}
        </ThComponent>
      )
    }
@@ -537,12 +541,10 @@ export default React.createClass({
              {column.pivotColumns.map((pivotColumn, i) => {
                return (
                  <span key={pivotColumn.id}>
-                    {typeof pivotColumn.header === 'function' ? (
-                      <pivotColumn.header
-                        data={sortedData}
-                        column={pivotColumn}
-                      />
-                    ) : pivotColumn.header}
+                    {_.normalizeComponent(pivotColumn.header, {
+                      data: sortedData,
+                      column: column
+                    })}
                    {i < column.pivotColumns.length - 1 && (
                      <ExpanderComponent />
                    )}
@@ -589,12 +591,10 @@ export default React.createClass({
          }}
          {...rest}
        >
-          {typeof column.header === 'function' ? (
-            <column.header
-              data={sortedData}
-              column={column}
-            />
-          ) : column.header}
+          {_.normalizeComponent(column.header, {
+            data: sortedData,
+            column: column
+          })}
        </ThComponent>
      )
    }
@@ -627,7 +627,6 @@ export default React.createClass({
            {...trProps.rest}
          >
            {allVisibleColumns.map((column, i2) => {
-              const Cell = column.render
              const show = typeof column.show === 'function' ? column.show() : column.show
              const width = _.getFirstDefined(column.width, column.minWidth)
              const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
@@ -745,17 +744,10 @@ export default React.createClass({
                  }}
                  {...tdProps.rest}
                >
-                  {typeof Cell === 'function' ? (
-                    Cell.prototype.isReactComponent ? (
-                      <Cell
-                        {...rowInfo}
-                        value={rowInfo.rowValues[column.id]}
-                      />
-                    ) : Cell({
-                      ...rowInfo,
-                      value: rowInfo.rowValues[column.id]
-                    })
-                  ) : rowInfo.rowValues[column.id]}
+                  {_.normalizeComponent(column.render, {
+                    ...rowInfo,
+                    value: rowInfo.rowValues[column.id]
+                  }, rowInfo.rowValues[column.id])}
                </TdComponent>
              )
            })}
@@ -849,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(
@@ -894,6 +887,13 @@ export default React.createClass({
              {...paginationProps.rest}
            />
          )}
+          {!pageRows.length && (
+            <NoDataComponent
+              {...noDataProps}
+            >
+              {_.normalizeComponent(noDataText)}
+            </NoDataComponent>
+          )}
          <LoadingComponent
            loading={loading}
            loadingText={loadingText}
@@ -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
@@ -17,7 +17,8 @@ export default {
  isArray,
  splitProps,
  compactObject,
-  isSortingDesc
+  isSortingDesc,
+  normalizeComponent
 }

 function get (obj, path, def) {
@@ -189,3 +190,13 @@ function compactObject (obj) {
 function isSortingDesc (d) {
  return !!(d.sort === 'desc' || d.desc === true || d.asc === false)
 }
+
+function normalizeComponent (Comp, params, fallback = Comp) {
+  return typeof Comp === 'function' ? (
+    Comp.prototype.isReactComponent ? (
+      <Comp
+        {...params}
+      />
+    ) : Comp(params)
+  ) : fallback
+}
@@ -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}
+  />
+)
+  `
+}
@@ -40,13 +40,6 @@ export default () => {
          data={data}
          columns={columns}
          defaultPageSize={10}
-          getTdProps={() => {
-            return {
-              onClick: () => {
-                console.log('clicked')
-              }
-            }
-          }}
        />
      </div>
      <div style={{textAlign: 'center'}}>
Author	SHA1	Message	Date
Tanner Linsley	6d5207eb4e	5.2.0	2017-02-15 10:07:33 -07:00
Tanner Linsley	0d397e0c29	Update Docs Fixes #80	2017-02-15 10:07:14 -07:00
Tanner Linsley	b15f3ac3b0	Added "noData" component Fixes #78	2017-02-15 09:55:42 -07:00
Tanner Linsley	48ea0df09d	Normalize all JSX callbacks to support functions	2017-02-15 09:54:57 -07:00
				`@@ -0,0 +1 @@`
				`{"version":3,"file":"static/preview.1dfdb2ebd0085aa535c8.bundle.js","sources":["webpack:///static/preview.1dfdb2ebd0085aa535c8.bundle.js"],"mappings":"AAAA;AAkuDA;AAu+CA;AA0+FA;AAmpFA;AAkxLA;AA7sBA;AAojOA;AAkjEA;AAivDA;AAy7DA;AAqlDA;AAmvDA;AAu8CA;AA6+DA;AAwlDA;AA2+CA;AAimDA;AA29DA;AA04DA;AAsxCA;AAynDA;AAurDA;AAgiEA;AA03DA;AAwwCA;AA8tDA;AA02FA;AA+tGA;AAy+CA;AAuzCA;AAkuCA;AAikDA;AA8dA;AA+jFA","sourceRoot":""}`
				`@@ -1 +0,0 @@`
				`{"version":3,"file":"static/preview.2624d4fc5e8e37cbc8cc.bundle.js","sources":["webpack:///static/preview.2624d4fc5e8e37cbc8cc.bundle.js"],"mappings":"AAAA;AAkuDA;AAkyDA;AA01EA;AA+gGA;AAo4IA;AAt5NA;AA4udA;AA2hEA;AA2uDA;AA29DA;AA2gDA;AAosDA;AAuhDA;AA+6DA;AAioDA;AA4+CA;AAwpDA;AAisEA;AAqoDA;AAqwCA;AA2oDA;AAowDA;AAokEA;AA0vDA;AA2rDA;AA8nDA;AAwsFA;AAyiGA;AA++CA;AA8yCA;AAgzCA;AAwhDA;AAiPA;AA+jFA","sourceRoot":""}`