Implement feature of sticky header

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'
+}];
+
+<BootstrapTable sticky keyField="id" data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable sticky keyField="id" data={ products } columns={ columns } />
+
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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', () => <ExportCustomData />)
   .add('Custom CSV', () => <CustomCSV />);
 
+storiesOf('Sticky header', module)
+  .addDecorator(bootstrapStyle())
+  .add('Default sticky header', () => <StickyHeaderTable />);
+
 storiesOf('EmptyTableOverlay', module)
   .addDecorator(bootstrapStyle())
   .add('Empty Table Overlay', () => <EmptyTableOverlay />)

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>{ 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,

packages/react-bootstrap-table2/src/row-selection/selection-cell.js

@@ -73,7 +73,7 @@ export default class SelectionCell extends Component {
       <BootstrapContext.Consumer>
         {
           ({ bootstrap4 }) => (
-            <td onClick={ this.handleClick } { ...attrs }>
+            <td data-row-selection onClick={ this.handleClick } { ...attrs }>
               {
                 selectionRenderer ? selectionRenderer({
                   mode: inputType,

packages/react-bootstrap-table2/style/partials/_all.scss

@@ -0,0 +1 @@
+@import "./sticky";

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;
+    }
+  }
+}

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,