Expand button hidden when first column is hidden

[aldarund]

I was using datatables-responsive 1.0.6. Now i upgraded to datatables-responsive 2.1.0. And here is a problem - when second (any but not the first) set to be hidden last, the expand button doesn't appear after first column is hidden using display:none but not removed from the dom. In 1.0.6 it was working fine. The problem is that 1.0.6 was removing and adding row into dom, and 2.1.0 just set display:none to hidden elements, but the css style from datatables-responsive doesn't account for that and only show expand button for first row and when its hidden their css rule just dont work.

tbody > tr > th:first-child:before

[DataTables]

Thanks for noting this. I agree that is an issue. I'll look into what I can do to address this (I'm not yet sure!).

[aldarund]

@DataTables any workaround for this? It kind of breaking my app so i cant use recent version of datatable responsive.

[DataTables]

Yo could use a designated column as the control column instead.

[OlivierGrimard]

+ 1 Same issue when I use the class "never" on the first column. When I set a column control, I cannot expand rows.

https://jsfiddle.net/gv9qLwz7/5/

[DevCentre]

Hey there !

I know this is an old thread, but I was stumbling around to find a solution to that and I’ve just figured out a ‘fix’ for this.

I don’t know if this is going to work on your app - depending on how it logics works - but I came with and simple solution.

I moved my hidden column to the last position in table, instead of the first one, then the expand button is working again.

Hope this can help someone struggling with the same problem.

[Su-patel]

Having same issue, There should be proper solution from the plugin itself, other than just hacks

[codespacing]

For anyone still struggling with this issue, please check this jsFiddle to see how i've managed to fix it. In my jsFiddle, i added the fixes to the original example here.

How it works?

I used the event "column-visibility.dt" to get the first column of the first row of the table, then, searched for the presence of the class name ".dtr-control" in that column. If it doesn't exist (which means that "colvis" removed it), i simply add the class name ".dtr-control" to every first column of every row in the table. Once done, i adjust and recalculate the table columns.

I hope this will help someone here.

[DataTables]

I'd forgotten about this issue being open I'm afraid. It has already been fixed in the latest versions of Responsive - see this example: http://live.datatables.net/kewisubu/1/edit .

[codespacing]

Just tried your example. I'm afraid it doesn't work with "colvis". I created a new example based on yours with "colvis" activated so you can check it. You can find it here. If you resize the screen to about 350px and use "Column Visibility", you'll see what i mean.

Thank you

[DataTables]

Yup - looks like it is missing a listener for the column-visibility event handler there - thanks.

[DataTables]

https://jsfiddle.net/tub17rs3/

Got it this time - thank you :-)

[codespacing]

Yes it works now. Can you please provide some details about the fixes? Thank you

[DataTables]

https://github.com/DataTables/Responsive/commit/aef27e96aa109f5f4bd36026cf7de3c49d7e1c44

It just needed to call the method that is used to determine which column should be the control class after the column visibility changed. I clean missed that before thinking a draw would be enough. Not so!

[codespacing]

Thanks a bunch :)