Dynamic table with group

OL Connect Professional Designer
1

Hi al,
I need to create a dynamic table in which I want to group the data based on the value of a field and in a cell I want to insert the sum of the grouped values like the example below which is grouped based on the product code

Product code Description Color Price
123 abc red 100
123 abc blue 150
Total 250
456 qwert green 410
456 qwewet red 120
Total 530

Can I create it with the tools available or do I have to create the table using JavaScript?

2

You could achieve that by grouping the data using nested details as shown below.

image

The following HTML takes care of the repeats the nested level first (details.lines) and subsequently shows a row for the group (details level). The data-sum attribute is used to summarize the price of the details.lines.price field for that group.

<table id="table" class="table--grid" style="width: 50mm" data-expander="2019">
    <thead>
        <tr>
            <th style="text-align: left;">Prod</th> 
            <th style="text-align: left;">Price</th> 
        </tr>
    </thead>
    <tbody>
        <tr data-repeat="details.lines">
            <td>{{prod}}</td> 
            <td>{{price}}</td> 
        </tr>
        <tr data-repeat="details">
            <td>Total</td> 
            <td data-sum="details.lines.price" style="font-weight: bold;"></td>
        </tr>
    </tbody>
</table>

image

1 Like