Better vertical responsiveness & Fixed Header example

docs/src/App.js

@@ -25,9 +25,10 @@ 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={{
@@ -35,15 +36,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',
@@ -51,8 +52,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'
                 }}
@@ -69,7 +70,10 @@ 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 },
@@ -77,16 +81,26 @@ 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: 'Editable Table', component: EditableTable },
+          { name: 'Fixed Header w/ Vertical Scroll', component: FixedHeader }
         ]}
       />
     )

docs/src/stories/FixedHeader.js

@@ -0,0 +1,81 @@
+/* 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>
+)

src/index.styl

@@ -4,10 +4,13 @@ $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
@@ -16,6 +19,7 @@ $expandSize = 7px
     overflow: auto
 
   .rt-thead
+    flex: 1 0 auto
     display: flex
     flex-direction: column
     -webkit-user-select: none;
@@ -91,8 +95,10 @@ $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)
@@ -105,10 +111,12 @@ $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
@@ -191,6 +199,7 @@ $expandSize = 7px
       appearance:none
       display:block
       width:100%
+      height:100%
       border: 0
       border-radius: 3px
       padding: 6px