smasala / colresize Goto Github PK
View Code? Open in Web Editor NEWDataTables extension to make columns resizable
License: MIT License
DataTables extension to make columns resizable
License: MIT License
Steps to reproduce:
In your demo https://smasala.github.io/ColResize/, in the 2th table.
I will submit a PR to fix it.
[sory for my bad english]
When using the stateSave Datatables functionality would like the column sizes saved so when the user expands or shrinks the column size it will remember those settings the next time the table is initialized.
I'm running into an issue with ColResize when using the plugin within a single page Vue application.
It appears that the plugin is holding something from the table in memory, and each time a DataTable within the application is visited, the memory size grows by the table size, but it is not released when the table is navigated away from.
The table is being properly destroyed, but something within ColResize is holding onto memory references within the table, and causing a memory leak.
I've tried adding additional calls in the destroy() function within the plugin to try to remove more listeners and null more objects, but I'm not having any success.
Wanted to see if anyone had any issues like this in the past or any guidance about how ColResize allocates memory.
Google Chrome 71
Issue appears with stateSave: true (both DT and colResize) and with colresize`s scrollY: true:
$('#content-table').DataTable( {
colResize: {
scrollY: 500,
minColumnWidth: 50,
stateSave: true
},
autoWidth: false,
scrollX: false,
stateSave: true
} );
This causes inconsistency after page reloads: only the header width got saved, but not column width.
Disabling scrollY under colResize fix this behaviour but the table is no longer scrollable.
Please add option to disable real-time drag (live drag). Because it is performing slower specially when dealing with huge or extremely complicated tables.
I have created jsFiddle of other third party jQuery plugin which is having same feature.
http://jsfiddle.net/eLm6ugp7/183/
Thanks,
Tanmay
Hi
Can you maybe give me some pointer what to change in case I just want to change/resize the percentage distribution of the table columns?
Background is that I do not want vertical scrollbars and always fit everything into the cells (with ellipsis or line breaks depending on the cell), however it would be great if the user could change the size distribution.
The table is already setup with percent-wise column widths.
See here.
https://jsfiddle.net/bababalcksheep/ftmsp3rg/
It will be helpfulll if all datatables plugins and styles are supported and shown in demo as well
Please add support for tables with "direction:trl" style.
Using scrollY option in the plugin prevents clicking on actual table.
Using the tfoot
tag in the table causes the DataTable to break when using this plugin.
Example: https://jsfiddle.net/bababalcksheep/ftmsp3rg/
Current workaround: use the DT Footer callback: https://datatables.net/examples/advanced_init/footer_callback.html
Hello Team,
I want to integrate Column resize functionality into my react data table. Is it possible ? If it's possible , How can i import?
Hi,
Thanks for a great plugin. I'm unable to set 100% width on the table here is the issue https://codepen.io/yurenlimbu/pen/YgwemY. I want to create full width as parent div. How can I set this?
While playing with the demo I noticed that if you grab a bar and drag it, it doesn't quite stay insync with the columns. To see, pick up the bar between the first and second columns and then drag it all the way to the left, then as far as possible to the right (blocked by the next bar - nice touch!). The sorting icon can now be seen to the right of the drag bar. If you use the inspect you can see a bit more easily the cells not lining up with the bars.
I suspect its a sub-pixel rendering issue. On each mouse move there is just a small offset which is gradually adding up. One option might be to use getBoundingClientRect()
which will get sizes with sub-pixel precision, while another option might be to redraw the bars to match the columns when mouseup
is triggered (although not quite as nice UX).
One way or another - this is superb and easily the best column resizing I've seen for DataTables!
Hi,
Thanks for a great plugin.
I'm trying to create ColResize with tabs but only working on the first active tab. Here is the example https://codepen.io/yurenlimbu/pen/PMwzEy?editors=1010.
While implementing select all in check box in the datatable , then the sort option is enabled in table header and also automatically removing the select all option in checkbox once its data loaded from backend and also we made the data orderable is false to fix this issue but its is not working with colresize and also not adapting column defs in datatable.
Hi,
I have about 90 columns in a table. Since it is made according to the width of the area, 90 columns come together and are not read In addition, sizing is not possible on the width stably.
Strange side effects when zooming on the page with CTRL + '+'
see: #2 (comment)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.