ledger balance

src/pages/ledger/ListLedgers.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 
-import {EditLedgerModal, LedgerLabel, useLedgersStore} from "@/ledger";
+import {EditLedgerModal, Ledger, LedgerLabel, useLedgersStore} from "@/ledger";
 import {storeToRefs} from "pinia";
 import {nextTick, ref} from "vue";
 import {PencilSquareIcon} from "@heroicons/vue/24/outline";
 import {IskLabel} from "@/market";
+import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
 
 const {ledgers} = storeToRefs(useLedgersStore());
 
+const { sortedArray, headerProps } = useSort<Ledger>(ledgers)
+
 const editModal = ref<typeof EditLedgerModal>();
 const editingLedgerId = ref("");
 
@@ -21,13 +24,35 @@ const openEdit = async (ledgerId: string) => {
 
 <template>
   <div class="mt-4">
-    <div v-for="ledger in ledgers" :key="ledger.ledgerId" class="flex items-center mb-2">
-      <LedgerLabel :ledger="ledger" :link="true" />
-      <div class="flex grow">
-        <IskLabel class="ms-2" :amount="ledger.balance" />
-      </div>
-      <button class="btn-icon ms-2" @click="openEdit(ledger.ledgerId)"><PencilSquareIcon /></button>
-    </div>
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33" bottom="1rem">
+      <template #default="{ list }">
+        <thead>
+        <tr>
+          <SortableHeader v-bind="headerProps" sortKey="name">Ledger</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="balance">Isk Balance</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="l in list" :key="l.data.ledgerId">
+          <td>
+            <LedgerLabel :ledger="l.data" :link="true" />
+          </td>
+          <td class="text-right">
+            <IskLabel class="ms-2" :amount="l.data.balance" />
+          </td>
+          <td class="text-right">
+            <button class="btn-icon ms-2" @click="openEdit(l.data.ledgerId)"><PencilSquareIcon /></button>
+          </td>
+        </tr>
+        </tbody>
+      </template>
+      <template #empty>
+        <div class="text-center mt-4">
+          <span>No ledgers found</span>
+        </div>
+      </template>
+    </VirtualScrollTable>
   </div>
   <EditLedgerModal ref="editModal" :ledger-id="editingLedgerId" />
 </template>