diff --git a/packages/react-bootstrap-table2-example/examples/sticky-header/default.js b/packages/react-bootstrap-table2-example/examples/sticky-header/default.js
new file mode 100644
index 0000000..e7e373e
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/sticky-header/default.js
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+`;
+
+export default () => (
+
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 7ba6b1b..6502e78 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -168,6 +168,9 @@ import CustomCSV from 'examples/csv/custom-csv';
import EmptyTableOverlay from 'examples/loading-overlay/empty-table-overlay';
import TableOverlay from 'examples/loading-overlay/table-overlay';
+// sticky header table
+import StickyHeaderTable from 'examples/sticky-header/default';
+
// remote
import RemoteSort from 'examples/remote/remote-sort';
import RemoteFilter from 'examples/remote/remote-filter';
@@ -362,6 +365,10 @@ storiesOf('Export CSV', module)
.add('Export Custom Data', () => )
.add('Custom CSV', () => );
+storiesOf('Sticky header', module)
+ .addDecorator(bootstrapStyle())
+ .add('Default sticky header', () => );
+
storiesOf('EmptyTableOverlay', module)
.addDecorator(bootstrapStyle())
.add('Empty Table Overlay', () => )
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 0c5c862..cbec3c7 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -57,7 +57,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
rowEvents,
selectRow,
expandRow,
- cellEdit
+ cellEdit,
+ sticky
} = this.props;
const tableWrapperClass = cs('react-bootstrap-table', wrapperClasses);
@@ -66,7 +67,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
'table-striped': striped,
'table-hover': hover,
'table-bordered': bordered,
- 'table-condensed': condensed
+ 'table-condensed': condensed,
+ 'table-sticky': sticky
}, classes);
const tableCaption = (caption && { caption });
@@ -118,6 +120,7 @@ BootstrapTable.propTypes = {
noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
striped: PropTypes.bool,
bordered: PropTypes.bool,
+ sticky: PropTypes.bool,
hover: PropTypes.bool,
tabIndexCell: PropTypes.bool,
id: PropTypes.string,
@@ -190,6 +193,7 @@ BootstrapTable.defaultProps = {
remote: false,
striped: false,
bordered: true,
+ sticky: false,
hover: false,
condensed: false,
noDataIndication: null,
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
index 3d6f023..7ffe9b1 100644
--- a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
+++ b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
@@ -73,7 +73,7 @@ export default class SelectionCell extends Component {
{
({ bootstrap4 }) => (
-
+ |
{
selectionRenderer ? selectionRenderer({
mode: inputType,
diff --git a/packages/react-bootstrap-table2/style/partials/_all.scss b/packages/react-bootstrap-table2/style/partials/_all.scss
new file mode 100644
index 0000000..a83c1f0
--- /dev/null
+++ b/packages/react-bootstrap-table2/style/partials/_all.scss
@@ -0,0 +1 @@
+@import "./sticky";
diff --git a/packages/react-bootstrap-table2/style/partials/_sticky.scss b/packages/react-bootstrap-table2/style/partials/_sticky.scss
new file mode 100644
index 0000000..c8f19a8
--- /dev/null
+++ b/packages/react-bootstrap-table2/style/partials/_sticky.scss
@@ -0,0 +1,29 @@
+.react-bootstrap-table {
+ .table-sticky {
+ thead,
+ tbody {
+ display: block;
+ width: 100%;
+
+ tr {
+ display: inline-flex;
+ width: 100%;
+
+ th,
+ td {
+ width: 100%;
+
+ &[data-row-selection] {
+ width: 30px;
+ min-width: 30px;
+ }
+ }
+ }
+ }
+
+ tbody {
+ max-height: 400px;
+ overflow-y: auto;
+ }
+ }
+}
diff --git a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
index 5974e45..fefd958 100644
--- a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
+++ b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
@@ -1,3 +1,5 @@
+@import "partials/all";
+
.react-bootstrap-table {
table {
@@ -55,8 +57,10 @@
content: "\2193";
}
- th[data-row-selection] {
+ th[data-row-selection],
+ td[data-row-selection] {
width: 30px;
+ min-width: 30px;
}
th > .selection-input-4,
|