<template>
  <div id="hot">
    <div ref="place"></div>
  </div>
</template>

<script>
  import Handsontable from 'handsontable'

  export default {
    props: ['tableData'],
    mounted() {
      const tableData = this.tableData.slice(1)
      const colHeaders = this.tableData.slice(0, 1)[0]
      const hotElement = this.$refs.place
      const hotSettings = {
        tableData,
        colHeaders
      }
      new Handsontable(hotElement, hotSettings)
    }
  }
</script>

<style lang="sass">
  @import '~handsontable/dist/handsontable.full.css'
</style>
