5.1.0

2026-08-19 08:20:30 +00:00 · 2017-02-10 16:47:09 -07:00
17 changed files with 110 additions and 228 deletions
@@ -22,7 +22,6 @@ 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')
@@ -50,5 +49,4 @@ 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 and Header Rendering](#custom-cell-and-header-rendering)
+- [Custom Cell & Header Rendering](#custom-cell--and-header-rendering)
 - [Styles](#styles)
 - [Custom Props](#custom-props)
- [Pivoting and Aggregation](#pivoting-and-aggregation)
- [Sub Tables and Sub Components](#sub-tables-and-sub-components)
+- [Pivoting & Aggregation](#pivoting--aggregation)
+- [Sub Tables & Sub Components](#sub-tables--sub-components)
 - [Server-side Data](#server-side-data)
 - [Fully Controlled Component](#fully-controlled-component)
 - [Functional Rendering](#functional-rendering)
@@ -187,7 +187,6 @@ These are all of the available props (and their default values) for the main `<R
  getTdProps: () => ({}),
  getPaginationProps: () => ({}),
  getLoadingProps: () => ({}),
-  getNoDataProps: () => ({}),

  // Global Column Defaults
  column: {
@@ -210,7 +209,6 @@ 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',
@@ -297,7 +295,7 @@ const columns = [{
 }]
 ```

-## Custom Cell and Header Rendering
+## Custom Cell & 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
@@ -439,7 +437,7 @@ const columns = [{
 }]
 ```

-## Pivoting and Aggregation
+## Pivoting & 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
@@ -469,7 +467,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 and Sub Components
+## Sub Tables & 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.1dfdb2ebd0085aa535c8.bundle.js"></script>
+        <script src="static/preview.2624d4fc5e8e37cbc8cc.bundle.js"></script>
      </body>
    </html>
  
@@ -38,7 +38,7 @@
      </head>
      <body style="margin: 0;">
        <div id="root"></div>
-        <script src="static/manager.d3baea6e6f08c3c0279c.bundle.js"></script>
+        <script src="static/manager.f127c5ae855df8d8558a.bundle.js"></script>
      </body>
    </html>
  
@@ -1 +1 @@
-{"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":""}
+{"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":""}
@@ -1 +0,0 @@
-{"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":""}
@@ -0,0 +1 @@
+{"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.2.0",
+  "version": "5.1.0",
  "description": "A fast, lightweight, opinionated table and datagrid built on React",
  "license": "MIT",
  "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -12,7 +12,6 @@ export default {
      expanderColumnWidth,
      SubComponent,
      page,
-      pages,
      pageSize
    } = this.getResolvedState(nextProps, nextState)

@@ -215,8 +214,7 @@ export default {
      resolvedData = groupRecursively(resolvedData, pivotBy)
    }

-    const newPages = _.getFirstDefined(pages, Math.ceil(resolvedData.length / pageSize))
-    const newPage = page > newPages ? newPage - 1 : page
+    const newPages = Math.ceil(resolvedData.length / pageSize)

    return {
      resolvedData,
@@ -225,7 +223,7 @@ export default {
      headerGroups,
      allDecoratedColumns,
      hasHeaderGroups,
-      page: Math.max(newPage, 0)
+      page: (page + 1) > newPages ? newPages - 1 : page
    }
  },
  getSortedData (resolvedState) {
@@ -70,7 +70,6 @@ export const ReactTableDefaults = {
  getTdProps: emptyObj,
  getPaginationProps: emptyObj,
  getLoadingProps: emptyObj,
-  getNoDataProps: emptyObj,

  // Global Column Defaults
  column: {
@@ -93,7 +92,6 @@ export const ReactTableDefaults = {
  previousText: 'Previous',
  nextText: 'Next',
  loadingText: 'Loading...',
-  noDataText: 'No rows found',
  pageText: 'Page',
  ofText: 'of',
  rowsText: 'rows',
@@ -141,8 +139,7 @@ export const ReactTableDefaults = {
        {loadingText}
      </div>
    </div>
-  ),
-  NoDataComponent: _.makeTemplateComponent('rt-noData')
+  )
 }

 export default React.createClass({
@@ -275,12 +272,10 @@ export default React.createClass({
      getTdProps,
      getPaginationProps,
      getLoadingProps,
-      getNoDataProps,
      showPagination,
      expanderColumnWidth,
      manual,
      loadingText,
-      noDataText,
      // State
      loading,
      pageSize,
@@ -304,7 +299,6 @@ export default React.createClass({
      PaginationComponent,
      LoadingComponent,
      SubComponent,
-      NoDataComponent,
      // Data model
      resolvedData,
      allVisibleColumns,
@@ -459,10 +453,12 @@ export default React.createClass({
          }}
          {...rest}
        >
-          {_.normalizeComponent(column.header, {
-            data: sortedData,
-            column: column
-          })}
+          {typeof column.header === 'function' ? (
+            <column.header
+              data={sortedData}
+              column={column}
+            />
+          ) : column.header}
        </ThComponent>
      )
    }
@@ -541,10 +537,12 @@ export default React.createClass({
              {column.pivotColumns.map((pivotColumn, i) => {
                return (
                  <span key={pivotColumn.id}>
-                    {_.normalizeComponent(pivotColumn.header, {
-                      data: sortedData,
-                      column: column
-                    })}
+                    {typeof pivotColumn.header === 'function' ? (
+                      <pivotColumn.header
+                        data={sortedData}
+                        column={pivotColumn}
+                      />
+                    ) : pivotColumn.header}
                    {i < column.pivotColumns.length - 1 && (
                      <ExpanderComponent />
                    )}
@@ -591,10 +589,12 @@ export default React.createClass({
          }}
          {...rest}
        >
-          {_.normalizeComponent(column.header, {
-            data: sortedData,
-            column: column
-          })}
+          {typeof column.header === 'function' ? (
+            <column.header
+              data={sortedData}
+              column={column}
+            />
+          ) : column.header}
        </ThComponent>
      )
    }
@@ -627,6 +627,7 @@ 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)
@@ -744,10 +745,13 @@ export default React.createClass({
                  }}
                  {...tdProps.rest}
                >
-                  {_.normalizeComponent(column.render, {
-                    ...rowInfo,
-                    value: rowInfo.rowValues[column.id]
-                  }, rowInfo.rowValues[column.id])}
+                  {typeof Cell === 'function' ? (
+                    <Cell
+                      {...rowInfo}
+                      value={rowInfo.rowValues[column.id]}
+                    />
+                  ) : typeof Cell !== 'undefined' ? Cell
+                  : rowInfo.rowValues[column.id]}
                </TdComponent>
              )
            })}
@@ -841,7 +845,6 @@ 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(
@@ -887,13 +890,6 @@ export default React.createClass({
              {...paginationProps.rest}
            />
          )}
-          {!pageRows.length && (
-            <NoDataComponent
-              {...noDataProps}
-            >
-              {_.normalizeComponent(noDataText)}
-            </NoDataComponent>
-          )}
          <LoadingComponent
            loading={loading}
            loadingText={loadingText}
@@ -170,18 +170,6 @@ $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,8 +17,7 @@ export default {
  isArray,
  splitProps,
  compactObject,
-  isSortingDesc,
-  normalizeComponent
+  isSortingDesc
 }

 function get (obj, path, def) {
@@ -190,13 +189,3 @@ 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
-}
@@ -1,92 +0,0 @@
-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,6 +40,13 @@ export default () => {
          data={data}
          columns={columns}
          defaultPageSize={10}
+          getTdProps={() => {
+            return {
+              onClick: () => {
+                console.log('clicked')
+              }
+            }
+          }}
        />
      </div>
      <div style={{textAlign: 'center'}}>
				`@@ -1 +0,0 @@`
				`{"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":""}`
				`@@ -0,0 +1 @@`
				`{"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":""}`