Suggesting, A complete review of use of tabled data layouts to address screen width

[PhilETaylor]

Ive said it before but I'll say it again. I have a huge 27" iMac, I run my browser on one side of the iMac, therefore the browser window is large,

• Browser window size: 1600 x 1576
• Screen size: 3200 x 1800

Even with this HUGE screen, Joomla 4 admin console struggles to load tables of data in a user friendly way.

By this I mean, for example, the Name of a user can only cope with 10 characters before wrapping out of the box, and if you enable 2FA then this becomes even less. The email address is wrapped too - so is the username.

It is not a good experience for the user, nor is it sane, to have whole sentences with 2-3 words per line.

Some Examples that come instantly to mind:

[PhilETaylor]

[ceford]

Just noting an interest: I have some lists using wide tables and I have a solution that uses the Datatables plugin for jQuery with the Fixedcolumns plugin to keep a reference column at the left. It started in a J3 installation and is now migrated to J4. You still have to make sure each column is wide enough to be usable. It is for admins only and we do expect them to have a screen at least 1024 pixels wide. Source: https://datatables.net/

[PhilETaylor]

Well jQuery would be a step back for joomla 4 and as I have said, a lot of the data tables plugins are not useable on large sites due to the the way they work under the hood. Even if they progressively load the data by Ajax.

Also demanding admins use a large screen goes against the responsive nature of the admin console and all the effort put in to that so far by so many

Also implementing that in all screens and being reusable by 3pd extensions would be a huge job - and already joomla 4 is not accepting new features

I think a simple opt-in hide/show column selection with persistence of selections across sessions, which could be reused by 3pd and doesn't rely on jQuery (or get in the way of jQuery) would be best - no rush though as joomla 4.1 is a long way off

[brianteeman]

@ceford use this for your own stuff - its basically datatables without jquery https://github.com/fiduswriter/Simple-DataTables

[ceford]

Thanks for the feedback. I thought about a show/hide column solution and looked for a replacement for Datatables last year but did not find anything. I will try out the cited Simple-DataTables. As I said - just noting an interest for any solution that comes along. I missed 32912! I do truncate article titles in list view.

[PhilETaylor]

I'm on mobile and just noticed this is the discussion and not the issue in GitHub, if you checkout the issue we are talking about this on there is progress and some code upcoming

#32912

[dgrammatiko]

For anyone following here, there's a script that you can test right now by pasting it in your browser's console on any List view: https://gist.github.com/dgrammatiko/4d8121c2cda4096224d4de283a1a433a
I think @PhilETaylor will come up with some PR later on, patching couple missing parts...

[dgrammatiko]

Also, you were hopeful saying it could be used on any list page haha (as Users for example doesn't use table.itemList but #usersList with no itemList class :)

We could use the already passed id/class for the drag and drop (I think there is already something there), but yes the idea is that some data should be exposed from PHP in order the script to be useful in more diverse setups

[PhilETaylor]

It would be great to get it as simple as

HTMLHelper::_('behavior.configurablegrid', 'table.itemList');

and let Joomla handle everything else - that's my aim!

[dgrammatiko]

Can we use a jlayout here instead of the htmlhelper?

[ceford]

Tried the code on the articles list. Looking good. Might need some user configuration to optimise initial display on various media widths.

[noxidsoft]

@PhilETaylor I also noticed if I change to <table class="table-responsive" ...> it starts to behave, if not with style breakages. It's like a throwback to Bootstrap 2'ish.

Did you get a fix for this, if so I'll leave the issue alone - #32820

[ceford]

I looked at Simple-DataTables and quite a few others. None suit the purposes of my custom component - all too complicated, too many features or not free. The column hiding doesn't really suit my purposes either. I only need a fixed left column and left-right scroll on the rest of the table. I put together an experiment: made a table from column 1 of an articles list, left floated that against the whole table in a scroll-x div and less than 20 lines of Javascript to adjust the left column row heights. The test is all in a simple html file with minimal styling that comes out like this:

There are another 10 columns to the right. I don't need drag row ordering and I guess that could be tricky. Just an idea to mull over.

[brianteeman]

and completely breaks accessibility by having two unconnected tables

[PhilETaylor]

A first look PR just cut #32974

[dgrammatiko]

@ceford worth checking https://github.com/dgrammatiko/on-a-diet/blob/1aabe2b82b86e9cec7640e1246c73a5a44f21f67/src/assets/js/index.js#L72 live @ https://dgrammatiko.github.io/on-a-diet/
Should be accessible and properly responsive...

[ceford]

and completely breaks accessibility by having two unconnected tables

I can't find anything that advises against using side by side tables where each is accessible. This reference says It’s usually better to break up complex tables into simple individual tables, each containing the data for one sub-topic. It also mentions overflow: scroll vs overflow: hidden (good vs bad). I have tried putting two tables in separate form tabs each with different subsets of the data but I am not really happy with that solution.

https://www.w3.org/WAI/tutorials/tables/tips/

Having said all that, Axe tells me my existing installed Joomla 3 DataTables solution has numerous accessibility failings because I was not so WAI aware when I created it a few years ago.

I guess anyone who wants an alternative wide table solution can use a template override.

[online-today]

For small (mobile) displays I suggest to switch columns and rows dynamically and to show just one data record a time:

If you wiped to the left you would move to the next record. While you could scroll up and downward.
This might be interesting for the backend but even more for frontend tables. So this suggestion might go beyond this discussion.

[online-today]

Why not? It reduces the columns to two columns, one with former column titles and one with one data record.

[PhilETaylor]

"If you wiped to the left you would move to the next record."

I want to get to the 10,000th article... my thumb is going to hurt haha.

Please look at and test the PR #32974

[online-today]

I want to get to the 10,000th article...

Your right, but it would not be easy to scroll to the 10.000th article at the moment either. You could make it easier with a "Go to" button. But my suggestion is obviously nothing to manage big data amounts.
I had seen PR #32974 already and it is a good idea. My suggestion goes beyond that. I have tables on the page itself on the Joomla Page I administer and it is uncomfortable to work with them on a mobile device.

[dgrammatiko]

Tables should be horizontally scrollable on constrained devices (eg: mobile, tablet) and not hiding columns. But also this is debatable... Unfortunately, there's no one size fits all here...

[ceford]

Using WHM over the weekend - it has a similar layout to atum - title bar and menu + breadcrumb bar at the top, fixed menu panel at the left, and data area to the right. The Accounts table is about 50% wider than my screen but scrolls left-right. That leaves the top and left bars/panels fixed and visible as the table scrolls. A reasonable minimal solution to the wide table problem.