Data Table Creation with form fields

I’m aware that WeWeb is working on an element that will probably do what I need for this. However, I’m not sure on the timeline, and I’d like to put together a solution that could work for this until the data tabla element is available …

How can I create a table that has infinite # of elements that I can access data in a workflow upon form submission?

I need the user to be able to edit the form fields.

I want a table like the loom below:

I currently am using the Add Buyer button to add an empty object to an array, and then using the arrays collection on the page to display the rows.

I’ve tried many different things and run into problems:

  1. If I update the array with an onChange event, I cannot just update the direct row object, so I have to create a new array with the object, which then changes the order.

  2. I update the object, then remove it, then add it back in, but this does not work either

I have another version that looks something like below, but this is not really what I want as it is not that intuitive to the users:

Is there a way for me to create the top loom version and access the form fields in an array?

Thank you

HI @kevinwasie what is the workflow you use on the onChange event?
You should normally be able to set the variable containing your array to a new variables containing previous data + the new empty object.
What is not working with the method?

Hi! thank you so very much for your help with this! I am super stumped on how to do this…

I’m trying to make it so that the array mimicks the data in the form fields.

I can add a new row to the array, but I don’t know how to make it so that the array object matches the form data.

I need to be able to:

  1. delete rows from the table, and have them delete in the array
  2. change data in the form fields, and have it update in the array

The workflow that I have, which doesnt work at all is:

  1. OnChange for the “name” form field
  2. Get the old object from the array, and update the name field in it.
  3. Remove the old object from the array with id
  4. Add the updated object from step 2 to the array

Checkout this loom which shows the behavior. The form fields are changing when the array collection changes, so I cannot keep the info in the same form field.