reprocess virtual scroll

src/components/Modal.vue

@@ -55,5 +55,4 @@ useEventListener('keyup', e => {
 .fade-enter-active, .fade-leave-active {
     @apply transition-opacity;
 }
-
 </style>

src/reprocess/ReprocessResultTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SortableHeader, useSort } from '@/components/table';
+import { SortableHeader, useSort, VirtualScrollTable } from '@/components/table';
 import { formatIsk, percentFormater } from '@/formaters';
 import { MarketTypeLabel } from '@/market/type';
 import { useStorage } from '@vueuse/core';
@@ -46,7 +46,8 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
             <input type="number" min="-100" max="100" step="1" v-model="threshold" />
         </div>
     </div>
-    <table>
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33"  bottom="1rem">
+        <template #default="{ list }">
             <thead>
                 <tr>
                     <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
@@ -56,14 +57,20 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
                 </tr>
             </thead>
             <tbody>
-            <tr v-for="r in sortedArray" :key="r.typeID" :class="{'line-green': r.ratio >= threshold / 100 }">
+                <tr v-for="r in list" :key="r.data.typeID" :class="{'line-green': r.data.ratio >= threshold / 100 }">
                     <td>
-                    <MarketTypeLabel :id="r.typeID" :name="r.name" />
+                        <MarketTypeLabel :id="r.data.typeID" :name="r.data.name" />
                     </td>
-                <td class="text-right">{{ formatIsk(r.market) }}</td>
-                <td class="text-right">{{ formatIsk(r.materials) }}</td>
-                <td class="text-right">{{ percentFormater.format(r.ratio) }}</td>
+                    <td class="text-right">{{ formatIsk(r.data.market) }}</td>
+                    <td class="text-right">{{ formatIsk(r.data.materials) }}</td>
+                    <td class="text-right">{{ percentFormater.format(r.data.ratio) }}</td>
                 </tr>
             </tbody>
-    </table>
+        </template>
+        <template #empty>
+            <div class="text-center mt-4">
+                <span>No items found</span>
+            </div>
+        </template>
+    </VirtualScrollTable>
 </template>