Dynamically change column priority

JFPaquin

Howdy!

I have a datatable with 15 columns. This datatable is fed through an ajax call to an API.
On the datatable initialization, I set a certain responsivePriority to these columns.

I'd like my user to be able to set their own priority when viewing the table in case one of the column they're interested in is currently hidden because of their screen resolution.

Simplified version:
Datatable as Column A, B, C, D and E

User only see A, B, C and D due to screen resolution.
I'd like user to be able to switch D with E.

Is there any way to achieve this with Datatables?
Should I be looking into column responsiveness or into switching the data from column E to column D?

Thanks!

colin

Hi @JFPaquin ,

You should be able to use a combination of ColReorder and Responsive. colReorder.move() can be used to change the columns.

Hope that does the trick,

Cheers,

Colin

JFPaquin

Hi @colin ,

I tried that, but i'm having an issue when trying to switch a shown column with an hidden column.

The colReorder works perfectly when both column are visible, but if you shrink the window to make the last column disapear and try to switch them again the column do switch, but the hidden column stays hidden.

How can I switch the visibility alongside with the order?

I've tried using the column().visible() status but that does not work in this context since the hidden column is considered visible.

You can see this behavior in this jsfiddle : https://jsfiddle.net/ze40cynj/

colin

Hi @JFPaquin ,

Thanks for that test case, that really helped. I see what you mean - I tried calling reponsive.rebuild() and it has no effect. There's also another oddity that often the column doesn't reappear even when there is space.

I've created a ticket for this (DD-810) and I'll report back here when we have a better understanding of what's going. Apologies for the inconvenience,

Cheers,

Colin

JFPaquin

Hi @colin ,

Ok, thanks!
Is there anywhere I can follow progress on this or is it purely internal?

colin

Hi @JFPaquin ,

Just internal, but we update the forum with progressions.

Cheers,

Colin

JFPaquin

Hello @colin

Has there been any updates on this? I'll start looking for a work around, but if you have any clues that would be helpful.

Thanks!

colin

Hi @JFPaquin ,

None yet, I'm afraid, and I can't see it happening in the next month or so. I'm not even sure what a valid workaround would look like - the only thing that comes to mind is to check to see if either column is hidden and then prevent the switching.

Cheers,

Colin

JFPaquin

Hi @colin ,

I don't want to prevent the switching if one of them is hidden, I want to switch their position and, if the targetColumn is hidden, switch their respective visibility as well.

I've manage to find a way around the problem. Maybe this will help you pinpoint the problem in the future.

I implemented a setColumnVis function to dataTables.responsive, which is just a public caller to the private function with the same name:

Api.register( 'setColumnVis()', function (col, showHide) {
    return this.iterator( 'table', function ( ctx ) {
        if ( ctx._responsive ) {
            ctx._responsive._setColumnVis(col, showHide);
        }
    } );
} );

Before my colReorder.move, I check whether the column i want to switch with is hidden or not using table.column(targetColumnIndex).responsiveHidden().

If it is hidden, i call:

table.setColumnVis(sourceColumnIndex, false);
table.setColumnVis(targetColumnIndex, true);

And then I switch them.

Hope this helps a little

colin

Hi @JFPaquin ,

Excellent, that's a tidy workaround - I'll let you know here when the issue is resolved.

Cheers,

Colin