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', () => {