Clarity: Datagrid - Responsive: Stack Columns on Small Screens

[aditorium]

Select one ... (check one with "x")

[ ] bug
[x] feature request
[x] enhancement

Expected behavior

It would be great if the Datagrid component could switch to a "stacked" view if the screen is too narrow to fit all the columns.

Behavior should be similar to the "reflow" mode in the Table component in PrimeNG

Example A - Column View:

Example B - Stack View:

Actual behavior

Currently, a horizontal scrollbar appears

Environment details

• Angular version: 5.2.3

• Clarity version: 0.11.4

[youdz]

I remember having this conversation with @reddolan a while back, and as much as there are many possibilities to make datagrids more usable on smaller screens, the solution employed by PrimeNG is definitely not the one we would go for. @reddolan please correct me if I'm wrong, but if I remember correctly the conclusion was that it was completely counter-productive to have such redundancy of column names, losing half of the screen real estate, when the whole point is that you have less screen real estate.

My personal opinion is that something like this would be incredibly better, and we actually already are using a flexbox-based table: https://hashnode.com/post/really-responsive-tables-using-css3-flexbox-cijzbxd8n00pwvm53sl4l42cx#advanced-example

[aditorium]

Thanks @youdz for your comment. I fully agree, the "Really Responsive Tables using CSS3 Flexbox" example is much better from a UX perspective.

Anyway, as my HTML5/CSS3 skills are quite limited, I was basically hoping that you would implement something like this in the Clarity Datagrid component at some point in time.

[sdurnov]

Nice to have, but as an option.

[gnomeontherun]

We are investigating some options for how to make a more responsive datagrid, and this is a specific suggestion for that larger goal. We have a bigger ticket #3098 for datagrid responsiveness that I'll point to and close this in favor of it.