Table mode: columns resizing due to flex display

[echan00]

During table mode, I've noticed if the amount of data in a column varies a lot in size, the table columns will resize as you scroll up/down making it difficult to follow the table and contents.

I've hacked this with .jse-modal-contents{ display: block !important; } which works, but it causes an error in development:

ResizeObserver loop completed with undelivered notifications.
    at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:252:58)
    at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:271:7)

I would appreciate any pointers to best resolve this!

[josdejong]

Thanks for reporting. Can you give an example that demonstrates the issue?

[echan00]

Here is a quick video, you can see as I scroll down the table the columns widths are resizing based on the view. Its not the best video to demo the issue but I think it gets the point across. This can make it difficult to follow the table if each column is shortening/expanding as you review the data.

Screen.Recording.2024-03-28.at.12.27.43.PM.mov

[josdejong]

Thanks. How can I reproduce this? Can you share a JSON document?

[echan00]

of course test.json

[josdejong]

Thanks.

What's going on here is the following: table mode only renders the visible rows of the table. When the max width of the visible items in a column changes, the width of the column changes.

Some thoughts on how to improve this:

1. It may be possible to have a smooth CSS transition when the width of a column changes.
2. It may be possible to lock the keep the horizontal position of the first visible column locked by altering the horizontal scroll position when the width of columns left from the first visible column changes.
3. Change the column widths to a simple, fixed width and show ellipsis ... when the contents do not fit. Or: calculate the max width of the column by going through all of the data (I expect that to be slow for large amounts of data).

Any other ideas? Help improving this would be welcome.

[echan00]

While I think flex width column is really cool in table mode (makes everything easier to see on one static screen), I suggest allowing the table to determine the column width on its own instead. I believe this is the default for any html table and in MS excel. It works if you remove display: flex css property as shown below.

Of course there is also the option to allow the user to toggle this.

EDIT: I tried this change quickly using chrome dev tools, it mostly works but causes the "apply" button to get pushed to the bottom of the table.

[josdejong]

I believe this is the default for any html table and in MS excel.

😂 I think you're right. And this is one of my annoyances with Excel: after opening a file you first have to manually adjust the widths of the columns. I hope with svelte-jsoneditor we can do better.

Opening with a default width and allowing to change the width is an option indeed. Maybe set the initial width based on the initially visible items. That would be a good guess in most cases. And then the editor should not change it automatically when scrolling. We could create a button "Fit" to resize all columns again to fit the currently visible contents or something like that. Ideally, such a button should be only visible when some of the columns actually need to be resized.

[echan00]

Agree with your comments. I think it also depends on the user's window/monitor size. If the size is too small the current setting will probably be very difficult.

I believe most people who use jsoneditor in table mode are reviewing/revising lots of data, a "Fit" button to resize would be great for a "pro" user who can take advantage if it is a hotkey. It depends who you want to serve here, the pro user or the average one who is likely not aware of all the cool features.

[echan00]

I can't promise I'll be able to help, but I'll take a look if you think a button to switch is the way to go

[josdejong]

Thanks!

My thoughts right now:

A solution that doesn't require a manual action still has my preference, though I'm not sure whehter that will work out. So first I would like to experiment a bit to see whether my idea of a smooth transition or adjusting the horizontal scroll could work (idea 1 and 2 here). If those experiments are no success, the second best option is to initially auto fit and lock the widths, and create a button to call fit and lock again. Does that make sense?

[echan00]

Sure let me know if I can help you test anything 👍