New colResize Option Is Awesome! But Requires Care When Using With colReorder

[chbocca]

I find the new colResize plugin by Daniel Hobi awesome!

Allan mentions it in What's New. Although the free demo has expired, the plugin definitely works.

Minor detail, but when using in conjunction with colReorder, the user needs to resize only enough to not drag target column too far into next column, else the colReorder kicks in.

Here's link to my simple demo.

I tried mitigating with colReorder.realtime() set to false, but to no avail.

Might be better for end users to suppress colReorder while colResize is engaged. I will try to do this with jQuery .on action, but in mean time, heads-up.

Will send separate note to Daniel as well.

But again, very welcomed addition to dt!

[zhihui-shi]

I ran into the same problem,can someone please give me a solution for this?

[dhobi]

A possible solution would be to temporarily disable the colReorder plugin while the resize is in progress.
You can do this in the available resize start / end hooks. Something like:

var table = $('#example').DataTable({
  colResize: {
    ...
    onResizeStart: function() { table.colReorder.enable(false); }
    onResizeEnd: function() { table.colReorder.enable(true); }
    ...
  }
});

[porrey]

Even after disabling column reorder, the column size resets after moving any column.

[chbocca]

@porrey. I just ran in demo above and did not find that to be case. Column size stayed as adjusted after performing column reorder.

[chbocca]

@dhobi. A belated thank you!

[porrey]

Is state saving on or off?

[chbocca]

On, I believe. You can see the code just by right click / view source.

[porrey]

The issue occurs when a column width is set in columns[] or columnDefs[] during table initialization (width: 100px; for example). I am initializing the width of my columns.

This video demonstrates the behavoir: https://youtu.be/KOK81An73_0

[chbocca]

ouch. that one will have to be for @dhobi. c

[chbocca]

one thought. you might try setting column widths in style sheet instead of dt.

[dhobi]

@porrey Do you have a minimal example to reproduce the issue?

As the plugin sets the column.width property and the dom (th).outerWidth() I have to see what exactly is going on. Is the table reinitialized on column drag?

[porrey]

Started working on extracting the example that mimics my actual application (it uses server side processing). I am unable to get the column resizing to work but here is the link. Work in progress...

http://live.datatables.net/porrey/4/edit

[akeni]

Another note,

the ColResize library must be initialized before ColReorder, or else the event listener will call ColReorder first, thus the flag set does not work

[Talkabout]

For those facing this problem:

In order to make sure that colResize is registered before colReorder we have to tweak the event logic slightly. Here is the part I added:

    // We need to make sure that colResize plugin is registered before colReorder plugin in preInit to be able
    // to prevent reorder being triggered when actually resize is expected.
    const oEvents = $._data(document, 'events');
    const iReorderIndex = oEvents.preInit.findIndex((oEvent) => oEvent.namespace == 'colReorder.dt');

    if (iReorderIndex > -1) {
      const iResizeIndex = oEvents.preInit.findIndex((oEvent) => oEvent.namespace == 'colResize.dt');

      if (iResizeIndex > -1 && iResizeIndex > iReorderIndex) {
        const aEvents = oEvents.preInit.splice(iResizeIndex, 1);
        oEvents.preInit.splice(iReorderIndex, 0, aEvents[0]);
      }
    }

It was added after the "preInit" event handler:

With this change I am able to disable "reorder" plugin in "onResizeStart" and enable it again in "onResizeEnd":

      colResize: {
        isEnabled: true,
        saveState: false,
        isResizable: (iColumn) => {
          return true;
        },
        onResizeStart: function() { $oTable.colReorder.disable(); },
        onResizeEnd: function() { $oTable.table().colReorder.enable(); }
      }

Dealing with the event queue of jquery is not the nicest solution but it works. Currently I don't see any other solution as the reorder plugin does not provide any functionality that would help.

[diskb]

Try this workaround:

var table = $('#example').DataTable({
  colResize: {
    ...
    onResize: function () { throw new Error('Workaround: resizing works fine!'); }
    ...
  }
});

After that, sorting and reordering columns works as it should for me. I tested with and without the savestate option. The only one lack is that it displays an error in the console.