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

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

praveenbpraveenb Posts: 10Questions: 2Answers: 0
edited May 21 in ColReorder

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

Answers

  • kthorngrenkthorngren Posts: 13,580Questions: 25Answers: 3,194

    Yes. Here is an example of ColReorder with Responsive.

    Kevin

  • praveenbpraveenb Posts: 10Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 13,580Questions: 25Answers: 3,194

    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

  • praveenbpraveenb Posts: 10Questions: 2Answers: 0

    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.

  • kthorngrenkthorngren Posts: 13,580Questions: 25Answers: 3,194

    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

  • praveenbpraveenb Posts: 10Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 13,580Questions: 25Answers: 3,194

    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

  • praveenbpraveenb Posts: 10Questions: 2Answers: 0

    "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

  • kthorngrenkthorngren Posts: 13,580Questions: 25Answers: 3,194
    edited May 23

    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

  • praveenbpraveenb Posts: 10Questions: 2Answers: 0

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

Sign In or Register to comment.