diff --git a/src/components/Table/index.jsx b/src/components/Table/index.jsx index 8882ba1f..d3b5c231 100644 --- a/src/components/Table/index.jsx +++ b/src/components/Table/index.jsx @@ -15,6 +15,8 @@ type Props = { data: Array, classes: Object, children: Function, + size: number, + defaultFixed?: boolean, } type State = { @@ -46,8 +48,9 @@ const styles = { class GnoTable extends React.Component, 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 extends React.Component, State> { order = 'asc' } - this.setState({ order, orderBy, orderProp }) + this.setState(() => ({ + order, orderBy, orderProp, fixed: false, + })) } handleChangePage = (page: number) => { @@ -74,11 +79,11 @@ class GnoTable extends React.Component, 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 extends React.Component, 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 extends React.Component, State> { `${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' diff --git a/src/routes/safe/component/Balances/dataFetcher.js b/src/routes/safe/component/Balances/dataFetcher.js index 598f8e78..3bbd84ff 100644 --- a/src/routes/safe/component/Balances/dataFetcher.js +++ b/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 => [ + { + [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', diff --git a/src/routes/safe/component/Balances/index.jsx b/src/routes/safe/component/Balances/index.jsx index c4d98951..2b243e07 100644 --- a/src/routes/safe/component/Balances/index.jsx +++ b/src/routes/safe/component/Balances/index.jsx @@ -162,6 +162,8 @@ class Balances extends React.Component { defaultOrderBy={BALANCE_TABLE_ASSET_ID} columns={columns} data={filteredData} + size={filteredData.length} + defaultFixed > {(sortedData: Array) => sortedData.map((row: any, index: number) => (