jeffreydwalter / colreorderwithresize Goto Github PK

I am trying to use this js ColReorderWithResize.js but Input field append with header is not working. This plugin is not allow me to type the text in the input field. what is the solution?

When resizing a column, column header seems to be moving first, then on mouse leave the column content moves.

And also when resizing, some of the columns are being removed from the DOM.

Here is my data table configuration

var table = $('#example').DataTable({
        'ajax': 'https://api.myjson.com/bins/qgcu',
        'dom': 'Rlfrtip',
        'colReorder': {
            'allowReorder': true
        }
});

It works fine as an independent piece of code but causing a problem when I put into my application.

I agree that it could be a problem with my application also, but if anyone can give me some clues about such behavior, it would be helpful for my further investigation.

Hey there,

I just wanted to share a quick fix I've put in which has made this plugin work much better for me.

Firstly, I was having issues with column indexes changing when this plugin is combined with a state save. This meant that some columns would have incorrect widths applied to them when restored. To remediate this I check for the title attribute to ensure it matches (instead of trusting the index).

Secondly I found that using the jquery .width() sometimes reported back the wrong width. I'm not sure why this happens, perhaps some quirk of jquery. In any case, using the width attribute from the inline style gave me much better results.

To apply these fixes, on line 1263, comment out:

this.s.dt.aoColumns[colResized].sWidth = $(this.s.mouse.resizeElem).width() + "px";

and replace with:

                var thisColTitle = this.s.mouse.resizeElem[0].textContent;
                for (var i = 0; i < this.s.dt.aoColumns.length; i++) {
                    if (this.s.dt.aoColumns[i].sTitle === thisColTitle) {
                        this.s.dt.aoColumns[i].sWidth = this.s.mouse.resizeElem[0].style.width;
                    }
                }

Lastly, whilst I'm here, I figured I may as well share my state saving code as it's alluded to elsewhere but never described. I save the widths as percentages but then restore into px, so that they should be preserved across all screen sizes.

In the datatables options add:

        stateSave: true,
        stateLoadParams: function(settings, data) {
          if (data.columnWidths) {
            data.columnWidths.forEach((item) => {
              const thisColIdx = settings.aoColumns.findIndex(x => x.sTitle === item.key);
              const newWidth = (parseInt(item.value) / 100) * tableWidth; 
              settings.aoColumns[thisColIdx].sWidthOrig = `${newWidth}px`
            });
          }
        },
        stateSaveParams: function(settings, data) {
          // save column widths
          data.columnWidths = [];
          settings.aoColumns.forEach((item) => {
            if (item.sWidth != null) {
              const newWidth = (parseInt(item.sWidth) / tableWidth) * 100; 
              data.columnWidths.push({key: item.sTitle, value: `${newWidth}%`});
            }
          });
        },

Note that this uses ES6 so will need transpiled/polyfilled or modified manually for ES5. The tableWidth is the width of your table.
Hope this helps someone - and thanks a lot Jeffrey for the great plugin!

I am trying
ColReorderWithResize with responsive:true but I could not resize my columns.

Demo code:

        var table =  $('#demo_datatable').DataTable({
	responsive: true, 
	"dom": '<"custom-table-header"><"custom-table-body"rt><"custom-table-footer"lip>'
	});
	new $.fn.dataTable.ColReorder(table);

Expected output:

Column resize should be work and other column should go under expand section.

Thanks in Advance..

Jquery Datatable column Reorder not working when drag a column one place into another column place in table.
for example column reorder position(1st position to 4th position)

ColReorder: [0, 1, 2, 3, 4, 5] positon not changed in data params in stateSaveCallback function, when drag the columns in jquery datatable.

https://jsfiddle.net/dinesh_raja/jtrnudqf/8/

When using this project with DataTables.destroy(), I get an error like this:

Uncaught TypeError: Cannot read properties of null (reading 'dt')
    at ColReorder._fnStateSave (ColReorderWithResize.js:903:32)
    at ce.fn.init.<anonymous> (ColReorderWithResize.js:773:31)
    at jquery.dataTables.min.js:4:47589
    at Function.map (jquery.min.js:2:3971)
    at R (jquery.dataTables.min.js:4:47536)
    at de (jquery.dataTables.min.js:4:45096)
    at B.<anonymous> (jquery.dataTables.min.js:4:63849)
    at B.iterator (jquery.dataTables.min.js:4:52119)
    at B.<anonymous> (jquery.dataTables.min.js:4:63713)
    at B.visible (jquery.dataTables.min.js:4:53602)

This was also reported upstream and upstream has a fix in this commit. Please apply!

Hi,

Any way you may be able to create a couple tags so this script can be used with jsdelivr CDN?

It looks like you've marked this as 2.0 in the license file.

https://www.jsdelivr.com/?docs=gh

It requires at least one of these to work.

Thanks

Hi, I'm using Datatable with ColReorderWithResize and I'm facing the issue that is when I try to resize one column then it resizes all columns but I want the Left of the columns should be fixed when resizing.

I'd like to clean up this code base because

1. I'd like to use it
2. I'd like to modify it and
3. it will be much easier to use and much easier to modify if we clean it up first

For example:

• there are 16 unused variables. this creates unnecessary confusion, especially with the similar naming conventions
• there are various redundant snippets of code that can be consolidated into reusable functions
• there are a number of implied globals which will raise errors if we put the code through a strict parser

I'd like to fix all of these and submit them back into a pull request.

In addition, I'd like to convert this to typescript and gradually add in the various type checking and other benefits that Typescript offers.

All of the above will be a lot of changes but I'm sure will make this project a lot more valuable to others. Will you accept these changes if I put them all into a pull request? Alternatively, if you prefer, I can just fork this and make the changes there, and we can leave them as separate forked repos.

Is there any constraint regarding if columns are sortable or not?
I currently have a few datatables (Datatables version 1.1012), where columns with definition "bSortable": false are not resizable as well. If I make them sortable, I can resize the tables.
Thanks

Hello,

could you please include package.json file into the repo, so we can include it in our own package.json files and install it easily using "npm install".

Thanks.

Somewhere in the merge of the last PR a comma was dropped after allowResize: true. It's causing a Uncaught SyntaxError: Unexpected identifier error.

https://github.com/jeffreydwalter/ColReorderWithResize/blob/master/ColReorderWithResize.js#L1620

I think it would be useful to have a kind of stateSave option to save columns width and location between client sessions.

When I move a column, the colReorder.order() function still returns the indexes in the default order.

Unable to resize the columns unless I keep ordering option to be true.
I do not wish to give sorting abilities to the user using the datatables because I manage that from the server.
I have reviewed the issue, will try to document it.

In DataTables 1.10.2 https://github.com/DataTables/DataTables/blob/master/media/js/jquery.dataTables.js#L1783
_fnCompatMap( init, 'ordering', 'bSort' ); sets bsort option to be false when i set the ordering option as false.

This results in the column[n].bsortable option to be false as per https://github.com/DataTables/DataTables/blob/master/media/js/jquery.dataTables.js#L2083

With the column[n].bsortable option set to false the plugin cannot set {'cursor': 'col-resize'} on the column, thus disabling the drag and resize functionality of the columns.
https://github.com/jeffreydwalter/ColReorderWithResize/blob/master/ColReorderWithResize.js#L960

Possible fix: checking if (!aoColumns[i].bSortable === false || that.s.dt.oFeatures.bSort === false) on https://github.com/jeffreydwalter/ColReorderWithResize/blob/master/ColReorderWithResize.js#L960
Apologies for the long read.

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).

With "allowReorder": false, and "allowResize": true, I am facing columnWidth resizing issue whenever I try to maximize the column only the header is maximizing horizontally but the below column size are remaining as it is
This was working fine earlier and has caused issues after the latest chrome 91 update.
Attaching the screenshot for reference. Any help in resolving this is appreciated.
Thanks in Advance.

Hello @jeffreydwalter ,

Thank for this plugin. It works fine except the stateSave part for me. Please see the fiddle below.

https://jsfiddle.net/t5L29opg/3/

It doesn't save the colorder and colSize. Please let me know if you need more information.

Thanks again !
-Mag

Even when explicitly setting word-break: break-all the cell does not break a long string into multiple lines to adjust for the width resizing.

Seems like minimal column width is based on column content, but sometimes it is much reliable not to wrap contenton border but to hide the rest of it. This also let the table to have equal row heights and looks good.

Now if we use white-space:nowrap; over the datatable we can only make widths bigger, but not smaller.

I would be very cool feature i guess, to have fixed minimal width as an option.

Unfortunately, the functionality breaks with FixedHeader enabled.

The plugin works nicely with datatables 1.10.12, however I can't save the current state after resizing some columns. Do you have any tips how can I achieve saving state?

Thanks

I am only able to do reordering of columns but resizing is not working for me , any specific reason ?

When a resize is finished, a "click" event is triggered, which causes a resorting for the column. Is it possible to avoid it?

It looks like the code contemplates this but doesn't yet do it-- multiple variables such as $scrollBodyThSizing are set to find the .dataTables_sizing elements, but none of them actually set them, which is a reason (possibly among others, not sure) that this library is not working for me with my Datatables.

Am using the following options:

 {
    dom: 'Rlfrtip',
    data: data,
    deferRender: true,
    scrollCollapse: true,
    scroller: true,
    scrollY: 300,
    ordering: false
  }

Any suggestions?