SCROLL X Breaks the resizing of the columns

[andreadrupal]

Hi, i have the need to use very large tables, and i need to enable the scrollX=true parameter in datatable. Unfortunately, the scrollX breaks the resize of the columns (the table body start the new width from 0 px).

[jeffreydwalter]

I'll have to compare the behavior in the ColReorder plugin. I think you need to set a pixel width for the table, instead of 100%.

[jeffreydwalter]

Looking at this example, it looks like you need to set the width of the dataTables_wrapper to a fixed width and the table width to 100%, like you have. Have you tried that?

div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }

[andreadrupal]

I would like not to give a fixed with, because i am in a liquid page context. The original ColReorder worked fine with the scrollX option :(

[jeffreydwalter]

No worries. You are right, this is broken. I am working on a fix and should have it later today.

[jeffreydwalter]

@andreadrupal I just committed a fix to make this plugin work better with scrollX, scrollY, and non-scroller tables. Please give it a try and let me know if you find any issues.

[jeffreydwalter]

The fix is in both the master and 3.0 release branches.

On Tue, Jul 3, 2018, 9:27 AM chandgude [email protected] wrote:

hey @jeffreydwalter https://github.com/jeffreydwalter . where do I get your fix. I am new here :(

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jeffreydwalter/ColReorderWithResize/issues/6#issuecomment-402176773, or mute the thread https://github.com/notifications/unsubscribe-auth/AAinB26L5gkbTaLgWeQqNywQ0CzqSqz7ks5uC39SgaJpZM4UEXBs .

[ShaheedHaque]

I can confirm that master (d4d9d5bec767b) with dataTables and scrollX works as expected.

[rohithtsgowda]

@jeffreydwalter @ShaheedHaque I have used the above updated ColReorderWithResize js file and trying to initialize the JS plugin with 'dom': 'Rlfrtip'. But Resize of the column is not happening but reorder is working. Please let me know if am missing anything here. My requirement is to have DataTable column resize with ScrollX or ScrollY.

$('#table').DataTable({ 'dom': 'Rlfrtip', searching: false, scrollCollapse: true, autoWidth: true, serverSide: true, lengthChange: false, scrollY: 160, deferRender: true, iDisplayLength: 300, paging: true, initComplete: function () {

[ShaheedHaque]

I use these args by default:

{
    // Add a hook to the DOM to allow additional controls to be added.
    dom: `R<'row'<'col-sm-12 col-md'l><'${selector}_controls.col-sm-12
    col-md-auto'><'col-sm-12 col-md'f>>
    <'row'<'col-sm-12'tr>>
    <'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>`,
    'colReorder': {
        'allowReorder': false,
    },
    pageLength: 25,
    scrollX: true,
    // Disable the default initial [0, 'asc'] sort.
    order: [],
    stateSave: true,
    stateDuration: -1,
};

but I also set the width:

    this.table = $(selector).dataTable();
    this.table.css('width', '100%');
    this.table.api().draw();

I hope that helps.

[luisorduz]

var contadortableAfiliado = 0; $('#tableAfiliado_wrapper .dataTables_scrollBody').on('scroll', function(e) { contadortableAfiliado++; if(contadortableAfiliado === 30 ){ tableAfiliado .order( [ 10, 'asc' ] ) .draw(); contadortableAfiliado = 0; }

});

[arindamINT]

Hello @jeffreydwalter Sir,

I am using the latest version of this js file. Recently I noticed that when the table is in scrollX: true, mode or it has a horizontal scroll feature, then when I am resing the column the header of the column are shifting to left 0 positions and after releasing the mouse it is taking again the right position with proper new width. It is only happening when the horizontal scroll is not in 0 positions.

I have also attached the video for a better understanding of the issue. VIDEO LINK: https://drive.google.com/file/d/1HysIw2kf8uaT524yelDIKxVSeSBf9hWp/view?usp=drivesdk

To resolve this issue I have added these two lines inside the resizing function. Check the attached screenshot. But unfortunately this process has not resolved the issue properly.

    this.dtOptions = {
      paging: false,
      info: false,
      searching: false,
      ordering: false,
      scrollY: 'calc(100vh - 390px)',
      scrollX: true,
      dom: 'Rlfrtip',
      colReorder: {fixedColumnsLeft: 1, fixedColumnsRight: 1 },
      autoWidth: true,
    };

/* When scrolling we need to recalculate the column sizes to allow for the shift */
this.s.dt.oInstance.fnAdjustColumnSizing( false );
/* Save the state */
this.s.dt.oInstance.oApi._fnSaveState( this.s.dt );

[arindamINT]

@jeffreydwalter Hello sir, I have noticed that if I used searching: false, then only this issue is happening, otherwise not.