Make table virtual for list systems

components/content/ListSystems.vue

 <script setup lang="ts">
 const props = defineProps<{
-    headers: Array<Object>
-    systems: Array<Object>
-
+  headers: Array<Object>;
+  systems: Array<Object>;
 }>();
-const itemsPerParge = ref(25)
-const search = ref('')
-const sortBy = ref([{ key: 'system', order: 'asc' }])
+const itemsPerParge = ref(25);
+const search = ref("");
+const sortBy = ref([{ key: "system", order: "asc" }]);
 
 function filterOnlyCapsText(value, query, item) {
-    if (value != null && query != null) {
-        if (typeof value === 'string') {
-            return value.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1
-        }
-        if (typeof value == 'object') {
-            if (value?.name) {
-                return value.name.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1
-            }
-        }
+  if (value != null && query != null) {
+    if (typeof value === "string") {
+      return value.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1;
+    }
+    if (typeof value == "object") {
+      if (value?.name) {
+        return (
+          value.name.toString().toLowerCase().indexOf(query.toLowerCase()) !==
+          -1
+        );
+      }
     }
-    return false
+  }
+  return false;
 }
 </script>
 <template>
-    <v-card flat color="transparent" class="my-5">
-        <v-toolbar>
-            <v-toolbar-title>Defense Systems</v-toolbar-title>
+  <v-card flat color="transparent" class="my-5">
+    <v-toolbar>
+      <v-toolbar-title>Defense Systems</v-toolbar-title>
 
-            <v-text-field v-model="search" density="compact" variant="underlined" prepend-inner-icon="mdi-magnify"
-                label="Search for defense systems" single-line hide-details class="mx-2" clearable></v-text-field>
-        </v-toolbar>
-        <v-data-table :items-per-page="itemsPerParge" v-model:sort-by="sortBy" :headers="props.headers" density="compact"
-            :custom-filter="filterOnlyCapsText" :items="props.systems" :search="search">
-            <template #[`item.system`]="{ item }">
-                <v-chip variant="text" link :to="`${item.columns.system.path}`">{{
-                    item.columns.system.name }}</v-chip>
-            </template>
-            <template #[`item.article`]="{ item }">
-                <ArticleDoi v-if="item.columns?.article" :doi="item.columns.article.doi"
-                    :title="item.columns.article?.title" :abstract="item.columns.article?.abstract" :divider="false"
-                    :enumerate="false" />
-            </template>
-        </v-data-table>
-    </v-card>
+      <v-text-field
+        v-model="search"
+        density="compact"
+        variant="underlined"
+        prepend-inner-icon="mdi-magnify"
+        label="Search for defense systems"
+        single-line
+        hide-details
+        class="mx-2"
+        clearable
+      ></v-text-field>
+    </v-toolbar>
+    <v-data-table-virtual
+      height="800"
+      :items-per-page="itemsPerParge"
+      v-model:sort-by="sortBy"
+      :headers="props.headers"
+      density="compact"
+      :custom-filter="filterOnlyCapsText"
+      :items="props.systems"
+      :search="search"
+    >
+      <template #[`item.system`]="{ item }">
+        <v-chip variant="text" link :to="`${item.columns.system.path}`">{{
+          item.columns.system.name
+        }}</v-chip>
+      </template>
+      <template #[`item.article`]="{ item }">
+        <ArticleDoi
+          v-if="item.columns?.article"
+          :doi="item.columns.article.doi"
+          :title="item.columns.article?.title"
+          :abstract="item.columns.article?.abstract"
+          :divider="false"
+          :enumerate="false"
+        />
+      </template>
+    </v-data-table-virtual>
+  </v-card>
 </template>
\ No newline at end of file