Bootstrap-table: Table structure breaks with column visibility control enabled and multirow headers

[johnnymetz]

Table structure breaks using the data-show-columns="true" attribute on a table equipped with a multirow header. Try hiding a column in the following example: https://live.bootstrap-table.com/code/wenzhixin/1409

It appears the cell in any header row above the lowest row aren't hidden.

SO question + more examples here: https://stackoverflow.com/questions/44104377/bootstrap-table-table-structure-breaks-when-hiding-colspan-columns

[djhvscf]

Hi @jonathanmetz it is an issue. This is included to be fied in our next release 1.12.0

[sebastiandeppisch]

I have the same issue. Especially if I use colspan:
https://live.bootstrap-table.com/code/wenzhixin/1408 (try to hide 3 or 4)

[dskilken]

This is the same problem as: #3560. If you use the methods to hide, it cannot handle multiple rows in the thead. This has to do with the way the table is initialized and built. I had to work around this by using divs in the header cells. This is not a small issue because it affects other plug-ins like Sticky-Header and Fixed-Column. As a work around to your example, you would have to create your own javascript to hide columns using jQuery. If you use unique classes on each column, you can easily hide a class in jquery. If you are using extensions like sticky header, you can't really do this, and are stuck working around the format.

[dskilken]

If this is fixed in a future release, please make sure to test it with other extensions - thanks

[mkyral]

Hi,
I run into this issue as well. I have a quite complex header with 4 rows (many colspan and rowspan). The user request is ability to collapse multiple columns within the colspan group to one column. It worked correctly when I hide several columns. But from some number of columns, the header breaks. Colspan was not counted correctly.

I've investigated this issue and find out, that function setFieldIndex() does not handle correctly the rowspan/colspan combination.

This code:

for (let k = 0; k < rowspan; k++) {
  flag[i + k][index] = true
}
for (let k = 0; k < colspan; k++) {
  flag[i][index + k] = true
}

sets first rowspan and then colspan. It works if there is only rowspan or only colspan. But in case when both are set, it sets true only for first column of all other rows.

e.g. rowspan=3, colspan=3 it will generate:

true|true|true|
true|false|false|
true|false|false|

But should generate:

true|true|true|
true|true|true|
true|true|true|

So fix should be:

for (let k = 0; k < rowspan; k++) {
  for (let j = 0; j < colspan; j++) {
    flag[i + k][index+j] = true
  }
}

… for each row in rowspan will set colspan number of columns to true.

[UtechtDustin]

@mkyral could you maybe create a pull request and/or provide us an example ?
Im not really conform with that part of the source code, but just c&p your fix but i still get the same issue on the example from @johnnymetz

@djhvscf Are you conform with that part ?

[wenzhixin]

ref #5176

[UtechtDustin]

@wenzhixin why the ref for #5176 the PR dont seems to fix that issue?

[wenzhixin]

@UtechtDustin Solve the complex header problem what @mkyral said.