<template>
  <div>
    <su-table :headers="dataHoldingsHeader" :data="dataHoldings" :uid="uid" row-events select @selected="onSelect">
      <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 {
      // values inside 'tradingsymbol' are unique. and it prevents from selecting same elements multiple times.
      uid: "tradingsymbol",
      // headers and data arrays are available in the table introduction section
      dataHoldingsHeader: headers,
      dataHoldings: data
    }
  },
  methods: {
    onSelect (value) {
      console.log('value as array ', value)
    }
  }
}
</script>