Publish

- react-bootstrap-table2-example@1.0.27
 - react-bootstrap-table2-filter@1.1.10
 - react-bootstrap-table2-paginator@2.0.7
 - react-bootstrap-table-next@3.1.5

docs/row-selection.md

@@ -16,11 +16,13 @@
 * [clickToEdit](#clickToEdit)
 * [onSelect](#onSelect)
 * [onSelectAll](#onSelectAll)
+* [selectColumnPosition](#selectColumnPosition)
 * [hideSelectColumn](#hideSelectColumn)
 * [hideSelectAll](#hideSelectAll)
 * [selectionRenderer](#selectionRenderer)
 * [selectionHeaderRenderer](#selectionHeaderRenderer)
 * [headerColumnStyle](#headerColumnStyle)
+* [selectColumnStyle](#selectColumnStyle)
 
 ### <a name="mode">selectRow.mode - [String]</a>
 
@@ -224,6 +226,42 @@ const selectRow = {
 };
 ```
 
+### <a name='selectColumnStyle'>selectRow.selectColumnStyle - [Object | Function]</a>
+A way to custome the selection cell. `selectColumnStyle` not only accept a simple style object but also a callback function for more flexible customization:
+
+### Style Object
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectColumnStyle: { backgroundColor: 'blue' }
+};
+```
+
+### Callback Function
+If a callback function present, you can get below information to custom the selection cell:
+
+* `checked`: Whether current row is seleccted or not
+* `disabled`: Whether current row is disabled or not
+* `rowIndex`: Current row index
+* `rowKey`: Current row key
+
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectColumnStyle:  ({
+    checked,
+    disabled,
+    rowIndex,
+    rowKey
+  }) => (
+    // ....
+    return { backgroundColor: 'blue' };
+  )
+};
+```
+
 ### <a name='onSelect'>selectRow.onSelect - [Function]</a>
 This callback function will be called when a row is select/unselect and pass following three arguments:
 `row`, `isSelect`, `rowIndex` and `e`.
@@ -275,6 +313,16 @@ const selectRow = {
 };
 ```
 
+### <a name='selectColumnPosition'>selectRow.selectColumnPosition - [String]</a>
+Default is `left`. You can give this as `right` for rendering selection column in the right side.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectColumnPosition: 'right'
+};
+```
+
 ### <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-editor/README.md

@@ -89,7 +89,10 @@ const columns = [
 In the following, we go though all the predefined editors:
 
 ### Dropdown Editor
-Dropdown editor give a select menu to choose a data from a list, the `editor.options` is required property for dropdown editor.
+Dropdown editor give a select menu to choose a data from a list. When use dropdown editor, either `editor.options` or `editor.getOptions` should be required prop.
+
+#### editor.options
+This is most simple case for assign the dropdown options data directly.   
 
 ```js
 import { Type } from 'react-bootstrap-table2-editor';
@@ -119,6 +122,46 @@ const columns = [
 }];
 ```
 
+#### editor.getOptions
+It is much flexible which accept a function and you can assign the dropdown options dynamically.
+
+There are two case for `getOptions`:
+
+* *Synchronous*: Just return the options array in `getOptions` callback function
+* *Asynchronous*: Call `setOptions` function argument when you get the options from remote. 
+
+
+```js
+// Synchronous
+
+const columns = [
+  ..., {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    getOptions: () => [.....]
+  }
+}];
+
+// Asynchronous
+
+const columns = [
+  ..., {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions) => {
+      setTimeout(() => setOptions([...]), 1500);
+    }
+  }
+}];
+
+```
+
+[here](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing&selectedStory=Dropdown%20Editor%20with%20Dynamic%20Options) is an online example.
+
 ### Date Editor
 Date editor is use `<input type="date">`, the configuration is very simple:
 

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-editor",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "it's the editor addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "scripts": {

packages/react-bootstrap-table2-editor/src/dropdown-editor.js

@@ -4,6 +4,15 @@ import cs from 'classnames';
 import PropTypes from 'prop-types';
 
 class DropDownEditor extends Component {
+  constructor(props) {
+    super(props);
+    let options = props.options;
+    if (props.getOptions) {
+      options = props.getOptions(this.setOptions.bind(this)) || [];
+    }
+    this.state = { options };
+  }
+
   componentDidMount() {
     const { defaultValue, didMount } = this.props;
     this.select.value = defaultValue;
@@ -11,12 +20,16 @@ class DropDownEditor extends Component {
     if (didMount) didMount();
   }
 
+  setOptions(options) {
+    this.setState({ options });
+  }
+
   getValue() {
     return this.select.value;
   }
 
   render() {
-    const { defaultValue, didMount, className, options, ...rest } = this.props;
+    const { defaultValue, didMount, getOptions, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-select', className);
 
     const attr = {
@@ -31,7 +44,7 @@ class DropDownEditor extends Component {
         defaultValue={ defaultValue }
       >
         {
-          options.map(({ label, value }) => (
+          this.state.options.map(({ label, value }) => (
             <option key={ value } value={ value }>{ label }</option>
           ))
         }
@@ -52,13 +65,16 @@ DropDownEditor.propTypes = {
       label: PropTypes.string,
       value: PropTypes.any
     }))
-  ]).isRequired,
+  ]),
-  didMount: PropTypes.func
+  didMount: PropTypes.func,
+  getOptions: PropTypes.func
 };
 DropDownEditor.defaultProps = {
   className: '',
   defaultValue: '',
   style: {},
-  didMount: undefined
+  options: [],
+  didMount: undefined,
+  getOptions: undefined
 };
 export default DropDownEditor;

packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-with-dynamic-options-table.js

@@ -0,0 +1,155 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { jobsGenerator } from 'utils/common';
+
+const jobs = jobsGenerator().map(j => ({
+  ...j,
+  type2: j.type
+}));
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type1',
+  editor: {
+    type: Type.SELECT,
+    getOptions: () => [{
+      value: 'A',
+      label: 'A'
+    }, {
+      value: 'B',
+      label: 'B'
+    }, {
+      value: 'C',
+      label: 'C'
+    }, {
+      value: 'D',
+      label: 'D'
+    }, {
+      value: 'E',
+      label: 'E'
+    }]
+  }
+}, {
+  dataField: 'type2',
+  text: 'Job Type2',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions) => {
+      setTimeout(() => {
+        setOptions([{
+          value: 'A',
+          label: 'A'
+        }, {
+          value: 'B',
+          label: 'B'
+        }, {
+          value: 'C',
+          label: 'C'
+        }, {
+          value: 'D',
+          label: 'D'
+        }, {
+          value: 'E',
+          label: 'E'
+        }]);
+      }, 2000);
+    }
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type1',
+  editor: {
+    type: Type.SELECT,
+    getOptions: () => [{
+      value: 'A',
+      label: 'A'
+    }, {
+      value: 'B',
+      label: 'B'
+    }, {
+      value: 'C',
+      label: 'C'
+    }, {
+      value: 'D',
+      label: 'D'
+    }, {
+      value: 'E',
+      label: 'E'
+    }]
+  }
+}, {
+  dataField: 'type2',
+  text: 'Job Type2',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions) => {
+      setTimeout(() => {
+        setOptions([{
+          value: 'A',
+          label: 'A'
+        }, {
+          value: 'B',
+          label: 'B'
+        }, {
+          value: 'C',
+          label: 'C'
+        }, {
+          value: 'D',
+          label: 'D'
+        }, {
+          value: 'E',
+          label: 'E'
+        }]);
+      }, 2000);
+    }
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ jobs }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Dropdown Editor with Dynamic Options</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ jobs }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/columns/row-expand-with-formatted-dummy-column.js

@@ -0,0 +1,188 @@
+/* eslint no-param-reassign: 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 sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+class DummyColumnWithRowExpand extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hoverIdx: null
+    };
+  }
+
+  expandRow = {
+    renderer: () => (
+      <div style={ { width: '100%', height: '20px' } }>Content</div>
+    ),
+    showExpandColumn: true,
+    expandByColumnOnly: true
+  };
+
+  actionFormater = (cell, row, rowIndex, { hoverIdx }) => {
+    if ((hoverIdx !== null || hoverIdx !== undefined) && hoverIdx === rowIndex) {
+      return (
+        <div
+          style={ { width: '20px', height: '20px', backgroundColor: 'orange' } }
+        />
+      );
+    }
+    return (
+      <div
+        style={ { width: '20px', height: '20px' } }
+      />
+    );
+  }
+
+  rowEvents = {
+    onMouseEnter: (e, row, rowIndex) => {
+      this.setState({ hoverIdx: rowIndex });
+    },
+    onMouseLeave: () => {
+      this.setState({ hoverIdx: null });
+    }
+  }
+
+  rowStyle = (row, rowIndex) => {
+    row.index = rowIndex;
+    const style = {};
+    if (rowIndex % 2 === 0) {
+      style.backgroundColor = 'transparent';
+    } else {
+      style.backgroundColor = 'rgba(54, 163, 173, .10)';
+    }
+    style.borderTop = 'none';
+
+    return style;
+  }
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name'
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }, {
+      text: '',
+      isDummyField: true,
+      formatter: this.actionFormater,
+      formatExtraData: { hoverIdx: this.state.hoverIdx },
+      headerStyle: { width: '50px' },
+      style: { height: '30px' }
+    }];
+    return (
+      <div>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          noDataIndication="There is no data"
+          classes="table"
+          rowStyle={ this.rowStyle }
+          rowEvents={ this.rowEvents }
+          expandRow={ this.expandRow }
+        />
+      </div>
+    );
+  }
+}
+`;
+
+export default class DummyColumnWithRowExpand extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hoverIdx: null
+    };
+  }
+
+  expandRow = {
+    renderer: () => (
+      <div style={ { width: '100%', height: '20px' } }>Content</div>
+    ),
+    showExpandColumn: true,
+    expandByColumnOnly: true
+  };
+
+  actionFormater = (cell, row, rowIndex, { hoverIdx }) => {
+    if ((hoverIdx !== null || hoverIdx !== undefined) && hoverIdx === rowIndex) {
+      return (
+        <div
+          style={ { width: '20px', height: '20px', backgroundColor: 'orange' } }
+        />
+      );
+    }
+    return (
+      <div
+        style={ { width: '20px', height: '20px' } }
+      />
+    );
+  }
+
+  rowEvents = {
+    onMouseEnter: (e, row, rowIndex) => {
+      this.setState({ hoverIdx: rowIndex });
+    },
+    onMouseLeave: () => {
+      this.setState({ hoverIdx: null });
+    }
+  }
+
+  rowStyle = (row, rowIndex) => {
+    row.index = rowIndex;
+    const style = {};
+    if (rowIndex % 2 === 0) {
+      style.backgroundColor = 'transparent';
+    } else {
+      style.backgroundColor = 'rgba(54, 163, 173, .10)';
+    }
+    style.borderTop = 'none';
+
+    return style;
+  }
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name'
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }, {
+      isDummyField: true,
+      text: '',
+      formatter: this.actionFormater,
+      formatExtraData: { hoverIdx: this.state.hoverIdx },
+      headerStyle: { width: '50px' },
+      style: { height: '30px' }
+    }];
+    return (
+      <div>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          rowStyle={ this.rowStyle }
+          rowEvents={ this.rowEvents }
+          expandRow={ this.expandRow }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js

@@ -74,7 +74,7 @@ const options = {
   // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
   firstPageText: 'First',
   prePageText: 'Back',
-  nextPageText: 'Next',
+  nextPageText: <span>Next</span>,
   lastPageText: 'Last',
   nextPageTitle: 'First page',
   prePageTitle: 'Pre page',

packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js

@@ -0,0 +1,110 @@
+/* eslint no-unused-vars: 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(2);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow1 = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectColumnStyle: {
+    backgroundColor: 'grey'
+  }
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectColumnStyle: {
+    backgroundColor: 'grey'
+  }
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+const selectRow2 = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectColumnStyle: ({
+    checked,
+    disabled,
+    rowIndex,
+    rowKey
+  }) => {
+    if (checked) {
+      return {
+        backgroundColor: 'yellow'
+      };
+    }
+    return {
+      backgroundColor: 'pink'
+    };
+  }
+};
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectColumnStyle: ({
+    checked,
+    disabled,
+    rowIndex,
+    rowKey
+  }) => {
+    if (checked) {
+      return {
+        backgroundColor: 'yellow'
+      };
+    }
+    return {
+      backgroundColor: 'pink'
+    };
+  }
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow1 } />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow2 } />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/row-selection/selection-column-position.js

@@ -0,0 +1,59 @@
+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 selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectColumnPosition: 'right'
+};
+
+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'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectColumnPosition: 'right'
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

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

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

@@ -35,6 +35,7 @@ import ColumnEventTable from 'examples/columns/column-event-table';
 import ColumnHiddenTable from 'examples/columns/column-hidden-table';
 import ColumnAttrsTable from 'examples/columns/column-attrs-table';
 import DummyColumnTable from 'examples/columns/dummy-column-table';
+import RowExpandWithFormattedDummyColumn from 'examples/columns/row-expand-with-formatted-dummy-column.js';
 
 // work on header columns
 import HeaderColumnFormatTable from 'examples/header-columns/column-format-table';
@@ -125,6 +126,7 @@ import EditorStyleTable from 'examples/cell-edit/editor-style-table';
 import EditorClassTable from 'examples/cell-edit/editor-class-table';
 import DBClickEditWithSelection from 'examples/cell-edit/dbclick-to-edit-with-selection-table';
 import DropdownEditorTable from 'examples/cell-edit/dropdown-editor-table';
+import DropdownEditorWithDynamicOptionsTable from 'examples/cell-edit/dropdown-editor-with-dynamic-options-table';
 import TextareaEditorTable from 'examples/cell-edit/textarea-editor-table';
 import CheckboxEditorTable from 'examples/cell-edit/checkbox-editor-table';
 import DateEditorTable from 'examples/cell-edit/date-editor-table';
@@ -149,6 +151,8 @@ import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
 import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
 import SelectionHooks from 'examples/row-selection/selection-hooks';
 import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column';
+import SelectionColumnStyleTable from 'examples/row-selection/select-column-style';
+import SelectionColumnPositionTable from 'examples/row-selection/selection-column-position';
 
 // work on row expand
 import BasicRowExpand from 'examples/row-expand';
@@ -270,7 +274,8 @@ storiesOf('Work on Columns', module)
   .add('Customize Column Class', () => <ColumnClassTable />)
   .add('Customize Column Style', () => <ColumnStyleTable />)
   .add('Customize Column HTML attribute', () => <ColumnAttrsTable />)
-  .add('Dummy Column', () => <DummyColumnTable />);
+  .add('Dummy Column', () => <DummyColumnTable />)
+  .add('Row Expand with Dummy Column Formatter', () => <RowExpandWithFormattedDummyColumn />);
 
 storiesOf('Work on Header Columns', module)
   .addDecorator(bootstrapStyle())
@@ -368,6 +373,7 @@ storiesOf('Cell Editing', module)
   .add('Custom Editor Style', () => <EditorStyleTable />)
   .add('DoubleClick to Edit with Selection', () => <DBClickEditWithSelection />)
   .add('Dropdown Editor', () => <DropdownEditorTable />)
+  .add('Dropdown Editor with Dynamic Options', () => <DropdownEditorWithDynamicOptionsTable />)
   .add('Textarea Editor', () => <TextareaEditorTable />)
   .add('Checkbox Editor', () => <CheckboxEditorTable />)
   .add('Date Editor', () => <DateEditorTable />)
@@ -392,7 +398,9 @@ storiesOf('Row Selection', module)
   .add('Selection Background Color', () => <SelectionBgColorTable />)
   .add('Not Selectabled Rows', () => <NonSelectableRowsTable />)
   .add('Selection Hooks', () => <SelectionHooks />)
-  .add('Hide Selection Column', () => <HideSelectionColumnTable />);
+  .add('Hide Selection Column', () => <HideSelectionColumnTable />)
+  .add('Custom Selection Column Style', () => <SelectionColumnStyleTable />)
+  .add('Selection Column Position', () => <SelectionColumnPositionTable />);
 
 storiesOf('Row Expand', module)
   .addDecorator(bootstrapStyle())

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

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

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

@@ -18,8 +18,18 @@ function optionsEquals(currOpts, prevOpts) {
   return Object.keys(currOpts).length === Object.keys(prevOpts).length;
 }
 
-const getSelections = container =>
+const getSelections = (container) => {
-  Array.from(container.selectedOptions).map(item => item.value);
+  if (container.selectedOptions) {
+    return Array.from(container.selectedOptions).map(item => item.value);
+  }
+  const selections = [];
+  const totalLen = container.options.length;
+  for (let i = 0; i < totalLen; i += 1) {
+    const option = container.options.item(i);
+    if (option.selected) selections.push(option.value);
+  }
+  return selections;
+};
 
 class MultiSelectFilter extends Component {
   constructor(props) {

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-paginator",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "it's the pagination addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-paginator/src/page-button.js

@@ -39,7 +39,11 @@ class PageButton extends Component {
 
 PageButton.propTypes = {
   onPageChange: PropTypes.func.isRequired,
-  page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  page: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.number,
+    PropTypes.string
+  ]).isRequired,
   active: PropTypes.bool.isRequired,
   disabled: PropTypes.bool.isRequired,
   className: PropTypes.string,

packages/react-bootstrap-table2-paginator/src/pagination-list.js

@@ -27,7 +27,11 @@ const PaginatonList = props => (
 
 PaginatonList.propTypes = {
   pages: PropTypes.arrayOf(PropTypes.shape({
-    page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    page: PropTypes.oneOfType([
+      PropTypes.node,
+      PropTypes.number,
+      PropTypes.string
+    ]),
     active: PropTypes.bool,
     disable: PropTypes.bool,
     title: PropTypes.string

packages/react-bootstrap-table2-paginator/src/pagination.js

@@ -100,10 +100,10 @@ Pagination.propTypes = {
   sizePerPageRenderer: PropTypes.func,
   paginationTotalRenderer: PropTypes.func,
   sizePerPageOptionRenderer: PropTypes.func,
-  firstPageText: PropTypes.string,
+  firstPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  prePageText: PropTypes.string,
+  prePageText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  nextPageText: PropTypes.string,
+  nextPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  lastPageText: PropTypes.string,
+  lastPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   nextPageTitle: PropTypes.string,
   prePageTitle: PropTypes.string,
   firstPageTitle: PropTypes.string,

packages/react-bootstrap-table2-toolkit/README.md

@@ -185,6 +185,9 @@ Default is `false`. Give true to avoid to attach the csv header.
 #### noAutoBOM - [bool]
 Default is `true`.
 
+#### blobType - [string]
+Default is `text/plain;charset=utf-8`. Change to update the blob type of the exported file.
+
 #### exportAll - [bool]
 Default is `true`. `false` will only export current data which display on table.
 

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

@@ -29,6 +29,7 @@ class ToolkitProvider extends statelessDecorator(React.Component) {
         separator: PropTypes.string,
         ignoreHeader: PropTypes.bool,
         noAutoBOM: PropTypes.bool,
+        blobType: PropTypes.string,
         exportAll: PropTypes.bool,
         onlyExportFiltered: PropTypes.bool,
         onlyExportSelection: PropTypes.bool

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-toolkit",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "The toolkit for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

packages/react-bootstrap-table2-toolkit/src/csv/exporter.js

@@ -54,11 +54,12 @@ export const save = (
   content,
   {
     noAutoBOM,
-    fileName
+    fileName,
+    blobType
   }
 ) => {
   FileSaver.saveAs(
-    new Blob([content], { type: 'text/plain;charset=utf-8' }),
+    new Blob([content], { type: blobType }),
     fileName,
     noAutoBOM
   );

packages/react-bootstrap-table2-toolkit/src/op/csv.js

@@ -5,6 +5,7 @@ const csvDefaultOptions = {
   separator: ',',
   ignoreHeader: false,
   noAutoBOM: true,
+  blobType: 'text/plain;charset=utf-8',
   exportAll: true,
   onlyExportSelection: false
 };

packages/react-bootstrap-table2/package.json

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

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -168,7 +168,12 @@ BootstrapTable.propTypes = {
     hideSelectColumn: PropTypes.bool,
     selectionRenderer: PropTypes.func,
     selectionHeaderRenderer: PropTypes.func,
-    headerColumnStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+    headerColumnStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+    selectColumnStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+    selectColumnPosition: PropTypes.oneOf([
+      Const.INDICATOR_POSITION_LEFT,
+      Const.INDICATOR_POSITION_RIGHT
+    ])
   }),
   expandRow: PropTypes.shape({
     renderer: PropTypes.func,

packages/react-bootstrap-table2/src/cell-event-delegater.js

@@ -1,3 +1,5 @@
+import _ from './utils';
+
 const events = [
   'onClick',
   'onDoubleClick',
@@ -23,7 +25,7 @@ export default ExtendBase =>
     delegate(attrs = {}) {
       const newAttrs = { ...attrs };
       Object.keys(attrs).forEach((attr) => {
-        if (events.includes(attr)) {
+        if (_.contains(events, attr)) {
           newAttrs[attr] = this.createDefaultEventHandler(attrs[attr]);
         }
       });

packages/react-bootstrap-table2/src/contexts/row-expand-context.js

@@ -20,7 +20,7 @@ class RowExpandProvider extends React.Component {
     if (nextProps.expandRow) {
       const nextExpanded = nextProps.expandRow.expanded || this.state.expanded;
       const isClosing = this.state.expanded.reduce((acc, cur) => {
-        if (!nextExpanded.includes(cur)) {
+        if (!_.contains(nextExpanded, cur)) {
           acc.push(cur);
         }
         return acc;
@@ -42,7 +42,7 @@ class RowExpandProvider extends React.Component {
 
   handleRowExpand = (rowKey, expanded, rowIndex, e) => {
     const { data, keyField, expandRow: { onExpand, onlyOneExpanding, nonExpandable } } = this.props;
-    if (nonExpandable && nonExpandable.includes(rowKey)) {
+    if (nonExpandable && _.contains(nonExpandable, rowKey)) {
       return;
     }
 

packages/react-bootstrap-table2/src/footer.js

@@ -11,9 +11,9 @@ const Footer = (props) => {
   const SelectionFooterCellComp = () => <th />;
   const ExpansionFooterCellComp = () => <th />;
 
-  const isRenderExpandColumnInLeft = (
+  const isRenderFunctionColumnInLeft = (
-    expandColumnPosition = Const.INDICATOR_POSITION_LEFT
+    position = Const.INDICATOR_POSITION_LEFT
-  ) => expandColumnPosition === Const.INDICATOR_POSITION_LEFT;
+  ) => position === Const.INDICATOR_POSITION_LEFT;
 
   const childrens = columns.map((column, i) => {
     if (column.footer === undefined || column.footer === null) {
@@ -33,11 +33,15 @@ const Footer = (props) => {
   });
 
   if (selectRow && selectRow.hideSelectColumn !== true) {
-    childrens.unshift(<SelectionFooterCellComp key="selection" />);
+    if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
+      childrens.unshift(<SelectionFooterCellComp key="selection" />);
+    } else {
+      childrens.push(<SelectionFooterCellComp key="selection" />);
+    }
   }
 
   if (expandRow.showExpandColumn) {
-    if (isRenderExpandColumnInLeft(expandRow.expandColumnPosition)) {
+    if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
       childrens.unshift(<ExpansionFooterCellComp key="expansion" />);
     } else {
       childrens.push(<ExpansionFooterCellComp key="expansion" />);

packages/react-bootstrap-table2/src/header-cell.js

@@ -41,7 +41,7 @@ const HeaderCell = (props) => {
   const cellAttrs = {
     ..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
     ...headerEvents,
-    tabIndex: index + 1
+    tabIndex: 0
   };
 
   let sortSymbol;

packages/react-bootstrap-table2/src/header.js

@@ -33,9 +33,9 @@ const Header = (props) => {
     SelectionHeaderCellComp = withHeaderSelection(SelectionHeaderCell);
   }
 
-  const isRenderExpandColumnInLeft = (
+  const isRenderFunctionColumnInLeft = (
-    expandColumnPosition = Const.INDICATOR_POSITION_LEFT
+    position = Const.INDICATOR_POSITION_LEFT
-  ) => expandColumnPosition === Const.INDICATOR_POSITION_LEFT;
+  ) => position === Const.INDICATOR_POSITION_LEFT;
 
   const childrens = [
     columns.map((column, i) => {
@@ -58,11 +58,15 @@ const Header = (props) => {
   ];
 
   if (!selectRow.hideSelectColumn) {
-    childrens.unshift(<SelectionHeaderCellComp key="selection" />);
+    if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
+      childrens.unshift(<SelectionHeaderCellComp key="selection" />);
+    } else {
+      childrens.push(<SelectionHeaderCellComp key="selection" />);
+    }
   }
 
   if (expandRow.showExpandColumn) {
-    if (isRenderExpandColumnInLeft(expandRow.expandColumnPosition)) {
+    if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
       childrens.unshift(<ExpansionHeaderCellComp key="expansion" />);
     } else {
       childrens.push(<ExpansionHeaderCellComp key="expansion" />);

packages/react-bootstrap-table2/src/props-resolver/index.js

@@ -22,7 +22,7 @@ export default ExtendBase =>
       if (!hiddenRows || hiddenRows.length === 0) return data;
       return data.filter((row) => {
         const key = _.get(row, keyField);
-        return !hiddenRows.includes(key);
+        return !_.contains(hiddenRows, key);
       });
     }
   };

packages/react-bootstrap-table2/src/row-expand/row-consumer.js

@@ -1,15 +1,16 @@
 /* eslint react/prop-types: 0 */
 import React from 'react';
 import ExpandRow from './expand-row';
+import _ from '../utils';
 import ExpansionContext from '../contexts/row-expand-context';
 
 export default (Component) => {
   const renderWithExpansion = (props, expandRow) => {
     const key = props.value;
 
-    const expanded = expandRow.expanded.includes(key);
+    const expanded = _.contains(expandRow.expanded, key);
-    const isClosing = expandRow.isClosing.includes(key);
+    const isClosing = _.contains(expandRow.isClosing, key);
-    const expandable = !expandRow.nonExpandable || !expandRow.nonExpandable.includes(key);
+    const expandable = !expandRow.nonExpandable || !_.contains(expandRow.nonExpandable, key);
     return [
       <Component
         { ...props }

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

@@ -7,8 +7,8 @@ import SelectionContext from '../contexts/selection-context';
 export default (Component) => {
   const renderWithSelection = (props, selectRow) => {
     const key = props.value;
-    const selected = selectRow.selected.includes(key);
+    const selected = _.contains(selectRow.selected, key);
-    const selectable = !selectRow.nonSelectable || !selectRow.nonSelectable.includes(key);
+    const selectable = !selectRow.nonSelectable || !_.contains(selectRow.nonSelectable, key);
 
     let {
       style,

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

@@ -5,6 +5,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Const from '../const';
+import _ from '../utils';
 import { BootstrapContext } from '../contexts/bootstrap';
 
 export default class SelectionCell extends Component {
@@ -17,7 +18,8 @@ export default class SelectionCell extends Component {
     rowIndex: PropTypes.number,
     tabIndex: PropTypes.number,
     clickToSelect: PropTypes.bool,
-    selectionRenderer: PropTypes.func
+    selectionRenderer: PropTypes.func,
+    selectColumnStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
   }
 
   constructor() {
@@ -31,7 +33,8 @@ export default class SelectionCell extends Component {
       this.props.selected !== nextProps.selected ||
       this.props.disabled !== nextProps.disabled ||
       this.props.rowKey !== nextProps.rowKey ||
-      this.props.tabIndex !== nextProps.tabIndex;
+      this.props.tabIndex !== nextProps.tabIndex ||
+      this.props.selectColumnStyle !== nextProps.selectColumnStyle;
 
     return shouldUpdate;
   }
@@ -57,17 +60,28 @@ export default class SelectionCell extends Component {
 
   render() {
     const {
+      rowKey,
       mode: inputType,
       selected,
       disabled,
       tabIndex,
       rowIndex,
-      selectionRenderer
+      selectionRenderer,
+      selectColumnStyle
     } = this.props;
 
     const attrs = {};
     if (tabIndex !== -1) attrs.tabIndex = tabIndex;
 
+    attrs.style = _.isFunction(selectColumnStyle) ?
+      selectColumnStyle({
+        checked: selected,
+        disabled,
+        rowIndex,
+        rowKey
+      }) :
+      selectColumnStyle;
+
     return (
       <BootstrapContext.Consumer>
         {

packages/react-bootstrap-table2/src/row/aggregate-row.js

@@ -37,18 +37,18 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
       this.props.selectable !== nextProps.selectable ||
       this.shouldUpdatedBySelfProps(nextProps)
     ) {
-      this.shouldUpdateRowContent = this.shouldUpdateChild(nextProps);
+      this.shouldUpdateRowContent = this.shouldRowContentUpdate(nextProps);
       return true;
     }
-    this.shouldUpdateRowContent = this.shouldUpdateChild(nextProps);
+    this.shouldUpdateRowContent = this.shouldRowContentUpdate(nextProps);
 
     return this.shouldUpdateRowContent;
   }
 
-  isRenderExpandColumnInLeft(
+  isRenderFunctionColumnInLeft(
-    expandColumnPosition = Const.INDICATOR_POSITION_LEFT
+    position = Const.INDICATOR_POSITION_LEFT
   ) {
-    return expandColumnPosition === Const.INDICATOR_POSITION_LEFT;
+    return position === Const.INDICATOR_POSITION_LEFT;
   }
 
   render() {
@@ -71,7 +71,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
       ...rest
     } = this.props;
     const key = _.get(row, keyField);
-    const { hideSelectColumn, clickToSelect } = selectRow;
+    const { hideSelectColumn, selectColumnPosition, clickToSelect } = selectRow;
     const { showExpandColumn, expandColumnPosition } = expandRow;
 
     const newAttrs = this.delegate({ ...attrs });
@@ -95,7 +95,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
     )];
 
     if (!hideSelectColumn) {
-      childrens.unshift((
+      const selectCell = (
         <SelectionCell
           { ...selectRow }
           key="selection-cell"
@@ -105,7 +105,12 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
           disabled={ !selectable }
           tabIndex={ tabIndexCell ? tabIndexStart++ : -1 }
         />
-      ));
+      );
+      if (this.isRenderFunctionColumnInLeft(selectColumnPosition)) {
+        childrens.unshift(selectCell);
+      } else {
+        childrens.push(selectCell);
+      }
     }
 
     if (showExpandColumn) {
@@ -120,7 +125,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
           tabIndex={ tabIndexCell ? tabIndexStart++ : -1 }
         />
       );
-      if (this.isRenderExpandColumnInLeft(expandColumnPosition)) {
+      if (this.isRenderFunctionColumnInLeft(expandColumnPosition)) {
         childrens.unshift(expandCell);
       } else {
         childrens.push(expandCell);

packages/react-bootstrap-table2/src/row/event-delegater.js

@@ -74,7 +74,7 @@ export default ExtendBase =>
     delegate(attrs = {}) {
       const newAttrs = { ...attrs };
       Object.keys(attrs).forEach((attr) => {
-        if (events.includes(attr)) {
+        if (_.contains(events, attr)) {
           newAttrs[attr] = this.createDefaultEventHandler(attrs[attr]);
         }
       });

packages/react-bootstrap-table2/src/row/should-updater.js

@@ -48,4 +48,9 @@ export default ExtendBase =>
       return this.shouldUpdateByCellEditing(nextProps) ||
         this.shouldUpdatedByNormalProps(nextProps);
     }
+
+    shouldRowContentUpdate(nextProps) {
+      return this.shouldUpdateChild(nextProps) ||
+        this.shouldUpdateByColumnsForSimpleCheck(nextProps);
+    }
   };

packages/react-bootstrap-table2/src/row/simple-row.js

@@ -15,8 +15,7 @@ class SimpleRow extends shouldUpdater(eventDelegater(Component)) {
 
   shouldComponentUpdate(nextProps) {
     this.shouldUpdateRowContent = false;
-    this.shouldUpdateRowContent =
+    this.shouldUpdateRowContent = this.shouldRowContentUpdate(nextProps);
-      this.shouldUpdateChild(nextProps) || this.shouldUpdateByColumnsForSimpleCheck(nextProps);
     if (this.shouldUpdateRowContent) return true;
 
     return this.shouldUpdatedBySelfProps(nextProps);

packages/react-bootstrap-table2/src/store/expand.js

@@ -20,7 +20,7 @@ export const expandableKeys = (data, keyField, skips = []) => {
     return data.map(row => _.get(row, keyField));
   }
   return data
-    .filter(row => !skips.includes(_.get(row, keyField)))
+    .filter(row => !_.contains(skips, _.get(row, keyField)))
     .map(row => _.get(row, keyField));
 };
 

packages/react-bootstrap-table2/src/store/selection.js

@@ -29,7 +29,7 @@ export const selectableKeys = (data, keyField, skips = []) => {
     return data.map(row => _.get(row, keyField));
   }
   return data
-    .filter(row => !skips.includes(_.get(row, keyField)))
+    .filter(row => !_.contains(skips, _.get(row, keyField)))
     .map(row => _.get(row, keyField));
 };
 
@@ -37,7 +37,7 @@ export const unSelectableKeys = (selected, skips = []) => {
   if (skips.length === 0) {
     return [];
   }
-  return selected.filter(x => skips.includes(x));
+  return selected.filter(x => _.contains(skips, x));
 };
 
 export const getSelectedRows = (data, keyField, selected) =>