sorting fixes wip

src/components/Table/TableHead.jsx

@@ -16,6 +16,7 @@ export type Column = {
   custom: boolean, // If content will be rendered by user manually
   width?: number,
   static?: boolean, // If content can't be sorted by values in the column
+  sortKey?: string, // If value of the column is an object
 }
 
 export const cellWidth = (width: number | typeof undefined) => {
@@ -55,13 +56,17 @@ class GnoTableHead extends React.PureComponent<Props> {
               padding={column.disablePadding ? 'none' : 'default'}
               sortDirection={orderBy === column.id ? order : false}
             >
-              <TableSortLabel
+              {column.static ? (
-                active={orderBy === column.id}
+                column.label
-                direction={order}
+              ) : (
-                onClick={!column.static && this.changeSort(column.id, column.order)}
+                <TableSortLabel
-              >
+                  active={orderBy === column.id}
-                {column.label}
+                  direction={order}
-              </TableSortLabel>
+                  onClick={this.changeSort(column.id, column.order)}
+                >
+                  {column.label}
+                </TableSortLabel>
+              )}
             </TableCell>
           ))}
         </TableRow>

src/components/Table/sorting.js

@@ -1,4 +1,5 @@
 // @flow
+import { List } from 'immutable'
 
 export const FIXED = 'fixed'
 type Fixed = {
@@ -11,6 +12,7 @@ export const buildOrderFieldFrom = (attr: string) => `${attr}Order`
 
 const desc = (a: Object, b: Object, orderBy: string, orderProp: boolean) => {
   const order = orderProp ? buildOrderFieldFrom(orderBy) : orderBy
+  console.log(a, b, orderBy, orderProp)
 
   if (b[order] < a[order]) {
     return -1
@@ -23,9 +25,9 @@ const desc = (a: Object, b: Object, orderBy: string, orderProp: boolean) => {
 }
 
 // eslint-disable-next-line
-export const stableSort = (array: Array<SortRow>, cmp: any, fixed: boolean): Array<SortRow> => {
+export const stableSort = (dataArray: List<any>, cmp: any, fixed: boolean): Array<SortRow> => {
-  const fixedElems: Array<SortRow> = fixed ? array.filter((elem: any) => elem.fixed) : []
+  const fixedElems: List<any> = fixed ? dataArray.filter((elem: any) => elem.fixed) : List([])
-  const data: Array<SortRow> = fixed ? array.filter((elem: any) => !elem[FIXED]) : array
+  const data: List<any> = fixed ? dataArray.filter((elem: any) => !elem[FIXED]) : dataArray
   const stabilizedThis = data.map((el, index) => [el, index])
 
   stabilizedThis.sort((a, b) => {

src/routes/safe/components/Balances/dataFetcher.js

@@ -4,7 +4,6 @@ import { type Token } from '~/logic/tokens/store/model/token'
 import { buildOrderFieldFrom, FIXED, type SortRow } from '~/components/Table/sorting'
 import { type Column } from '~/components/Table/TableHead'
 
-export const BALANCE_TABLE_IMAGE_ID = 'image'
 export const BALANCE_TABLE_ASSET_ID = 'asset'
 export const BALANCE_TABLE_BALANCE_ID = 'balance'
 export const BALANCE_TABLE_VALUE_ID = 'value'
@@ -18,8 +17,7 @@ export type BalanceRow = SortRow<BalanceData>
 
 export const getBalanceData = (activeTokens: List<Token>): List<BalanceRow> => {
   const rows = activeTokens.map((token: Token) => ({
-    [BALANCE_TABLE_IMAGE_ID]: token.logoUri,
+    [BALANCE_TABLE_ASSET_ID]: { name: token.name, logoUri: token.logoUri },
-    [BALANCE_TABLE_ASSET_ID]: token.name,
     [BALANCE_TABLE_BALANCE_ID]: `${token.balance} ${token.symbol}`,
     [buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: Number(token.balance),
     [FIXED]: token.get('symbol') === 'ETH',
@@ -29,16 +27,6 @@ export const getBalanceData = (activeTokens: List<Token>): List<BalanceRow> => {
 }
 
 export const generateColumns = () => {
-  const imageColumn: Column = {
-    id: BALANCE_TABLE_IMAGE_ID,
-    order: false,
-    static: true,
-    label: '',
-    custom: false,
-    disablePadding: true,
-    width: 30,
-  }
-
   const assetColumn: Column = {
     id: BALANCE_TABLE_ASSET_ID,
     order: false,
@@ -46,6 +34,7 @@ export const generateColumns = () => {
     label: 'Asset',
     custom: false,
     width: 250,
+    sortKey: 'name',
   }
 
   const balanceColumn: Column = {
@@ -65,7 +54,7 @@ export const generateColumns = () => {
     custom: true,
   }
 
-  return List([imageColumn, assetColumn, balanceColumn, actions])
+  return List([assetColumn, balanceColumn, actions])
 }
 
 export const filterByZero = (data: List<BalanceRow>, hideZero: boolean): List<BalanceRow> => data.filter((row: BalanceRow) => (hideZero ? row[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)] !== 0 : true))

src/routes/safe/components/Balances/index.jsx

@@ -12,16 +12,15 @@ import TableCell from '@material-ui/core/TableCell'
 import { withStyles } from '@material-ui/core/styles'
 import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
-import Img from '~/components/layout/Img'
 import ButtonLink from '~/components/layout/ButtonLink'
 import Paragraph from '~/components/layout/Paragraph'
 import Modal from '~/components/Modal'
 import { type Column, cellWidth } from '~/components/Table/TableHead'
 import Table from '~/components/Table'
 import {
-  getBalanceData, generateColumns, BALANCE_TABLE_IMAGE_ID, BALANCE_TABLE_BALANCE_ID, type BalanceRow, filterByZero,
+  getBalanceData, generateColumns, BALANCE_TABLE_ASSET_ID, type BalanceRow, filterByZero,
 } from './dataFetcher'
-import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
+import AssetTableCell from './AssetTableCell'
 import Tokens from './Tokens'
 import SendModal from './SendModal'
 import Receive from './Receive'
@@ -147,7 +146,7 @@ class Balances extends React.Component<Props, State> {
         </Row>
         <Table
           label="Balances"
-          defaultOrderBy={BALANCE_TABLE_BALANCE_ID}
+          defaultOrderBy={BALANCE_TABLE_ASSET_ID}
           columns={columns}
           data={filteredData}
           size={filteredData.size}
@@ -157,7 +156,7 @@ class Balances extends React.Component<Props, State> {
             <TableRow tabIndex={-1} key={index} className={classes.hide} data-testid="balance-row">
               {autoColumns.map((column: Column) => (
                 <TableCell key={column.id} style={cellWidth(column.width)} align={column.align} component="td">
-                  {column.id === BALANCE_TABLE_IMAGE_ID ? <Img src={row[column.id]} height={26} alt="Logo" onError={setImageToPlaceholder} /> : row[column.id]}
+                  {column.id === BALANCE_TABLE_ASSET_ID ? <AssetTableCell asset={row[column.id]} /> : row[column.id]}
                 </TableCell>
               ))}
               <TableCell component="td">