Skip to content

Commit

Permalink
enhance expand row - added indication about expanded rows
Browse files Browse the repository at this point in the history
  • Loading branch information
dekelb committed Feb 22, 2017
1 parent 9d4f126 commit 1c31aab
Show file tree
Hide file tree
Showing 9 changed files with 117 additions and 13 deletions.
4 changes: 4 additions & 0 deletions css/react-bootstrap-table.css
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,10 @@
animation-duration: .3s;
}

td.react-bs-table-expand-cell {
cursor: pointer;
}

@keyframes shake {
from, to {
transform: translate3d(0, 0, 0);
Expand Down
2 changes: 1 addition & 1 deletion examples/js/expandRow/demo.js
Original file line number Diff line number Diff line change
Expand Up @@ -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') }
Expand Down
1 change: 1 addition & 0 deletions examples/js/expandRow/expand-row-by-column.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions examples/js/expandRow/expand-row-with-selection.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 14 additions & 0 deletions examples/js/expandRow/expandRow.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)'
Expand All @@ -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>
Expand Down
24 changes: 21 additions & 3 deletions src/BootstrapTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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'
Expand All @@ -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 }
Expand Down Expand Up @@ -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,
Expand Down
42 changes: 41 additions & 1 deletion src/TableBody.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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)) {
Expand All @@ -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> ];

Expand Down Expand Up @@ -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 &&
Expand Down Expand Up @@ -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;
}
Expand Down
21 changes: 16 additions & 5 deletions src/TableHeader.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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;
21 changes: 18 additions & 3 deletions src/util.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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
Expand All @@ -74,7 +82,14 @@ export default {

return (
<colgroup>
{ selectRowHeader }{ theader }
{ expandColumnOptions.expandColumnVisible &&
expandColumnOptions.expandColumnBeforeSelectColumn &&
expandRowHeader }
{ selectRowHeader }
{ expandColumnOptions.expandColumnVisible &&
!expandColumnOptions.expandColumnBeforeSelectColumn &&
expandRowHeader }
{ theader }
</colgroup>
);
}
Expand Down

0 comments on commit 1c31aab

Please sign in to comment.