Hi, Is there a way I can use ColReorder to reorder even the responsive collapsed columns ?

praveenb

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

kthorngren

Yes. Here is an example of ColReorder with Responsive.

Kevin

praveenb

Thanks for the response. But even in this example I'm unable to reorder the headers in responsive view.

kthorngren

But even in this example I'm unable to reorder the headers in responsive view.

I don't believe there is an integration between Responsive and ColReorder to allow for dragging child rows. This would be custom code. Maybe you can use responsive.details.renderer to control the order of the displayed child rows. Here is an example.

Maybe you can provide details of how you want this to work.

Kevin

praveenb

I want to give logged in users the ability to reorder the columns. Each user can have their own sequence of columns. The state is then saved in db to be used when users login again.
So I have to give them the ability to reorder all the columns. Not just the columns shown in the table but also the responsive ones.

kthorngren

I think this would be possible but will require custom coding and thought about how the process will work. Responsive can have a variable number of columns hidden. I believe by default the hidden columns start with the right most columns but this behavior can be changed by defining priorities and/or classes.

How will the user define he order of the Responsive child rows? Drag and drop of the child rows or based on the column order of a table with all rows shown.

The columns parameter of the responsive.details.renderer has a hidden property. You can loop through all the columns, get the hidden columns then loop through the saved child row order to display the hidden child rows in order.

Kevin

praveenb

Responsive rows are not defined by user but will be based on column order of the table with all rows shown

kthorngren

with all rows shown

Are you asking to show all the table rows in the responsive child rows?

I never paid attention to the default order that responsive adds rows to the child rows but it does seem to be in the column order of the table. Try this example:
http://live.datatables.net/vukeqeta/1/edit

The Start Date column will be hidden first. Move it between Office and Age. As you shrink the table you will see the child rows are added in the re-ordered order of the table. Is this what you are looking for?

Can you provide an example showing what you have and describe the exact behavior you want to so we can help. You can update my example.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

praveenb

"The Start Date column will be hidden first."

I want to be able to reorder Start Date column even when it is hidden. Is that even possible ?
Right now the colReorder extension doesn't allow me to reorder hidden(responsive) columns

kthorngren

There is not a built in way to reorder the columns hidden by Responsive. You could build some custom code that did this. You could build a button, maybe something similar to the column visibility button that would list all the column titles. You can enable drag and drop for the list and when changed use colReorder.order() to set the new column order.

You can loop through all the columns with columns().every() and use column().header() to get the header title. Use a global variable to keep track of the initial column order. Next create something that lists all the column titles that are draggable. These steps should be done in initComplete.

In your drag/drop event handler calculate the new column order then apply it using `-api colReorder.order(). not simple but not terribly difficult. If you want to try this please update my example with what you try. We can look at the updated example to help.

Kevin

praveenb

Thank you. I'll try this and let you know if it works.

setwebmaster

Hi there @kthorngren I have the exact same need as @praveenb and I have successfully implemented the colreorder within the colvis button BUT I do have a problem with the responsive plugin.

Effectively, if I reorder the columns in a way that would bring a column which is actually hidden by the responsive plugin into a visible position, nothing happens (the colReorder.order() gives me the new order, but the displayed data is not updated).

I tried forcing the responsive plugin to rebuild using

table.responsive.rebuild();
table.responsive.recalc();

Would you have an idea of a way to force responsive to really recalculate everything based on the new columns order? As right now (as much as I know), it seems like the colReorder "works" in the backend, but it does not update anything on the columns so I think calling table.responsive.rebuild() and then recalc() does nothing as effectively nothing changed on the html dom nodes....

Thanks in advance for any help!

setwebmaster

As of now, the only solution I found was to target the column that was moved to a new position, then check with the table.column(newColumnIndex).visible() if it was supposed to be visible or not and if that is true, I force a refresh like so:

let newColumnVisibilityStatus = table.column(newColumnIndex).visible();
if (newColumnVisibilityStatus == true)
{
    table.column(newColumnIndex).visible(false);
    table.column(newColumnIndex).visible(true);
}

This causes the Responsive plugin to recalculate as I want but I'm not sure that's the best way to do it (Would you mind giving me your thoughts on that @allan ?)

The problems I see with it are:
- It seems a bit overkill to force refresh like that but I don't see any other way right now... hoping someone will have a genius idea ahah
- It causes a visual glitch where the column that was moved in the ColVis button collection sees its indicator of visibility being toggled on and off

kthorngren

@setwebmaster Can you provide a test case showing what you are doing?

I updated my above example to with button that swaps the order of the Salary (Responsive hidden) and Position (visible). Simply using the colReorder.order() API changes the order and Responsive is automatically updated. See this example:
http://live.datatables.net/vukeqeta/3/edit

Kevin

setwebmaster

@kthorngren that's weird. I am using the colReorder.move() function instead of the colReorder(), but I think it should give the same results...

One big difference though is that I don't use the same versions of plugins/extensions (For instance 'm using Responsive 2.2.3 so that might cause a different behavior).

I will try updating the libraries to the latest version to see if it still happens (I didn't want to because I have a lot of "custom code" that I'm almost certain will break with some of the extensions being updated, but that's life ahah :P )

At least I know from the example that after reordering, the responsive plugin should kick in automatically so I know it's something weird with my case and not the library itself.

There is one more thing that I saw that may cause a different behavior, in my case I did specify the same priority for all columns (because I want users to be able to define which columns they want to see and in which order, in which case I cannot use the predefined "priority" as this would break their ability to select a "less important" column as being the priority for them

Thanks for your comment, I will try to find the time to update my libraries during the week nights and comment back with my findings (hoping I'll have time hehe, I'm working on that on my spare time)