CMSM

Data Klimatologi

No.	Tanggal	Rain Falls	Temperature	Solar Radiation	Humidity	Wind Speed	Wind Direction
53	2025-06-26	2.10mm	27.23 °C	427.66 w/m2	80%	12.29 km/j	115°
54	2025-06-25	8.50mm	26.67 °C	222.45 w/m2	83%	10.58 km/j	113°
55	2025-06-24	4.70mm	26.29 °C	54.56 w/m2	82%	9.50 km/j	115°
56	2025-06-23	0.70mm	25.53 °C	36.33 w/m2	87%	8.95 km/j	112°

11 12 131415 16 17

Use custom template

<div class="panel">
    <div class="panel-header d-flex align-items-center px-2">
        <div class="icon fn-6"><i class="fa-regular fa-list fa-lg"></i></div>
        <div class="title flex-grow-1">Data Klimatologi</div>
    </div>
    <div class="panel-body">
        <table class="listing table table-striped">
            <thead><tr class="trth"><th class="sorting" idp="5" dh="id">No.</th>
                <th class="sorting" idp="5" dh="tanggal">Tanggal</th>
                <th class="sorting" idp="5" dh="rain_falls">Rain Falls</th>
                <th class="sorting" idp="5" dh="temperature">Temperature</th>
                <th class="sorting" idp="5" dh="solar_radiation">Solar Radiation</th>
                <th class="sorting" idp="5" dh="humidity">Humidity</th>
                <th class="sorting" idp="5" dh="wind_speed">Wind Speed</th>
                <th class="sorting" idp="5" dh="wind_direction">Wind Direction</th>
                <th>Action</th></tr></thead>
        <tbody>

<tr class="trtd" data_id="{ID}"><td class="no">{NO}</td>
                <td class="tanggal">{!tanggal!}</td>
                <td class="rain_falls text-end">{!rain_falls!}mm</td>
                <td class="temperature text-end">{!temperature!} °C</td>
                <td class="solar_radiation text-end">{!solar_radiation!} w/m2</td>
                <td class="humidity text-end">{!humidity!}%</td>
                <td class="wind_speed text-end">{!wind_speed!} km/j</td>
                <td class="wind_direction text-end">{!wind_direction!}°</td>
                <td class="action text-center">
                    <button type="button" class="update btn btn-sm btn-act"  data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Update"><i class="fa-regular fa-pen-to-square"></i></button>
                </td></tr>
      
        
        </tbody>
        </table></div>
   <div class="panel-footer p-2"><div class="text-center">{!PAGING!}</div></div>
</div>

Title
SubTitle
Table Property
Sub From
On Click
Optional Setting
Icon
Hidden

List Modul