fix(performance): remove table component and uses own table component to improve performance (#2326)

* fix: remove table component and uses own table component to improve performance

* adds id

assets/components/ContainerTable.vue

@@ -0,0 +1,45 @@
+!
+<template>
+  <table class="table is-fullwidth">
+    <thead>
+      <tr>
+        <th>{{ $t("label.container-name") }}</th>
+        <th>{{ $t("label.status") }}</th>
+        <th>{{ $t("label.last-started") }}</th>
+        <th>{{ $t("label.avg-cpu") }}</th>
+        <th>{{ $t("label.avg-mem") }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="container in containers" :key="container.id">
+        <td>
+          <router-link :to="{ name: 'container-id', params: { id: container.id } }" :title="container.name">
+            {{ container.name }}
+          </router-link>
+        </td>
+        <td>{{ container.state }}</td>
+        <td><distance-time :date="container.created" strict :suffix="false"></distance-time></td>
+        <td>
+          {{ (container.movingAverage.cpu / 100).toLocaleString(undefined, { style: "percent" }) }}
+        </td>
+        <td>
+          {{ (container.movingAverage.memory / 100).toLocaleString(undefined, { style: "percent" }) }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+const { containers } = defineProps<{
+  containers: {
+    movingAverage: { cpu: number; memory: number };
+    created: Date;
+    state: string;
+    name: string;
+    id: string;
+  }[];
+}>();
+</script>
+
+<style lang="scss" scoped></style>