<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>