tables display

src/pages/ledger/ListLedgerTransactions.vue

@@ -5,6 +5,7 @@ import {computedAsync} from "@vueuse/core";
 import {TransactionResponse} from "@/generated/mammon";
 import {formatEveDate} from "@/formaters.ts";
 import {IskLabel} from "@/market";
+import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
 
 const {ledgerId} = useLedgerParam();
 
@@ -15,6 +16,15 @@ const transactions = computedAsync<TransactionResponse[]>(async () => {
   return [];
 }, []);
 
+const { sortedArray, headerProps } = useSort(() => transactions.value.map(transaction => {
+  return {
+    transactionId: transaction.transactionId,
+    description: transaction.description,
+    date: new Date(transaction.datetime),
+    balance: getIskBalance(transaction)
+  }
+}));
+
 const getIskBalance = (transaction: TransactionResponse) => {
   if (!ledgerId.value) {
     return 0;
@@ -37,10 +47,25 @@ const getIskBalance = (transaction: TransactionResponse) => {
 
 <template>
   <div class="mt-4">
-    <div class="flex items-end gap-2 mt-2" v-for="transaction in transactions" :key="transaction.transactionId">
-      <span>{{formatEveDate(new Date(transaction.datetime))}}</span>
-      <IskLabel :amount="getIskBalance(transaction)" />
-      <span>{{transaction.description}}</span>
-    </div>
+    <VirtualScrollTable  :list="sortedArray" :itemHeight="33" bottom="1rem">
+      <template #default="{ list }">
+        <thead>
+        <tr>
+          <SortableHeader v-bind="headerProps" sortKey="date">Date</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="balance">Balance</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="description">Description</SortableHeader>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="t in list" :key="t.data.transactionId">
+          <td>{{formatEveDate(t.data.date)}}</td>
+          <td class="text-right">
+            <IskLabel :amount="t.data.balance" />
+          </td>
+          <td>{{t.data.description}}</td>
+        </tr>
+        </tbody>
+      </template>
+    </VirtualScrollTable>
   </div>
 </template>