Merge branch 'master' of https://github.com/RxNT/react-bootstrap-table into RxNT-master

Author: AllenFang

css/react-bootstrap-table.css

@@ -261,6 +261,11 @@ td.react-bs-table-expand-cell {
  cursor: pointer;
 }
 
+th.react-bs-table-expand-cell > div {
+ cursor: pointer;
+}
+
+
 @keyframes shake {
  from, to {
  transform: translate3d(0, 0, 0);

examples/js/expandRow/custom-expand-indicator.js

@@ -81,9 +81,20 @@ export default class ExpandRow extends React.Component {
  );
  }
 
+ expandedColumnHeaderComponent({ expandAllChilds }) {
+ const content = (expandAllChilds ? '(-)' : '(+)' );
+ return (
+ <div>
+ { content }
+ </div>
+ );
+ }
+
  render() {
  const options = {
- expandRowBgColor: 'rgb(242, 255, 163)'
+ expandRowBgColor: 'rgb(242, 255, 163)',
+ expandAllChilds: false,
+ showExpandAllHeaderColumn: true
  };
  return (
  <BootstrapTable data={ products }
@@ -93,7 +104,8 @@ export default class ExpandRow extends React.Component {
  expandColumnOptions={ {
  expandColumnVisible: true,
  expandColumnComponent: this.expandColumnComponent,
- columnWidth: 50
+ columnWidth: 50,
+ expandedColumnHeaderComponent: this.expandedColumnHeaderComponent
  } }
  search>
  <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>

src/BootstrapTable.js

@@ -44,14 +44,24 @@ class BootstrapTable extends Component {
  this._adjustHeaderWidth = this._adjustHeaderWidth.bind(this);
  this._adjustHeight = this._adjustHeight.bind(this);
  this._adjustTable = this._adjustTable.bind(this);
+ this.toggleExpandAllChilds = this.toggleExpandAllChilds.bind(this);
+
+ let expandedKeys = [];
+ if (this.props.options.expandAllChilds !== null &&
+ this.props.options.expandAllChilds !== undefined && this.props.options.expandAllChilds) {
+ expandedKeys = this.store.getAllRowkey();
+ } else if (this.props.options.expanding !== undefined && this.props.options.expanding !== null) {
+ expandedKeys = this.props.options.expanding;
+ }
 
  this.state = {
  data: this.getTableData(),
  currPage: currPage,
- expanding: this.props.options.expanding || [],
+ expanding: expandedKeys,
  sizePerPage: this.props.options.sizePerPage || Const.SIZE_PER_PAGE_LIST[0],
  selectedRowKeys: this.store.getSelectedRowKeys(),
  reset: false,
+ expandAllChilds: this.props.options.expandAllChilds,
  x: this.props.keyBoardNav ? 0 : -1,
  y: this.props.keyBoardNav ? 0 : -1
  };
@@ -477,6 +487,10 @@ class BootstrapTable extends Component {
  reset={ this.state.reset }
  expandColumnVisible={ expandColumnOptions.expandColumnVisible }
  expandColumnComponent={ expandColumnOptions.expandColumnComponent }
+ expandedColumnHeaderComponent={ expandColumnOptions.expandedColumnHeaderComponent }
+ expandAllChilds={ this.state.expandAllChilds }
+ toggleExpandAllChilds={ this.toggleExpandAllChilds }
+ showExpandAllHeaderColumn={ this.props.options.showExpandAllHeaderColumn }
  expandColumnBeforeSelectColumn={ expandColumnOptions.expandColumnBeforeSelectColumn }>
  { this.props.children }
  </TableHeader>
@@ -627,6 +641,28 @@ class BootstrapTable extends Component {
  });
  }
 
+ toggleExpandAllChilds() {
+ const { expandAllChilds } = this.state;
+ const compScope = this;
+ if (expandAllChilds) {
+ this.setState(() => {
+ return {
+ expanding: [],
+ expandAllChilds: !expandAllChilds,
+ reset: false
+ };
+ });
+ } else {
+ this.setState(() => {
+ return {
+ expanding: compScope.store.getAllRowkey(),
+ expandAllChilds: !expandAllChilds,
+ reset: false
+ };
+ });
+ }
+ }
+
  handlePaginationData = (page, sizePerPage) => {
  const { onPageChange, pageStartIndex } = this.props.options;
  const emptyTable = this.store.isEmpty();
@@ -1704,7 +1740,9 @@ BootstrapTable.propTypes = {
  beforeShowError: PropTypes.func,
  printToolBar: PropTypes.bool,
  insertFailIndicator: PropTypes.string,
- noAutoBOM: PropTypes.bool
+ noAutoBOM: PropTypes.bool,
+ expandAllChilds: PropTypes.bool,
+ showExpandAllHeaderColumn: PropTypes.bool
  }),
  fetchInfo: PropTypes.shape({
  dataTotalSize: PropTypes.number
@@ -1724,6 +1762,7 @@ BootstrapTable.propTypes = {
  columnWidth: PropTypes.oneOfType([ PropTypes.number, PropTypes.string ]),
  expandColumnVisible: PropTypes.bool,
  expandColumnComponent: PropTypes.func,
+ expandedColumnHeaderComponent: PropTypes.func,
  expandColumnBeforeSelectColumn: PropTypes.bool
  }),
  footer: PropTypes.bool
@@ -1737,6 +1776,7 @@ BootstrapTable.defaultProps = {
  expandColumnOptions: {
  expandColumnVisible: false,
  expandColumnComponent: undefined,
+ expandedColumnHeaderComponent: undefined,
  expandColumnBeforeSelectColumn: true
  },
  height: '100%',
@@ -1872,7 +1912,9 @@ BootstrapTable.defaultProps = {
  beforeShowError: undefined,
  printToolBar: true,
  insertFailIndicator: Const.INSERT_FAIL_INDICATOR,
- noAutoBOM: true
+ noAutoBOM: true,
+ expandAllChilds: false,
+ showExpandAllHeaderColumn: false
  },
  fetchInfo: {
  dataTotalSize: 0

src/ExpandRowHeaderColumn.js

@@ -3,18 +3,42 @@ import PropTypes from 'prop-types';
 
 class ExpandRowHeaderColumn extends Component {
 
+ constructor(props) {
+ super(props);
+ this.toggleExpandAllChilds = this.toggleExpandAllChilds.bind(this);
+ }
+
+ toggleExpandAllChilds() {
+ this.props.toggleExpandAllChilds();
+ }
+
  render() {
+ const {
+ expandedColumnHeaderComponent,
+ expandAllChilds,
+ showExpandAllHeaderColumn
+ } = this.props;
+ const expandedHeaderComponent = (expandAllChilds ? '(-)' : '(+)' );
+ const ExpandedColumnHeaderComponent = expandedColumnHeaderComponent;
+
  return (
  <th rowSpan={ this.props.rowCount } style={ { textAlign: 'center' } }
  className='react-bs-table-expand-cell'
  data-is-only-head={ false }>
- { this.props.children }
+ { showExpandAllHeaderColumn && <div onClick={ this.toggleExpandAllChilds }>
+ { expandedColumnHeaderComponent ?
+ <ExpandedColumnHeaderComponent
+ expandAllChilds={ this.props.expandAllChilds } /> : expandedHeaderComponent }
+ </div> }
  </th>
  );
  }
 }
 ExpandRowHeaderColumn.propTypes = {
- children: PropTypes.node,
- rowCount: PropTypes.number
+ expandedColumnHeaderComponent: PropTypes.func,
+ rowCount: PropTypes.number,
+ expandAllChilds: PropTypes.bool,
+ toggleExpandAllChilds: PropTypes.func,
+ showExpandAllHeaderColumn: PropTypes.bool
 };
 export default ExpandRowHeaderColumn;

src/TableHeader.js

@@ -38,7 +38,9 @@ function getSortOrder(sortList, field, enableSort) {
 class TableHeader extends Component {
 
  render() {
- const { sortIndicator, sortList, onSort, reset, version, condensed, bordered } = this.props;
+ const { sortIndicator, sortList, onSort, reset, version, condensed, bordered,
+ expandedColumnHeaderComponent, expandAllChilds, toggleExpandAllChilds,
+ showExpandAllHeaderColumn } = this.props;
  const containerClasses = classSet(
  'react-bs-container-header',
  'table-header-wrapper',
@@ -64,13 +66,21 @@ class TableHeader extends Component {
  rows[0].push( [
  this.props.expandColumnVisible &&
  this.props.expandColumnBeforeSelectColumn &&
- <ExpandRowHeaderColumn key='expandCol' rowCount={ rowCount + 1 }/>
+ <ExpandRowHeaderColumn key='expandCol' rowCount={ rowCount + 1 }
+ expandedColumnHeaderComponent={ expandedColumnHeaderComponent }
+ expandAllChilds={ expandAllChilds }
+ toggleExpandAllChilds={ toggleExpandAllChilds }
+ showExpandAllHeaderColumn={ showExpandAllHeaderColumn }/>
  ], [
  this.renderSelectRowHeader(rowCount + 1, rowKey++)
  ], [
  this.props.expandColumnVisible &&
  !this.props.expandColumnBeforeSelectColumn &&
- <ExpandRowHeaderColumn key='expandCol' rowCount={ rowCount + 1 }/>
+ <ExpandRowHeaderColumn key='expandCol' rowCount={ rowCount + 1 }
+ expandedColumnHeaderComponent={ expandedColumnHeaderComponent }
+ expandAllChilds={ expandAllChilds }
+ toggleExpandAllChilds={ toggleExpandAllChilds }
+ showExpandAllHeaderColumn={ showExpandAllHeaderColumn }/>
  ]);
 
  React.Children.forEach(this.props.children, (elm) => {
@@ -169,8 +179,12 @@ TableHeader.propTypes = {
  reset: PropTypes.bool,
  expandColumnVisible: PropTypes.bool,
  expandColumnComponent: PropTypes.func,
+ expandedColumnHeaderComponent: PropTypes.func,
  expandColumnBeforeSelectColumn: PropTypes.bool,
- version: PropTypes.string
+ version: PropTypes.string,
+ expandAllChilds: PropTypes.bool,
+ toggleExpandAllChilds: PropTypes.func,
+ showExpandAllHeaderColumn: PropTypes.bool
 };
 
 export default TableHeader;