src/components/VnTable/VnTable.vue

@@ -351,7 +351,7 @@ defineExpose({
                         />
                     </template>
                     <template #header-cell="{ col }">
-                        <QTh v-if="col.visible ?? true" auto-width>
+                        <QTh v-if="col.visible ?? true" :class="[col.columnClass]">
                             <div
                                 class="column self-start q-ml-xs ellipsis"
                                 :class="`text-${col?.align ?? 'left'}`"
@@ -376,6 +376,7 @@ defineExpose({
                                     :data-key="$attrs['data-key']"
                                     v-model="params[columnName(col)]"
                                     :search-url="searchUrl"
+                                    class="full-width"
                                 />
                             </div>
                         </QTh>
@@ -400,7 +401,7 @@ defineExpose({
                         <QTd
                             auto-width
                             class="no-margin q-px-xs"
-                            :class="[getColAlign(col), col.class, col.columnField?.class]"
+                            :class="[getColAlign(col), col.columnClass]"
                             v-if="col.visible ?? true"
                         >
                             <slot :name="`column-${col.name}`" :col="col" :row="row">

src/css/app.scss

@@ -233,27 +233,23 @@ input::-webkit-inner-spin-button {
 }
 
 .q-table {
-    thead,
+    th,
-    tbody {
+    td {
-        th {
+        padding: 1px 10px 1px 10px;
-            .q-select {
+        max-width: 100px;
-                max-width: 120px;
+        div span {
-            }
-        }
-        td {
-            padding: 1px 10px 1px 10px;
-            max-width: 100px;
-            div span {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
         }
-        .expand {
+        overflow: hidden;
-            max-width: 400px;
+        white-space: nowrap;
-        }
+        text-overflow: ellipsis;
+    }
+    .shrink {
+        max-width: 75px;
+    }
+    .expand {
+        max-width: 400px;
     }
 }

src/pages/Claim/ClaimList.vue

@@ -44,7 +44,7 @@ const columns = computed(() => [
                 fields: ['id', 'name'],
             },
         },
-        class: 'expand',
+        columnClass: 'expand',
     },
     {
         align: 'left',

src/pages/Customer/CustomerList.vue

@@ -42,9 +42,7 @@ const columns = computed(() => [
         name: 'name',
         isTitle: true,
         create: true,
-        columnField: {
+        columnClass: 'expand',
-            class: 'expand',
-        },
     },
     {
         align: 'left',
@@ -52,9 +50,7 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.socialName'),
         isTitle: true,
         create: true,
-        columnField: {
+        columnClass: 'expand',
-            class: 'expand',
-        },
     },
     {
         align: 'left',
@@ -136,9 +132,7 @@ const columns = computed(() => [
         columnFilter: {
             inWhere: true,
         },
-        columnField: {
+        columnClass: 'expand',
-            class: 'expand',
-        },
     },
     {
         align: 'left',

src/pages/Customer/Notifications/CustomerNotifications.vue

@@ -32,7 +32,7 @@ const columns = computed(() => [
                 optionLabel: 'socialName',
             },
         },
-        class: 'expand',
+        columnClass: 'expand',
     },
     {
         align: 'left',

src/pages/Customer/Payments/CustomerPayments.vue

@@ -45,6 +45,7 @@ const columns = computed(() => [
             inWhere: true,
             alias: 't',
         },
+        columnClass: 'shrink',
     },
     {
         align: 'left',
@@ -57,7 +58,7 @@ const columns = computed(() => [
                 fields: ['id', 'name'],
             },
         },
-        class: 'expand',
+        columnClass: 'expand',
     },
     {
         name: 'isConfirmed',