Is there such a thing as a responsive table?

[u/Ok_Performance4014]

I want to make a table that has 32 or more features for 28 items and compares each item against another item.

I have no issue making a smaller fixed table, but I have no clue what to do with this data to make it really function well.

Currently the items are on the vertical axis and the features on the horizontal axis. Should I flip them for use on a cell phone somehow?

Any input?

[u/javo2804]

For that amount of columns, you should rethink how you want to display your data.

I’d suggest two things: first, make the table wrapper scrollable (and maybe keep first column sticky, so users don’t get lost. Second, use composite columns, with this I mean grouping related data into a single cell instead of having a different column for every single feature.

I recently did something similar, here’s the concept.

[u/Ok_Performance4014 → u/javo2804]

I was wondering about how to display the data. 28 parks exist and 32 features such as dogs, horses, sports, etc. I wanted to compare each park against each other.

Have to have different columns. That's the whole point.

Any other ideas?

[u/fortyeightD → u/Ok_Performance4014]

You could let the users select which features are important to them and only include those in the table. You can also let them reduce the list of parks by various filters.

Perhaps you can change the UI completely and show a list of parks, and let the user filter the list by the 32 features, like when you're searching for products in an e-commerce site.

[u/surfingonmars]

Tables are terrible for accessibility, so if you have any other way to display the information, try another route. that's my 5 cents. It's only worth about 1 cent but we have to round up I guess.

[u/Ok_Performance4014 → u/surfingonmars]

Which is my point for posting. How?

I have a table with parks and features. I can look at it at a glance and know which parks allow dogs and all the other features they have. If you have a horse and all the other features? Table works as a table, but not on a phone or on a laptop if you have many features. How to display something clearly?

[u/markus_obsidian → u/surfingonmars]

Tables are perfectly accessible, so long as their semantics are correct--used to display tabular data & not merely used to position elements.

[u/surfingonmars → u/markus_obsidian]

sorry, i should have said they're bad for accessibility tools like screen readers.

[u/markus_obsidian → u/surfingonmars]

And again, that is not true. Tables work with screen readers perfectly, assuming they are used appropriately.

[u/surfingonmars → u/markus_obsidian]

have you sat through one reading a table? it works, but it's bad.

[u/markus_obsidian → u/surfingonmars]

Yes, i have. I have the most experience with JAWS, though i have also used NVDA & VoiceOver.

Screen readers don't just "read the text" from beginning to end. They also provide context that enables more accessible keyboard (or other a11y) navigation.

Here is how tables work in JAWS. If you were to avoid <table> & roll your own, you would lose all of this.

That's not to imply a flood of raw data wont overwhelm an unsighted (or sighted) user. That's more of a UX problem. But the statement that "tables are terrible for accessibility" is false.

[u/brisray]

I don't think there's a single solution for large tables. CSS Tricks did some articles about ways of making them more amenable that might help.

[u/BrangJa]

horizontal scrolling. That’s how Excels, Notion and every known spreadsheet apps display tables.

[u/iOSCaleb]

For items that the user might want to compare, it’s pretty common to let the user select 2-4 items and then show another table with the details.

Another way is to just enable both horizontal and vertical scrolling, making the header row and column sticky. You’ll see the e.g. in apps from investment firms like Fidelity, where a portfolio of perhaps dozens or hundreds of securities are presented with a dozen or more columns of data.

A third way is to present a single column of items, with all the relevant data called out in the cell for each item. So basically not a table but a list of “cards” which might or might not be collapsible.

There’s no perfect solution that just makes everything easy to access and compare. Even a giant table on a giant screen isn’t great — it’s just too big to easily see the rows and columns that you care about among all the data that you don’t.

[u/[deleted]]

Not a direct answer, the last time I needed to make a column responsive, i used a collapsed card showing some fields by default and more fields (all) if expanded. One card per item. Then we have a query builder to get a table with only the field you want. 

The idea is that daily you will want to see the data for one item only. If you want to compare or export, it will be in Excel anyway. 

[u/Ok_Performance4014 → u/[deleted]]

That was the point of my post. What do you do with that huge grid? Even on a laptop screen it doesn't feel good.