Applying option to fixed elements on top of table when sorting

src/components/Table/index.jsx

@@ -15,6 +15,8 @@ type Props<K> = {
   data: Array<K>,
   classes: Object,
   children: Function,
+  size: number,
+  defaultFixed?: boolean,
 }
 
 type State = {
@@ -46,8 +48,9 @@ const styles = {
 class GnoTable<K> extends React.Component<Props<K>, State> {
   state = {
     page: 0,
-    order: 'desc',
+    order: 'asc',
     orderBy: this.props.defaultOrderBy,
+    fixed: !!this.props.defaultFixed,
     orderProp: false,
     rowsPerPage: 5,
   }
@@ -60,7 +63,9 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
       order = 'asc'
     }
 
-    this.setState({ order, orderBy, orderProp })
+    this.setState(() => ({
+      order, orderBy, orderProp, fixed: false,
+    }))
   }
 
   handleChangePage = (page: number) => {
@@ -74,11 +79,11 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
 
   render() {
     const {
-      data, label, columns, classes, children,
+      data, label, columns, classes, children, size,
     } = this.props
 
     const {
-      order, orderBy, page, orderProp, rowsPerPage,
+      order, orderBy, page, orderProp, rowsPerPage, fixed,
     } = this.state
 
     const backProps = {
@@ -95,7 +100,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
       input: classes.white,
     }
 
-    const sortedData = stableSort(data, getSorting(order, orderBy, orderProp))
+    const sortedData = stableSort(data, getSorting(order, orderBy, orderProp), fixed)
       .slice(page * rowsPerPage, ((page * rowsPerPage) + rowsPerPage))
 
     return (
@@ -113,7 +118,7 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
         </Table>
         <TablePagination
           component="div"
-          count={data.length}
+          count={size}
           rowsPerPage={rowsPerPage}
           page={page}
           backIconButtonProps={backProps}

src/components/Table/sorting.js

@@ -1,7 +1,13 @@
 // @flow
 
+export const FIXED = 'fixed'
+export type SortRow = {
+  [FIXED]: boolean,
+}
+
 export const buildOrderFieldFrom = (attr: string) => `${attr}Order`
 
+
 const desc = (a: Object, b: Object, orderBy: string, orderProp: boolean) => {
   const order = orderProp ? buildOrderFieldFrom(orderBy) : orderBy
 
@@ -15,7 +21,8 @@ const desc = (a: Object, b: Object, orderBy: string, orderProp: boolean) => {
   return 0
 }
 
-export const stableSort = (array: any, cmp: any) => {
+export const stableSort = (array: any, cmp: any, fixed: boolean) => {
+  const fixedElems = fixed ? array.filter(elem => elem[FIXED]) : []
   const stabilizedThis = array.map((el, index) => [el, index])
 
   stabilizedThis.sort((a, b) => {
@@ -27,7 +34,9 @@ export const stableSort = (array: any, cmp: any) => {
     return a[1] - b[1]
   })
 
-  return stabilizedThis.map(el => el[0])
+  const sortedElems = stabilizedThis.map(el => el[0])
+
+  return fixedElems.concat(sortedElems)
 }
 
 export type Order = 'asc' | 'desc'

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

@@ -1,25 +1,33 @@
 // @flow
 import { List } from 'immutable'
-import { buildOrderFieldFrom } from '~/components/Table/sorting'
+import { buildOrderFieldFrom, FIXED, type SortRow } from '~/components/Table/sorting'
 import { type Column } from '~/components/Table/TableHead'
 
 export const BALANCE_TABLE_ASSET_ID = 'asset'
 export const BALANCE_TABLE_BALANCE_ID = 'balance'
 export const BALANCE_TABLE_VALUE_ID = 'value'
 
-export type BalanceRow = {
+export type BalanceRow = SortRow & {
   asset: string,
   balance: string,
   value: string,
 }
 
 export const getBalanceData = (): Array<BalanceRow> => [
+  {
+    [BALANCE_TABLE_ASSET_ID]: 'ABC Periodico',
+    [BALANCE_TABLE_BALANCE_ID]: '1.394 ABC',
+    [buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: 1.394,
+    [BALANCE_TABLE_VALUE_ID]: '$3.1',
+    [buildOrderFieldFrom(BALANCE_TABLE_VALUE_ID)]: 3.1,
+  },
   {
     [BALANCE_TABLE_ASSET_ID]: 'Ethereum',
     [BALANCE_TABLE_BALANCE_ID]: '9.394 ETH',
     [buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: 9.394,
     [BALANCE_TABLE_VALUE_ID]: '$539.45',
     [buildOrderFieldFrom(BALANCE_TABLE_VALUE_ID)]: 539.45,
+    [FIXED]: true,
   },
   {
     [BALANCE_TABLE_ASSET_ID]: 'Gnosis',

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

@@ -162,6 +162,8 @@ class Balances extends React.Component<Props, State> {
           defaultOrderBy={BALANCE_TABLE_ASSET_ID}
           columns={columns}
           data={filteredData}
+          size={filteredData.length}
+          defaultFixed
         >
           {(sortedData: Array<BalanceRow>) => sortedData.map((row: any, index: number) => (
             <TableRow tabIndex={-1} key={index} className={classes.hide}>