Example to demonstate how to customize sticky table

docs/row-selection.md

@@ -211,44 +211,18 @@ const selectRow = {
 };
 ```
 
-> If you want to reject current select action, just return `false`:
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  onSelect: (row, isSelect, rowIndex, e) => {
-    if (SOME_CONDITION) {
-      return false;
-    }
-  }
-};
-```
-
 ### <a name='onSelectAll'>selectRow.onSelectAll - [Function]</a>
 This callback function will be called when select/unselect all and it only work when you configure [`selectRow.mode`](#mode) as `checkbox`.
 
 ```js
 const selectRow = {
   mode: 'checkbox',
-  onSelectAll: (isSelect, rows, e) => {
+  onSelectAll: (isSelect, results, e) => {
     // ...
   }
 };
 ```
 
-> If you want to control the final selection result, just return a row key array:
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  onSelectAll: (isSelect, rows, e) => {
-    if (isSelect && SOME_CONDITION) {
-      return [1, 3, 4];  // finally, key 1, 3, 4 will being selected 
-    }
-  }
-};
-```
-
 ### <a name='hideSelectColumn'>selectRow.hideSelectColumn - [Bool]</a>
 Default is `false`, if you don't want to have a selection column, give this prop as `true`
 

packages/react-bootstrap-table2-example/examples/column-filter/select-filter-preserve-option-order.js

@@ -1,70 +0,0 @@
-/* eslint max-len: 0 */
-import React from 'react';
-import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
-import Code from 'components/common/code-block';
-import { productsQualityGenerator } from 'utils/common';
-
-const products = productsQualityGenerator(6);
-
-const selectOptions = [
-  { label: 0, value: 'good' },
-  { label: 1, value: 'Bad' },
-  { label: 2, value: 'unknown' }
-];
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'quality',
-  text: 'Product Quailty',
-  formatter: cell => selectOptions.find(opt => opt.label === cell).value,
-  filter: selectFilter({
-    options: selectOptions
-  })
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
-
-const selectOptions = [
-  { label: 0, value: 'good' },
-  { label: 1, value: 'Bad' },
-  { label: 2, value: 'unknown' }
-];
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'quality',
-  text: 'Product Quailty',
-  formatter: cell => selectOptions.find(opt => opt.label === cell).value,
-  filter: selectFilter({
-    options: selectOptions
-  })
-}];
-
-<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
-`;
-
-export default () => (
-  <div>
-    <h3><code>selectFilter.options</code> accept an Array and we keep that order when rendering the options</h3>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      filter={ filterFactory() }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

packages/react-bootstrap-table2-example/examples/row-selection/selection-advance-management.js

@@ -1,88 +0,0 @@
-/* eslint no-alert: 0 */
-/* eslint consistent-return: 0 */
-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();
-
-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';
-
-class AdvSelectionManagment extends React.Component {
-  handleOnSelect = (row, isSelect) => {
-    if (isSelect && row.id < 3) {
-      alert('Oops, You can not select Product ID which less than 3');
-      return false; // return false to deny current select action
-    }
-    return true; // return true or dont return to approve current select action
-  }
-
-  handleOnSelectAll = (isSelect, rows) => {
-    if (isSelect) {
-      return rows.filter(r => r.id >= 3).map(r => r.id);
-    }
-  }
-
-  render() {
-    const selectRow = {
-      mode: 'checkbox',
-      clickToSelect: true,
-      onSelect: this.handleOnSelect,
-      onSelectAll: this.handleOnSelectAll
-    };
-    return (
-      <div>
-        <h3>You can not select Product ID less than 3</h3>
-        <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
-        <Code>{ sourceCode }</Code>
-      </div>
-    );
-  }
-}
-`;
-
-export default class AdvSelectionManagment extends React.Component {
-  handleOnSelect = (row, isSelect) => {
-    if (isSelect && row.id < 3) {
-      alert('Oops, You can not select Product ID which less than 3');
-      return false; // return false to deny current select action
-    }
-    return true; // return true or dont return to approve current select action
-  }
-
-  handleOnSelectAll = (isSelect, rows) => {
-    if (isSelect) {
-      return rows.filter(r => r.id >= 3).map(r => r.id);
-    }
-  }
-
-  render() {
-    const selectRow = {
-      mode: 'checkbox',
-      clickToSelect: true,
-      onSelect: this.handleOnSelect,
-      onSelectAll: this.handleOnSelectAll
-    };
-    return (
-      <div>
-        <h3>You can not select Product ID less than 3</h3>
-        <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
-        <Code>{ sourceCode }</Code>
-      </div>
-    );
-  }
-}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-example",
-  "version": "1.0.9",
+  "version": "1.0.8",
   "description": "",
   "main": "index.js",
   "private": true,

packages/react-bootstrap-table2-example/stories/index.js

@@ -55,7 +55,6 @@ import CustomFilterValue from 'examples/column-filter/custom-filter-value';
 import SelectFilter from 'examples/column-filter/select-filter';
 import SelectFilterWithDefaultValue from 'examples/column-filter/select-filter-default-value';
 import SelectFilterComparator from 'examples/column-filter/select-filter-like-comparator';
-import SelectFilterWithPreservedOptionsOrder from 'examples/column-filter/select-filter-preserve-option-order';
 import CustomSelectFilter from 'examples/column-filter/custom-select-filter';
 import MultiSelectFilter from 'examples/column-filter/multi-select-filter';
 import MultiSelectFilterDefaultValue from 'examples/column-filter/multi-select-filter-default-value';
@@ -119,7 +118,6 @@ import MultipleSelectionTable from 'examples/row-selection/multiple-selection';
 import ClickToSelectTable from 'examples/row-selection/click-to-select';
 import DefaultSelectTable from 'examples/row-selection/default-select';
 import SelectionManagement from 'examples/row-selection/selection-management';
-import AdvanceSelectionManagement from 'examples/row-selection/selection-advance-management';
 import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-select-with-cell-edit';
 import SelectionWithExpansionTable from 'examples/row-selection/selection-with-expansion';
 import SelectionNoDataTable from 'examples/row-selection/selection-no-data';
@@ -170,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';
@@ -264,7 +266,6 @@ storiesOf('Column Filter', module)
   .add('Programmatically Multi Select Filter', () => <ProgrammaticallyMultiSelectFilter />)
   .add('Custom Filter', () => <CustomFilter />)
   .add('Advance Custom Filter', () => <AdvanceCustomFilter />)
-  .add('Preserved Option Order on Select Filter', () => <SelectFilterWithPreservedOptionsOrder />)
   .add('Clear All Filters', () => <ClearAllFilters />);
 
 storiesOf('Work on Rows', module)
@@ -315,7 +316,6 @@ storiesOf('Row Selection', module)
   .add('Click to Select', () => <ClickToSelectTable />)
   .add('Default Select', () => <DefaultSelectTable />)
   .add('Selection Management', () => <SelectionManagement />)
-  .add('Advance Selection Management', () => <AdvanceSelectionManagement />)
   .add('Click to Select and Edit Cell', () => <ClickToSelectWithCellEditTable />)
   .add('Row Select and Expand', () => <SelectionWithExpansionTable />)
   .add('Selection without Data', () => <SelectionNoDataTable />)
@@ -366,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-filter/README.md

@@ -115,27 +115,6 @@ const qualityFilter = selectFilter({
 // omit...
 ```
 
-> Note, the selectOptions can be an array also: 
-
-```js
-const selectOptions = [
-  { label: 0, value: 'good' },
-  { label: 1, value: 'Bad' },
-  { label: 2, value: 'unknown' }
-];
-const columns = [
-  ..., {
-  dataField: 'quality',
-  text: 'Product Quailty',
-  formatter: cell => selectOptions.find(opt => opt.label === cell).value,
-  filter: selectFilter({
-    options: selectOptions
-  })
-}];
-```
-
-The benifit is `react-bootstrap-table2` will render the select options by the order of array.
-
 ## MultiSelect Filter
 
 A quick example: 

packages/react-bootstrap-table2-filter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-filter",
-  "version": "1.0.2",
+  "version": "1.0.1",
   "description": "it's a column filter addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-filter/src/components/select.js

@@ -7,14 +7,6 @@ import { LIKE, EQ } from '../comparison';
 import { FILTER_TYPE } from '../const';
 
 function optionsEquals(currOpts, prevOpts) {
-  if (Array.isArray(currOpts)) {
-    for (let i = 0; i < currOpts.length; i += 1) {
-      if (currOpts[i].label !== prevOpts[i].label) {
-        return false;
-      }
-    }
-    return currOpts.length === prevOpts.length;
-  }
   const keys = Object.keys(currOpts);
   for (let i = 0; i < keys.length; i += 1) {
     if (currOpts[keys[i]] !== prevOpts[keys[i]]) {
@@ -24,21 +16,11 @@ function optionsEquals(currOpts, prevOpts) {
   return Object.keys(currOpts).length === Object.keys(prevOpts).length;
 }
 
-function getOptionValue(options, key) {
-  if (Array.isArray(options)) {
-    const result = options
-      .filter(({ label }) => label === key)
-      .map(({ value }) => value);
-    return result[0];
-  }
-  return options[key];
-}
-
 class SelectFilter extends Component {
   constructor(props) {
     super(props);
     this.filter = this.filter.bind(this);
-    const isSelected = getOptionValue(props.options, props.defaultValue) !== undefined;
+    const isSelected = props.options[props.defaultValue] !== undefined;
     this.state = { isSelected };
   }
 
@@ -84,14 +66,9 @@ class SelectFilter extends Component {
         <option key="-1" value="">{ placeholder || `Select ${column.text}...` }</option>
       ));
     }
-    if (Array.isArray(options)) {
+    Object.keys(options).forEach(key =>
-      options.forEach(({ value, label }) =>
+      optionTags.push(<option key={ key } value={ key }>{ options[key] }</option>)
-        optionTags.push(<option key={ label } value={ label }>{ value }</option>));
+    );
-    } else {
-      Object.keys(options).forEach(key =>
-        optionTags.push(<option key={ key } value={ key }>{ options[key] }</option>)
-      );
-    }
     return optionTags;
   }
 
@@ -151,7 +128,7 @@ class SelectFilter extends Component {
 SelectFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
-  options: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+  options: PropTypes.object.isRequired,
   comparator: PropTypes.oneOf([LIKE, EQ]),
   placeholder: PropTypes.string,
   style: PropTypes.object,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table-next",
-  "version": "1.4.0",
+  "version": "1.3.1",
   "description": "Next generation of react-bootstrap-table",
   "main": "./lib/index.js",
   "repository": {

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/contexts/selection-context.js

@@ -43,23 +43,20 @@ class SelectionProvider extends React.Component {
 
     let currSelected = [...this.state.selected];
 
-    this.setState(() => {
+    if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
-      let result = true;
+      currSelected = [rowKey];
-      if (onSelect) {
+    } else if (checked) { // when select mode is checkbox
-        const row = dataOperator.getRowByRowId(data, keyField, rowKey);
+      currSelected.push(rowKey);
-        result = onSelect(row, checked, rowIndex, e);
+    } else {
-      }
+      currSelected = currSelected.filter(value => value !== rowKey);
-      if (result === true || result === undefined) {
+    }
-        if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
+
-          currSelected = [rowKey];
+    if (onSelect) {
-        } else if (checked) { // when select mode is checkbox
+      const row = dataOperator.getRowByRowId(data, keyField, rowKey);
-          currSelected.push(rowKey);
+      onSelect(row, checked, rowIndex, e);
-        } else {
+    }
-          currSelected = currSelected.filter(value => value !== rowKey);
+
-        }
+    this.setState(() => ({ selected: currSelected }));
-      }
-      return { selected: currSelected };
-    });
   }
 
   handleAllRowsSelect = (e, isUnSelect) => {
@@ -81,24 +78,19 @@ class SelectionProvider extends React.Component {
       currSelected = selected.filter(s => typeof data.find(d => d[keyField] === s) === 'undefined');
     }
 
-    this.setState(() => {
+    if (onSelectAll) {
-      let result;
+      onSelectAll(
-      if (onSelectAll) {
+        !isUnSelect,
-        result = onSelectAll(
+        dataOperator.getSelectedRows(
-          !isUnSelect,
+          data,
-          dataOperator.getSelectedRows(
+          keyField,
-            data,
+          isUnSelect ? this.state.selected : currSelected
-            keyField,
+        ),
-            isUnSelect ? this.state.selected : currSelected
+        e
-          ),
+      );
-          e
+    }
-        );
+
-        if (Array.isArray(result)) {
+    this.setState(() => ({ selected: currSelected }));
-          currSelected = result;
-        }
-      }
-      return { selected: currSelected };
-    });
   }
 
   render() {

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,