diff --git a/src/components/Table/index.jsx b/src/components/Table/index.jsx index 0cb2219d..02809530 100644 --- a/src/components/Table/index.jsx +++ b/src/components/Table/index.jsx @@ -21,6 +21,7 @@ type Props = { children: Function, size: number, defaultFixed?: boolean, + defaultOrder?: 'desc' | 'asc', } type State = { @@ -61,7 +62,7 @@ const FIXED_HEIGHT = 49 class GnoTable extends React.Component, State> { state = { page: 0, - order: 'asc', + order: undefined, orderBy: undefined, fixed: undefined, orderProp: false, @@ -70,9 +71,14 @@ class GnoTable extends React.Component, State> { onSort = (newOrderBy: string, orderProp: boolean) => { const { order, orderBy } = this.state + const { defaultOrder } = this.props let newOrder = 'desc' - if (orderBy === newOrderBy && order === 'desc') { + // if table was previously sorted by the user + if (order && orderBy === newOrderBy && order === 'desc') { + newOrder = 'asc' + } else if (!order && defaultOrder === 'desc') { + // if it was not sorted and defaultOrder is used newOrder = 'asc' } @@ -99,12 +105,13 @@ class GnoTable extends React.Component, State> { render() { const { - data, label, columns, classes, children, size, defaultOrderBy, defaultFixed, + data, label, columns, classes, children, size, defaultOrderBy, defaultOrder, defaultFixed, } = this.props const { order, orderBy, page, orderProp, rowsPerPage, fixed, } = this.state const orderByParam = orderBy || defaultOrderBy + const orderParam = order || defaultOrder const fixedParam = typeof fixed !== 'undefined' ? fixed : !!defaultFixed const backProps = { @@ -121,7 +128,7 @@ class GnoTable extends React.Component, State> { input: classes.white, } - const sortedData = stableSort(data, getSorting(order, orderByParam, orderProp), fixedParam).slice( + const sortedData = stableSort(data, getSorting(orderParam, orderByParam, orderProp), fixedParam).slice( page * rowsPerPage, page * rowsPerPage + rowsPerPage, ) @@ -133,7 +140,7 @@ class GnoTable extends React.Component, State> { {!isEmpty && ( - + {children(sortedData)}
)} @@ -159,4 +166,8 @@ class GnoTable extends React.Component, State> { } } +GnoTable.defaultProps = { + defaultOrder: 'asc' +} + export default withStyles(styles)(GnoTable) diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/columns.js b/src/routes/safe/components/TransactionsNew/TxsTable/columns.js index 66564746..71c31225 100644 --- a/src/routes/safe/components/TransactionsNew/TxsTable/columns.js +++ b/src/routes/safe/components/TransactionsNew/TxsTable/columns.js @@ -79,7 +79,7 @@ export const generateColumns = () => { id: TX_TABLE_STATUS_ID, order: false, disablePadding: false, - label: '', + label: 'Status', custom: true, } diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx index be32ba64..1f60fe8e 100644 --- a/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx +++ b/src/routes/safe/components/TransactionsNew/TxsTable/index.jsx @@ -51,6 +51,7 @@ class Balances extends React.Component {