Matrix table with checkbox selections

Question

I am creating a matrix data table which will allow checkbox selections. Here is a mock up I have come up with:

This fulfils two purposes:

1. User is able to see instantly which options have been selected across the data set.
2. User is able to quickly make changes to the options across the data set.

This probably works great on larger screens, but I am conscious the content will be cramped on smaller screens.

I was wondering if there is a better way / UI to capture these selections? Here we have 10 options, but it could be as many as 15. Also, there are 10 rows on display here but there could be as many as 100 rows.

---

I plan to keep the header row fixed to the top, so when scrolling down you don't lose the headings.

All of the left hand columns in the table are important, because the user will be able to filter the data by these columns.

I was thinking I could potentially display a scrollbar (in the checkbox selection area) once the columns start getting too small.

Answer 1

The easy solution is to use a table for desktop and simple text blocks with radio buttons for smaller screens. There is an example at surveyjs.io/form-library where:

• Selectable cells are radio buttons

• The header of the selectable cells becomes the labels of the radio buttons

• The rows have different colored backgrounds, which allows you to differentiate the text blocks later on small screens

Desktop

Devices

Answer 2

This depends on the use case. If you need to compare columns and/or rows, I think your best option is to use tables with scroll, just as they're intended. It's a common pattern, and users will know how to interact with it. You can use something like Datatables to help you with some of the responsive options, like column ordering or whatever.

Now, if you don't need to compare information, I'd suggest a completely different approach.

You have a variable number of columns and rows, and you also have actions, which cause a high cognitive load and visual cluttering, ultimately leading to confusion. So, my proposal would be that you don't use a table element on desktop but a div with display:table. Then, on mobile, you change the row to a card. Instead of having a series of rows and columns, you could have a neatly organized card for each username or ID.

It will require some adjustments (basically you won't have the table header, so you'll need to add the headers as a span for each variable and use display:none on desktop), but as long as you don't need to compare data, it's a much cleaner and easy to use solution, especially if you combine it with filter and sorting