#1387 - List Page: allow the list table to horizontally scrolled

[EthanW96]

I tried adding

 display: block;
overflow-x: auto;
white-space: nowrap;

to table.js-list and that seems to be a possible solution to this issue.

I also tried to implement sticky columns by adding a data-id to (for css targeting) and adding some css to target the "name" column if it exists on a table. I think this leads to some questions.

• Are we wanting users to select which columns can be made sticky?
• Is there any issue with adding the data-id attribute to the elements in a table? The elements already had them so I figured this was a reasonable addition.

[corsacca]

Thanks Ethan!
This is a simpler solution than converting to using the components version :).
I like the sticky name column.

Are we wanting users to select which columns can be made sticky?

This seem like it would complicate the UI a bit. Maybe something we'd add in an upgrade with any other feedback.

Is there any issue with adding the data-id attribute to the elements in a table?

Nope, great add.

Comments:

• Needing clues that more fields are hidden just off screen. Maybe having the scrool bar be at the top and the bottom?

• With few fields the columns don't use all the space. Maybe not an issue.

• Mobile view the field names use more space. (mobile view needs some attention anyways)
  

This also could help on larger screens: #2370

[EthanW96]

Awesome! Glad this is simpler for now. I've added another commit to fix the first two comments:

Needing clues that more fields are hidden just off screen. Maybe having the scrool bar be at the top and the bottom?

With few fields the columns don't use all the space. Maybe not an issue.

The last comment I'm either not clear on the issue or I can't recreate it. Can you walk me through that question?

[corsacca]

Very nice!

I added a commit to fix the mobile issue.
This shows all the email values instead of them being hidden to the right:

[corsacca]

Can we keep the highlight color on the name cell during hover?

[EthanW96]

@corsacca I think the highlight color comment has been resolved with this most recent commit.

Can we keep the highlight color on the name cell during hover?

[corsacca]

@EthanW96, I showed @ahillbilly. He loves it too!
Can we keep the number sticky too?
And can we have a max width for the column to keep a fields from being really long?

[EthanW96]

@corsacca

Can we keep the number sticky too?

Yes certainly! I set the left: 0 to left: -1px after I noticed on the extreme left edge of the table I could see the underlying text in a 1px width gap. Not sure how that happened or if that's just me.

And can we have a max width for the column to keep a fields from being really long?

I experimented a bit and 250px seemed like a good middle ground. Thoughts?

[corsacca]

Nice work! 🎉 🎉 🎉

[EthanW96]

Good call on the max-width for mobile view 👍 didn't think about that. Thanks for your help @corsacca!

[corsacca]

Thank you @EthanW96!