Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic column #1144

Merged
merged 9 commits into from
Jan 20, 2025
Merged

Dynamic column #1144

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
490b5dd
feat: Support dynamic columns and adjust column width
chu-shen Dec 30, 2024
0a22e12
fix: if out of range, back to use title
chu-shen Dec 30, 2024
3f2ba21
style: change tooltip name
chu-shen Dec 31, 2024
0d68988
fix: Columns only be visible in compact mode
chu-shen Dec 31, 2024
88848ae
refactor: adjust the timing of adding title column
chu-shen Dec 31, 2024
cc2e44f
fix: block the sort-on-click behavior
chu-shen Dec 31, 2024
a65e176
Restore column width at the generateTableHeaders instead so we're sur…
Difegue Jan 20, 2025
3d527c5
Clamp resizing by max/minwidth and fix CSS selectors for columns
Difegue Jan 20, 2025
3663ac5
Further cleanup + working prevention of sort event
Difegue Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions public/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -819,6 +819,7 @@ Index.resizableColumns = function () {
// init
header.addEventListener('mousedown', function (event) {
if (event.offsetX > header.offsetWidth - 10) {
event.preventDefault();
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change doesn't seem to fix anything for me on Firefox unfortunately.

currentHeader = header;
startX = event.clientX;
startWidth = header.offsetWidth;
Expand All @@ -840,6 +841,7 @@ Index.resizableColumns = function () {

function resizeColumn(event) {
if (currentHeader) {
currentHeader.style.cursor = 'col-resize';
const newWidth = startWidth + (event.clientX - startX);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

if (newWidth > 0) {
currentHeader.style.width = newWidth + 'px';
Expand All @@ -856,6 +858,8 @@ Index.resizableColumns = function () {
document.removeEventListener('mousemove', resizeColumn);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

document.removeEventListener('mouseup', stopResize);
document.body.style.cursor = 'default';

document.location.reload(true);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

}
};

Expand Down
Loading