Yes on both counts. And just to clarify, Wappler is not all about custom code — I would say it is about producing standards based code through a visual interface, with the OPTION of adding/using custom code.
6 Likes
Thank you! And sorry yes, that’s what I meant when I said all about custom code, just comparing it to Bubble where there’s zero use of code. 
1 Like
I’m looking to do this, so I would like to know how. Is there some documentation or example someplace?
I’ve looked at that but couldn’t really figure out how to make it work in a repeat table. I have a repeat table connected to a paged query, which is the “parent” records, and would like to show the related “children” in an expandable region under each parent.
Something like the above example:
Not sure how to set up the queries and what components to use. Can I get a little more detail?
Thanks!
Is this possible using the built-in tools, or do I have to go to something like datatables.net like the following post refers to?
How to use DataTables.net
You can’t build that with the core components. You would need to custom code some parts or use something like DT as you mentioned.
OK thanks for your reply. That’s kinda what I thought, but wondered what @mebeingken was referring to when he said yes to the original question. I was hoping someone knew a way to do it without going to a third party.
Maybe this could be put on the wish list…
Hi Dan it’s not really clear what are you trying to achieve exactly.
Do you want to use an HTML table? Or just rows with records (not <table>)?
If you want to use tables, you can manually do what you need by nesting a bootstrap collapse component in your table row …
Or if it’s the other way round you can nest tables inside your collapses … i just don’t understand what do you need to achieve.
I’m not sure what the proper terminology is, but what I’d like to do is show a list of records with an icon on each row that would expand that row and show detail records for that row.
For instance, if you’re familiar with the Northwind database, let’s use the Orders and Order Details tables as an example. Using the Table Generator, define a table connected to a paged query that returns the Orders and related Order Details for each record. The table needs to display each order as a row, and then when the user clicks the expand icon, show the order details for that given order. I need it to be a paged query because I want to have a paging component below the table. Hope that makes sense.
Here is the Orders table:
With the paging component under it:
Now, I’d like to put a button on each row with an icon that would expand the row and show some fields from the Order Details for that row’s Order.
Yes that is possible, but you will need to custom code this.
You need to use nested repeats on the server side and either nest a table within in an existing table row > td or use collapses with nested tables inside. No point-and-click solution out of the box.
OK, I’m not afraid of custom coding it, so I’d be interested in more detail.
Can I use a paged query on the server side, or do I have to use a multi query and build the paging properties somehow? I know how to use a repeat and loop over the data returned by the query, but can’t figure out how to get the data into the right structure.
With this server side code:
This is the data and it’s the correct, but OrderDetails is not part of the data property like it probably should be:
I think each entry in OrderDetails needs to be an array in it’s parent record in Orders.data property. Is there a way to get it there?
For the paged query, you will need to use the “repeat” as a source for the dynamic table on the front end and then use the paged query itself for the paging.
OK, I think I followed that and got it working. So basically, we’re ignoring the data property of the paged query and using the output of the repeat. Redundant data, but so far so good.
I now have an OrderDetails array for each row in the Orders array and it’s available on the front end but I can’t figure out how to display it. I used the table generator to create another table but its showing the data from the first row only. And it just wants to show it above or below the Orders table.
How do I get it to show in the correct row?
That’s only because of the way the paged query works. When working with regular queries you only use the repeat and disable the output of the query itself.
What do you mean? What’s the code for both repeats on your page?
Is this what you mean?
For the Orders table:
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="sc_orders.data.repeat" id="tableRepeat1" dmx-state="qm_orders" dmx-sort="sort" dmx-order="dir">
And for the OrderDetails table:
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="sc_orders.data.repeat[0].OrderDetails" id="tableRepeat2">
I know repeat[0] is not correct, but I’m not sure what it should be.
If the second repeat is nested into the repeating element of the first one the it needs to be:
dmx-bind:repeat="OrderDetails"
Great! We’re getting closer!
As you can see, the details are correct by the OrderID
But the layout is not quite what I’m looking for yet. I just added another Cell (td) and inserted the OrderDetails table into that cell. But its showing its showing it as another column on the right and I’d like ti to be an expanded area of some sort under each row.
What markup or component could I use to do that?
You can add another tr in the main repeating tbody element after the existing tr.
<tr>
<td colspan="9">
...your nested table code goes here...
</td>
</tr>
just make sure the colspan value is equal to your main table columns count.
Perfect! Yes, I found that on getbootstrap.com: https://getbootstrap.com/docs/5.0/content/tables/#nesting
So, I’m getting this now:
Now to figure out how to show the details collapsed and then the user can expand and collapse at will. What markup would work for that?