From 992adc7bcf892bf9a7f05d9aacc50b310a16a0d0 Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Sun, 20 Jul 2025 04:58:29 +0200
Subject: [PATCH] Enhance TransactionsTable with custom cell renderers for
 description and recipient fields, and adjust row height for improved layout.

---
 client/src/components/TransactionsTable.js | 24 +++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/client/src/components/TransactionsTable.js b/client/src/components/TransactionsTable.js
index 6aa1a03..442a2bb 100644
--- a/client/src/components/TransactionsTable.js
+++ b/client/src/components/TransactionsTable.js
@@ -36,7 +36,8 @@ class TransactionsTable extends Component {
           width: 350,
           sortable: true,
           headerComponent: TextHeaderWithFilter,
-          tooltipField: 'description'
+          tooltipField: 'description',
+          cellRenderer: this.DescriptionRenderer
         },
         {
           headerName: 'Empfänger/Zahler',
@@ -44,7 +45,8 @@ class TransactionsTable extends Component {
           width: 200,
           sortable: true,
           headerComponent: TextHeaderWithFilter,
-          tooltipField: 'Beguenstigter/Zahlungspflichtiger'
+          tooltipField: 'Beguenstigter/Zahlungspflichtiger',
+          cellRenderer: this.RecipientRenderer
         },
         {
           headerName: 'Betrag',
@@ -156,7 +158,7 @@ class TransactionsTable extends Component {
         // Performance optimizations
         suppressChangeDetection: false,
         // Row height
-        rowHeight: 35,
+        rowHeight: 26,
         headerHeight: 40,
         // Pagination (optional - can be removed for infinite scrolling)
         pagination: false,
@@ -189,6 +191,22 @@ class TransactionsTable extends Component {
   };
 
   // Custom cell renderers as React components
+  DescriptionRenderer = (params) => {
+    return (
+      <span style={{ fontSize: '0.7rem', lineHeight: '1.2' }}>
+        {params.value}
+      </span>
+    );
+  };
+
+  RecipientRenderer = (params) => {
+    return (
+      <span style={{ fontSize: '0.7rem', lineHeight: '1.2' }}>
+        {params.value}
+      </span>
+    );
+  };
+
   AmountRenderer = (params) => {
     const amount = params.value;
     const color = amount >= 0 ? '#388e3c' : '#d32f2f';