I am trying to make a grid of indicators to track progress for projects with the same tasks. Each row is a task and each column is a project. I need to allow for dynamic number of projects and tasks based on queries. Users will be able to update the state of each task. Right now I am brainstorming ways to make this work. I have been playing around using all flex containers and flex repeaters. The issue I am having is I can’t figure out how to keep rows and columns together. For example, since there are more tasks than can be shown on screen at once, I need to allow for the scroll bar, but each column (instance of flex repeater) has its own. I am trying to have one scroll bar that will keep all rows aligned. I also tried a different approach where I did instances of the rows instead columns, but the same issue occurs horizontally as you scroll to view all projects. I know this behavior is expected based on how I currently have the components configured.
Wanted to post asking if anyone has made/seen something similar with this behavior. Do you think this is possible with flex containers and repeaters? Any other suggestions for a different approach? The only other way I can think of is to use a table component, but I don’t think it would be an ideal user interface for the end user.
