<template>
  <div>
    <su-table :headers="dataHoldingsHeader" :data="dataHoldings" search search-place-holder="Search trading symbol">
      <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
    }
  },

}
</script>