lifeto-shop/src/components/CharacterInventory.vue

<template>
  <input v-on:input="swapHotData" placeholder="separate by comma" value="Image, Name, Count, MoveCount, Move, MoveConfirm">
  <hot-table
    ref="hotTableComponent"
    :settings="hotSettings"
    ></hot-table>
</template>

<script lang="ts">
import { defineComponent, computed, PropType, defineProps, defineEmits} from 'vue';
import { HotTable, HotColumn} from '@handsontable/vue3';
import { registerAllModules } from 'handsontable/registry';
import { InventoryTable, TableRecipe } from '../lib/table';
import { Columns, ColumnByNames } from '../lib/columns';
import { TricksterItem, SampleData } from '../lib/trickster';
import Handsontable from 'handsontable';

// register Handsontable's modules
registerAllModules();

const _defaultColumn = [
  Columns.Image,
  Columns.Name,
  Columns.Count,
  Columns.MoveCount,
  Columns.Move,
]

export default defineComponent({
  data() {
    let cols = _defaultColumn
    const it = new InventoryTable(SampleData.aysheBoyfriend,
      ...cols
    );
    const dat = it.BuildTable()
    return {
      hotSettings: {
        data: dat.data,
        ...dat.settings,
      }
    };
  },
  methods: {
    swapHotData: function(event:any) {
      let trm = event.target.value.split(",").map((x:any)=>x.trim())
      let cols = ColumnByNames(...(trm as any)).filter(x=>x!=undefined)
      if(cols.length < 2) {
        cols = _defaultColumn
      }
      const it = new InventoryTable(SampleData.aysheBoyfriend,
        ...cols)
      const hot = ((this.$refs!.hotTableComponent as any).hotInstance as Handsontable)
      hot.updateSettings(it.BuildTable().settings)
    }
  },
  components: {
    HotTable,
  }
});
</script>

<style src="handsontable/dist/handsontable.full.css"></style>