[WIP] Feature/sticky header

packages/react-bootstrap-table2-example/examples/sticky-header/customized-style.js

@@ -0,0 +1,55 @@
+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 style = `\
+// Customizing your own sticky table style by simply overwriting .table-sticky
+.react-bootstrap-table {
+ .sticky.table-sticky {
+ tbody {
+ max-height: 200px;
+ }
+ }
+}
+`;
+
+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 classes="sticky" keyField="id" data={ products } columns={ columns } />
+`;
+
+export default () => (
+ <div>
+ <BootstrapTable sticky classes="sticky" keyField="id" data={ products } columns={ columns } />
+
+ <Code>{ style }</Code>
+ <Code>{ sourceCode }</Code>
+ </div>
+);

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,10 @@ 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';
+import StickyHeaderCustomStyleTable from 'examples/sticky-header/customized-style.js';
+
 // remote
 import RemoteSort from 'examples/remote/remote-sort';
 import RemoteFilter from 'examples/remote/remote-filter';
@@ -362,6 +366,11 @@ storiesOf('Export CSV', module)
  .add('Export Custom Data', () => <ExportCustomData />)
  .add('Custom CSV', () => <CustomCSV />);
 
+storiesOf('Sticky header', module)
+ .addDecorator(bootstrapStyle())
+ .add('Default sticky header', () => <StickyHeaderTable />)
+ .add('Custom style for sticky header', () => <StickyHeaderCustomStyleTable />);
+
 storiesOf('EmptyTableOverlay', module)
  .addDecorator(bootstrapStyle())
  .add('Empty Table Overlay', () => <EmptyTableOverlay />)

packages/react-bootstrap-table2-example/stories/stylesheet/sticky/_index.scss

@@ -0,0 +1,7 @@
+.react-bootstrap-table {
+ .sticky.table-sticky {
+ tbody {
+ max-height: 200px;
+ }
+ }
+}

packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss

@@ -12,3 +12,4 @@
 @import "sort/index";
 @import "search/index";
 @import "loading-overlay/index";
+@import "sticky/index";

packages/react-bootstrap-table2-toolkit/context.js

@@ -1,13 +1,13 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import statelessDrcorator from './statelessOp';
+import statelessDecorator from './statelessOp';
 
 import createContext from './src/search/context';
 
 const ToolkitContext = React.createContext();
 
-class ToolkitProvider extends statelessDrcorator(React.Component) {
+class ToolkitProvider extends statelessDecorator(React.Component) {
  static propTypes = {
  keyField: PropTypes.string.isRequired,
  data: PropTypes.array.isRequired,

packages/react-bootstrap-table2-toolkit/provider.js

@@ -2,18 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ToolkitContext from './context';
 
-const Toolkitprovider = props => (
+const ToolkitProvider = props => (
  <ToolkitContext.Provider { ...props }>
  <ToolkitContext.Consumer>
  {
- tookKitProps => props.children(tookKitProps)
+ toolkitProps => props.children(toolkitProps)
  }
  </ToolkitContext.Consumer>
  </ToolkitContext.Provider>
 );
 
-Toolkitprovider.propTypes = {
+ToolkitProvider.propTypes = {
  children: PropTypes.func.isRequired
 };
 
-export default Toolkitprovider;
+export default ToolkitProvider;

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,56 @@
+.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;
+ }
+ }
+
+ // Disable double strips when table was displayed in bordered.
+ table.table-sticky.table-bordered {
+ border-left: 0;
+
+ thead,
+ tbody {
+ tr {
+ th {
+ border-top: 0;
+ border-right: 0;
+ }
+
+ td {
+ border-top: 0;
+ border-right: 0;
+
+ }
+
+ &:last-child {
+ td {
+ border-bottom: 0;
+ }
+ }
+ }
+ }
+ }
+}

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,