How to deal with tables on narrow displays

Anvil Q&A
1

I have created two tables with the same data. One of them is connected to a custom form (item_template). While on the wide display both look legible:

image
image760×340 21.5 KB

on the narrow display the first table is illegible (it would be more illegible with more columns):

image
image337×635 22.5 KB

The second table converted the columns to rows (which I like), but the headers stayed as columns.

Is it possible to make both data and headers change to rows on narrow screens? Something like [responsive]="true" for tables in PrimeNg. How do you deal with it?

2

Hi @Luke,

Check out the wrap_on attribute of the DataGrid component!

1 Like
3

Thank you @meredydd

It’s better but not perfect:

image
image327×562 15.7 KB

Is it possible to achieve a two-column layout like below?
image

4

If there were some way to know if the data grid was going to be or has now been wrapped, then you could create labels for the columns to the left of the items in each cell, and then hide them by setting visibility to False , then only showing them if the data grid becomes wrapped.

5

I recall someone wrote a Horizontal Grid component, mentioned on this Forum. If that would help, it might be worth a quick Search.

6

Might be a sledge-hammer but you could create both styles and hide one or the other based on the view width.

1 Like