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

💬 App Building
39

Great news!

So the transformer will try to build a new list of all your data in date/product order and this is what is output from the transformer and used by the listview component. I called it order_data in the demo and it should start as an empty array, ie
let order_data = [];

What you now need to do is change the transformer so that it connects the product with the order AND you need to change the transformer to find orders for the right day which means you may need to format the build date so that the date formats match.

Here's a version of the transformer with more comments and tells you where you need to make changes.

It also adds some console log messages, which should help you see what's happening as the code runs.

You can see the console messages in the debug panel in retool, or by pressing F12 to view it in your browser console (sometimes the retool debug console can't display all the log messages)

// combine that with a list of all product codes
// create an array of orders by product by date

// a unique list of products from your database:
const product_list = {{ poolModels.data }};
console.log('The product list is ', product_list);

// a list of all the jobs from your database:
const order_list = {{ getOrders.data }};
console.log('The job list is ', order_list);

// the start date for reporting, 
// using the moment library to do this for us makes it easier too
// you will want to change the date used below to match your orders data
// this is the first date that the listview will display
let reporting_date = moment('17-02-2025', 'DD-MM-YYYY');
// the range of the report, 1 week in this case
const reporting_range_days = 7;

// an empty array that we'll populate in the loops that follow
// this array is then returned by this transformer in the last line of the code so that the listview can display it
let order_data = [];

// i is the counter of how many days of data we've processed, we start at 0 and stop when we hit reporting_range_days
for(let i=0; i<reporting_range_days; i++){
  // the date we want to find orders for, as a formatted string, using moment for ease
  // we will use this same date format for consistency in comparisions
  let today = reporting_date.format('DD-MM-YYYY');
  console.log('Finding orders for day ',i, ' which is the date ', today);

  // create an empty object to store "todays" orders in. we have 2 properties, the orders list and we have the date
  // we may find orders, we may not, but every day needs to be checked and it may have an empty order list, but that's ok 
  let d = {
    orders: [],
    date: today
  };
  
  // filter the list of orders where the build_date matches our "today" string
  // the important part here is:
  // x.build_date == today
  // x.build_date is the date of the job in your order_list data
  // this is compared to the "today" date string
  // the formats must match for it to know it's a job for that date
  // you may need to use moment to format x.build_date so it can do the comparison, using the same date format string we've used earlier 
  let o = order_list.filter(x => x.build_date === today);
  // how many orders have we found? 0 or more?
  console.log(o.length, ' orders matching this date', o);
  
  // we have a list of all "todays" orders
  // now produce a list of every product and any orders on this day for those products
  // ie we're using the filtered order list now
  product_list.forEach(p => {
    // This is where we join products and orders
    // if your product list is a list of names you will need to change the next line where it is using x.product_id and p as the properties it's comparing
    // if your product list is a name you may need to compare that with x.product_name, for example
    let po = o.filter(x => x.product_id === p);
    // po is an array (ie list) of orders, length tell us how many are in the list:
    console.log('Found ', po.length, ' orders for ',today,' for product ', p);
    // merge an empty order object with whatever orders we found so this makes a line per product, not per order
    // this part doesn't need to change, it's creating an entry for "today" for each product but it does assume you only have 1 order per product per day
    d.orders.push(_.merge({
      product_id: p,
      project_date: null,
      addons: null,
      color: null
    }, po[0]));
  });

  // we've got all the orders for all the products for "today" so lets move on
  // move to the next day using moment, again, to add 1 day to reporting_date
  reporting_date.add(1, 'days');
  console.log('The list of order for each product for todays date ', d);
  // add this data to the output array which the listview will use
  order_data.push(d);
}
console.log('The data for listview to display ');
console.log(order_data);
return order_data;
1 Like