Right now I can add a new column, and I can edit each data inside. I didn’t use the datagrid element, instead I use div block each and structure it manually. What I did was I bind the table to an array, which a each row is an object. By adding a new row, a new object with all keys and value nulled is added to the end of the array.
I figured that in order to make a new column, I need to add a key/value pair to each object. I can do it if I hardcoded the key and value into the button click workflow, but I don’t wanna do it that way since that wouldn’t allow users to add more columns.
I want to add a new column by binding my new key to an input field, which exist in the first picture, I tried to make custom javascript to get and use the input field (in the 2nd picture) but failed to do so. Can someone enlighten me how should I get and use the input field?
Other than that theres some more problems:
To add new row, I want to add an object with all key values nulled, I still can’t figure out how to null it, I can only figure out how to use the first index object as subtitute.
I want a user to be able to choose the input type of their newly added column, such as select field, multiselect or others. I can do it with conditionals and display on/off, but that’s not optimal. I think I should use the create element function, can someone please teach me if that is possible here? Maybe I can define the input options for the user, and able them to bind to another data if they use select or if they choose to connect to another data?
I hope I can make the column width resizable, that would be nice. This is my previous thread on the topic.
UPDATE: I figured out how to allow users to add columns and rows, like airtable, in no-code(ZERO CODE) weweb workflow!
This is the outcome.
Here’s how I did it.
Firstly, I make a variable to place the data of the tables. I figured, each column needs to be an object, since it must contains some key/value pairs of data.
So my variable of the table is, the whole table is an array, and inside the array, every row is another array, and each column is an object in the array. Here’s the example.
So how do I make the component? What I did was this, I bind my table array as repeatable item to a div block(before that, put your table content(i.e.:input), making sure the direction is vertical because each repeatable item represents a row.
Now I have my rows. Then I need to add my columns for each row. So I make a new div block with an input as repeatable item, and I bind the div block to my item.data(which is the array row, containing objects of each column). Make sure the direction is horizontal, now I have my columns for each row.
My static table is done. Now how do I make my table expandable? meaning how do I able users to add columns or rows?
I know I had to add an array to the table array to add a row, and add an object to every array to add another column.
ENABLE USERS TO ADD A NEW ROW TO A TABLE
To add another row, I have to add an array of objects of columns containing the row.
The preliminary variables/value I have to have is:
The new row index
The no. of columns
A new array variable to store my added objects
So this is how I made the workflow, with zero code.
I use the length of my table array as the new row index, then I make a loop to add each column fo the new array.
Each column contains the row index and the column index of the column.
I already have the row index, now I need to find the column index.
Since I parse through all the columns, I make another variable of integer to act as the column index, where I use it in my objects, before I add a +1 to the variable to be used for the subsequent loop.
When it loops, you will have all your columns for your new array, stored in your custom variable.
Add your custom array variables to your original table variable. This is the workflow look like:
Use the change variable value function in weweb → update array = insert at end
Voila, you can add a new row to your tables! After that, I cleaned up all my variables by resetting to avoid bug.
Now onto the columns
HOW TO ENABLE USERS TO ADD A NEW COLUMN TO A TABLE
In adding rows, we loop through the columns. Now in order to add a column, we must loop through all the rows.
The steps are simpler actually.
Before, to add rows, we created a custom array variables to store the loop data objects. But to add columns, we must add an object to every row array, and weweb made that so easy.
When you parse through the arrays, you can use the insert at end function in weweb, to add your new objects for each loop.
For every loop you will:
Get the last column column index, and + 1 to use for the new the column index.
Use the tablearray[0][tablearray[0][“length”][“columnindex”] to get your last column index(you must make a columnindex value)
+1 it to use for the new column index
Make a custom var to store row index, where it starts with zero
Add the new object to the array
In weweb this is easy, use change variable value → update array = insert at end
You must use the createObject() function in the value
Add the custom var to store row index, so it increments for next loop.
Thank you @caffeinatedwes , I’m really looking forward when weweb enables the function to create element, destroy or update, I need that feature so bad. @aurelie
