From 4ec02b294afa876155088fc7140c2f13ec2b0aa2 Mon Sep 17 00:00:00 2001
From: Bill Parrott <bill@chimericdream.com>
Date: Wed, 5 Jun 2019 07:13:35 -0500
Subject: [PATCH 1/5] set tabindex to 0 for table headers; fixes #955 (#965)

---
 packages/react-bootstrap-table2/src/header-cell.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index 773a939..708800b 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/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;

From 1cd31dc54cdc310bfaf8e1e8fbf1168e8ab663b2 Mon Sep 17 00:00:00 2001
From: William Laugesen <williaml@datacom.co.nz>
Date: Fri, 7 Jun 2019 17:18:50 +1200
Subject: [PATCH 2/5] Added Prop to csv/exporter.js to allow overriding of the
 Blob's default type (#958)

---
 packages/react-bootstrap-table2-toolkit/README.md           | 3 +++
 packages/react-bootstrap-table2-toolkit/context.js          | 1 +
 packages/react-bootstrap-table2-toolkit/src/csv/exporter.js | 5 +++--
 packages/react-bootstrap-table2-toolkit/src/op/csv.js       | 1 +
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md
index a470133..444d10e 100644
--- a/packages/react-bootstrap-table2-toolkit/README.md
+++ b/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.
 
diff --git a/packages/react-bootstrap-table2-toolkit/context.js b/packages/react-bootstrap-table2-toolkit/context.js
index 838f634..2a585e6 100644
--- a/packages/react-bootstrap-table2-toolkit/context.js
+++ b/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
diff --git a/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js b/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js
index 4d4c5cd..193933c 100644
--- a/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js
+++ b/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
   );
diff --git a/packages/react-bootstrap-table2-toolkit/src/op/csv.js b/packages/react-bootstrap-table2-toolkit/src/op/csv.js
index 76f5135..5724559 100644
--- a/packages/react-bootstrap-table2-toolkit/src/op/csv.js
+++ b/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
 };

From 4d76d88e9ad84295f6b9554d32dbcbb3a2687354 Mon Sep 17 00:00:00 2001
From: Allen <ayu780129@hotmail.com>
Date: Sat, 8 Jun 2019 13:11:49 +0800
Subject: [PATCH 3/5] fix #945 (#967)

---
 .../react-bootstrap-table2-editor/README.md   |  45 ++++-
 .../src/dropdown-editor.js                    |  26 ++-
 ...pdown-editor-with-dynamic-options-table.js | 155 ++++++++++++++++++
 .../stories/index.js                          |   2 +
 4 files changed, 222 insertions(+), 6 deletions(-)
 create mode 100644 packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-with-dynamic-options-table.js

diff --git a/packages/react-bootstrap-table2-editor/README.md b/packages/react-bootstrap-table2-editor/README.md
index f5d98aa..b4e6b99 100644
--- a/packages/react-bootstrap-table2-editor/README.md
+++ b/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:
 
diff --git a/packages/react-bootstrap-table2-editor/src/dropdown-editor.js b/packages/react-bootstrap-table2-editor/src/dropdown-editor.js
index 166a208..a54bc4d 100644
--- a/packages/react-bootstrap-table2-editor/src/dropdown-editor.js
+++ b/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;
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-with-dynamic-options-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-with-dynamic-options-table.js
new file mode 100644
index 0000000..715346b
--- /dev/null
+++ b/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>
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index d11abfb..ef179e0 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -125,6 +125,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';
@@ -368,6 +369,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 />)

From db612eaa99b67b2ee7fc89fa6e8fa720584cd8e0 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sat, 8 Jun 2019 16:47:00 +0800
Subject: [PATCH 4/5] fix #946

---
 docs/row-selection.md                         | 11 ++++
 .../selection-column-position.js              | 59 +++++++++++++++++++
 .../stories/index.js                          |  4 +-
 .../src/bootstrap-table.js                    |  6 +-
 packages/react-bootstrap-table2/src/footer.js | 14 +++--
 packages/react-bootstrap-table2/src/header.js | 14 +++--
 .../src/row/aggregate-row.js                  | 19 +++---
 7 files changed, 108 insertions(+), 19 deletions(-)
 create mode 100644 packages/react-bootstrap-table2-example/examples/row-selection/selection-column-position.js

diff --git a/docs/row-selection.md b/docs/row-selection.md
index 18dd991..b885d04 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -16,6 +16,7 @@
 * [clickToEdit](#clickToEdit)
 * [onSelect](#onSelect)
 * [onSelectAll](#onSelectAll)
+* [selectColumnPosition](#selectColumnPosition)
 * [hideSelectColumn](#hideSelectColumn)
 * [hideSelectAll](#hideSelectAll)
 * [selectionRenderer](#selectionRenderer)
@@ -275,6 +276,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`
 
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-column-position.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-column-position.js
new file mode 100644
index 0000000..efe7338
--- /dev/null
+++ b/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>
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index ef179e0..d297cf9 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -150,6 +150,7 @@ 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 SelectionColumnPositionTable from 'examples/row-selection/selection-column-position';
 
 // work on row expand
 import BasicRowExpand from 'examples/row-expand';
@@ -394,7 +395,8 @@ 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('Selection Column Position', () => <SelectionColumnPositionTable />);
 
 storiesOf('Row Expand', module)
   .addDecorator(bootstrapStyle())
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 928b548..32dfb86 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -168,7 +168,11 @@ 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]),
+    selectColumnPosition: PropTypes.oneOf([
+      Const.INDICATOR_POSITION_LEFT,
+      Const.INDICATOR_POSITION_RIGHT
+    ])
   }),
   expandRow: PropTypes.shape({
     renderer: PropTypes.func,
diff --git a/packages/react-bootstrap-table2/src/footer.js b/packages/react-bootstrap-table2/src/footer.js
index 1097d3c..5cb542d 100644
--- a/packages/react-bootstrap-table2/src/footer.js
+++ b/packages/react-bootstrap-table2/src/footer.js
@@ -11,9 +11,9 @@ const Footer = (props) => {
   const SelectionFooterCellComp = () => <th />;
   const ExpansionFooterCellComp = () => <th />;
 
-  const isRenderExpandColumnInLeft = (
-    expandColumnPosition = Const.INDICATOR_POSITION_LEFT
-  ) => expandColumnPosition === Const.INDICATOR_POSITION_LEFT;
+  const isRenderFunctionColumnInLeft = (
+    position = 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" />);
diff --git a/packages/react-bootstrap-table2/src/header.js b/packages/react-bootstrap-table2/src/header.js
index bf77637..77ee127 100644
--- a/packages/react-bootstrap-table2/src/header.js
+++ b/packages/react-bootstrap-table2/src/header.js
@@ -33,9 +33,9 @@ const Header = (props) => {
     SelectionHeaderCellComp = withHeaderSelection(SelectionHeaderCell);
   }
 
-  const isRenderExpandColumnInLeft = (
-    expandColumnPosition = Const.INDICATOR_POSITION_LEFT
-  ) => expandColumnPosition === Const.INDICATOR_POSITION_LEFT;
+  const isRenderFunctionColumnInLeft = (
+    position = 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" />);
diff --git a/packages/react-bootstrap-table2/src/row/aggregate-row.js b/packages/react-bootstrap-table2/src/row/aggregate-row.js
index 96b7dbe..3a151db 100644
--- a/packages/react-bootstrap-table2/src/row/aggregate-row.js
+++ b/packages/react-bootstrap-table2/src/row/aggregate-row.js
@@ -45,10 +45,10 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
     return this.shouldUpdateRowContent;
   }
 
-  isRenderExpandColumnInLeft(
-    expandColumnPosition = Const.INDICATOR_POSITION_LEFT
+  isRenderFunctionColumnInLeft(
+    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);

From 0d0d1a891326abb2b6cb19e4d2fba4f1f76e146d Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sat, 8 Jun 2019 17:19:39 +0800
Subject: [PATCH 5/5] fix #947

---
 docs/row-selection.md                         |  37 ++++++
 .../row-selection/select-column-style.js      | 110 ++++++++++++++++++
 .../stories/index.js                          |   2 +
 .../src/bootstrap-table.js                    |   1 +
 .../src/row-selection/selection-cell.js       |  20 +++-
 5 files changed, 167 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js

diff --git a/docs/row-selection.md b/docs/row-selection.md
index b885d04..af2d16a 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -22,6 +22,7 @@
 * [selectionRenderer](#selectionRenderer)
 * [selectionHeaderRenderer](#selectionHeaderRenderer)
 * [headerColumnStyle](#headerColumnStyle)
+* [selectColumnStyle](#selectColumnStyle)
 
 ### <a name="mode">selectRow.mode - [String]</a>
 
@@ -225,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`.
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js b/packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js
new file mode 100644
index 0000000..fd1e237
--- /dev/null
+++ b/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>
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index d297cf9..2c71fac 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -150,6 +150,7 @@ 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
@@ -396,6 +397,7 @@ storiesOf('Row Selection', module)
   .add('Not Selectabled Rows', () => <NonSelectableRowsTable />)
   .add('Selection Hooks', () => <SelectionHooks />)
   .add('Hide Selection Column', () => <HideSelectionColumnTable />)
+  .add('Custom Selection Column Style', () => <SelectionColumnStyleTable />)
   .add('Selection Column Position', () => <SelectionColumnPositionTable />);
 
 storiesOf('Row Expand', module)
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 32dfb86..b708874 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -169,6 +169,7 @@ BootstrapTable.propTypes = {
     selectionRenderer: PropTypes.func,
     selectionHeaderRenderer: 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
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
index 5e8b27c..d7f8ec8 100644
--- a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
+++ b/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>
         {