Breakpoints and responsiveness

pompi

Hi there,
I want to always show the first column. In case the width exceeds the mobile breakpoint I want show all other columns. The last column should have higher priority.
I thought, that I can accomplish this with columns.classname = all, min-tablet etc.
It correctly shows only the "all" column in mobile, but shows all others in tablet view. The responsiveness breaks. Columns no longer are hidden, when they do not fit.
Is there any way to keep the responsiveness?
The min-tablet class forces columns to be visible, even if they don't fit.

Here is a codepen:
https://codepen.io/wiwo/pen/vVoPpX

colin

Hi @pompi ,

The problem is because you are using columns, and not columnDefs - see here.

Cheers,

Colin

pompi

Thx for the fast reply. Responsiveness works that way, but the "min-tablet" doesn't. How can I get both working?

colin

Hi @pompi ,

I don't understand, sorry. "min-tablet" is just a class used by Responsive - that table is being responsive as expected. Can you give more details, and reproduction steps, as to why you think it isn't, please.

Cheers,

Colin

pompi

Expected behaviour:
phone: show only column with "all" class
tablet and above: show columns with "all" and "min-tablet" class, but only show as many columns as fit.

actual bevavior:
with columnRefs: shows all columns, but only as many as fit
with Columns: in tablet shows all "min-tablet" columns even if they don't fit

I want to show a single column in <768px and as many as can fit for >768px

allan

Hi,

Yes I see what you mean. The behaviour I'm seeing is that <768px wide it will collapse to just one column. Wider than that and all columns will be shown.

The reason for that is that min-tablet is telling the columns to be shown at the wider widths, and Responsive does not currently subtract the columns that cannot be fit into the viewport (i.e. it takes the class name as the only defining property as to whether the columns should be shown or not).

That's a limitation I wasn't quite aware of and that should certainly be fixed. I've added it to our list!

Allan

pompi

ok thank you. Looking forward to that.
At least I know that it's not possible. If I really need I can do some js workaround

aldemarcalazans

Try using version 2.0.0 of dataTables.responsive.min.js. All versions above this one are bugged.
I warned DataTables group about it, many months ago, but they did nothing about it!

https://dropbox.com/s/j1k4fe3ajymru49/dataTables.responsive.min-2.0.0.zip?dl=