Grouping data based on specific groups (Custom Template)

Hello everyone, I have a view

view panitia

SELECT id, periode, nama, posisi, jabatan
FROM panitia
ORDER BY periode DESC

custome template
customTemplateHeader

<table class="ew-table">
     <tbody>

customTemplateBody

<tr{{{row_attrs}}}>


**{{{caption periode}}}:** {{{periode}}}


**{{{caption nama}}}:** {{{nama}}}
**{{{caption posisi}}}:** {{{posisi}}}
**{{{caption jabatan}}}:** {{{jabatan}}}

{{{list_options_2}}}

</tr>

customTemplateFooter

</table>

The display on the list page works, but all the data is in one table.
I want each table to contain the same periode, so that if the periode changes, the data will be displayed in a different table.
Example:
periode 2025
nama: Ika
posisi: kepala
jabatan:manajer

periode 2024
nama: rudi
posisi: Kepala
jabatan:IT

How do I create a custom template?

Thank You

You need to add JsRender template tag to check the change of periode and start a new table.

Thank you for your response. I'm trying to create a custom template as follows:

customTemplateHeader

<table class="ew-table">
     <tbody>

customTemplateBody

<tr{{{row_attrs}}}>
  <td>
    <div style="display:flex; align-items:flex-start;">
      
      <!-- LEFT -->
      <div style="flex:1; padding-right:20px;">
        <div><b>{{{caption periode}}}:</b> {{{periode}}}</div>
        <div><b>{{{caption nama}}}:</b> {{{nama}}}</div>
        <div><b>{{{caption posisi}}}:</b> {{{posisi}}}</div>
        <div><b>{{{caption jabatan}}}:</b> {{{jabatan}}}</div>
        {{{list_options_2}}}
      </div>

      <!-- RIGHT (FOTO) -->      
      <div style="width:140px; text-align:center;">
        {{{foto}}}
      </div>

    </div>
  </td>
</tr>

customTemplateFooter

    </tbody>
</table>

All data is displayed, but the data is still recorded, and the same period isn't grouped.
What's the solution so that the data for the same period will be grouped?
Thank you

As suggested, you need to write code:

Thank you for your response. I'm trying to create a custom template as follows:

{{for records}}
{{if #getIndex() == 0 || periode != ~root.last_periode}}


PERIODE {{:periode}}

{{:~setLast(periode)}}
{{/if}}

<!-- Item Person -->
<div style="border:1px solid #cfcfcf; padding:12px; margin-bottom:10px; border-radius:8px; display:flex;">
    <img src="upload/{{:foto}}" style="width:80px; height:100px; object-fit:cover; border-radius:6px; margin-right:15px;">
    <div>
        <b style="font-size:16px;">{{:nama}}</b><br>
        Jabatan: {{:jabatan}}<br>
        Posisi: {{:posisi}}<br>
        Status: {{:status}}
    </div>
</div>

{{/for}}

data not display .

where is the mistake?

What are the follows?

  • records
  • ~root.last_periode
  • setLast()

Did you post complete code? (You need to write code for above.)