diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js index c0288def8a9..054ba91641a 100644 --- a/packages/desktop-client/src/components/transactions/TransactionsTable.js +++ b/packages/desktop-client/src/components/transactions/TransactionsTable.js @@ -365,8 +365,22 @@ const TransactionHeader = memo( } /> {showBalance && <Cell value="Balance" width={88} textAlign="right" />} - {showCleared && <Field width={23} truncate={false} />} + + {showCleared && ( + <HeaderCell + value="Cleared" + width={85} + alignItems="center" + id="cleared" + icon={field === 'cleared' ? ascDesc : 'clickable'} + onClick={() => + onSort('cleared', selectAscDesc(field, ascDesc, 'cleared', 'desc')) + } + /> + )} + <Cell value="" width={5 + scrollWidth ?? 0} /> + </Row> ); }, @@ -437,9 +451,11 @@ function StatusCell({ return ( <Cell name="cleared" - width={23} + width={85} focused={focused} - style={{ padding: 1 }} + style={{ + alignItems: 'center' + }} plain > <CellButton @@ -1337,6 +1353,7 @@ const Transaction = memo(function Transaction(props) { isChild={isChild} onEdit={onEdit} onUpdate={onUpdate} + width={85} /> )} diff --git a/upcoming-release-notes/1994.md b/upcoming-release-notes/1994.md new file mode 100644 index 00000000000..79bb0c3c62e --- /dev/null +++ b/upcoming-release-notes/1994.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [jaarasys-henria] +--- + +Make transaction list sortable by cleared status