<template lang="pug">
  table#D3Table
</template>

<script>
  import * as d3 from 'd3'

  export default {
    props: ['data'],
    mounted() {
      const $table = d3.select('table#D3Table')
      let rows = $table.selectAll('tr').data(this.data).enter().append('tr')
      rows = rows.selectAll('td').data(d => d).enter().append('td').text(d => d)
    }
  }
</script>

<style lang="sass" scoped>
  #D3Table
    border-collapse: collapse
    border: 2px black solid

    /deep/ td
      border: 1px black solid
</style>