JSFiddle - React, Tailwind, and code Playground

by Walters87

HTML

<div id="product">

  <div class="container">
    <div class="row">
      <div class="col-sm">
        <h1>Manufacturer</h1>

        <div class="manufacturer">
          <input v-model="findList1" id="findList1" type="text" />
        </div>

        <ul>
          <li v-for="list1 in filterList1" :key="list1.id" @click="clickList1(list1.id)">
            {{ list1.value }}
          </li>
        </ul>
      </div>
      <div class="col-sm">
         <h1>Category</h1>

        <div class="category">
          <input v-model="findList2" id="findList2" type="text" />
        </div>

        <ul>
          <li v-for="list2 in filterList2" :key="list2.id" @click="clickList2(list2.id)">
            {{ list2.value }}
          </li>
        </ul>
      </div>
      <div class="col-sm">
         <h1>Item</h1>

        <div class="item">
          <input v-model="findList3" id="findList3" type="text" />
        </div>

        <ul>
          <li v-for="list3 in filterList3" :key="list3.id" @click="clickList3(list3.id)">
            {{ list3.value }}
          </li>
        </ul>
      </div>
    </div>
  </div>


  <hot-table ref="hotTableComponent" :settings="hotsettings"></hot-table>
  <button>Load new data!</button>
  <button v-on:click="addRow">Add</button>
</div>

CSS

</style><!-- Ugly fffv Hack due to jsFiddle issue -->

<script src="https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.js"></script>

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@7.4.2/dist/handsontable.full.min.css">

<link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<script src="https://handsontable.com/docs/7.4.2/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/vue@4.1.1/dist/vue-handsontable.min.js"></script>

Babel + JSX

import Vue from 'vue';
import {
    HotTable
} from '@handsontable/vue';
import Handsontable from 'handsontable';

var data = [{
    'qty': 2,
    'item': 'Havger 12way DB',
    'cat': 'VML401',
    'man': 'Hager',
    'trade': 50,
    'disc': 6,
    'net': 0,
    'markup': 0,
    'mtotal': 0,
    'rate': 0,
    'install': 0,
    'itotal': 0,
    'gtotal': 0,
    'group': ''
}, {
    'qty': 1,
    'item': 'Havger 12way DB',
    'cat': 'VML401',
    'man': 'Hager',
    'trade': 75,
    'disc': 65,
    'net': 0,
    'markup': 0,
    'mtotal': 0,
    'rate': 0,
    'install': 0,
    'itotal': 0,
    'gtotal': 0,
    'group': ''
}, {
    'qty': 144,
    'item': 'Havger 12way DB',
    'cat': 'VML401',
    'man': 'Hager',
    'trade': 2,
    'disc': 4,
    'net': 0,
    'markup': 0,
    'mtotal': 0,
    'rate': 0,
    'install': 0,
    'itotal': 0,
    'gtotal': 0,
    'group': ''
}];



var dataList1 = [{
        id: 1,
        value: 'Ansell'
    },
    {
        id: 2,
        value: 'Dextra'
    },
    {
        id: 3,
        value: 'Hager'
    },
    {
        id: 4,
        value: 'Mita'
    }
];


var product = new Vue({
    el: '#product',
    data: function() {
        return {
            hotsettings: {
                data: data,
                licenseKey: 'non-commercial-and-evaluation',
                colHeaders: ['Qty 0', 'Item 1', 'Cat No 2', 'Manuf 3', 'Trade 4', 'Discount 5', 'Net 6', 'Markup 7', 'Total 8', 'Rate 9', 'Install 10', 'Total 11', 'G.Total 12', 'Cost Group 13'],
                columns: [{
                    // qty 0
                    data: 'qty',
                    type: 'numeric'
                }, {
                    // item 1
                    data: 'item',
                    type: 'text'
                }, {
                    // cat no 2
                    data: 'cat',
                    type: 'text'
                }, {
                    // manufacture 3
                    data: 'man',
                    type:...