diff --git a/docs/row-selection.md b/docs/row-selection.md
index 0aa5f2c..6262be4 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -17,6 +17,7 @@ The following are available properties in `selectRow`:
* [clickToEdit](#clickToEdit)
* [onSelect](#onSelect)
* [onSelectAll](#onSelectAll)
+* [hideSelectColumn](#hideSelectColumn)
#### Optional
@@ -148,7 +149,7 @@ const selectRow = {
};
```
-# selectRow.onSelect - [Function]
+## selectRow.onSelect - [Function]
This callback function will be called when a row is select/unselect and pass following three arguments:
`row`, `isSelect` and `rowIndex`.
@@ -161,7 +162,7 @@ const selectRow = {
};
```
-# selectRow.onSelectAll - [Function]
+## selectRow.onSelectAll - [Function]
This callback function will be called when select/unselect all and it only work when you configure [`selectRow.mode`](#mode) as `checkbox`.
```js
@@ -172,3 +173,15 @@ const selectRow = {
}
};
```
+
+## selectRow.hideSelectColumn - [Bool]
+Default is `false`, if you don't want to have a selection column, give this prop as `true`
+
+```js
+const selectRow = {
+ mode: 'radio',
+ hideSelectColumn: true,
+ clickToSelect: true,
+ bgColor: 'red'
+};
+```
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js b/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js
new file mode 100644
index 0000000..b654411
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/hide-selection-column.js
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table2';
+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,
+ hideSelectColumn: true,
+ bgColor: '#00BFFF'
+};
+
+const sourceCode = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ hideSelectColumn: true,
+ bgColor: '#00BFFF'
+};
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 31a03c1..99cee5a 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -60,6 +60,7 @@ import SelectionClassTable from 'examples/row-selection/selection-class';
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';
// css style
import 'bootstrap/dist/css/bootstrap.min.css';
@@ -128,4 +129,5 @@ storiesOf('Row Selection', module)
.add('Selection Class', () => )
.add('Selection Background Color', () => )
.add('Not Selectabled Rows', () => )
- .add('Selection Hooks', () => );
+ .add('Selection Hooks', () => )
+ .add('Hide Selection Column', () => );
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index bcbf5cf..cb6734c 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -135,7 +135,8 @@ BootstrapTable.propTypes = {
style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
classes: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
nonSelectable: PropTypes.array,
- bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+ bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+ hideSelectColumn: PropTypes.bool
}),
onRowSelect: PropTypes.func,
onAllRowsSelect: PropTypes.func
diff --git a/packages/react-bootstrap-table2/src/header.js b/packages/react-bootstrap-table2/src/header.js
index 4730c34..9c89ac8 100644
--- a/packages/react-bootstrap-table2/src/header.js
+++ b/packages/react-bootstrap-table2/src/header.js
@@ -7,7 +7,7 @@ import HeaderCell from './header-cell';
import SelectionHeaderCell from './row-selection/selection-header-cell';
const Header = (props) => {
- const { ROW_SELECT_DISABLED } = Const;
+ const { ROW_SELECT_MULTIPLE } = Const;
const {
columns,
@@ -21,7 +21,8 @@ const Header = (props) => {
{
- selectRow.mode === ROW_SELECT_DISABLED ? null :
+ (selectRow.mode === ROW_SELECT_MULTIPLE && !selectRow.hideSelectColumn)
+ ? : null
}
{
columns.map((column, i) => {
diff --git a/packages/react-bootstrap-table2/src/row.js b/packages/react-bootstrap-table2/src/row.js
index a53682e..d08fbec 100644
--- a/packages/react-bootstrap-table2/src/row.js
+++ b/packages/react-bootstrap-table2/src/row.js
@@ -68,7 +68,7 @@ class Row extends Component {
} = cellEdit;
const key = _.get(row, keyField);
- const { clickToSelect } = selectRow;
+ const { clickToSelect, hideSelectColumn } = selectRow;
const trAttrs = {};
if (clickToSelect) {
@@ -78,9 +78,8 @@ class Row extends Component {
return (
{
- selectRow.mode === Const.ROW_SELECT_DISABLED
- ? null
- : (
+ (selectRow.mode === Const.ROW_SELECT_MULTIPLE && !hideSelectColumn)
+ ? (
)
+ : null
}
{
columns.map((column, index) => {
diff --git a/packages/react-bootstrap-table2/test/header.test.js b/packages/react-bootstrap-table2/test/header.test.js
index 0b01089..7af7ad9 100644
--- a/packages/react-bootstrap-table2/test/header.test.js
+++ b/packages/react-bootstrap-table2/test/header.test.js
@@ -53,12 +53,36 @@ describe('Header', () => {
describe('when the selectRow.mode is radio(single selection)', () => {
beforeEach(() => {
- wrapper = shallow();
+ const selectRow = { mode: 'radio' };
+ wrapper = shallow(
+
+ );
});
it('should not render ', () => {
expect(wrapper.find(SelectionHeaderCell).length).toBe(0);
});
+
+ describe('when selectRow.hideSelectColumn is true', () => {
+ beforeEach(() => {
+ const selectRow = { mode: 'radio', hideSelectColumn: true };
+ wrapper = shallow(
+
+ );
+ });
+
+ it('should rendering header with selection column', () => {
+ expect(wrapper.find(SelectionHeaderCell).length).toBe(0);
+ });
+ });
});
describe('when the selectRow.mode is checkbox(multiple selection)', () => {
@@ -76,5 +100,22 @@ describe('Header', () => {
it('should render ', () => {
expect(wrapper.find(SelectionHeaderCell).length).toBe(1);
});
+
+ describe('when selectRow.hideSelectColumn is true', () => {
+ beforeEach(() => {
+ const selectRow = { mode: 'checkbox', hideSelectColumn: true };
+ wrapper = shallow(
+
+ );
+ });
+
+ it('should rendering header with selection column', () => {
+ expect(wrapper.find(SelectionHeaderCell).length).toBe(0);
+ });
+ });
});
});
diff --git a/packages/react-bootstrap-table2/test/row.test.js b/packages/react-bootstrap-table2/test/row.test.js
index 84241e7..10555bc 100644
--- a/packages/react-bootstrap-table2/test/row.test.js
+++ b/packages/react-bootstrap-table2/test/row.test.js
@@ -545,6 +545,27 @@ describe('Row', () => {
expect(wrapper.find('tr').prop('onClick')).toBeDefined();
});
});
+
+ describe('if selectRow.hideSelectColumn is true', () => {
+ beforeEach(() => {
+ selectRow.hideSelectColumn = true;
+ wrapper = shallow(
+
);
+ });
+
+ it('should render Row component without selection column', () => {
+ expect(wrapper.length).toBe(1);
+ expect(wrapper.find(SelectionCell).length).toBe(0);
+ });
+ });
});
describe('handleRowClick', () => {