fix(trading): fix collateral sorting

libs/accounts/src/lib/accounts-table.tsx

@@ -1,5 +1,9 @@
 import { forwardRef, useMemo, useState } from 'react';
-import { addDecimalsFormatNumber, isNumeric } from '@vegaprotocol/utils';
+import {
+  addDecimal,
+  addDecimalsFormatNumber,
+  isNumeric,
+} from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import type {
   VegaICellRendererParams,
@@ -74,6 +78,12 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
             resizable: true,
             tooltipComponent: TooltipCellComponent,
             sortable: true,
+            comparator: (valueA, valueB, nodeA, nodeB) => {
+              const a = addDecimal(valueA, nodeA.data.asset?.decimals);
+              const b = addDecimal(valueB, nodeB.data.asset?.decimals);
+              if (a === b) return 0;
+              return a > b ? 1 : -1;
+            },
           }}
           {...props}
           pinnedTopRowData={pinnedAssetRow ? [pinnedAssetRow] : undefined}

libs/accounts/src/lib/breakdown-table.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { addDecimal, addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
   Intent,
@@ -33,14 +33,6 @@ export const progressBarValueFormatter = ({
   };
 };
 
-export const progressBarHeaderComponentParams = {
-  template:
-    '<div class="ag-cell-label-container" role="presentation">' +
-    `  <span></span>` +
-    '  <span ref="eText" class="ag-header-cell-text"></span>' +
-    '</div>',
-};
-
 interface BreakdownTableProps extends AgGridReactProps {
   data: AccountFields[] | null;
 }
@@ -62,6 +54,7 @@ const BreakdownTable = forwardRef<AgGridReact, BreakdownTableProps>(
         defaultColDef={{
           flex: 1,
           resizable: true,
+          sortable: true,
         }}
       >
         <AgGridColumn
@@ -96,9 +89,22 @@ const BreakdownTable = forwardRef<AgGridReact, BreakdownTableProps>(
           field="used"
           flex={2}
           maxWidth={500}
-          headerComponentParams={progressBarHeaderComponentParams}
           cellRendererSelector={progressBarCellRendererSelector}
           valueFormatter={progressBarValueFormatter}
+          comparator={(
+            valueA: string,
+            valueB: string,
+            nodeA: { data: AccountFields },
+            nodeB: { data: AccountFields }
+          ) => {
+            let a = valueA,
+              b = valueB;
+            a = addDecimal(nodeA.data.balance, nodeA.data.asset?.decimals);
+            b = addDecimal(nodeB.data.balance, nodeB.data.asset?.decimals);
+
+            if (a === b) return 0;
+            return a > b ? 1 : -1;
+          }}
         />
       </AgGrid>
     );