Sticky Headers

examples/js/others/demo.js

@@ -3,6 +3,7 @@ import MouseEventTable from './mouse-event-table';
 import TableInTabs from './table-in-tabs';
 import GetPageNumByKeyTable from './expose-api-table';
 import PrintableTable from './printable-table';
+import TableWithStickyHeaders from './table-with-sticky-headers';
 import { Col, Panel } from 'react-bootstrap';
 
 class Demo extends React.Component {
@@ -28,6 +29,11 @@ class Demo extends React.Component {
           <h5>Source in /examples/js/others/printable-table.js</h5>
           <PrintableTable/>
         </Panel>
+        <Panel header={ 'Sticky Headers Example' }>
+          <h5>Source in /examples/js/others/table-with-sticky-headers.js</h5>
+          <h5>Make your headers sticky</h5>
+          <TableWithStickyHeaders/>
+        </Panel>
       </Col>
     );
   }

examples/js/others/table-with-sticky-headers.js

@@ -0,0 +1,31 @@
+/* eslint max-len: 0 */
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+const products = [];
+
+function addProducts(quantity) {
+  const startId = products.length;
+  for (let i = 0; i < quantity; i++) {
+    const id = startId + i;
+    products.push({
+      id: id,
+      name: 'Item name ' + id,
+      price: 2100 + i
+    });
+  }
+}
+
+addProducts(50);
+
+export default class TableWithStickyHeaders extends React.Component {
+  render() {
+    return (
+      <BootstrapTable data={ products } stickyHeaders={ true }>
+        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}

package.json

@@ -69,7 +69,8 @@
   "dependencies": {
     "classnames": "^2.1.2",
     "react-modal": "^1.4.0",
-    "@allenfang/react-toastr": "2.8.2"
+    "@allenfang/react-toastr": "2.8.2",
+    "react-overlays": "^0.6.12"
   },
   "peerDependencies": {
     "react": "^0.14.3 || ^15.0.0"

src/BootstrapTable.js

@@ -369,7 +369,10 @@ class BootstrapTable extends Component {
             reset={ this.state.reset }
             expandColumnVisible={ expandColumnOptions.expandColumnVisible }
             expandColumnComponent={ expandColumnOptions.expandColumnComponent }
-            expandColumnBeforeSelectColumn={ expandColumnOptions.expandColumnBeforeSelectColumn }>
+            expandColumnBeforeSelectColumn={ expandColumnOptions.expandColumnBeforeSelectColumn }
+            autoAffixContainer={ this }
+            stickyHeaders={ this.props.stickyHeaders }
+            affixStyle={ this.props.affixStyle }>
             { this.props.children }
           </TableHeader>
           <TableBody ref='body'
@@ -1396,7 +1399,9 @@ BootstrapTable.propTypes = {
     expandColumnVisible: PropTypes.bool,
     expandColumnComponent: PropTypes.func,
     expandColumnBeforeSelectColumn: PropTypes.bool
-  })
+  }),
+  stickyHeaders: PropTypes.bool,
+  affixStyle: PropTypes.object
 };
 BootstrapTable.defaultProps = {
   scrollTop: undefined,
@@ -1531,7 +1536,12 @@ BootstrapTable.defaultProps = {
   },
   exportCSV: false,
   csvFileName: 'spreadsheet.csv',
-  ignoreSinglePage: false
+  ignoreSinglePage: false,
+  stickyHeaders: false,
+  affixStyle: {
+    zIndex: 10,
+    backgroundColor: '#fff'
+  }
 };
 
 export default BootstrapTable;

src/TableHeader.js

@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
+import AutoAffix from 'react-overlays/lib/AutoAffix';
 import Const from './Const';
 import classSet from 'classnames';
 import SelectRowHeaderColumn from './SelectRowHeaderColumn';
@@ -92,14 +93,30 @@ class TableHeader extends Component {
       );
     });
 
+    const tableHeaders = (
+      <table className={ tableClasses }>
+          { React.cloneElement(this.props.colGroups, { ref: 'headerGrp' }) }
+        <thead ref='header'>
+          { trs }
+        </thead>
+      </table>
+    );
+
+    if (this.props.stickyHeaders) {
+      return (
+        <AutoAffix affixStyle={ this.props.affixStyle } container={ () => {
+          return this.props.autoAffixContainer;
+        } }>
+          <div ref='container' className={ containerClasses } style={ this.props.style }>
+            { tableHeaders }
+          </div>
+        </AutoAffix>
+      );
+    }
+
     return (
       <div ref='container' className={ containerClasses } style={ this.props.style }>
-        <table className={ tableClasses }>
-          { React.cloneElement(this.props.colGroups, { ref: 'headerGrp' }) }
-          <thead ref='header'>
-            { trs }
-          </thead>
-        </table>
+        { tableHeaders }
       </div>
     );
   }
@@ -154,7 +171,10 @@ TableHeader.propTypes = {
   reset: PropTypes.bool,
   expandColumnVisible: PropTypes.bool,
   expandColumnComponent: PropTypes.func,
-  expandColumnBeforeSelectColumn: PropTypes.bool
+  expandColumnBeforeSelectColumn: PropTypes.bool,
+  autoAffixContainer: PropTypes.object,
+  stickyHeaders: PropTypes.bool,
+  affixStyle: PropTypes.object
 };
 
 export default TableHeader;