Responsive table issues

Charley

1. If I set data-priority tags on the 2nd 3rd and 4th and last column of a table, but not the first, when the table shrinks enough so that the first column is hidden, there's no plus sign to show the table data.
2. if I have an additional table header row with column based filters, and the page shrinks enough to make a column get hidden, the extra header row and input box isn't hidden. This may compound some of the other issues that I'm seeing. Incidentally, my aggregate footer rows get hidden as expected, as does the column visibility button
3. If I have a table with a bunch of rows, and I set the priority on 4 of them (as mentioned in the first issue), none of those 4 ever get hidden no matter how small the page gets. Possibly this is caused by the fact that there are still a bunch of extra unhidden header rows due to issue 2
4. if I have tooltips/popovers/confirmations that I set up in the table, those don't get cloned in the responsive/hidden rows. This is especially problematic when I have something like a delete button with using a confirmation widget to make deletion a 2 step process, but it's annoying when I have a tooltip for an acronym in the table that winds up not working either.

I'll work on examples shortly

Charley

https://jsfiddle.net/charleycartee/spjton6m/5/

for 1: just shrink the page. as you shrink it, the plus sign appears in the first column. Once the first column vanishes, there's no plus sign

Note: this doesn't necessarily happen in the /show version of the fiddle; you can't get the viewport down small enough

for 2 shrink the page. Note that the search box header row doesn't get hidden as the table shrinks

Note that once column 1 vanishes, it's footer row DOES.
Use column visibility, note that the search boxes vanish with their columns

for 3: I think that this one is an artifact of 2, which prevented me from getting the viewport small enough to force it to hide some columns.

for 4
while file size, click PD&E, note popover. Click again to dismiss
shrink page until phase disappears
click plus sign
click PD&E
Note no popover appears

colin

Hi @Charley ,

1. If the first column may be hidden, you would want to put that plus sign into its own column, as in this example

2. I reproduce this with a simpler setup

I/we will get back to you about the others ones!

Cheers,

Colin

allan

Yes, 1 is a bug for certain. It uses display:none to hide the responsive columns, but that means they are still in the DOM. The Responsive CSS uses :first-child by default, which means that the responsive control is hidden in this situation. There isn't a 'first visible child' selector as far as I am aware, so the workaround at the moment is to use a dedicated column as Colin suggested like in this example.

2 - A limitation I'm afraid. Responsive 2 does not currently cope with multi-row headers. That is something that I will be addressing in future.

3 - Yup. That's a knock on from 2 I think.

4 - By default Responsive will copy the original elements from the cells rather than reusing them and moving them around the DOM. While easier and more performant, that has the disadvantage of events not being carried over. You could try using the experimental listHiddenNodes renderer which does more the elements around. I call it "experimental" as it hasn't been widely used in production yet.

Allan

Charley

any particular reason you use display:none rather than a class that has display:none?

The latter should be addressable vs css (you can, in theory, use a css selector on the style tag but thats incredibly fragile).

The example shows the plus and some hidden fields all of the time; is that just because of the size of that particular table?

re2: do you know what sort of timeline you mean by "in future" … I have tables in production now with that issue, so I need to know whether I need to look into addressing it myself

re4: I may take a look at that but I've at least temporarily addressed it by forcing it to never hide that column.

allan

any particular reason you use display:none rather than a class that has display:none?

The primary reason was to reduce dependency on the Responsive CSS being loaded. This way it works without the default CSS file. That said, I would be open to changing that if it would resolve this issue, but I'm not certain that it would. There isn't a 'first without this class' selector (happy to be wrong there!).

The example shows the plus and some hidden fields all of the time; is that just because of the size of that particular table?

Correct. Also the container for the table has a max-width restricting its size so it is always effectively in responsive mode there.

re2: do you know what sort of timeline you mean by "in future"

Its not currently on my development chart I'm afraid. I've made changes in the dev branch for DataTables 2 which will help support this, but I can't realistically see that being released within the next six months (loads still to do there).

Allan

Charley

https://stackoverflow.com/questions/25166234/css-first-child-without-certain-class

Boltclock's answer here might be relevant, haven't dug into it. I might play around with it