Bugfix - Owners table sorting is not working correctly (#2364)

* Add custom sort funcionality

* Add correct types

* Fix undefined sorting type

src/components/Table/index.tsx

@@ -142,14 +142,17 @@ class GnoTable extends React.Component<any, any> {
     const orderParam = order || defaultOrder
     const displayRows = rowsPerPage || defaultRowsPerPage
     const fixedParam = typeof fixed !== 'undefined' ? fixed : !!defaultFixed
-
     const paginationClasses = {
       selectRoot: classes.selectRoot,
       root: !noBorder && classes.paginationRoot,
       input: classes.white,
     }
-
-    let sortedData = stableSort(data, getSorting(orderParam, orderByParam, orderProp), fixedParam)
+    const columnSort = columns.find((column) => column.id === orderByParam)
+    let sortedData = stableSort(
+      data,
+      getSorting(orderParam, orderByParam, orderProp, columnSort?.formatTypeSort),
+      fixedParam,
+    )
 
     if (!disablePagination) {
       sortedData = sortedData.slice(page * displayRows, page * displayRows + displayRows)

src/components/Table/sorting.ts

@@ -4,13 +4,19 @@ export const FIXED = 'fixed'
 
 export const buildOrderFieldFrom = (attr: string): string => `${attr}Order`
 
-const desc = (a: string, b: string, orderBy: string, orderProp: boolean): number => {
+const desc = (
+  a: string,
+  b: string,
+  orderBy: string,
+  orderProp: boolean,
+  format: (value: string | number) => string | number,
+): number => {
   const order = orderProp ? buildOrderFieldFrom(orderBy) : orderBy
 
-  if (b[order] < a[order]) {
+  if (format(b[order]) < format(a[order])) {
     return -1
   }
-  if (b[order] > a[order]) {
+  if (format(b[order]) > format(a[order])) {
     return 1
   }
 
@@ -42,5 +48,8 @@ export const getSorting = (
   order: 'desc' | 'asc',
   orderBy: string,
   orderProp: boolean,
+  format: (value: string | number) => string | number = (value) => value,
 ): ((a: string, b: string) => number) =>
-  order === 'desc' ? (a, b) => desc(a, b, orderBy, orderProp) : (a, b) => -desc(a, b, orderBy, orderProp)
+  order === 'desc'
+    ? (a, b) => desc(a, b, orderBy, orderProp, format)
+    : (a, b) => -desc(a, b, orderBy, orderProp, format)

src/components/Table/types.d.ts

@@ -7,5 +7,6 @@ export interface TableColumn {
   order: boolean
   static?: boolean
   style?: any
+  formatTypeSort?: (value: string | number) => string | number
   width?: number
 }

src/routes/safe/components/Settings/ManageOwners/dataFetcher.ts

@@ -17,6 +17,7 @@ export const generateColumns = (): List<TableColumn> => {
   const nameColumn: TableColumn = {
     id: OWNERS_TABLE_NAME_ID,
     order: false,
+    formatTypeSort: (value: string) => value.toLowerCase(),
     disablePadding: false,
     label: 'Name',
     width: 150,