Adjust column width and summary display in

Table_9.vue
This commit is contained in:
Dede Fuji Abdul 2023-11-08 13:29:27 +07:00
parent cbb7e0e0c4
commit 9896746b73

View File

@ -14,7 +14,7 @@
<DxGroupPanel :visible="true" />
<DxGrouping :auto-expand-all="true" />
<DxColumn :width="50" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="jenisGangguan" caption="Jenis Gangguan"
css-class="custom-table-column" :group-index="0" />
@ -71,13 +71,41 @@
</DxColumn>
</DxColumn>
<DxSummary css-class="!bg-primary-500">
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxSummary>
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
display-format="{0}" css-class="text-white" />
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
display-format="{0}" css-class="text-white" />
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
display-format="{0}" />
</DxSummary>
</DxDataGrid>
</div>
@ -169,6 +197,86 @@ const data = [
},
}
},
{
no: 2,
kode: 'A',
jenisGangguan: 'Gangguan A',
laporan: {
total: 10,
sudahSelesai: {
jml: 5,
persen: 50,
},
belumSelesai: {
jml: 5,
persen: 50,
},
},
responseTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
},
recoveryTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
}
},
{
no: 3,
kode: 'B',
jenisGangguan: 'Gangguan B',
laporan: {
total: 10,
sudahSelesai: {
jml: 5,
persen: 50,
},
belumSelesai: {
jml: 5,
persen: 50,
},
},
responseTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
},
recoveryTime: {
menit: {
total: 10,
rataRata: 10,
max: 10,
min: 10,
},
laporan: {
lebihSla: 5,
kurangSla: 5,
},
}
},
]
onMounted(() => {