fix(webui): improve order of Kafka message column

Author: marle3003

webui/src/components/dashboard/kafka/KafkaMessages.vue

@@ -294,22 +294,22 @@ function formatHeaderValue(v: KafkaHeaderValue) {
     <table class="table dataTable selectable" aria-label="Recent Messages">
         <thead>
             <tr>
+                <th scope="col" class="text-left col-2" v-if="!topicName">Topic</th>
                 <th scope="col" class="text-left col-2">Key</th>
                 <th scope="col" class="text-left col-4">Value</th>
-                <th scope="col" class="text-left col-2" v-if="!topicName">Topic</th>
                 <th scope="col" class="text-center col-2">Time</th>
 
             </tr>
         </thead>
         <tbody>
             <tr v-for="msg in messages" :key="msg.id" @click.left="handleMessageClick(msg.event)" @mousedown.middle="goToMessage(msg.event, true)" :class="msg.deleted ? 'deleted': ''">
+                <td v-if="!topicName">{{ msg.event.traits["topic"] }}</td>
                 <td class="key">
                     <router-link @click.stop class="row-link" :to="{name: getRouteName('kafkaMessage').value, params: { id: msg.id }}">
                         {{ msg.key }}
                     </router-link>
                 </td>
                 <td class="message" :title="msg.isAvro ? 'Avro content displayed as JSON' : ''">{{ msg.value }}</td>
-                <td v-if="!topicName">{{ msg.event.traits["topic"] }}</td>
                 <td class="text-center">{{ format(msg.event.time) }}</td>
             </tr>
         </tbody>