Any Way To Hide Child Rows On Certain Viewports?

Joyrex

I want to hide columns that are visible on desktop/tablet on mobile and NOT have them appear as child rows when Responsive is invoked.

I have tried with the classes not-mobile, but all that does is not display the column on mobile, but still shows it as a child row.

I have set up a test case with Responsive trying to have the Salary column only appear on tablet and desktop, and never on mobile (as a column or as a child row).

http://live.datatables.net/pedixale/1/edit

Is this possible?

Joyrex

Still no luck - I've tried variations of not-mobile-l,not-mobile-lp, and if the row ends up getting hidden due to Responsive, it shows as a child row regardless.

The only thing that works is never, but of course that doesn't provide the desired effect of showing on desktop, as this hides the column always. There doesn't seem to be any variations of mobile-never, which I what I'm going for.

Joyrex

I am using Bootstrap, but I am wary of assigning any of their responsive viewport classes to the column as I suspect DataTables will have issues with that column being hidden? I might give that a try next.

Joyrex

OK, I found a solution! Using Bootstrap 4, applying the hidden-sm-down class to the th and td for the column I don't want to show on viewports ≥544px - <768px and smaller, and DataTables honors it!