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

That's good, which array is that screenshot showing?

Hard to tell from the image, but I think that's the product list one which we've not changed?

The one we're most interested in is the one that appears after the console debug line saying "The data for listview to display:"

If we can take a look at that we can see if it's getting close to what we need

Here is what the console is showing:

Almost! It's important to get familiar with the console and data structures for this work. The console is showing you a list. It's a nest list with different objects, each representing a day, a product and any orders.
Expanding each of the arrows by clicking on them will let you see if the data is being correctly structured and capturing what we think it should.
Also would be interested to see what the app is looking like too.

Here is what I see in the console when opening all the arrows. So far I have not found a record that doesn't have anything but nulls.

Also, here is a screenshot of the app. Not much to look at right now.

Can you export your app as a json file for me so I can take a look at the code you're running?

So it was those pesky date formats that were causing the issue, looks like it's almost there now!

So what is next?

Your listview should be showing one repeater per date, and within that repeater should be a container with the date and a table of models and orders in it
You will want to adjust the table so that the columns match the field names in the array, but the table component should do a lot of that work for you anyway

I'm sure I have this set up incorrectly. Here is what the page looks like now:

It looks like you have 7 repeaters (sections going across) so that's a good start.

What data is each table using? It should be the orders array for each item, ie item.orders

So what would the data source be for the listview?

The listview uses the value of formatOrders
Each entry in that array is an entry in your array, ie

listview ->
   a container per item ->
      a table in each container

In data terms that's:

formatOrders -> 
   an item for each day ->
       a list of each model

So your listview shows your formatOrders array
Your container shows your day
Your table shows your orders

OK. Making progress I think. Here is a screenshot of the page. I am getting the correct dates now.

For the tables, I tried setting it up this way.

But it is only returning 7 results instead of 73 which is the number of products.

I then tried setting up the columns in the table. For example:

Not only is that not returning any values, when I go back to the table view there is a red triangle with an exclamation point next to the columns I created and when I mouse over it, it says "More than one column has an id of 'orders'".

Clearly I'm still doing something wrong.

Getting closer!

So, go back to what I mentioned before, the listview is using the array of data from format_orders.
Each entry in that array has a date and a list of associated orders.
In Retool terms each of those entries in the array is called an "item" in the listview.

So your date field is showing the item's date property
The table needs to show the item's order property
Each column of the table needs to show a property of the orders

So, what is the initial data source for the table? formatOrders? I assume not because I think that is what is causing me to only have 7 records, which is the number of days in the reporting range.

Also, Isn't what you are saying accomplished by mapping a value like {{ item.serial_no }} to the column Serial, {{ item.color }} to the column Color, etc.? That is what I am using, but I'm thinking it has something to do with the source data of the entire table. Is that correct?

You're right, the reason it's showing 7 records is because formatOrders has an array with 7 items in it, one for each day.

Listview should have formatOrders as it's data source

All the components within the listView don't need to reference formatOrders at all - they are using the "item"s in listView.

ListView will look at formatOrders data and find 7 entries.
It creates 7 boxes for you to add components into, so you see 7 tables
The 7 tables need an array to display their rows of data
Those rows of data are the "orders" that we have added to each of the items
So if the table uses item.orders as its data source that should be the list of orders for that date

Yes! It's working! I thought I would never see the day. :slightly_smiling_face:

One last (I hope) question. For some reason it changed the order of the pool models on the left hand side. They are being pulled from another database and they need to be in a specific order, so I am a little confused why the order changed. Also, is there way to display the orders in the same order as the pools so they will match?

1 Like

:partying_face:

Yes, you can user array sort functions or lodash sortBy functions within the loops in formatOrders to get them into the sequence you want but that feels like the start of another conversation :smiley:
Are they alphabetical or some other sequence?

They are some other sequence.

Here is a partial list from the database. This is the order they should be in.

And this is how it looks on the page right now. I really don't even understand how the order changed when it is pulling from a completely different database.

The list of pools is included in each of the orders, do you need that list on the left at all? You could display the pool name in each of the listview tables?

What query retrieves them and what does it order by?