diff --git a/docs/row-selection.md b/docs/row-selection.md index eb57e6b..9ed4e9f 100644 --- a/docs/row-selection.md +++ b/docs/row-selection.md @@ -16,6 +16,7 @@ * [onSelect](#onSelect) * [onSelectAll](#onSelectAll) * [hideSelectColumn](#hideSelectColumn) +* [hideSelectAll](#hideSelectAll) * [selectionRenderer](#selectionRenderer) * [selectionHeaderRenderer](#selectionHeaderRenderer) @@ -222,3 +223,13 @@ const selectRow = { bgColor: 'red' }; ``` + +### selectRow.hideSelectAll - [Bool] +Default is `false`, if you don't want to render the select all checkbox on the header of selection column, give this prop as `true`! + +```js +const selectRow = { + mode: 'checkbox', + hideSelectAll: true +}; +``` diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/hide-select-all.js b/packages/react-bootstrap-table2-example/examples/row-selection/hide-select-all.js new file mode 100644 index 0000000..6f036b8 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/row-selection/hide-select-all.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, + hideSelectAll: true +}; + +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, + hideSelectAll: true +}; + + +`; + +export default () => ( +
+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index e97ba7a..dbfdf48 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -116,6 +116,7 @@ import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-sele import SelectionNoDataTable from 'examples/row-selection/selection-no-data'; import SelectionStyleTable from 'examples/row-selection/selection-style'; import SelectionClassTable from 'examples/row-selection/selection-class'; +import HideSelectAllTable from 'examples/row-selection/hide-select-all'; import CustomSelectionTable from 'examples/row-selection/custom-selection'; import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows'; import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor'; @@ -300,6 +301,7 @@ storiesOf('Row Selection', module) .add('Selection without Data', () => ) .add('Selection Style', () => ) .add('Selection Class', () => ) + .add('Hide Select All', () => ) .add('Custom Selection', () => ) .add('Selection Background Color', () => ) .add('Not Selectabled Rows', () => ) diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 50ec912..75b7e4f 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -146,6 +146,7 @@ BootstrapTable.propTypes = { mode: PropTypes.oneOf([Const.ROW_SELECT_SINGLE, Const.ROW_SELECT_MULTIPLE]).isRequired, clickToSelect: PropTypes.bool, clickToEdit: PropTypes.bool, + hideSelectAll: PropTypes.bool, onSelect: PropTypes.func, onSelectAll: PropTypes.func, style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js index 3658e0a..8635bd5 100644 --- a/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js +++ b/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js @@ -27,6 +27,7 @@ export default class SelectionHeaderCell extends Component { mode: PropTypes.string.isRequired, checkedStatus: PropTypes.string, onAllRowsSelect: PropTypes.func, + hideSelectAll: PropTypes.bool, selectionHeaderRenderer: PropTypes.func } @@ -63,7 +64,10 @@ export default class SelectionHeaderCell extends Component { CHECKBOX_STATUS_CHECKED, CHECKBOX_STATUS_INDETERMINATE, ROW_SELECT_MULTIPLE } = Const; - const { mode, checkedStatus, selectionHeaderRenderer } = this.props; + const { mode, checkedStatus, selectionHeaderRenderer, hideSelectAll } = this.props; + if (hideSelectAll) { + return ; + } const checked = checkedStatus === CHECKBOX_STATUS_CHECKED; diff --git a/packages/react-bootstrap-table2/test/row-selection/selection-header-cell.test.js b/packages/react-bootstrap-table2/test/row-selection/selection-header-cell.test.js index be9a519..da89009 100644 --- a/packages/react-bootstrap-table2/test/row-selection/selection-header-cell.test.js +++ b/packages/react-bootstrap-table2/test/row-selection/selection-header-cell.test.js @@ -104,6 +104,22 @@ describe('', () => { }); describe('render', () => { + describe('when props.hideSelectAll is true', () => { + beforeEach(() => { + const checkedStatus = Const.CHECKBOX_STATUS_CHECKED; + + wrapper = shallow( + + ); + }); + + it('should render empty th element', () => { + expect(wrapper.find('th').length).toBe(1); + expect(wrapper.find('th[data-row-selection]').length).toBe(1); + expect(wrapper.find(CheckBox).length).toBe(0); + }); + }); + describe('when props.mode is radio', () => { beforeEach(() => { const checkedStatus = Const.CHECKBOX_STATUS_CHECKED;