src/pages/Ticket/TicketList.vue

@@ -20,6 +20,19 @@ const agenciesOptions = ref([]);
 const selectedClient = ref();
 
 const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'stateFk',
+        label: t('ticketList.state'),
+        columnFilter: {
+            name: 'stateFk',
+            component: 'select',
+            attrs: {
+                url: 'States',
+                fields: ['id', 'name'],
+            },
+        },
+    },
     {
         align: 'left',
         name: 'id',
@@ -35,25 +48,7 @@ const columns = computed(() => [
         label: t('ticketList.nickname'),
         isTitle: true,
     },
-    {
-        align: 'left',
-        name: 'state',
-        label: t('ticketList.state'),
-        chip: {
-            condition: () => true,
-            color: (row) => {
-                return row?.classColor ? `bg-${row.classColor}` : 'bg-orange';
-            },
-        },
-        columnFilter: {
-            name: 'stateFk',
-            component: 'select',
-            attrs: {
-                url: 'States',
-                fields: ['id', 'name'],
-            },
-        },
-    },
+
     {
         align: 'left',
         name: 'shipped',
@@ -189,6 +184,9 @@ const fetchAddresses = async (formData) => {
         return err.response;
     }
 };
+const getColor = (row) => {
+    return row?.classColor ? `bg-${row.classColor}` : 'bg-orange';
+};
 </script>
 
 <template>
@@ -302,6 +300,11 @@ const fetchAddresses = async (formData) => {
                 </div>
             </VnRow>
         </template>
+        <template #column-stateFk="{ row }">
+            <QChip :class="getColor(row)" dense square>
+                {{ row.state }}
+            </QChip>
+        </template>
     </VnTable>
 </template>