React-bootstrap-table2: How do I implement colspan rows?

[a2441918]

How do I achieve the above feature? Like a single cell spanning across multiple columns?

[AllenFang]

@a2441918 right now we dont support this kind of feature but we must implement it.

[karan-chauhan]

Is this functionality is still not available?
It's an important feature and it should be there.

[AshCorah]

Any plans to implement colspan?

[SandeepKapalawai]

Team

Do we have any update on this, since this is an important feature which everyone needs this

[rhmmuh005]

Hello,

Has this feature been implemented yet?

[lraghib]

As @AllenFang said, this feature doesn't supported yet, but you can do something like this using jquery:

componentDidMount() {
        $('table thead tr th').each(function (index) {
            switch (index) {
                case 0:
                    $(this).attr("colspan", 1);
                    break;
                case 1:
                    $(this).attr("colspan", 8);
                    break;
                case 2:
                    $(this).attr("colspan", 1);
                    break;
                case 3:
                    $(this).attr("colspan", 3);
                    break;
            }

        });
    }

[ymihir]

any update on this?

[Avasam]

Use headerAttrs to add colspan and hidden.

https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnheaderattrs-object-function

https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Work%20on%20Header%20Columns&selectedStory=Customize%20Column%20HTML%20attribute&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

[phamkimtho]

We can use headerAttrs (use for header) to add colspan. But for the others, we can use attrs. Note, we have to use it in conjunction with hidden to hide the redundant cells.

export class TableWaterBalance extends Component {

  colspanForLastRow = (cell, row, rowIndex, colIndex) => {
    if (rowIndex === 1) {
      return { colSpan: `2` }
    }
  }
  hiddenColForLastRow = (cell, row, rowIndex, colIndex) => {
    if (rowIndex === 1) {
      return { hidden: true }
    }
  }
  render() {
    const columns = [{
      dataField: 'id',
      text: 'Product ID',
    }, {
      dataField: 'name',
      text: 'Product Name',
      attrs: this.colspanForLastRow
    }, {
      dataField: 'price',
      text: 'Product Price',
      attrs: this.hiddenColForLastRow
    }];
    const products = [
      { id: 'DMZ 001', name: '1234', price: '12' },
      { id: 'DMZ 002', name: '1284' }
    ]

    return (
      <div>
        <BootstrapTable keyField='id' data={products} columns={columns} />
      </div>
    )
  }
}

export default TableWaterBalance