diff --git a/examples/js/others/demo.js b/examples/js/others/demo.js
index e942953c7..d2c26eaae 100644
--- a/examples/js/others/demo.js
+++ b/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 {
Source in /examples/js/others/printable-table.js
+
+ Source in /examples/js/others/table-with-sticky-headers.js
+ Make your headers sticky
+
+
);
}
diff --git a/examples/js/others/table-with-sticky-headers.js b/examples/js/others/table-with-sticky-headers.js
new file mode 100644
index 000000000..0b30c790f
--- /dev/null
+++ b/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 (
+
+ Product ID
+ Product Name
+ Product Price
+
+ );
+ }
+}
diff --git a/package.json b/package.json
index e1ee50b59..e294c5af8 100644
--- a/package.json
+++ b/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"
diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js
index 50ce8b923..cdc19bd83 100644
--- a/src/BootstrapTable.js
+++ b/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 }
+ { React.cloneElement(this.props.colGroups, { ref: 'headerGrp' }) }
+
+ { trs }
+
+
+ );
+
+ if (this.props.stickyHeaders) {
+ return (
+ {
+ return this.props.autoAffixContainer;
+ } }>
+
+ { tableHeaders }
+
+
+ );
+ }
+
return (
-
- { React.cloneElement(this.props.colGroups, { ref: 'headerGrp' }) }
-
- { trs }
-
-
+ { tableHeaders }
);
}
@@ -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;