Is it possible to make two tables scroll horizontally in sync with one another?

I am attempting to recreate the top portion of a spreadsheet that looks like this:

I'm getting close if I can make two tables scroll in sync with each other. Does anyone happen to know if this is possible? Or, if anyone know of a better to recreate this, I'm all ears.

Thanks.

This really depends on your design and what you are trying to accomplish. Off hand, I don't know of way to make two tables scroll together and so maybe explaining your goals might help the forum help you! :slight_smile:

As you can see from the image I uploaded, the date row at the top has cells that stretch across four columns, then you have the four columns which are Serial, Color, Add-ons and Proj Date. then there is another column that contains the number of products built for the day and it also stretches across four columns.

To accommodate this, I was thinking of having one table at the top that had the dates, then a separate table underneath that with the data that contained the four columns of Serial, Color, Add-Ons and Proj Date. Both tables would stretch for quite a distance horizontally. The problem is that they won't scroll together so when you scroll one table, it is no longer in sync with the other table.

I thought using stack containers might do the trick, but apparently, they will not scroll indefinitely horizontally.

I hope that makes some sense.

@tomm
Yes, I did. But I guess what I am asking is what is the goal? Is the table actionable or just a view?
If it's just a view, you may want to consider a different type of design.

Hopefully this screenshot will help to answer your question.

The table will need to actionable so users can enter more records or delete records, etc.

This was as far as I got before realizing the stack was not going to allow for horizontal scrolling.

Have you considered using a custom component?

That would be great, but unfortunately, I don't know the first thing about building a custom component.

Hey @tomm :wave:

I agree a custom component might be the best choice. Do you know React? We have some documentation on building custom components.

Hi @AbbeyHernandez,

No, unfortunately I do not know React.

You could have one table component and then allow the user to filter by date and that way not have to scroll horizontally. Could also have table load with default current week or month etc. This is something I have done in the past.

1 Like

Hey @ScottR,

I actually attempted that first and showed it to the boss and she wanted nothing to do with it. It's a production schedule for building fiberglass swimming pools and sometimes we have a mold that needs fixed, and so it can't be used for a while and she just loves being able to scroll horizontally and see are molds are marked as such, etc. It's sort of difficult to explain. They have been using spreadsheets for a long time here and it's been very hard to get them to even discuss changing, but I'm making some headway.

Would you or @AbbeyHernandez know of anyone that could assist in the construction of a custom component. This is the one piece of the puzzle that I have not been able to duplicate the spreadsheet in some fashion, and it would be really nice to have the all the data in one database instead of spread over numerous spreadsheet that all need updated when there is new information to add.

I will see what I can do but will have to wait until tomorrow. Hope you can wait

I would definitely appreciate the help.

There is no rush whatsoever. I have plenty of other things to work on.

I was thinking that a horizontal scrolling grid list might work, not really sure of the use case though.
Then each repeater is a table of data for that day. Again, not really clear to me what structure this data is in.
Something like this maybe?

1 Like