Populate table with checked records from a list while also allowing for new editable rows

App Building
,
1

i'm wondering if i'm having a similar issue... chatGPT suggested i use a transformer to accomplish what i'm attempting to do.

i'm trying to populate a table with whatever records are checked in a list, as well as allow the user to click a button to "add new item" (then edit said item in the table)

i've completely started over and this is what the code looks like (in my transformer):

let tableData = [];

// Function to handle adding a new item
function handleNewItem(newItem) {
  console.log("Adding new item:", newItem);
  // Add the new item only if it doesn’t already exist in the data
  if (!tableData.some(existingItem => existingItem.id === newItem.id)) {
    tableData.push(newItem);
  }
}

// Function to reset the cart
function resetCart() {
  tableData = []; // Clear all items
  console.log("Cart reset: All items cleared.");
  return tableData;
}

// Return data to expose from this Transformer
return {
  tableData,
  handleNewItem,
  //handleSelect,
  resetCart
};

in my app, i have a button that has an event that does the following:

transformer.value.handleNewItem({ id: Date.now().toString(), item: "New Item" });

also in my app, the table should be populated with this data source:

{{ transformer.value.tableData }}

the table only seems to populate when i manipulate the above line, as in, i removed the "t" from tableData and replaced it with "t" and the data shows up in the table!

in the console, it works fine

any suggestions?

2

Hey @josh2e! Thanks for reaching out.

I broke out your original post into a separate topic, as I'm pretty sure this is an unrelated issue. This is a fairly creative/unconventional use of a transformer, but I ultimately think there's a better strategy.

The key here is that transformers are only reevaluated upon changes to an input or, in your case, newly created references. Importantly, this means that invoking handleNewItem does not cause the transformer's value to update.

I would instead make tableData a global application variable, set the table's data source to tableData.value, and define your helper functions in a JS query instead of a transformer. These functions would likewise manipulate the global variable using the tableData.setValue method.

Let me know if that works or you or if you have any follow-up questions!

1 Like