# Table introduction
# Introduction
There are many parameters we use in our table
Property | Description | Type | Default |
---|---|---|---|
limit | Number of rows in tables | String | empty |
search | searching among all the data of the table. | Boolean | false |
data | Show data in body of the table | Array | empty |
headers | Show data in header of the table | Array | empty |
download-csv | Download table as CSV | String (csv filename) ex: table.csv | |
rowEnter | This event occurs when the mouse pointer is moved onto an row element in the table. | Function | |
rowLeave | This event occurs when the mouse pointer is moved out of an row element in the table. | Function | |
rowClick | This event occurs when clicks on the row element in the table. | Function | |
selected | Rows can be selectable by making first column as a selectable column | Function |
Notes: Still working on some of the table features documentation (like search, toolbar etc...). Probably in next 4 or 5 days it will be updated.
<div>
<su-table :headers="dataHoldingsHeader" :data="dataHoldings">
<template slot-scope="props">
<td class="textleft table-border">
{{ 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 presented in the json tab.
dataHoldingsHeader: headers,
dataHoldings: data
}
}
}
</script>
Basic Data
var data = [{
"tradingsymbol": "QUICKHEAL",
"loan_value": 253.25,
"quantity": 1.0,
"pledge_qty": 1.0,
"collateral_value": 127.0
}, {
"tradingsymbol": "UPL",
"loan_value": 734.85,
"quantity": 1.0,
"pledge_qty": 1.0,
"collateral_value": 367.0
}, {
"tradingsymbol": "L&TFH",
"loan_value": 330.9,
"quantity": 2.0,
"pledge_qty": 2.0,
"collateral_value": 165.0
}, {
"tradingsymbol": "AXISBANK",
"loan_value": 7011.4,
"quantity": 11.0,
"pledge_qty": 11.0,
"collateral_value": 3506.0
}, {
"tradingsymbol": "WONDERLA",
"loan_value": 309.15,
"quantity": 1.0,
"pledge_qty": 1.0,
"collateral_value": 155.0
}, {
"tradingsymbol": "IDFCBANK",
"loan_value": 44.9,
"quantity": 1.0,
"pledge_qty": 1.0,
"collateral_value": 22.0
}]
var headers = [{
"class": [],
"label": "Symbol",
"field": "tradingsymbol"
}, {
"class": [],
"label": "Max available (₹)",
"field": "collateral_value",
"tableBorder": false
}, {
"class": [],
"label": "Pledge Qty",
"field": "pledge_qty"
}, {
"class": [],
"label": "Amount required (₹)",
"field": "loan_value"
}]
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 |