defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add margin-bottom utility class and modify table column in Table_36.vue

Browse Source
This commit is contained in:
kur0nek-o 2024-02-29 13:26:37 +07:00
parent edd64b1ba5
commit 2ceb6b7ba6
2 changed files with 64 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/style.css
View File

@ -1373,6 +1373,10 @@ body {
margin-top: 1.5rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}

87
src/components/Pages/Monalisa/Table_36.vue
View File

@ -11,7 +11,6 @@
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)] mb-10"
:remote-operations="true"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
@ -44,6 +43,14 @@
/>
<DxColumnFixing :enabled="true" />
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn
alignment="center"
:min-width="170"
@ -71,14 +78,6 @@
css-class="custom-table-column"
:group-index="2"
/>
<DxColumn
alignment="center"
:min-width="170"
data-type="text"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn
@ -135,53 +134,86 @@
</DxColumn>
<DxSummary>
<DxGroupItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}" />
<DxGroupItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" />
<DxGroupItem column="persen_mom" summary-type="sum" display-format="{0}" />
<DxGroupItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}" />
<DxGroupItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" />
<DxGroupItem column="persen_yoy" summary-type="sum" display-format="{0}" />
</DxSummary>
<!-- <DxSummary>
<DxGroupItem :show-in-group-footer="true" column="nama_ulp" display-format="Total" />
<DxGroupItem
:show-in-group-footer="true"
:align-by-column="true"
column="mom_bulan_kemarin"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
:align-by-column="true"
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
:align-by-column="true"
column="persen_mom"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
:align-by-column="true"
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
:align-by-column="true"
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
:align-by-column="true"
column="persen_yoy"
summary-type="sum"
display-format="{0}"
/>
</DxSummary> -->
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="nama_ulp"
css-class="text-white"
/>
<DxTotalItem
column="mom_bulan_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="mom_bulan_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="persen_mom"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="yoy_tahun_kemarin"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="yoy_tahun_ini"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="persen_yoy"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
</DxSummary>
</DxDataGrid>
</div>
</template>
@ -202,7 +234,8 @@ import {
DxScrolling,
DxSearchPanel,
DxSelection,
DxSummary
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'