Add DxGrouping component and update DxColumn properties

This commit is contained in:
Dede Fuji Abdul 2024-03-15 09:55:13 +07:00
parent da05b43d3c
commit 42d77157be
3 changed files with 18 additions and 11 deletions

View File

@ -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'

View File

@ -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 = () => {

View File

@ -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