Implement feature of sticky header

Author: chunming-c

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,