Resize grid columns when window is resized

This commit is contained in:
Erki Aas 2022-11-15 19:06:33 +02:00
parent 95ec7e09e8
commit aeef2f9852
1 changed files with 10 additions and 1 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div style="height: 100%; width: 100%;"> <div style="height: 100%; width: 100%;" v-resize="onResize">
<v-row no-gutters> <v-row no-gutters>
<v-col cols="12" sm="5" class="d-flex justify-start flex-wrap"> <v-col cols="12" sm="5" class="d-flex justify-start flex-wrap">
<Datepicker class="ma-2" :refresh="refreshFilterState" /> <Datepicker class="ma-2" :refresh="refreshFilterState" />
@ -45,6 +45,7 @@ import "ag-grid-community/styles//ag-grid.css";
import "ag-grid-community/styles//ag-theme-material.css"; import "ag-grid-community/styles//ag-theme-material.css";
import { VBtn } from 'vuetify/components/VBtn' import { VBtn } from 'vuetify/components/VBtn'
import { VRow, VCol } from 'vuetify/components/VGrid' import { VRow, VCol } from 'vuetify/components/VGrid'
import { Resize } from 'vuetify/directives';
import ExamineLogModal from "./Modal/ExamineLogModal.vue"; import ExamineLogModal from "./Modal/ExamineLogModal.vue";
import ComboboxFilter from "./Grid/Main/Filter/ComboboxFilter.js"; import ComboboxFilter from "./Grid/Main/Filter/ComboboxFilter.js";
import ErrLevelRenderer from "./Grid/Main/ErrLevelRenderer"; import ErrLevelRenderer from "./Grid/Main/ErrLevelRenderer";
@ -65,6 +66,9 @@ export default {
VRow, VRow,
VCol VCol
}, },
directives: {
Resize
},
data() { data() {
return { return {
examineLogContent: null, examineLogContent: null,
@ -105,6 +109,11 @@ export default {
setFilterQuery: 'setFilterQuery', setFilterQuery: 'setFilterQuery',
toggleFilterQueryStreaming: 'toggleFilterQueryStreaming', toggleFilterQueryStreaming: 'toggleFilterQueryStreaming',
}), }),
onResize () {
if (this.gridApi) {
this.gridApi.sizeColumnsToFit()
}
},
refreshFilterState() { refreshFilterState() {
this.gridApi.onFilterChanged(); this.gridApi.onFilterChanged();
}, },