4 ms·

> I do these kind of sites (tables, lots of things to select, lots of data) almost exclusively and so I am always looking for more solutions. How do you deal w

> I do these kind of sites (tables, lots of things to select, lots of data) almost exclusively and so I am always looking for more solutions. How do you deal with displaying a table with 10-20 columns on small screens? It compares similar objects across different metrics and a single column is either a grade (A-F) or a number. The best I came up with so far is collapsing rows into cards, but it sucks when you want to compare them with each other. For example finding objects with grade A or B in a certain column.

hogFeast 5y ago
Ah yes, that is quite a problem. I would consider carefully if it is really worth it for you. Making tables responsive is utterly hellish. But what you can do is make the table horizontally scrollable. This isn't too complex but, of course, it creates a new problem which is: what do you do if the user needs to look at one col at the start of the table and one col at the end? In the cases where I have added scrolling, I froze the first col (which gets a little involved when you have to freeze the first col and then scroll all the others). It is tricky, afaik there are no library impls of this, but there are no other options if you have a really data-heavy website and mobile users. A strong implementation of horizontal scrolling with first col freezing is the NBA's stats website - https://www.nba.com/stats/player/201566/ https://www.nba.com/stats/player/201566/ Doing cards is a definitely an option in some circumstances but if you are building an application where the user needs to scroll through rows then it becomes problematic. For example, if you have a website like the NBA...it makes sense (I think) to do cards for a team's upcoming matches...you don't need to display a whole lot of information (the opponent, the date, the venue), users aren't going to scroll through 20 rows. But if you are doing a player's stats with lots of columns and users might want to go back 10 years and compare AST today with AST 10 years ago...then cards aren't a good solution.
- duckmysick 5y ago
  > Making tables responsive is utterly hellish. It really is. I briefly considered sticky/frozen columns, but I wanted sticky headers too - which I think are important too. In your NBA example it's difficult to tell what the numbers exactly mean without scrolling back to the top. I researched a few options some time ago, but all of them were complicated or flat out not working. Datatables.js had a crazy workaround: the fixed columns were separate tables styled to look like they are part of the main table. I ended up with a summary view that had just 3 columns, so no side scrolling was necessary. There was a filter option, where users could select other columns that interested them. Not perfect, but it turned out ok. The hunt continues.

hogFeast 5y ago

Ah yes, that is quite a problem. I would consider carefully if it is really worth it for you. Making tables responsive is utterly hellish. But what you can do is make the table horizontally scrollable. This isn't too complex but, of course, it creates a new problem which is: what do you do if the user needs to look at one col at the start of the table and one col at the end? In the cases where I have added scrolling, I froze the first col (which gets a little involved when you have to freeze the first col and then scroll all the others). It is tricky, afaik there are no library impls of this, but there are no other options if you have a really data-heavy website and mobile users. A strong implementation of horizontal scrolling with first col freezing is the NBA's stats website - https://www.nba.com/stats/player/201566/ https://www.nba.com/stats/player/201566/ Doing cards is a definitely an option in some circumstances but if you are building an application where the user needs to scroll through rows then it becomes problematic. For example, if you have a website like the NBA...it makes sense (I think) to do cards for a team's upcoming matches...you don't need to display a whole lot of information (the opponent, the date, the venue), users aren't going to scroll through 20 rows. But if you are doing a player's stats with lots of columns and users might want to go back 10 years and compare AST today with AST 10 years ago...then cards aren't a good solution.

duckmysick 5y ago
> Making tables responsive is utterly hellish. It really is. I briefly considered sticky/frozen columns, but I wanted sticky headers too - which I think are important too. In your NBA example it's difficult to tell what the numbers exactly mean without scrolling back to the top. I researched a few options some time ago, but all of them were complicated or flat out not working. Datatables.js had a crazy workaround: the fixed columns were separate tables styled to look like they are part of the main table. I ended up with a summary view that had just 3 columns, so no side scrolling was necessary. There was a filter option, where users could select other columns that interested them. Not perfect, but it turned out ok. The hunt continues.