Add DxGrouping component and update DxColumn properties
This commit is contained in:
parent
da05b43d3c
commit
42d77157be
@ -23,6 +23,7 @@
|
|||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
:word-wrap-enabled="true"
|
:word-wrap-enabled="true"
|
||||||
>
|
>
|
||||||
|
<DxGrouping :auto-expand-all="false" />
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
@ -51,6 +52,15 @@
|
|||||||
cell-template="formatText"
|
cell-template="formatText"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field=""
|
||||||
|
caption="Semua Unit"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
cell-template="formatText"
|
||||||
|
:group-index="0"
|
||||||
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
@ -58,7 +68,7 @@
|
|||||||
caption="Regional"
|
caption="Regional"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="formatText"
|
cell-template="formatText"
|
||||||
:group-index="0"
|
:group-index="1"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@ -67,7 +77,7 @@
|
|||||||
caption="UID"
|
caption="UID"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="formatText"
|
cell-template="formatText"
|
||||||
:group-index="1"
|
:group-index="2"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="150"
|
:width="150"
|
||||||
@ -76,7 +86,7 @@
|
|||||||
caption="UP3"
|
caption="UP3"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
cell-template="formatText"
|
cell-template="formatText"
|
||||||
:group-index="2"
|
:group-index="3"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
@ -768,7 +778,8 @@ import {
|
|||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection,
|
DxSelection,
|
||||||
DxSummary,
|
DxSummary,
|
||||||
DxGroupItem
|
DxGroupItem,
|
||||||
|
DxGrouping
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||||
|
@ -549,7 +549,7 @@
|
|||||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)]"
|
||||||
:data-source="data"
|
:data-source="dataSub"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
@ -590,9 +590,7 @@
|
|||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
:calculateCellValue="
|
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||||
(item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
|
|
||||||
"
|
|
||||||
data-type="number"
|
data-type="number"
|
||||||
caption="No"
|
caption="No"
|
||||||
cell-template="formatNumber"
|
cell-template="formatNumber"
|
||||||
@ -968,7 +966,7 @@ const filterData = (params: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const getDetail = () => {
|
const getDetail = () => {
|
||||||
dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
|
// dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
|
||||||
}
|
}
|
||||||
|
|
||||||
const showDialogDataSelected = () => {
|
const showDialogDataSelected = () => {
|
||||||
|
@ -328,8 +328,6 @@ export const queries = {
|
|||||||
persen_selesai
|
persen_selesai
|
||||||
total_inproses
|
total_inproses
|
||||||
persen_inproses
|
persen_inproses
|
||||||
total_durasi_response
|
|
||||||
total_durasi_recovery
|
|
||||||
avg_durasi_response
|
avg_durasi_response
|
||||||
min_durasi_response
|
min_durasi_response
|
||||||
max_durasi_response
|
max_durasi_response
|
||||||
|
Loading…
x
Reference in New Issue
Block a user