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);