Hi there,
New to Weweb here. I tried out the Table element and I noticed the context menu functionality on each row. I was trying to find out how this works with no luck. Some questions I have are:
Thanks in advance!
After some investigation:
a) The context menu workflow is hidden due to the table element being a complex component. Some of the default WeWeb components have some actions hardcoded that we don’t have access to. However, I’m pretty sure that you can find this component in the GitHiub repo and see everything that makes it. It’s helpful to know/be able to read/understand JavaScript & Vue.
b) The position of the element relative to the icon.
Transformations are used to move the menu around
Thanks, so when I want do render data from Xano I can alter the standard Table element and add specific functionality to the context menu (edit/delete row) that will trigger a workflow with an api call to Xano. Am I right?
Furthermore is it possible in Weweb to recreate this functionality on a more no-code way. OnClick icon > Toggle Contextmenu?
I managed to show/hide a flexbox contextmenu element.
But because this element is in the table row column the table row’s height increases.
Is it possible to show hide an element that contains the contextmenu that is aligned to the corresponding row/icon and which float on top of the table row, keeping the table row’s height unchanged?
A couple of things.
If you are displaying a collection in a grid then I would suggest using the datagrid control.
In the datagrid control, you can have a ‘custom’ field type and then put in whatever you want, including an icon. You do not need to use a datagrid.
Regarding height:
Try playing around with the Position options.
Different options give you access to Top, Left, Right and Bottom
Which can be bound to collections and/or formulas if needed.
As well Tooltips can give you some examples on positioning (including z-axis) which may help out
Thanks. I tried to is the datagrid but it wasn’t exactly the look and feel I was looking for.
Using absolute positioning of the contextmenu I solved the issue of the row height that was expanding when the context menu was visible.
But now, when tried to open the contextmenu by coming on the icon in a specific row, the context menu became visible on all the table rows at once. It didn’t had the context of a single row. Any thoughts on that?
For now I continue to just use the standard Table element. It was quite easy to link the xano data source to it.
I suggest that you take some screenshots and/or a Loom video (free) to better show the issue you are experiencing.
I’m a little unclear about your previous comments.
You are saying that all the context menus show up with a click on any row?
I’m not too sure what logic you are using to show/hide the context menu.
One way to show and hide elements is to connect the ‘Display’ property of that element to a boolean variable and then change that variable. If you are doing this and you are using the same variable for each context menu then I would expect all of them to show/hide at the same time.
I will add some visual information, to clarify more. Thanks so far I will get back soon.
