Buttons colvis `columns` option not working with multi-row header

lisarush

Link to test case:
Description of problem:

I am upgrading from DataTables 1.13.6 --> 2.1.8, Buttons 2.4.2 --> 3.1.2. I have tables with multi-row headers, some of which I wish to exclude from the "column visibility" list, e.g.:

      <table id="example" class="display nowrap" width="100%">
        <thead>
        <tr>
           <th rowspan="2">Name</th>
           <th rowspan="2" class="noColvis">Position</th>
           <th colspan="3">Values</th>
        </tr>
        <tr>
           <th>Val1</th>
           <th class="noColvis">Val2</th>
           <th>Val2</th>
        </tr>
        </thead>

        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>0.5</td>
            <td>Edinburgh</td>
            <td>61</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>0.5</td>
            <td>Edinburgh</td>
            <td>63</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>0.5</td>
            <td>San Francisco</td>
            <td>66</td>
          </tr>
          <tr>
            <td>Cedric Kelly</td>
            <td>Javascript Developer</td>
            <td>0.5</td>
            <td>Edinburgh</td>
            <td>22</td>
          </tr>
        </tbody>
      </table>

My colvis button is configured as such:

new DataTable('#example', {
    layout: {
        topStart: {
            buttons: [
                {
                    extend: 'colvis',
                    columns: ':not(.noColvis)'
                }
            ]
        }
    }
});

When showing the list of columns to turn on/off, it is properly hiding the "Position" column (which is essentially in row 1), but "Val2" shows in the list. This used to work previous to the upgrade. Any help/pointers would be appreciated.

Thanks!
Lisa

allan

Hi Lisa,

Here is a live demo of that happening: https://live.datatables.net/difehevu/1/edit . It certainly looks like a bug I'm afraid. Let me get back to you shortly on that - I'll dig into it a bit more.

Allan

allan

Following up on this - the issue is that with the true multi-row header support in DataTables 2, it is now possible to select columns based on any of the cells that apply to them. So in this case the "Value" colspan cell applies to Val2 and results in that column being selected.

The workaround is to add class="noColvis" to the colspan cell: https://live.datatables.net/difehevu/2/edit

The API is implementing the behaviour I wanted there, so I don't see this as a bug as such, however I do see that it isn't what is expected here. I need to have a think about how to handle this in the API.

Is that workaround viable for you?

Allan

lisarush

Hey Allan,

Thanks for the quick response, as always.
I verified that adding noColvis to the other header rows does work. It would be easy to add this as a workaround. (If a tiny bit tedious; we have 68 places with noColvis, so I'd just have a walk thru them all & see if they need a tweak.)

That being said, it's not "obvious" that this would be expected behavior. Let me know if you have any other thoughts in the next few days... (Otherwise, I will then start tweaking our tables as needed.)

Thanks & happy weekend,
Lisa

lisarush

Any further thoughts on this? (I don't want to take the effort of updating all my tables if you end up with a better solution.)