# Sorting
Enable sorting for columns by setting the sort
attribute.
<su-table :headers="dataHoldingsHeader" :data="dataHoldings" sort>
...
</su-table>
# Sort related props
We can add below props to enable sorting on any column.
Property | Description | Type | Default |
---|---|---|---|
sort | To enable sorting on any column | Boolean | false |
sortArrow | Use up or down arrow to represent "sort ascending or descending" at table header | Boolean | false |
arrowShowDefault | Arrow to show default or else it shows on mouseover | Boolean | false |
let dataHoldingsHeader = [{
// Here enabled sorting on tradingsymbol column only
class: [],
label: "Symbol",
field: "tradingsymbol",
sort: true,
sortArrow: true,
arrowShowDefault: true
}, {
class: [],
label: "Max available (₹)",
field: "collateral_value"
}, {
class: [],
label: "Pledge Qty",
field: "pledge_qty"
}, {
class: [],
label: "Amount required (₹)",
field: "loan_value"
}]
<div>
<su-table :headers="dataHoldingsHeader" :data="dataHoldings" sort>
<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>
<script>
export default {
components: {
"su-table": DataTable
},
data () {
return {
// headers and data arrays are available in the table introduction section
dataHoldingsHeader: headers,
dataHoldings: data
}
},
}
</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 |
← Limit Table select →