Add SortHeader component for sorting functionality in TransactionsTable. Update TransactionsTable to prevent row selection when clicking on IBAN text. Minor adjustment in gridConfig for layout consistency.

client/src/components/TransactionsTable.js

@@ -151,11 +151,19 @@ class TransactionsTable extends Component {
     const field = event.colDef.field;
     
     // Don't select on selection column or document column (last cell)
-    // Allow IBAN column to trigger selection
     if (field === 'selection' || field === 'documents') {
       return;
     }
     
+    // For IBAN column, check if we clicked on the actual text (which should trigger filter)
+    if (field === 'Kontonummer/IBAN') {
+      const clickTarget = event.event?.target;
+      // If clicked on a span element (the IBAN text), don't select row
+      if (clickTarget && clickTarget.tagName === 'SPAN' && clickTarget.style.textDecoration === 'underline') {
+        return;
+      }
+    }
+    
     // Toggle row selection
     const rowData = event.data;
     if (!rowData) return;

client/src/components/config/gridConfig.js

@@ -35,6 +35,7 @@ export const getColumnDefs = () => [
       // These will be set by the parent component
     }
   },
+
   {
     headerName: 'Datum',
     field: 'Buchungstag',

client/src/components/headers/SortHeader.js

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import { ArrowUpward, ArrowDownward } from '@mui/icons-material';
+
+const SortHeader = (params) => {
+  const [sortState, setSortState] = useState(null);
+  
+  // Update sort state when it changes
+  useEffect(() => {
+    const updateSortState = () => {
+      const currentSort = params.column?.getSort();
+      setSortState(currentSort);
+    };
+    
+    // Initial sort state
+    updateSortState();
+    
+    // Listen for sort changes
+    if (params.api) {
+      params.api.addEventListener('sortChanged', updateSortState);
+      return () => {
+        params.api.removeEventListener('sortChanged', updateSortState);
+      };
+    }
+  }, [params.api, params.column]);
+
+  const handleSort = (direction, event) => {
+    if (params.setSort) {
+      params.setSort(direction, event.shiftKey);
+    }
+  };
+
+  return (
+    <div style={{ 
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%',
+      width: '100%',
+      gap: 0,
+      backgroundColor: '#f8f9fa',
+      borderBottom: '1px solid #dee2e6'
+    }}>
+      <ArrowUpward 
+        sx={{ 
+          fontSize: '10px', 
+          color: sortState === 'asc' ? '#0969da' : '#ccc',
+          opacity: sortState === 'asc' ? 1 : 0.5,
+          cursor: 'pointer'
+        }}
+        onClick={(e) => handleSort('asc', e)}
+      />
+      <ArrowDownward 
+        sx={{ 
+          fontSize: '10px', 
+          color: sortState === 'desc' ? '#0969da' : '#ccc',
+          opacity: sortState === 'desc' ? 1 : 0.5,
+          cursor: 'pointer'
+        }}
+        onClick={(e) => handleSort('desc', e)}
+      />
+    </div>
+  );
+};
+
+export default SortHeader;