v6.8.4

CHANGELOG.md

@@ -1,3 +1,15 @@
+## 6.8.3
+
+#### Fixes & Optimizations
+
+* Allow the `resolveData` prop to alter or materialize new data when the `data` prop changes.
+
+## 6.8.1
+
+#### Fixes & Optimizations
+
+* Updated eslint and code formatting
+
 ## 6.7.5
 
 #### Fixes & Optimizations

README.md

@@ -161,6 +161,21 @@ render() {
 
 Simply pass the `data` prop anything that resembles an array or object. Client-side sorting and pagination are built in, and your table will update gracefully as you change any props. [Server-side data](#server-side-data) is also supported!
 
+```javascript
+<ReactTable
+  data={[...]}
+/>
+```
+
+**Pro Tip: Using the `resolveData` prop** - Any time the `data` prop value changes (using a `===` comparison), the table will update, but sometimes you need to materialize, alter, or shape this data before it enters the table. To do this, you can use the `resolveData` prop! It recieves the `data` prop as the only parameter and returns the resolved data.
+
+```javascript
+<ReactTable
+  data={myData} // The data prop should be immutable and only change when you want to update the table
+  resolveData={data => data.map(row => row)} // But you can break immutability here because `resolveData` runs when the `data` prop changes!
+/>
+```
+
 ## Props
 
 These are all of the available props (and their default values) for the main `<ReactTable />` component.
@@ -169,6 +184,7 @@ These are all of the available props (and their default values) for the main `<R
 {
   // General
   data: [],
+  resolveData: data => resolvedData,
   loading: false,
   showPagination: true,
   showPaginationTop: false,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "6.8.1",
+  "version": "6.8.4",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/react-tools/react-table#readme",

src/defaultProps.js

@@ -9,6 +9,7 @@ const emptyObj = () => ({})
 export default {
   // General
   data: [],
+  resolveData: data => data,
   loading: false,
   showPagination: true,
   showPaginationTop: false,

src/index.js

@@ -340,10 +340,12 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
           }}
           {...rest}
         >
-          {_.normalizeComponent(column.Header, {
-            data: sortedData,
-            column,
-          })}
+          <div className={classnames(isResizable && 'rt-resizable-header-content')}>
+            {_.normalizeComponent(column.Header, {
+              data: sortedData,
+              column,
+            })}
+          </div>
           {resizer}
         </ThComponent>
       )

src/index.styl

@@ -78,6 +78,10 @@ input-select-style()
       &:last-child
         overflow: hidden
 
+    .rt-resizable-header-content
+      overflow: hidden
+      text-overflow: ellipsis
+
     .rt-header-pivot
       border-right-color: #f7f7f7
 
@@ -119,6 +123,7 @@ input-select-style()
         border-right:0
     .rt-expandable
       cursor: pointer
+      text-overflow: clip
   .rt-tr-group
     flex: 1 0 auto
     display: flex

src/methods.js

@@ -18,6 +18,7 @@ export default Base =>
         columns,
         pivotBy = [],
         data,
+        resolveData,
         pivotIDKey,
         pivotValKey,
         subRowsKey,
@@ -237,7 +238,7 @@ export default Base =>
         }
         return row
       }
-      let resolvedData = data.map((d, i) => accessRow(d, i))
+      let resolvedData = resolveData(data).map((d, i) => accessRow(d, i))
 
       // TODO: Make it possible to fabricate nested rows without pivoting
       const aggregatingColumns = allVisibleColumns.filter(d => !d.expander && d.aggregate)

src/propTypes.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 
 export default {
   // General
-  data: PropTypes.array,
+  data: PropTypes.any.isRequired,
   loading: PropTypes.bool,
   showPagination: PropTypes.bool,
   showPaginationTop: PropTypes.bool,