Using GridList for items displayed in grid (multiple columns)

[rolanday]

Hello,

The react-aria docs say:

A grid list displays data in a single column and enables a user to navigate its contents via directional navigation keys.

The docs further support GridList is for single col data by not providing any examples otherwise.

I'm displaying items as tiles in a grid where # of cols varies depending on screen size media query (e.g., 1 col for small screen like iPhone, multiple cols for large screens). Functionally, GridList seems to work except that left-right keys cannot be used to navigate (or at least not working for me as configured).

Does GridList support multi-column layouts and, if not, can support for multiple columns be added? Or is there alternative control/hook that I should be using for navigating list items and getting selection?

Thanks!

[LFDanLu]

For a multi column grid pattern, does Table suffice for your use case?

[rolanday]

Not in this case, but ty for the suggestion. Much appreciated!

[reidbarber]

In the first GridList example:

There is one column, and four rows. The checkbox, text, and info buttons are not in their own columns, but are instead the contents the one column in each row. You can use left/right keys to move focus amongst focusable elements within that row, and up/down to navigate between rows.

If you wanted to have multiple columns, you can use a Table instead.

Here, left/right will move focus between cells (or within a cell if that cell contains focusable children). Up/down arrows will move focus to the cell above/below, and keep it within that same column.

[rolanday]

ty reid for the thoughtful reply. all set here.

[devongovett]

I think you're asking for a variable number of columns similar to cards, not a table. You might look at ListBox which does support grid layouts. However, note that the items cannot contain interactive elements like buttons.

GridList does not support grid layouts because the left and right arrow keys move between the focusable children, so you wouldn't be able to move to the next column. If we changed that to move between columns then there would be no way to get to the focusable children. We haven't found a good keyboard navigation pattern to support both yet. Usually we recommend using a list box and showing actions using a toolbar outside the list like a spectrum ActionBar.

[rolanday]

Thanks all for the responsive and detailed replies. yes, @devongovett , correct (similar to cards). Since I already went to effort to draw it up, below illustrates. Listbox with action bar could work, but I feel the need to keep the tiles/cards interactive for the specific use case to have a good UX. I also see your point regarding the navigation challenge. Puts me in a pinch between needing to decide between strictly following proper kbd navigation and best UX for the 90% using mouse/touch. I'll need to give more though. Very much appreciate folks chiming into answer my questions. Love react-aria btw. Thank you for it!

[rolanday]

I gave it some add'l thought and I'm going to impl something similar to action bar as @devongovett suggested because I don't want to compromise on accessibility and, upon further consideration, I think it will be a better UX. This thread just forced me to re-think the approach. Thanks again for all the help. I will close out the ticket.