Guidance needed - Nesting a repeat region, inside a TABLE

Wappler General How To
#1

Hi All,

Looking for a little guidance or assurance what i’m trying to do can be done.

I am wanting to nest a repeat region inside a repeat row of a Table.

I have gone through the documentation on I have gone through the Nested Repeat Regions documents but can’t seem to make the instructions work within a BS4 table.

https://docs.wappler.io/t/nested-repeat-regions/5165

The issue i’m finding is that to nest a repeat region within the table row, you would need to be able to add that AC component, but its not listed as an option of a row inside a table.

Is this doable? If so, where should i be looking to make it work?

Example would be like:

Row 1 - Returns simple query in a table with a few columns
nested row 1 - returns simple repeat query under the above/parent row.

Thanks in adavce.

Phil

#2

Where in the table (in which table element) would you like to nest what element?

#3

Not sure if I’m using the right element terminology (sorry) but I would want to nest a row of cells beneath another row of cells in the table body.

Proper context - the first row will have a few numerical metrics aggregated at a weekly level (1 row of data) and the nested row beneath that would have similar data but aggregated at a daily level.

#4

So you want two repeat regions, repeating table rows in one dynamic table? Or do you want to have the second row nested inside the first one?

Currently the tbody is the repeat-children region which repeats all the rows inside it …

#5

Yes :slight_smile:

But considering the table body is repeat regions, it’s just one additional repeat region nested in that.

Is that doable? Or does the table structure make that impossible?

#6

Can you please provide a static example of what are you trying to do exactly, as it’s not clear if you need two rows one after another or two rows, where the second one is nested in the first?

#7

No worries. Thanks by the way for your prompt response. Glad i caught you at work :slight_smile:

Here’s something I put together to visualise what i’m after.

image

The yellow is the initial DB query, the green is the nested repeat DB query.

Does that make sense?

#8

You would need some custom coding for that. So the structure will be something like:

<table class="table">
	<thead>
		<tr>
			<th>Week #</th>
			<th>Date</th>
			<th>Day</th>
			<th>Metric 1</th>
			<th>Metric 2</th>
		</tr>
	</thead>
	<tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="serverconnect1.data.repeat1" id="tableRepeat1">
		<tr>
			<td>{{your_binding}}</td>
			<td>{{your_binding}}</td>
			<td>{{your_binding}}</td>
			<td>{{your_binding}}</td>
			<td>{{your_binding}}</td>
		</tr>
		<tr>
			<td class="p-0" colspan="5">
				<table class="table" is="dmx-repeat" id="tableRepeat2" dmx-bind:repeat="repeat2">
					<tr>
						<td>&nbsp;</td>
						<td>{{your_binding}}</td>
						<td>{{your_binding}}</td>
						<td>{{your_binding}}</td>
						<td>{{your_binding}}</td>
					</tr>
				</table>
			</td>
		</tr>
	</tbody>
</table>

Just replace the repeat expressions and the bindings expressions with your own.

3 Likes
#9

Ok thanks @Teodor. I’ll see if I can get it working.

#11

This partly fixed my issue trying display query in a repeat server action in a bootstrap table.

What I’m trying to achieve is displaying users for each ‘gemeente’. So first I query the gemeentes and do a query within a repeat that gets each gemeentes users.

So I try to display all the users for all the gemeentes from the first query.

I currently use this code:

<tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="sc_current_users_gemeentes_users.data.repeat[0].get_gemeentes_users" id="tableRepeat1">
    <tr>
      <td dmx-text="gebruiker_id"></td>
      <td dmx-text="gemeente_id"></td>
      <td dmx-text="email"></td>
      <td dmx-text="Voornaam"></td>
      <td dmx-text="Achternaam"></td>
      <td dmx-text="most_recent_login"></td>
      <td dmx-text="Gemeente"></td>
    </tr>
<tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="sc_current_users_gemeentes_users.data.repeat[1].get_gemeentes_users" id="tableRepeat2">
    <tr>
        <td dmx-text="gebruiker_id"></td>
        <td dmx-text="gemeente_id"></td>
        <td dmx-text="email"></td>
        <td dmx-text="Voornaam"></td>
        <td dmx-text="Achternaam"></td>
        <td dmx-text="most_recent_login"></td>
        <td dmx-text="Gemeente"></td>
    </tr>
  </tbody>
<tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="sc_current_users_gemeentes_users.data.repeat[2].get_gemeentes_users" id="tableRepeat3">
    <tr>
        <td dmx-text="gebruiker_id"></td>
        <td dmx-text="gemeente_id"></td>
        <td dmx-text="email"></td>
        <td dmx-text="Voornaam"></td>
        <td dmx-text="Achternaam"></td>
        <td dmx-text="most_recent_login"></td>
        <td dmx-text="Gemeente"></td>
    </tr>
</tbody>

However, I need to copy the table code for each repeat… and I don’t know how many of these repeats I need, upfront.

Does anybody know how to dynamically add the nested repeats, as much as needed? So perhaps some code that dynamically changes sc_current_users_gemeentes_users.data.repeat[THIS PART].get_gemeentes_users or something?

I tried these docs:

But couldn’t really figure out how this applies to tables, as there is no Make Repeat Children button for the tables in the UI.

Any help is greatly appreciated :smiley:

bg

Jelle

#12

I have now sort of fixed the issue by following the Nested Repeat Regions docs. I have added the table heading to the first repeat and the table body to the nested repeat:

<div class="row row-cols-1" is="dmx-repeat" id="repeat1" dmx-bind:repeat="sc_current_users_gemeentes_users.data.repeat">
<div class="col">
<div class="card">
  <div class="card-body">
    <h1>{{Naam_bedrijf}}</h1>
    <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th class="w-25">Voornaam</th>
                    <th class="w-25">Achternaam</th>
                    <th class="w-25">Email</th>
                    <th class="w-10">Bewerken</th>
                    <th class="w-10">Verwijderen</th>
                    
                </tr>
            </thead>
            </table>
            </div>
    <div dmx-repeat:repeat2="get_gemeentes_users">
    <div class="table-responsive">
<table class="table table-bordered table-hover">
    <tbody>
        <tr>
            <td class="w-25">{{Voornaam}}</td>
            <td class="w-25">{{Achternaam}}</td>
            <td class="w-25">{{email}}</td>
            <td class="w-10"><button id="btnaanpassen" class="btn btn-primary">Bewerken</button></td>
            <td class="w-10">
<button id="btnverwijderen" class="btn btn-danger">Verwijderen</button>
</td>
        </tr>
    </tbody>
</table>
</div>

</div>

  </div>
</div>

</div>
</div>

It does mess up the width of the columns for a bit, so I had to set the column widths in order for the body to match the heading.

It now looks like this:

Mijn contactpersonen
Mijn contactpersonen1259×982 38.7 KB

Any suggestions on how to handle this differently is highly welcome.