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 = {
};
```
+### selectRow.selectColumnPosition - [String]
+Default is `left`. You can give this as `right` for rendering selection column in the right side.
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ selectColumnPosition: 'right'
+};
+```
+
### selectRow.hideSelectColumn - [Bool]
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'
+};
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode }
+
+);
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', () => )
.add('Not Selectabled Rows', () => )
.add('Selection Hooks', () => )
- .add('Hide Selection Column', () => );
+ .add('Hide Selection Column', () => )
+ .add('Selection Column Position', () => );
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 = () => | ;
const ExpansionFooterCellComp = () => | ;
- 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();
+ if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
+ childrens.unshift();
+ } else {
+ childrens.push();
+ }
}
if (expandRow.showExpandColumn) {
- if (isRenderExpandColumnInLeft(expandRow.expandColumnPosition)) {
+ if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
childrens.unshift();
} else {
childrens.push();
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();
+ if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
+ childrens.unshift();
+ } else {
+ childrens.push();
+ }
}
if (expandRow.showExpandColumn) {
- if (isRenderExpandColumnInLeft(expandRow.expandColumnPosition)) {
+ if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
childrens.unshift();
} else {
childrens.push();
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 = (
- ));
+ );
+ 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);