Handsontable example

by satoshi_tanoue

HTML

<div class="d-flex">

<div class="card">
  <div class="pa-36">
    <div id="example1" class="hot">
      <hot-table :settings="hotSettings"></hot-table>
    </div>
  </div>
</div>


</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">
<script src="https://handsontable.com/docs/8.4.0/scripts/jsfiddle-fixer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/[email protected]/dist/vue-handsontable.min.js"></script>

CSS

.d-flex{
 display: flex; 
}
.pa-36{
 padding: 36px; 
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
   width: 500px;

  border-radius: 5px; /* 5px rounded corners */
}

Babel + JSX

import Vue from 'vue';
  import { HotTable } from '@handsontable/vue';
  import Handsontable from 'handsontable';
  
  new Vue({
    el: '#example1',
    data: function() {
      return {
        hotSettings: {
          data: Handsontable.helper.createSpreadsheetData(10, 100),
  				colWidths: 100,
 					width: '100%',
  				preventOverflow: 'horizontal',
          colHeaders: true,
          icenseKey: 'non-commercial-and-evaluation'

        }
      }
    },
    components: {
      HotTable
    }
  });