# Row events
When you want to work with row events you need to enable row-events
. That will be described in this section, and on each row events we are getting row details.
# Usage
<template>
<div>
<su-table :headers="dataHoldingsHeader" :data="dataHoldings" row-events @rowEnter="onRowEnter" @rowLeave="onRowLeave" @rowClick="onRowClick">
<template slot-scope="props">
<td>
{{ props.row.tradingsymbol }}
</td>
<td>
{{ props.row.collateral_value }}
</td>
<td>
{{ props.row.pledge_qty }}
</td>
<td>
{{ props.row.loan_value }}
</td>
</template>
</su-table>
</div>
</template>
<script>
export default {
components: {
"su-table": DataTable
},
data() {
return {
// headers and data arrays are available in the table introduction section
dataHoldingsHeader: headers,
dataHoldings: data
}
},
methods: {
onRowEnter({ row }) {
console.log('get row details when mouse pointer is moved onto an row element ', row)
},
onRowLeave({ row }) {
console.log('get row details when mouse pointer is moved out of an row element ', row)
},
onRowClick ({ row }) {
console.log('get row details on mouse click ', row)
}
},
}
</script>
Symbol | Max available (₹) | Pledge Qty | Amount required (₹) |
---|---|---|---|
QUICKHEAL | 127 | 1 | 253.25 |
UPL | 367 | 1 | 734.85 |
L&TFH | 165 | 2 | 330.9 |
AXISBANK | 3506 | 11 | 7011.4 |
WONDERLA | 155 | 1 | 309.15 |
IDFCBANK | 22 | 1 | 44.9 |
← Table select Search →