5.5.0

* Add column resizing for non pivot columns.

* Fixing resizing UI issues and mobile functionality.

* Remove calling onChange during resize events so that server example doesn't refetch data every time a column resizes.

.storybook/config.js

@@ -25,6 +25,7 @@ import CustomExpanderPosition from '../stories/CustomExpanderPosition.js'
 import NoDataText from '../stories/NoDataText.js'
 import Footers from '../stories/Footers.js'
 import Filtering from '../stories/Filtering.js'
+import ControlledTable from '../stories/ControlledTable.js'
 //
 configure(() => {
   storiesOf('1. Docs')
@@ -55,4 +56,5 @@ configure(() => {
     .add('Custom "No Data" Text', NoDataText)
     .add('Footers', Footers)
     .add('Custom Filtering', Filtering)
+    .add('Controlled Component', ControlledTable)
 }, module)

.storybook/fonts.css

@@ -14,4 +14,5 @@ h1 {
 
 p {
   margin-bottom: 15px;
+  line-height: 22px;
 }

README.md

@@ -90,37 +90,39 @@ import 'react-table/react-table.css'
 ```javascript
 import ReactTable from 'react-table'
 
-const data = [{
-  name: 'Tanner Linsley',
-  age: 26,
-  friend: {
-    name: 'Jason Maurer',
-    age: 23,
-  }
-},{
-  ...
-}]
+render() {
+  const data = [{
+    name: 'Tanner Linsley',
+    age: 26,
+    friend: {
+      name: 'Jason Maurer',
+      age: 23,
+    }
+  },{
+    ...
+  }]
 
-const columns = [{
-  header: 'Name',
-  accessor: 'name' // String-based value accessors!
-}, {
-  header: 'Age',
-  accessor: 'age',
-  render: props => <span className='number'>{props.value}</span> // Custom cell components!
-}, {
-  id: 'friendName', // Required because our accessor is not a string
-  header: 'Friend Name',
-  accessor: d => d.friend.name // Custom value accessors!
-}, {
-  header: props => <span>Friend Age</span>, // Custom header components!
-  accessor: 'friend.age'
-}]
+  const columns = [{
+    header: 'Name',
+    accessor: 'name' // String-based value accessors!
+  }, {
+    header: 'Age',
+    accessor: 'age',
+    render: props => <span className='number'>{props.value}</span> // Custom cell components!
+  }, {
+    id: 'friendName', // Required because our accessor is not a string
+    header: 'Friend Name',
+    accessor: d => d.friend.name // Custom value accessors!
+  }, {
+    header: props => <span>Friend Age</span>, // Custom header components!
+    accessor: 'friend.age'
+  }]
 
-<ReactTable
-  data={data}
-  columns={columns}
-/>
+  <ReactTable
+    data={data}
+    columns={columns}
+  />
+}
 ```
 
 ## Data
@@ -151,11 +153,13 @@ These are all of the available props (and their default values) for the main `<R
     const id = filter.pivotId || filter.id
     return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true
   },
+  resizable: true,
+  defaultResizing: [],
 
   // Controlled State Overrides (see Fully Controlled Component section)
   page: undefined,
   pageSize: undefined,
-  sorting: undefined
+  sorting: undefined,
 
   // Controlled State Callbacks
   onExpandSubComponent: undefined,
@@ -163,6 +167,7 @@ These are all of the available props (and their default values) for the main `<R
   onPageSizeChange: undefined,
   onSortingChange: undefined,
   onFilteringChange: undefined,
+  onResize: undefined,
 
   // Pivoting
   pivotBy: undefined,
@@ -207,6 +212,7 @@ These are all of the available props (and their default values) for the main `<R
   getPaginationProps: () => ({}),
   getLoadingProps: () => ({}),
   getNoDataProps: () => ({}),
+  getResizerProps: () => ({}),
 
   // Global Column Defaults
   column: {
@@ -229,7 +235,16 @@ These are all of the available props (and their default values) for the main `<R
     footerStyle: {},
     getFooterProps: () => ({}),
     filterMethod: undefined,
-    hideFilter: false
+    hideFilter: false,
+    filterRender: ({filter, onFilterChange}) => (
+      <input type='text'
+        style={{
+          width: '100%'
+        }}
+        value={filter ? filter.value : ''}
+        onChange={(event) => onFilterChange(event.target.value)}
+      />
+    )
   },
 
   // Text
@@ -303,7 +318,7 @@ Or just define them as props
   columns: [...], // See Header Groups section below
 
   // Footer
-  footer: 'Header Name' or JSX eg. ({data, column}) => <div>Header Name</div>,
+  footer: 'Footer Name' or JSX eg. ({data, column}) => <div>Footer Name</div>,
   footerClassName: '', // Set the classname of the `td` element of the column's footer
   footerStyle: {}, // Set the style of the `td` element of the column's footer
   getFooterProps: (state, rowInfo, column, instance) => ({}), // A function that returns props to decorate the `td` element of the column's footer
@@ -313,7 +328,8 @@ Or just define them as props
     // filter == an object specifying which filter is being applied. Format: {id: [the filter column's id], value: [the value the user typed in the filter field], pivotId: [if filtering on a pivot column, the pivotId will be set to the pivot column's id and the `id` field will be set to the top level pivoting column]}
     // row == the row of data supplied to the table
     // column == the column that the filter is on
-  hideFilter: false // If `showFilters` is set on the table, this option will let you selectively hide the filter on a particular row
+  hideFilter: false, // If `showFilters` is set on the table, this option will let you selectively hide the filter on a particular row
+  filterRender: JSX // eg. ({filter, onFilterChange}) => <select onChange={event => onFilterChange(event.target.value)} value={filter ? filter.value : ''}></select> // The value passed to onFilterChange will be the value passed to filter.value of the filterMethod
 }]
 ```
 
@@ -437,6 +453,8 @@ Every single built-in component's props can be dynamically extended using any on
   getTdProps={fn}
   getPaginationProps={fn}
   getLoadingProps={fn}
+  getNoDataProps: {fn},
+  getResizerProps: {fn}
 />
 ```
 
@@ -622,7 +640,8 @@ Here are the props and their corresponding callbacks that control the state of t
   onPageSizeChange={(pageSize, pageIndex) => {...}} // Called when the pageSize is changed by the user. The resolve page is also sent to maintain approximate position in the data
   onSortingChange={(column, shiftKey) => {...}} // Called when a sortable column header is clicked with the column itself and if the shiftkey was held. If the column is a pivoted column, `column` will be an array of columns
   onExpandRow={(index, event) => {...}} // Called when an expander is clicked. Use this to manage `expandedRows`
-  onFilteringChange={(column, event) => {...}} // Called when a user enters a value into a filter input field. The event is the onChange event of the input field.
+  onFilteringChange={(column, value) => {...}} // Called when a user enters a value into a filter input field or the value passed to the onFilterChange handler by the filterRender option. 
+  onResize={(column, event, isTouch) => {...}} // Called when a user clicks on a resizing component (the right edge of a column header)
 />
 ```
 
@@ -675,6 +694,8 @@ By default the table tries to filter by checking if the row's value starts with
 
 If you want to override a particular column's filtering method, you can set the `filterMethod` option on a column.
 
+To completely override the filter that is shown, you can set the `filterRender` column option. Using this option you can specify the JSX that is shown. The option is passed an `onFilterChange` method which must be called with the the value that you wan't to pass to the `filterMethod` option whenever the filter has changed.
+
 See <a href="http://react-table.js.org/?selectedKind=2.%20Demos&selectedStory=Custom%20Filtering&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel" target="\_parent">Custom Filtering</a> demo for examples.
 
 ## Component Overrides
@@ -697,6 +718,7 @@ Object.assign(ReactTableDefaults, {
   NextComponent: undefined,
   LoadingComponent: component,
   NoDataComponent: component,
+  ResizerComponent: component
 })
 
 // Or change per instance

docs/iframe.html

@@ -16,7 +16,7 @@
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="static/preview.1bf8468d20ff1a92c704.bundle.js"></script>
+        <script src="static/preview.0cd0bb2bf09f3220bea7.bundle.js"></script>
       </body>
     </html>
   

docs/static/preview.0cd0bb2bf09f3220bea7.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"static/preview.0cd0bb2bf09f3220bea7.bundle.js","sources":["webpack:///static/preview.0cd0bb2bf09f3220bea7.bundle.js"],"mappings":"AAAA;AAkuDA;AA62DA;AAwtFA;AAsiFA;AA0uOA;AAgmGA;AA6rDA;AA0iEA;AA0xDA;AA25DA;AAmqDA;AA0vDA;AA+9CA;AAg5DA;AAwoDA;AAk7CA;AA2pDA;AAmjEA;AA27DA;AAghCA;AA4vDA;AA8kDA;AAwpEA;AAk3DA;AAy0DA;AA8xCA;AAu3EA;AAi4GA;AAwoDA;AAk+CA;AA+oCA;AAutCA;AA4jDA;AAwcA;AA+jFA","sourceRoot":""}

docs/static/preview.1bf8468d20ff1a92c704.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/preview.1bf8468d20ff1a92c704.bundle.js","sources":["webpack:///static/preview.1bf8468d20ff1a92c704.bundle.js"],"mappings":"AAAA;AAkuDA;AAm/DA;AA+qFA;AAmmFA;AA07OA;AAuwFA;AAwtDA;AA+jEA;AA4uDA;AAi8DA;AA+lDA;AA4yDA;AA28CA;AAw7DA;AAooDA;AA67CA;AAiqDA;AAynEA;AAwxDA;AA+rCA;AA+mDA;AA2lDA;AAkqEA;AAs2DA;AA2zDA;AAo4CA;AAosFA;AAmjGA;AA6sDA;AAw2CA;AAkoCA;AAq8CA;AAu8CA;AAoDA;AA+jFA","sourceRoot":""}

package.json

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

src/defaultProps.js

@@ -27,6 +27,8 @@ export default {
     const id = filter.pivotId || filter.id
     return row[id] !== undefined ? String(row[id]).startsWith(filter.value) : true
   },
+  resizable: true,
+  defaultResizing: [],
 
   // Controlled State Overrides
   // page: undefined,
@@ -39,6 +41,7 @@ export default {
   onPageSizeChange: undefined,
   onSortingChange: undefined,
   onFilteringChange: undefined,
+  onResize: undefined,
 
   // Pivoting
   pivotBy: undefined,
@@ -82,6 +85,7 @@ export default {
   getPaginationProps: emptyObj,
   getLoadingProps: emptyObj,
   getNoDataProps: emptyObj,
+  getResizerProps: emptyObj,
 
   // Global Column Defaults
   column: {
@@ -104,7 +108,16 @@ export default {
     footerStyle: {},
     getFooterProps: emptyObj,
     filterMethod: undefined,
-    hideFilter: false
+    hideFilter: false,
+    filterRender: ({filter, onFilterChange}) => (
+      <input type='text'
+        style={{
+          width: '100%'
+        }}
+        value={filter ? filter.value : ''}
+        onChange={(event) => onFilterChange(event.target.value)}
+      />
+    )
   },
 
   // Text
@@ -161,5 +174,6 @@ export default {
       </div>
     </div>
   ),
-  NoDataComponent: _.makeTemplateComponent('rt-noData')
+  NoDataComponent: _.makeTemplateComponent('rt-noData'),
+  ResizerComponent: _.makeTemplateComponent('rt-resizer')
 }

src/index.js

@@ -39,18 +39,21 @@ export default React.createClass({
       getPaginationProps,
       getLoadingProps,
       getNoDataProps,
+      getResizerProps,
       showPagination,
       expanderColumnWidth,
       manual,
       loadingText,
       noDataText,
       showFilters,
+      resizable,
       // State
       loading,
       pageSize,
       page,
       sorting,
       filtering,
+      resizing,
       pages,
       // Pivoting State
       pivotValKey,
@@ -71,6 +74,7 @@ export default React.createClass({
       LoadingComponent,
       SubComponent,
       NoDataComponent,
+      ResizerComponent,
       // Data model
       resolvedData,
       allVisibleColumns,
@@ -106,7 +110,10 @@ export default React.createClass({
     const canPrevious = page > 0
     const canNext = page + 1 < pages
 
-    const rowMinWidth = _.sum(allVisibleColumns.map(d => _.getFirstDefined(d.width, d.minWidth)))
+    const rowMinWidth = _.sum(allVisibleColumns.map(d => {
+      const resized = resizing.find(x => x.id === d.id) || {}
+      return _.getFirstDefined(resized.value, d.width, d.minWidth)
+    }))
 
     let rowIndex = -1
 
@@ -149,9 +156,18 @@ export default React.createClass({
     }
 
     const makeHeaderGroup = (column, i) => {
-      const flex = _.sum(column.columns.map(d => d.width ? 0 : d.minWidth))
-      const width = _.sum(column.columns.map(d => _.getFirstDefined(d.width, d.minWidth)))
-      const maxWidth = _.sum(column.columns.map(d => _.getFirstDefined(d.width, d.maxWidth)))
+      const flex = _.sum(column.columns.map(d => {
+        const resized = resizing.find(x => x.id === d.id) || {}
+        return d.width || resized.value ? 0 : d.minWidth
+      }))
+      const width = _.sum(column.columns.map(d => {
+        const resized = resizing.find(x => x.id === d.id) || {}
+        return _.getFirstDefined(resized.value, d.width, d.minWidth)
+      }))
+      const maxWidth = _.sum(column.columns.map(d => {
+        const resized = resizing.find(x => x.id === d.id) || {}
+        return _.getFirstDefined(resized.value, d.width, d.maxWidth)
+      }))
       const theadGroupThProps = _.splitProps(getTheadGroupThProps(finalState, undefined, column, this))
       const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
 
@@ -255,10 +271,11 @@ export default React.createClass({
     }
 
     const makeHeader = (column, i) => {
+      const resized = resizing.find(x => x.id === column.id) || {}
       const sort = sorting.find(d => d.id === column.id)
       const show = typeof column.show === 'function' ? column.show() : column.show
-      const width = _.getFirstDefined(column.width, column.minWidth)
-      const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
+      const width = _.getFirstDefined(resized.value, column.width, column.minWidth)
+      const maxWidth = _.getFirstDefined(resized.value, column.width, column.maxWidth)
       const theadThProps = _.splitProps(getTheadThProps(finalState, undefined, column, this))
       const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
 
@@ -279,6 +296,14 @@ export default React.createClass({
         ...columnHeaderProps.rest
       }
 
+      const resizer = resizable ? (
+        <ResizerComponent
+          onMouseDown={e => this.resizeColumnStart(column, e, false)}
+          onTouchStart={e => this.resizeColumnStart(column, e, true)}
+          {...resizerProps}
+        />
+      ) : null
+
       if (column.expander) {
         if (column.pivotColumns) {
           const pivotSort = sorting.find(d => d.id === column.id)
@@ -287,6 +312,7 @@ export default React.createClass({
               key={i}
               className={classnames(
                 'rt-pivot-header',
+                'rt-resizable-header',
                 column.sortable && '-cursor-pointer',
                 classes,
                 pivotSort ? (pivotSort.desc ? '-sort-desc' : '-sort-asc') : ''
@@ -302,19 +328,22 @@ export default React.createClass({
               }}
               {...rest}
             >
-              {column.pivotColumns.map((pivotColumn, i) => {
-                return (
-                  <span key={pivotColumn.id}>
-                    {_.normalizeComponent(pivotColumn.header, {
-                      data: sortedData,
-                      column: column
-                    })}
-                    {i < column.pivotColumns.length - 1 && (
-                      <ExpanderComponent />
-                    )}
-                  </span>
-                )
-              })}
+              <div className='rt-resizable-header-content'>
+                {column.pivotColumns.map((pivotColumn, i) => {
+                  return (
+                    <span key={pivotColumn.id}>
+                      {_.normalizeComponent(pivotColumn.header, {
+                        data: sortedData,
+                        column: column
+                      })}
+                      {i < column.pivotColumns.length - 1 && (
+                        <ExpanderComponent />
+                      )}
+                    </span>
+                  )
+                })}
+              </div>
+              {resizer}
             </ThComponent>
           )
         }
@@ -340,6 +369,7 @@ export default React.createClass({
           key={i}
           className={classnames(
             classes,
+            'rt-resizable-header',
             sort ? (sort.desc ? '-sort-desc' : '-sort-asc') : '',
             column.sortable && '-cursor-pointer',
             !show && '-hidden',
@@ -355,10 +385,13 @@ export default React.createClass({
           }}
           {...rest}
         >
-          {_.normalizeComponent(column.header, {
-            data: sortedData,
-            column: column
-          })}
+          <div className='rt-resizable-header-content'>
+            {_.normalizeComponent(column.header, {
+              data: sortedData,
+              column: column
+            })}
+          </div>
+          {resizer}
         </ThComponent>
       )
     }
@@ -387,8 +420,9 @@ export default React.createClass({
     }
 
     const makeFilter = (column, i) => {
-      const width = _.getFirstDefined(column.width, column.minWidth)
-      const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
+      const resized = resizing.find(x => x.id === column.id) || {}
+      const width = _.getFirstDefined(resized.value, column.width, column.minWidth)
+      const maxWidth = _.getFirstDefined(resized.value, column.width, column.maxWidth)
       const theadFilterThProps = _.splitProps(getTheadFilterThProps(finalState, undefined, column, this))
       const columnHeaderProps = _.splitProps(column.getHeaderProps(finalState, undefined, column, this))
 
@@ -417,16 +451,16 @@ export default React.createClass({
             const filter = filtering.find(filter => filter.id === column.id && filter.pivotId === col.id)
             pivotCols.push(
               <span key={col.id}
-                style={{display: 'flex', alignContent: 'flex-end', flex: 1}}>
+                style={{flex: 1}}>
                 {!col.hideFilter ? (
-                  <input type='text'
-                    style={{
-                      flex: 1,
-                      width: 20
-                    }}
-                    value={filter ? filter.value : ''}
-                    onChange={(event) => this.filterColumn(column, event, col)}
-                  />
+                  _.normalizeComponent(col.filterRender,
+                    {
+                      col,
+                      filter,
+                      onFilterChange: (value) => (this.filterColumn(column, value, col))
+                    },
+                    defaults.column.filterRender
+                  )
                 ) : null}
               </span>
             )
@@ -489,13 +523,14 @@ export default React.createClass({
           {...rest}
         >
           {!column.hideFilter ? (
-            <input type='text'
-              style={{
-                width: `100%`
-              }}
-              value={filter ? filter.value : ''}
-              onChange={(event) => this.filterColumn(column, event)}
-            />
+            _.normalizeComponent(column.filterRender,
+              {
+                column,
+                filter,
+                onFilterChange: (value) => (this.filterColumn(column, value))
+              },
+              defaults.column.filterRender
+            )
           ) : null}
         </ThComponent>
       )
@@ -529,9 +564,10 @@ export default React.createClass({
             {...trProps.rest}
           >
             {allVisibleColumns.map((column, i2) => {
+              const resized = resizing.find(x => x.id === column.id) || {}
               const show = typeof column.show === 'function' ? column.show() : column.show
-              const width = _.getFirstDefined(column.width, column.minWidth)
-              const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
+              const width = _.getFirstDefined(resized.value, column.width, column.minWidth)
+              const maxWidth = _.getFirstDefined(resized.value, column.width, column.maxWidth)
               const tdProps = _.splitProps(getTdProps(finalState, rowInfo, column, this))
               const columnProps = _.splitProps(column.getProps(finalState, rowInfo, column, this))
 
@@ -593,15 +629,15 @@ export default React.createClass({
                               {...rowInfo}
                               value={rowInfo.rowValues[pivotValKey]}
                             />
-                            ) : <span>{row[pivotValKey]} ({rowInfo.subRows.length})</span>}
+                          ) : <span>{row[pivotValKey]} ({rowInfo.subRows.length})</span>}
                         </span>
-                        ) : SubComponent ? (
-                          <span>
-                            <ExpanderComponent
-                              isExpanded={isExpanded}
-                            />
-                          </span>
-                          ) : null}
+                      ) : SubComponent ? (
+                        <span>
+                          <ExpanderComponent
+                            isExpanded={isExpanded}
+                          />
+                        </span>
+                      ) : null}
                     </TdComponent>
                   )
                 }
@@ -680,9 +716,10 @@ export default React.createClass({
             style={trProps.style || {}}
           >
             {allVisibleColumns.map((column, i2) => {
+              const resized = resizing.find(x => x.id === column.id) || {}
               const show = typeof column.show === 'function' ? column.show() : column.show
-              const width = _.getFirstDefined(column.width, column.minWidth)
-              const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
+              const width = _.getFirstDefined(resized.value, column.width, column.minWidth)
+              const maxWidth = _.getFirstDefined(resized.value, column.width, column.maxWidth)
               const tdProps = _.splitProps(getTdProps(finalState, undefined, column, this))
               const columnProps = _.splitProps(column.getProps(finalState, undefined, column, this))
 
@@ -742,9 +779,10 @@ export default React.createClass({
             {...tFootTrProps.rest}
           >
             {allVisibleColumns.map((column, i2) => {
+              const resized = resizing.find(x => x.id === column.id) || {}
               const show = typeof column.show === 'function' ? column.show() : column.show
-              const width = _.getFirstDefined(column.width, column.minWidth)
-              const maxWidth = _.getFirstDefined(column.width, column.maxWidth)
+              const width = _.getFirstDefined(resized.value, column.width, column.minWidth)
+              const maxWidth = _.getFirstDefined(resized.value, column.width, column.maxWidth)
               const tFootTdProps = _.splitProps(getTfootTdProps(finalState, undefined, undefined, this))
               const columnProps = _.splitProps(column.getProps(finalState, undefined, column, this))
               const columnFooterProps = _.splitProps(column.getFooterProps(finalState, undefined, column, this))
@@ -840,6 +878,7 @@ export default React.createClass({
     const paginationProps = _.splitProps(getPaginationProps(finalState, undefined, undefined, this))
     const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
     const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
+    const resizerProps = getResizerProps(finalState, undefined, undefined, this)
 
     const makeTable = () => (
       <div
@@ -887,7 +926,7 @@ export default React.createClass({
             style={paginationProps.style}
             {...paginationProps.rest}
           />
-          ) : null}
+        ) : null}
         {!pageRows.length && (
           <NoDataComponent
             {...noDataProps}

src/index.styl

@@ -18,6 +18,11 @@ $expandSize = 7px
   .rt-thead
     display: flex
     flex-direction: column
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
     &.-headerGroups
       background: alpha(black, .03)
       border-bottom: 1px solid alpha(black, .05)
@@ -36,6 +41,9 @@ $expandSize = 7px
 
     .rt-th
     .rt-td
+      padding: 5px 5px
+      line-height: normal
+      position: relative
       border-right: 1px solid alpha(black, .05)
       transition box-shadow .3s $easeOutBack
       box-shadow:inset 0 0 0 0 transparent
@@ -47,6 +55,16 @@ $expandSize = 7px
         cursor: pointer
       &:last-child
         border-right: 0
+
+    .rt-resizable-header
+      overflow: visible
+      &:last-child
+        overflow: hidden
+
+    .rt-resizable-header-content
+      overflow: hidden
+      text-overflow: ellipsis
+
   .rt-tbody
     display: flex
     flex-direction: column
@@ -105,6 +123,17 @@ $expandSize = 7px
       cursor: pointer
     &.-open:after
         transform: translate(-50%, -50%) rotate(0deg)
+
+  .rt-resizer
+    display: inline-block
+    position: absolute
+    width: 36px
+    top: 0
+    bottom: 0
+    right: -18px
+    cursor: col-resize
+    z-index: 10
+
   .rt-tfoot
     display: flex
     flex-direction: column

src/lifecycle.js

@@ -12,15 +12,18 @@ export default {
       pageSize: this.props.defaultPageSize || 10,
       sorting: this.props.defaultSorting,
       expandedRows: {},
-      filtering: this.props.defaultFiltering
+      filtering: this.props.defaultFiltering,
+      resizing: this.props.defaultResizing,
+      currentlyResizing: undefined,
+      skipNextSort: false
     }
   },
 
   getResolvedState (props, state) {
     const resolvedState = {
       ..._.compactObject(this.state),
-      ..._.compactObject(state),
       ..._.compactObject(this.props),
+      ..._.compactObject(state),
       ..._.compactObject(props)
     }
     return resolvedState

src/methods.js

@@ -189,14 +189,14 @@ export default {
         // Group the rows together for this level
         let groupedRows = Object.entries(
           _.groupBy(rows, keys[i]))
-          .map(([key, value]) => {
-            return {
-              [pivotIDKey]: keys[i],
-              [pivotValKey]: key,
-              [keys[i]]: key,
-              [subRowsKey]: value
-            }
-          })
+        .map(([key, value]) => {
+          return {
+            [pivotIDKey]: keys[i],
+            [pivotValKey]: key,
+            [keys[i]]: key,
+            [subRowsKey]: value
+          }
+        })
         // Recurse into the subRows
         groupedRows = groupedRows.map(rowGroup => {
           let subRows = groupRecursively(rowGroup[subRowsKey], keys, i + 1)
@@ -356,7 +356,19 @@ export default {
     })
   },
   sortColumn (column, additive) {
-    const {sorting} = this.getResolvedState()
+    const {sorting, skipNextSort} = this.getResolvedState()
+
+    // we can't stop event propagation from the column resize move handlers
+    // attached to the document because of react's synthetic events
+    // so we have to prevent the sort function from actually sorting
+    // if we click on the column resize element within a header.
+    if (skipNextSort) {
+      this.setStateWithData({
+        skipNextSort: false
+      })
+      return
+    }
+
     const {onSortingChange} = this.props
     if (onSortingChange) {
       return onSortingChange(column, additive)
@@ -440,12 +452,12 @@ export default {
       this.fireOnChange()
     })
   },
-  filterColumn (column, event, pivotColumn) {
+  filterColumn (column, value, pivotColumn) {
     const {filtering} = this.getResolvedState()
     const {onFilteringChange} = this.props
 
     if (onFilteringChange) {
-      return onFilteringChange(column, event)
+      return onFilteringChange(column, value, pivotColumn)
     }
 
     // Remove old filter first if it exists
@@ -461,10 +473,10 @@ export default {
       }
     })
 
-    if (event.target.value !== '') {
+    if (value !== '') {
       newFiltering.push({
         id: column.id,
-        value: event.target.value,
+        value: value,
         pivotId: pivotColumn ? pivotColumn.id : undefined
       })
     }
@@ -474,5 +486,89 @@ export default {
     }, () => {
       this.fireOnChange()
     })
+  },
+  resizeColumnStart (column, event, isTouch) {
+    const {onResize} = this.props
+
+    if (onResize) {
+      return onResize(column, event, isTouch)
+    }
+
+    const parentWidth = event.target.parentElement.getBoundingClientRect().width
+
+    let pageX
+    if (isTouch) {
+      pageX = event.changedTouches[0].pageX
+    } else {
+      pageX = event.pageX
+    }
+
+    this.setStateWithData({
+      currentlyResizing: {
+        id: column.id,
+        startX: pageX,
+        parentWidth: parentWidth
+      }
+    }, () => {
+      if (isTouch) {
+        document.addEventListener('touchmove', this.resizeColumnMoving)
+        document.addEventListener('touchcancel', this.resizeColumnEnd)
+        document.addEventListener('touchend', this.resizeColumnEnd)
+      } else {
+        document.addEventListener('mousemove', this.resizeColumnMoving)
+        document.addEventListener('mouseup', this.resizeColumnEnd)
+        document.addEventListener('mouseleave', this.resizeColumnEnd)
+      }
+    })
+  },
+  resizeColumnEnd (event) {
+    let isTouch = event.type === 'touchend' || event.type === 'touchcancel'
+
+    if (isTouch) {
+      document.removeEventListener('touchmove', this.resizeColumnMoving)
+      document.removeEventListener('touchcancel', this.resizeColumnEnd)
+      document.removeEventListener('touchend', this.resizeColumnEnd)
+    }
+
+    // If its a touch event clear the mouse one's as well because sometimes
+    // the mouseDown event gets called as well, but the mouseUp event doesn't
+    document.removeEventListener('mousemove', this.resizeColumnMoving)
+    document.removeEventListener('mouseup', this.resizeColumnEnd)
+    document.removeEventListener('mouseleave', this.resizeColumnEnd)
+
+    // The touch events don't propagate up to the sorting's onMouseDown event so
+    // no need to prevent it from happening or else the first click after a touch
+    // event resize will not sort the column.
+    if (!isTouch) {
+      this.setStateWithData({
+        skipNextSort: true
+      })
+    }
+  },
+  resizeColumnMoving (event) {
+    const {resizing, currentlyResizing} = this.getResolvedState()
+
+    // Delete old value
+    const newResizing = resizing.filter(x => x.id !== currentlyResizing.id)
+
+    let pageX
+
+    if (event.type === 'touchmove') {
+      pageX = event.changedTouches[0].pageX
+    } else if (event.type === 'mousemove') {
+      pageX = event.pageX
+    }
+
+    // Set the min size to 10 to account for margin and border or else the group headers don't line up correctly
+    const newWidth = Math.max(currentlyResizing.parentWidth + pageX - currentlyResizing.startX, 11)
+
+    newResizing.push({
+      id: currentlyResizing.id,
+      value: newWidth
+    })
+
+    this.setStateWithData({
+      resizing: newResizing
+    })
   }
 }

stories/ControlledTable.js

@@ -0,0 +1,155 @@
+import React from 'react'
+import _ from 'lodash'
+import namor from 'namor'
+
+import CodeHighlight from './components/codeHighlight'
+import ReactTable from '../src/index'
+
+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'
+  }]
+}]
+
+class ControlledTable extends React.Component {
+  constructor() {
+    super()
+    this.sortChange = this.sortChange.bind(this)
+    this.state = {
+      sorting: [],
+      page: 0,
+      pageSize: 10
+    }
+  }
+
+  sortChange(column, shift) {
+    if(shift)
+      alert('Shift click not implemented in this demo')
+    var sort = {id: column.id}
+    if(this.state.sorting.length && this.state.sorting[0].id == column.id)
+      this.state.sorting[0].asc ? sort.desc = true : sort.asc = true
+    else
+      sort.asc = true
+    this.setState({
+      sorting: [sort]
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <div className='table-wrap'>
+          <ReactTable
+            className='-striped -highlight'
+            data={data}
+            columns={columns}
+            sorting={this.state.sorting}
+            onSortingChange={this.sortChange}
+            page={this.state.page}
+            onPageChange={page => this.setState({page})}
+            pageSize={this.state.pageSize}
+            onPageSizeChange={(pageSize, page) => this.setState({page, pageSize})}
+          />
+        </div>
+        <div style={{textAlign: 'center'}}>
+          <br />
+          <em>Tip: For simplicity, multi-sort is not implemented in this demo</em>
+        </div>
+        <CodeHighlight>{() => getCode()}</CodeHighlight>
+      </div>
+    )
+  }
+}
+
+function getCode () {
+  return `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'
+  }]
+}]
+
+class ControlledTable extends React.Component {
+  constructor() {
+    super()
+    this.sortChange = this.sortChange.bind(this)
+    this.pageChange = this.pageChange.bind(this)
+    this.pageSizeChange = this.pageSizeChange.bind(this)
+    this.state = {
+      sorting: [],
+      page: 0,
+      pageSize: 10
+    }
+  }
+
+  sortChange(column, shift) {
+    if(shift)
+      alert('Shift click not implemented in this demo')
+    var sort = {id: column.id}
+    if(this.state.sorting.length && this.state.sorting[0].id == column.id)
+      this.state.sorting[0].asc ? sort.desc = true : sort.asc = true
+    else
+      sort.asc = true
+    this.setState({
+      sorting: [sort]
+    })
+  }
+
+  render() {
+    return (
+      <ReactTable
+        className='-striped -highlight'
+        data={data}
+        columns={columns}
+        sorting={this.state.sorting}
+        onSortingChange={this.sortChange}
+        page={this.state.page}
+        onPageChange={page => this.setState({page})}
+        pageSize={this.state.pageSize}
+        onPageSizeChange={(pageSize, page) => this.setState({page, pageSize})}
+      />
+    )
+  }
+}`
+}
+
+export default () => <ControlledTable />

stories/Filtering.js

@@ -7,7 +7,7 @@ import ReactTable from '../src/index'
 
 class Filtering extends React.Component {
 
-  constructor(props) {
+  constructor (props) {
     super(props)
 
     const data = _.map(_.range(5553), d => {
@@ -33,10 +33,10 @@ class Filtering extends React.Component {
       data: data
     }
 
-    this.setTableOption = this.setTableOption.bind(this);
+    this.setTableOption = this.setTableOption.bind(this)
   }
 
-  render() {
+  render () {
     const columns = [{
       header: 'Name',
       columns: [{
@@ -54,26 +54,51 @@ class Filtering extends React.Component {
       columns: [{
         header: 'Age',
         accessor: 'age'
-      }]
+      }, {
+        header: 'Over 21',
+        accessor: 'age',
+        id: 'over',
+        render: ({value}) => (value >= 21 ? 'Yes' : 'No'),
+        filterMethod: (filter, row) => {
+          if (filter.value === 'all') {
+            return true
+          }
+          if (filter.value === 'true') {
+            return row[filter.id] >= 21
+          }
+          return row[filter.id] < 21
+        },
+        filterRender: ({filter, onFilterChange}) => (
+          <select
+            onChange={event => onFilterChange(event.target.value)}
+            style={{width: '100%'}}
+            value={filter ? filter.value : 'all'}>
+            <option value="all"></option>
+            <option value="true">Can Drink</option>
+            <option value="false">Can't Drink</option>
+          </select>
+        )
+      }
+      ]
     }]
 
     return (
       <div>
-        <div style={{float: "left"}}>
+        <div style={{float: 'left'}}>
           <h1>Table Options</h1>
           <table>
             <tbody>
             {
               Object.keys(this.state.tableOptions).map(optionKey => {
-                const optionValue = this.state.tableOptions[optionKey];
+                const optionValue = this.state.tableOptions[optionKey]
                 return (
                   <tr key={optionKey}>
                     <td>{optionKey}</td>
                     <td style={{paddingLeft: 10, paddingTop: 5}}>
                       <input type="checkbox"
-                             name={optionKey}
-                             checked={optionValue}
-                             onChange={this.setTableOption}
+                        name={optionKey}
+                        checked={optionValue}
+                        onChange={this.setTableOption}
                       />
                     </td>
                   </tr>
@@ -122,21 +147,30 @@ class Filtering extends React.Component {
         </div>
         <div>
           <h1>Custom Filters In This Example</h1>
-          <p>The default filter for all columns of a table if it is not specified in the configuration is set to match on values that start with the filter text. Example: age.startsWith("2").</p>
-          <p>This example overrides the default filter behavior by setting the <strong>defaultFilterMethod</strong> table option to match on values that are exactly equal to the filter text. Example: age == "23")</p>
+          <p>The default filter for all columns of a table if it is not specified in the configuration is set to match
+            on values that start with the filter text. Example: age.startsWith("2").</p>
+          <p>This example overrides the default filter behavior by setting
+            the <strong>defaultFilterMethod</strong> table option to match on values that are exactly equal to the
+            filter text. Example: age == "23")</p>
           <p>Each column can also be customized with the column <strong>filterMethod</strong> option:</p>
-          <p>In this example the firstName column filters on the value starting with and ending with the filter value.</p>
-          <p>In this example the lastName column filters on the value including the filter value anywhere in its text.</p>
+          <p>In this example the firstName column filters on the value starting with and ending with the filter
+            value.</p>
+          <p>In this example the lastName column filters on the value including the filter value anywhere in its
+            text.</p>
+          <p>To completely override the filter that is shown, you can set the <strong>filterRender</strong> column
+            option. Using this option you can specify the JSX that is shown. The option is passed
+            an <strong>onFilterChange</strong> method that must be called with the value that you wan't to
+            pass to the <strong>filterMethod</strong> option whenever the filter has changed.</p>
         </div>
         <CodeHighlight>{() => this.getCode()}</CodeHighlight>
       </div>
     )
   }
 
-  setTableOption(event) {
-    const target = event.target;
-    const value = target.type === 'checkbox' ? target.checked : target.value;
-    const name = target.name;
+  setTableOption (event) {
+    const target = event.target
+    const value = target.type === 'checkbox' ? target.checked : target.value
+    const name = target.name
     this.setState({
       tableOptions: {
         ...this.state.tableOptions,
@@ -145,7 +179,7 @@ class Filtering extends React.Component {
     })
   }
 
-  getCode() {
+  getCode () {
     return `
 const columns = [{
   header: 'Name',
@@ -164,6 +198,30 @@ const columns = [{
   columns: [{
     header: 'Age',
     accessor: 'age'
+  }, {
+    header: 'Over 21',
+    accessor: 'age',
+    id: 'over',
+    render: ({value}) => (value >= 21 ? 'Yes' : 'No'),
+    filterMethod: (filter, row) => {
+      if (filter.value === 'all') {
+        return true
+      }
+      if (filter.value === 'true') {
+        return row[filter.id] >= 21
+      }
+      return row[filter.id] < 21
+    },
+    filterRender: ({filter, onFilterChange}) => (
+      <select
+        onChange={event => onFilterChange(event.target.value)}
+        style={{width: '100%'}}
+        value={filter ? filter.value : 'all'}>
+        <option value="all"></option>
+        <option value="true">Can Drink</option>
+        <option value="false">Can't Drink</option>
+      </select>
+    )
   }]
 }]
 
@@ -203,4 +261,4 @@ export default (
   }
 }
 
-export default () => <Filtering/>
+export default () => <Filtering />