Stacking two columns responsively

bgervin

I'm exploring a responsive strategy that stacks multiple columns into a single TD

For example:

Date	Home	HS	VS	Visitor
Jan 1	Toronto	1	2	Montreal
Jan 1	Ottawa	1	2	St. Louis
Jan 1	Columbus	3	2	Florida

Would become when the viewport was too narrow.

Date	Teams	Score
Jan 1	Toronto	1
	Montreal	2
Jan 2	Ottawa	1
	St. Louis	2
Jan 3	Columbus	3
	Florida	2

I also want to support a detail row for other columns (time, arena, etc.)

A few things I've explored:
-creating duplicate columns HomeTeam, AwayTeam, Teams, Score, HomeScore & AwayScore, and using class logic to hide. This is somewhat workable, but then plays havoc with detailed rows wanting to show the hidden columns (for example I don't want to to show AwayScore and HomeScore in details when Score is visible, and vice versa. Same situation for Home & Away Team columns and "Teams".
-I've considered custom renderers but seems to be not very maintainable for a large number of columns - my example is simplifying things a bit and I don't get to take advantage of the responsive class logic elegance.

Is there some other feature I'm overlooking or strategy that you might think effective?

I wonder about a feature enhancement to responsive that could move a column into another column as a stacked column instead of moving it to the hidden / detail row state. For example, Away Team could slide under Home Team, Away Score could slide under Away Score, Time could slide under Date, etc. This feature I could see playing havoc with ordering and filtering on those combo columns, but in my scenario, I am not using ordering or filtering.

Thanks for your input.

Barry Gervin

bgervin

Another possible solution would be to have another special class just before never like "never-detail", but I don't think you can stack these classes - I would still need breakpoint classes.