increase expand column width when use bootstrap4

Author: AllenFang

src/BootstrapTable.js

@@ -397,7 +397,7 @@ class BootstrapTable extends Component {
     if (typeof expandColumnOptions.expandColumnBeforeSelectColumn === 'undefined') {
       expandColumnOptions.expandColumnBeforeSelectColumn = true;
     }
-    const colGroups = Util.renderColGroup(columns, this.props.selectRow, expandColumnOptions);
+    const colGroups = Util.renderColGroup(columns, this.props.selectRow, expandColumnOptions, this.props.version);
     let sortIndicator = this.props.options.sortIndicator;
     if (typeof this.props.options.sortIndicator === 'undefined') sortIndicator = true;
     const { paginationPosition = Const.PAGINATION_POS_BOTTOM } = this.props.options;
@@ -447,6 +447,7 @@ class BootstrapTable extends Component {
             tableBodyClass={ this.props.tableBodyClass }
             style={ { ...style, ...this.props.bodyStyle } }
             data={ this.state.data }
+            version={ this.props.version }
             expandComponent={ this.props.expandComponent }
             expandableRow={ this.props.expandableRow }
             expandRowBgColor={ this.props.options.expandRowBgColor }

src/TableBody.js

@@ -17,7 +17,7 @@ class TableBody extends Component {
   }
 
   render() {
-    const { cellEdit, beforeShowError, x, y, keyBoardNav, trStyle } = this.props;
+    const { cellEdit, beforeShowError, x, y, keyBoardNav, trStyle, version } = this.props;
     const tableClasses = classSet('table', {
       'table-striped': this.props.striped,
       'table-bordered': this.props.bordered,
@@ -29,7 +29,7 @@ class TableBody extends Component {
     const unselectable = this.props.selectRow.unselectable || [];
     const isSelectRowDefined = this._isSelectRowDefined();
     const tableHeader = Utils.renderColGroup(this.props.columns,
-        this.props.selectRow, this.props.expandColumnOptions);
+        this.props.selectRow, this.props.expandColumnOptions, version);
     const inputType = this.props.selectRow.mode === Const.ROW_SELECT_SINGLE ? 'radio' : 'checkbox';
     const CustomComponent = this.props.selectRow.customComponent;
     const enableKeyBoardNav = (keyBoardNav === true || typeof keyBoardNav === 'object');
@@ -144,7 +144,7 @@ class TableBody extends Component {
       const expandedRowColumn = this.renderExpandRowColumn(
           this.props.expandableRow && this.props.expandableRow(data),
           this.props.expanding.indexOf(key) > -1,
-          ExpandColumnCustomComponent, r, data
+          ExpandColumnCustomComponent, r
       );
       const haveExpandContent = this.props.expandableRow && this.props.expandableRow(data);
       const isExpanding = haveExpandContent && this.props.expanding.indexOf(key) > -1;
@@ -501,6 +501,7 @@ class TableBody extends Component {
   }
 }
 TableBody.propTypes = {
+  version: PropTypes.string,
   data: PropTypes.array,
   columns: PropTypes.array,
   striped: PropTypes.bool,

src/util.js

@@ -78,24 +78,27 @@ export default {
     return version === '4';
   },
 
-  renderColGroup(columns, selectRow, expandColumnOptions = {}) {
+  renderColGroup(columns, selectRow, expandColumnOptions = {}, version) {
     let selectRowHeader = null;
     let expandRowHeader = null;
+    const bootstrap4WithExpandCol = this.isBootstrap4(version) &&
+      expandColumnOptions.expandColumnVisible;
     const isSelectRowDefined = selectRow.mode === Const.ROW_SELECT_SINGLE ||
       selectRow.mode === Const.ROW_SELECT_MULTI;
+    const columnWidth = bootstrap4WithExpandCol ? '38px' : '30px';
     if (isSelectRowDefined) {
       const style = {
-        width: selectRow.columnWidth || '30px',
-        minWidth: selectRow.columnWidth || '30px'
+        width: selectRow.columnWidth || columnWidth,
+        minWidth: selectRow.columnWidth || columnWidth
       };
       if (!selectRow.hideSelectColumn) {
         selectRowHeader = (<col key='select-col' style={ style }></col>);
       }
     }
     if (expandColumnOptions.expandColumnVisible) {
       const style = {
-        width: expandColumnOptions.columnWidth || 30,
-        minWidth: expandColumnOptions.columnWidth || 30
+        width: expandColumnOptions.columnWidth || columnWidth,
+        minWidth: expandColumnOptions.columnWidth || columnWidth
       };
       expandRowHeader = (<col key='expand-col' style={ style }></col>);
     }