Implementing hover row section on Balance Table

This commit is contained in:
apanizo 2018-10-22 15:47:21 +02:00
parent 519a55e283
commit 2326dcdf15
1 changed files with 10 additions and 1 deletions

View File

@ -77,8 +77,17 @@ const styles = theme => ({
iconSmall: { iconSmall: {
fontSize: 16, fontSize: 16,
}, },
hide: {
'&:hover': {
backgroundColor: '#fff3e2',
},
'&:hover $actions': {
visibility: 'initial',
},
},
actions: { actions: {
justifyContent: 'flex-end', justifyContent: 'flex-end',
visibility: 'hidden',
}, },
send: { send: {
minWidth: '0px', minWidth: '0px',
@ -140,7 +149,7 @@ class Balances extends React.Component<Props, State> {
data={filteredData} data={filteredData}
> >
{(sortedData: Array<BalanceRow>) => sortedData.map((row: any, index: number) => ( {(sortedData: Array<BalanceRow>) => sortedData.map((row: any, index: number) => (
<TableRow tabIndex={-1} key={index}> <TableRow tabIndex={-1} key={index} className={classes.hide}>
{ autoColumns.map((column: Column) => ( { autoColumns.map((column: Column) => (
<TableCell key={column.id} numeric={column.numeric} component="th" scope="row"> <TableCell key={column.id} numeric={column.numeric} component="th" scope="row">
{row[column.id]} {row[column.id]}