6.0.2

README.md

@@ -821,8 +821,8 @@ defaultSortMethod = (a, b) => {
   a = (a === null || a === undefined) ? -Infinity : a
   b = (b === null || b === undefined) ? -Infinity : b
   // force any string values to lowercase
-  a = typeof a === 'string' ? a.toLowerCase() : a
-  b = typeof b === 'string' ? b.toLowerCase() : b
+  a = a === 'string' ? a.toLowerCase() : a
+  b = b === 'string' ? b.toLowerCase() : b
   // Return either 1 or -1 to indicate a sort priority
   if (a > b) {
     return 1

docs/src/App.js

@@ -25,10 +25,9 @@ import Filtering from './stories/Filtering.js'
 import ControlledTable from './stories/ControlledTable.js'
 import PivotingOptions from './stories/PivotingOptions.js'
 import EditableTable from './stories/EditableTable.js'
-import FixedHeader from './stories/FixedHeader.js'
 
 export default class App extends React.Component {
-  render() {
+  render () {
     return (
       <ReactStory
         style={{
@@ -36,15 +35,15 @@ export default class App extends React.Component {
           width: '100%',
           height: '100%'
         }}
-        pathPrefix="story/"
-        StoryWrapper={props => (
+        pathPrefix='story/'
+        StoryWrapper={(props) => (
           <defaultProps.StoryWrapper
             css={{
               padding: 0
             }}
           >
             <a
-              href="//github.com/tannerlinsley/react-table"
+              href='//github.com/tannerlinsley/react-table'
               style={{
                 display: 'block',
                 textAlign: 'center',
@@ -52,8 +51,8 @@ export default class App extends React.Component {
               }}
             >
               <img
-                src="//npmcdn.com/react-table/media/Banner.png"
-                alt="React Table Logo"
+                src='//npmcdn.com/react-table/media/Banner.png'
+                alt='React Table Logo'
                 style={{
                   width: '100px'
                 }}
@@ -70,10 +69,7 @@ export default class App extends React.Component {
         stories={[
           { name: 'Readme', component: Readme },
           { name: 'Simple Table', component: Simple },
-          {
-            name: 'Cell Renderers & Custom Components',
-            component: CellRenderers
-          },
+          { name: 'Cell Renderers & Custom Components', component: CellRenderers },
           { name: 'Default Sorting', component: DefaultSorting },
           { name: 'Custom Sorting', component: CustomSorting },
           { name: 'Custom Column Widths', component: CustomWidths },
@@ -81,26 +77,16 @@ export default class App extends React.Component {
           { name: 'Server-side Data', component: ServerSide },
           { name: 'Sub Components', component: SubComponents },
           { name: 'Pivoting & Aggregation', component: Pivoting },
-          {
-            name: 'Pivoting & Aggregation w/ Sub Components',
-            component: PivotingSubComponents
-          },
-          {
-            name: '100k Rows w/ Pivoting & Sub Components',
-            component: OneHundredKRows
-          },
+          { name: 'Pivoting & Aggregation w/ Sub Components', component: PivotingSubComponents },
+          { name: '100k Rows w/ Pivoting & Sub Components', component: OneHundredKRows },
           { name: 'Pivoting Options', component: PivotingOptions },
           { name: 'Functional Rendering', component: FunctionalRendering },
-          {
-            name: 'Custom Expander Position',
-            component: CustomExpanderPosition
-          },
+          { name: 'Custom Expander Position', component: CustomExpanderPosition },
           { name: 'Custom "No Data" Text', component: NoDataText },
           { name: 'Footers', component: Footers },
           { name: 'Custom Filtering', component: Filtering },
           { name: 'Controlled Component', component: ControlledTable },
-          { name: 'Editable Table', component: EditableTable },
-          { name: 'Fixed Header w/ Vertical Scroll', component: FixedHeader }
+          { name: 'Editable Table', component: EditableTable }
         ]}
       />
     )

docs/src/stories/FixedHeader.js

@@ -1,81 +0,0 @@
-/* eslint-disable import/no-webpack-loader-syntax */
-import React from 'react'
-import _ from 'lodash'
-import namor from 'namor'
-
-import ReactTable from '../../../lib/index'
-
-class Story extends React.PureComponent {
-  render() {
-    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),
-        children: _.map(_.range(10), 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={data}
-            columns={columns}
-            defaultPageSize={20}
-            style={{
-              height: '400px' // This will force the table body to overflow and scroll, since there is not enough room
-            }}
-          />
-        </div>
-        <div style={{ textAlign: 'center' }}>
-          <br />
-          <em>Tip: Hold shift when sorting to multi-sort!</em>
-        </div>
-      </div>
-    )
-  }
-}
-
-const CodeHighlight = require('./components/codeHighlight').default
-const source = require('!raw!./Simple')
-
-export default () => (
-  <div>
-    <Story />
-    <CodeHighlight>{() => source}</CodeHighlight>
-  </div>
-)

package.json

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

src/index.styl

@@ -4,13 +4,10 @@ $expandSize = 7px
 
 .ReactTable
   position:relative
-  display: flex
-  flex-direction: column
   border: 1px solid alpha(black, .1)
   *
     box-sizing: border-box
   .rt-table
-    flex: 1
     display: flex
     flex-direction: column
     align-items: stretch
@@ -19,7 +16,6 @@ $expandSize = 7px
     overflow: auto
 
   .rt-thead
-    flex: 1 0 auto
     display: flex
     flex-direction: column
     -webkit-user-select: none;
@@ -95,10 +91,8 @@ $expandSize = 7px
       margin-top: -10px
 
   .rt-tbody
-    flex: 99999 1 auto
     display: flex
     flex-direction: column
-    overflow: auto
     // z-index:0
     .rt-tr-group
       border-bottom: solid 1px alpha(black, .05)
@@ -111,12 +105,10 @@ $expandSize = 7px
     .rt-expandable
       cursor: pointer
   .rt-tr-group
-    flex: 1 0 auto
     display: flex
     flex-direction: column
     align-items: stretch
   .rt-tr
-    flex: 1 0 auto
     display: inline-flex
   .rt-th
   .rt-td
@@ -199,7 +191,7 @@ $expandSize = 7px
       appearance:none
       display:block
       width:100%
-      height:100%
+      height: 100%
       border: 0
       border-radius: 3px
       padding: 6px

src/methods.js

@@ -323,7 +323,12 @@ export default Base => class extends Base {
             (row) => {
               let column
 
-              column = allVisibleColumns.find(x => x.id === nextFilter.id)
+              column = allVisibleColumns.find(x => x.id === nextFilter.id || (x.pivotColumns && x.pivotColumns.some(y => y.id === nextFilter.id)))
+
+              // Could possibly be in pivotColumns
+              if (column.id !== nextFilter.id && column.pivotColumns) {
+                column = column.pivotColumns.find(x => x.id === nextFilter.id)
+              }
 
               // Don't filter hidden columns or columns that have had their filters disabled
               if (!column || column.filterable === false) {