Dynamic column #1144
Dynamic column #1144
Conversation
There was a problem hiding this comment.
Wow, I never thought anyone would tackle this!
I have some remarks on the dynamic column count feature but overall it's pretty good, it follows on the original logic which was already (almost) expandable.
The resizable columns are a bit rough but hopefully it can be smoothed out. (Otherwise, I'd be happy just merging the dynamic columns first! We'll see)
| localStorage.setItem(`resizeColumn${index}`, currentHeader.style.width); | ||
| currentHeader = null; | ||
| } | ||
| document.removeEventListener('mousemove', resizeColumn); |
There was a problem hiding this comment.
I feel like this function needs a way to block the sort-on-click behavior that datatables has;
Currently if I drag to resize a column and release the mouse while in the column, it'll trigger a sort, which is very disorienting and resets the column width.
Screen.Recording.2024-12-31.043918.mp4
|
|
||
| function resizeColumn(event) { | ||
| if (currentHeader) { | ||
| const newWidth = startWidth + (event.clientX - startX); |
There was a problem hiding this comment.
This calculation is very inaccurate to me some times - I have to drag the mouse pretty far before the column width starts reacting (as seen in the screen recording in the other comment)
Some other times, it will violently snap the column width to a very different value as soon as I start sliding.
| @@ -638,11 +636,9 @@ body.swal2-shown>[aria-hidden="true"] { | |||
| } | |||
|
|
|||
| #i2, | |||
| #customheader1, | |||
| #customheader2, | |||
| [id^="customheader"], | |||
There was a problem hiding this comment.
These changes seem to only collapse the headers, not the columns.
|
maybe fix:
msedge_N2WmdGkdhh.mp4 |
public/js/index.js
Outdated
| @@ -819,6 +819,7 @@ Index.resizableColumns = function () { | |||
| // init | |||
| header.addEventListener('mousedown', function (event) { | |||
| if (event.offsetX > header.offsetWidth - 10) { | |||
| event.preventDefault(); | |||
There was a problem hiding this comment.
This change doesn't seem to fix anything for me on Firefox unfortunately.
public/js/index.js
Outdated
| @@ -856,6 +858,8 @@ Index.resizableColumns = function () { | |||
| document.removeEventListener('mousemove', resizeColumn); | |||
| document.removeEventListener('mouseup', stopResize); | |||
| document.body.style.cursor = 'default'; | |||
|
|
|||
| document.location.reload(true); | |||
There was a problem hiding this comment.
This makes the behavior worse it seems, the columns seemed to resize and remember their size fine without needing a page reload here.
In fact it's worse now, since there appears to be some kind of race condition that prevents the column size from being saved in localStorage before the page reloads.
|
There seems to be no problem on Firefox v125.0 Portable firefox_xNLIIJ8kPc.mp4
|
|
Hmm, I'm on 133 but I wouldn't expect that to cause any issues - I'll recheck at some point. |
|
Turns out using I also cleaned up some more logic to avoid the resizes weirdly jumping around and clamped the resizes by min/maxwidth. I took a sidetrip to see if we couldn't use a datatables plugin for the resizes, but the one I found wasn't really better than what you'd already implemented. 🤝 Thanks for the help! |
Support dynamic columns and adjust column width
default:
dynamic columns:
adjust column width:
cursor:
After changing the column width, the page needs to be manually refreshed
#669 #676