GFMIS UI fine tune

src/pages/GFMIS/DataGrid.js

@@ -53,7 +53,7 @@ export default function SearchTable({ previewSearchCriteria, onPreviewGridOnRead
             id: 'paymentMethod',
             field: 'paymentMethod',
             headerName: 'GFMIS Payment Method',
-            flex: 4,
+            flex: 2,
             renderCell: (params) => {
                 let paymentMethod = params.row.paymentMethod;
                 return <div style={{ margin: 4 }}>{paymentMethod}</div>
@@ -63,11 +63,27 @@ export default function SearchTable({ previewSearchCriteria, onPreviewGridOnRead
             id: 'payAmount',
             field: 'payAmount',
             headerName: 'Amount ($)',
-            flex: 5,            
-            valueGetter: (params) => {
+            flex: 2,
+            align: 'right',
+            headerAlign: 'right',
+            // keep the raw number as the grid value so sorting is numeric;
+            // valueFormatter is used for display only
+            valueFormatter: (params) => {
                 return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
+            },
+            sortComparator: (v1, v2) => {
+                const n1 = (v1 == null || isNaN(v1)) ? -Infinity : Number(v1);
+                const n2 = (v2 == null || isNaN(v2)) ? -Infinity : Number(v2);
+                return n1 - n2;
             }
         },
+        {
+            id: 'spare',
+            field: 'spare',
+            headerName: '',
+            flex: 4,
+            disableColumnMenu: true,
+        },
     ];
     
 

src/pages/GFMIS/TransactionDataGrid.js

@@ -65,6 +65,14 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
             flex: 1,
             minWidth: 200,
             cellClassName: 'actions',
+            // sorting/filtering uses the raw payment no. (transNo), not the link
+            valueGetter: (params) => params?.row?.transNo ?? '',
+            sortComparator: (v1, v2) => {
+                const n1 = Number(v1);
+                const n2 = Number(v2);
+                if (!isNaN(n1) && !isNaN(n2)) return n1 - n2;
+                return String(v1 ?? '').localeCompare(String(v2 ?? ''));
+            },
             renderCell: (params) => {
                 return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
             },
@@ -107,10 +115,26 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
             field: 'payAmount',
             headerName: 'Amount ($)',
             width: 150,
-            valueGetter: (params) => {
+            align: 'right',
+            headerAlign: 'right',
+            // keep the raw number as the grid value so sorting is numeric;
+            // valueFormatter is used for display only
+            valueFormatter: (params) => {
                 return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
+            },
+            sortComparator: (v1, v2) => {
+                const n1 = (v1 == null || isNaN(v1)) ? -Infinity : Number(v1);
+                const n2 = (v2 == null || isNaN(v2)) ? -Infinity : Number(v2);
+                return n1 - n2;
             }
         },
+        {
+            id: 'spare',
+            field: 'spare',
+            headerName: '',
+            width: 30,
+            disableColumnMenu: true,
+        },
     ];
 
     return (