enhance expand row - added indication about expanded rows

Author: dekelb

css/react-bootstrap-table.css

@@ -173,6 +173,10 @@
   animation-duration: .3s;
 }
 
+td.react-bs-table-expand-cell {
+    cursor: pointer;
+}
+
 @keyframes shake {
   from, to {
     transform: translate3d(0, 0, 0);

examples/js/expandRow/demo.js

@@ -28,7 +28,7 @@ class Demo extends React.Component {
           { renderLinks('expandRow/expand-row-by-column.js') }
           <ManageExpandExternal/>
         </Panel>
-        <Panel header={ 'Expand Row with Selection' }>
+        <Panel header={ 'Expand Row with Selection - Keep select column first' }>
           <span>You can enable/disable the expanding if you click row to select,
           configure <code>clickToExpand</code> in <code>selectRow</code> props, default is false</span>
           { renderLinks('expandRow/expand-row-with-selection.js') }

examples/js/expandRow/expand-row-by-column.js

@@ -78,6 +78,7 @@ export default class ExpandRow extends React.Component {
         options={ options }
         expandableRow={ this.isExpandableRow }
         expandComponent={ this.expandComponent }
+        expandColumnOptions={ { expandColumnVisible: true } }
         search>
         <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
         <TableHeaderColumn dataField='name' expandable={ false }>Product Name</TableHeaderColumn>

examples/js/expandRow/expand-row-with-selection.js

@@ -82,6 +82,7 @@ export default class ExpandRow extends React.Component {
         options={ options }
         expandableRow={ this.isExpandableRow }
         expandComponent={ this.expandComponent }
+        expandColumnOptions={ { expandColumnVisible: true, expandColumnBeforeSelectColumn: false } }
         selectRow={ selectRow }>
         <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
         <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>

examples/js/expandRow/expandRow.js

@@ -68,6 +68,19 @@ export default class ExpandRow extends React.Component {
     );
   }
 
+  expandColumnComponent({ isExpandableRow, isExpanded }) {
+    let content = '';
+
+    if (isExpandableRow) {
+      content = (isExpanded ? '(-)' : '(+)' );
+    } else {
+      content = ' ';
+    }
+    return (
+      <div> { content } </div>
+    );
+  }
+
   render() {
     const options = {
       expandRowBgColor: 'rgb(242, 255, 163)'
@@ -77,6 +90,7 @@ export default class ExpandRow extends React.Component {
         options={ options }
         expandableRow={ this.isExpandableRow }
         expandComponent={ this.expandComponent }
+        expandColumnOptions={ { expandColumnVisible: true, expandColumnComponent: this.expandColumnComponent } }
         search>
         <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
         <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>

src/BootstrapTable.js

@@ -326,7 +326,11 @@ class BootstrapTable extends Component {
     const toolBar = this.renderToolBar();
     const tableFilter = this.renderTableFilter(columns);
     const isSelectAll = this.isSelectAll();
-    const colGroups = Util.renderColGroup(columns, this.props.selectRow);
+    const expandColumnOptions = this.props.expandColumnOptions;
+    if (typeof expandColumnOptions.expandColumnBeforeSelectColumn === 'undefined') {
+      expandColumnOptions.expandColumnBeforeSelectColumn = true;
+    }
+    const colGroups = Util.renderColGroup(columns, this.props.selectRow, expandColumnOptions);
     let sortIndicator = this.props.options.sortIndicator;
     if (typeof this.props.options.sortIndicator === 'undefined') sortIndicator = true;
     return (
@@ -355,7 +359,10 @@ class BootstrapTable extends Component {
             condensed={ this.props.condensed }
             isFiltered={ this.filter ? true : false }
             isSelectAll={ isSelectAll }
-            reset={ this.state.reset }>
+            reset={ this.state.reset }
+            expandColumnVisible={ expandColumnOptions.expandColumnVisible }
+            expandColumnComponent={ expandColumnOptions.expandColumnComponent }
+            expandColumnBeforeSelectColumn={ expandColumnOptions.expandColumnBeforeSelectColumn }>
             { this.props.children }
           </TableHeader>
           <TableBody ref='body'
@@ -375,6 +382,7 @@ class BootstrapTable extends Component {
             keyField={ this.store.getKeyField() }
             condensed={ this.props.condensed }
             selectRow={ this.props.selectRow }
+            expandColumnOptions={ this.props.expandColumnOptions }
             cellEdit={ this.props.cellEdit }
             selectedRowKeys={ this.state.selectedRowKeys }
             onRowClick={ this.handleRowClick }
@@ -1233,12 +1241,22 @@ BootstrapTable.propTypes = {
   csvFileName: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
   ignoreSinglePage: PropTypes.bool,
   expandableRow: PropTypes.func,
-  expandComponent: PropTypes.func
+  expandComponent: PropTypes.func,
+  expandColumnOptions: PropTypes.shape({
+    expandColumnVisible: PropTypes.bool,
+    expandColumnComponent: PropTypes.func,
+    expandColumnBeforeSelectColumn: PropTypes.bool
+  })
 };
 BootstrapTable.defaultProps = {
   scrollTop: undefined,
   expandComponent: undefined,
   expandableRow: undefined,
+  expandColumnOptions: {
+    expandColumnVisible: false,
+    expandColumnComponent: undefined,
+    expandColumnBeforeSelectColumn: true
+  },
   height: '100%',
   maxHeight: undefined,
   striped: false,

src/TableBody.js

@@ -31,13 +31,18 @@ class TableBody extends Component {
     const noneditableRows = (cellEdit.nonEditableRows && cellEdit.nonEditableRows()) || [];
     const unselectable = this.props.selectRow.unselectable || [];
     const isSelectRowDefined = this._isSelectRowDefined();
-    const tableHeader = Utils.renderColGroup(this.props.columns, this.props.selectRow, 'header');
+    const tableHeader = Utils.renderColGroup(this.props.columns,
+        this.props.selectRow, this.props.expandColumnOptions);
     const inputType = this.props.selectRow.mode === Const.ROW_SELECT_SINGLE ? 'radio' : 'checkbox';
     const CustomComponent = this.props.selectRow.customComponent;
+    const ExpandColumnCustomComponent = this.props.expandColumnOptions.expandColumnComponent;
     let expandColSpan = this.props.columns.filter(col => !col.hidden).length;
     if (isSelectRowDefined && !this.props.selectRow.hideSelectColumn) {
       expandColSpan += 1;
     }
+    if (this.props.expandColumnOptions.expandColumnVisible) {
+      expandColSpan += 1;
+    }
 
     const tableRows = this.props.data.map(function(data, r) {
       const tableColumns = this.props.columns.map(function(column, i) {
@@ -118,6 +123,11 @@ class TableBody extends Component {
       const selected = this.props.selectedRowKeys.indexOf(key) !== -1;
       const selectRowColumn = isSelectRowDefined && !this.props.selectRow.hideSelectColumn ?
         this.renderSelectRowColumn(selected, inputType, disable, CustomComponent, r, data) : null;
+      const expandedRowColumn = this.renderExpandRowColumn(
+          this.props.expandableRow && this.props.expandableRow(data),
+          this.props.expanding.indexOf(key) > -1,
+          ExpandColumnCustomComponent, r, data
+      );
       // add by bluespring for className customize
       let trClassName = this.props.trClassName;
       if (isFun(this.props.trClassName)) {
@@ -134,7 +144,13 @@ class TableBody extends Component {
         onSelectRow={ this.handleSelectRow }
         onExpandRow={ this.handleClickCell }
         unselectableRow={ disable }>
+        { this.props.expandColumnOptions.expandColumnVisible &&
+            this.props.expandColumnOptions.expandColumnBeforeSelectColumn &&
+            expandedRowColumn }
         { selectRowColumn }
+        { this.props.expandColumnOptions.expandColumnVisible &&
+            !this.props.expandColumnOptions.expandColumnBeforeSelectColumn &&
+            expandedRowColumn }
         { tableColumns }
       </TableRow> ];
 
@@ -232,6 +248,7 @@ class TableBody extends Component {
     } = this.props;
     const selectRowAndExpand = this._isSelectRowDefined() && !clickToExpand ? false : true;
     columnIndex = this._isSelectRowDefined() ? columnIndex - 1 : columnIndex;
+    columnIndex = this._isExpandColumnVisible() ? columnIndex - 1 : columnIndex;
 
     if (expandableRow &&
       selectRowAndExpand &&
@@ -309,11 +326,34 @@ class TableBody extends Component {
     );
   }
 
+  renderExpandRowColumn(isExpandableRow, isExpanded, CustomComponent, rowIndex = null) {
+    let content = null;
+    if (CustomComponent) {
+      content = (<CustomComponent isExpandableRow={ isExpandableRow } isExpanded={ isExpanded } />);
+    } else if (isExpandableRow) {
+      content = (isExpanded ? '-' : '+' );
+    } else {
+      content = ' ';
+    }
+
+    return (
+      <td
+        className='react-bs-table-expand-cell'
+        onClick={ () => this.handleClickCell(rowIndex + 1) }>
+        { content }
+      </td>
+    );
+  }
+
   _isSelectRowDefined() {
     return this.props.selectRow.mode === Const.ROW_SELECT_SINGLE ||
           this.props.selectRow.mode === Const.ROW_SELECT_MULTI;
   }
 
+  _isExpandColumnVisible() {
+    return this.props.expandColumnOptions.expandColumnVisible;
+  }
+
   getHeaderColGrouop = () => {
     return this.refs.header.childNodes;
   }

src/TableHeader.js

@@ -51,10 +51,18 @@ class TableHeader extends Component {
     const rows = [];
     let rowKey = 0;
 
-    if (!this.props.hideSelectColumn) {
-      rows[0] = [ this.renderSelectRowHeader(rowCount + 1, rowKey++) ];
-    }
-
+    rows[0] = [];
+    rows[0].push( [
+      this.props.expandColumnVisible &&
+        this.props.expandColumnBeforeSelectColumn &&
+          <th className='react-bs-table-expand-cell'> </th>
+    ], [
+      this.renderSelectRowHeader(rowCount + 1, rowKey++)
+    ], [
+      this.props.expandColumnVisible &&
+        !this.props.expandColumnBeforeSelectColumn &&
+          <th className='react-bs-table-expand-cell'> </th>
+    ]);
     const { sortIndicator, sortList, onSort, reset } = this.props;
 
     React.Children.forEach(this.props.children, (elm) => {
@@ -141,7 +149,10 @@ TableHeader.propTypes = {
   sortIndicator: PropTypes.bool,
   customComponent: PropTypes.func,
   colGroups: PropTypes.element,
-  reset: PropTypes.bool
+  reset: PropTypes.bool,
+  expandColumnVisible: PropTypes.bool,
+  expandColumnComponent: PropTypes.func,
+  expandColumnBeforeSelectColumn: PropTypes.bool
 };
 
 export default TableHeader;

src/util.js

@@ -46,8 +46,9 @@ export default {
     return typeof window !== 'undefined' && typeof window.document !== 'undefined';
   },
 
-  renderColGroup(columns, selectRow) {
+  renderColGroup(columns, selectRow, expandColumnOptions = {}) {
     let selectRowHeader = null;
+    let expandRowHeader = null;
     const isSelectRowDefined = selectRow.mode === Const.ROW_SELECT_SINGLE ||
       selectRow.mode === Const.ROW_SELECT_MULTI;
     if (isSelectRowDefined) {
@@ -56,9 +57,16 @@ export default {
         minWidth: selectRow.columnWidth || 30
       };
       if (!selectRow.hideSelectColumn) {
-        selectRowHeader = (<col style={ style } key={ -1 }></col>);
+        selectRowHeader = (<col key='select-col' style={ style }></col>);
       }
     }
+    if (expandColumnOptions.expandColumnVisible) {
+      const style = {
+        width: expandColumnOptions.columnWidth || 30,
+        minWidth: expandColumnOptions.columnWidth || 30
+      };
+      expandRowHeader = (<col key='expand-col' style={ style }></col>);
+    }
     const theader = columns.map(function(column, i) {
       const style = {
         display: column.hidden ? 'none' : null
@@ -74,7 +82,14 @@ export default {
 
     return (
       <colgroup>
-        { selectRowHeader }{ theader }
+        { expandColumnOptions.expandColumnVisible &&
+            expandColumnOptions.expandColumnBeforeSelectColumn &&
+            expandRowHeader }
+        { selectRowHeader }
+        { expandColumnOptions.expandColumnVisible &&
+            !expandColumnOptions.expandColumnBeforeSelectColumn &&
+            expandRowHeader }
+        { theader }
       </colgroup>
     );
   }