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.
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.
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