diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 91e46cc..27e96ab 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -142,7 +142,9 @@ BootstrapTable.propTypes = { classes: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), nonSelectable: PropTypes.array, bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), - hideSelectColumn: PropTypes.bool + hideSelectColumn: PropTypes.bool, + selectionRenderer: PropTypes.func, + selectionHeaderRenderer: PropTypes.func }), onRowSelect: PropTypes.func, onAllRowsSelect: PropTypes.func, diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js index 3050cf2..bec0ef0 100644 --- a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js +++ b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js @@ -14,7 +14,8 @@ export default class SelectionCell extends Component { onRowSelect: PropTypes.func, disabled: PropTypes.bool, rowIndex: PropTypes.number, - clickToSelect: PropTypes.bool + clickToSelect: PropTypes.bool, + selectionRenderer: PropTypes.func } constructor() { @@ -53,16 +54,25 @@ export default class SelectionCell extends Component { const { mode: inputType, selected, - disabled + disabled, + selectionRenderer } = this.props; return ( - + { + selectionRenderer ? selectionRenderer({ + mode: inputType, + checked: selected, + disabled + }) : ( + + ) + } ); } 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 0105bf3..9879026 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 @@ -22,7 +22,8 @@ export default class SelectionHeaderCell extends Component { static propTypes = { mode: PropTypes.string.isRequired, checkedStatus: PropTypes.string, - onAllRowsSelect: PropTypes.func + onAllRowsSelect: PropTypes.func, + selectionHeaderRenderer: PropTypes.func } constructor() { @@ -52,25 +53,37 @@ export default class SelectionHeaderCell extends Component { render() { const { - CHECKBOX_STATUS_CHECKED, CHECKBOX_STATUS_INDETERMINATE, ROW_SELECT_SINGLE + CHECKBOX_STATUS_CHECKED, CHECKBOX_STATUS_INDETERMINATE, ROW_SELECT_MULTIPLE } = Const; - const { mode, checkedStatus } = this.props; + const { mode, checkedStatus, selectionHeaderRenderer } = this.props; const checked = checkedStatus === CHECKBOX_STATUS_CHECKED; const indeterminate = checkedStatus === CHECKBOX_STATUS_INDETERMINATE; - return mode === ROW_SELECT_SINGLE - ? - : ( - - - + const attrs = {}; + let content; + if (selectionHeaderRenderer) { + content = selectionHeaderRenderer({ + mode, + checked, + indeterminate + }); + attrs.onClick = this.handleCheckBoxClick; + } else if (mode === ROW_SELECT_MULTIPLE) { + content = ( + ); + attrs.onClick = this.handleCheckBoxClick; + } + + return ( + { content } + ); } }