lifeto-shop/src/components/CharacterInventory.vue

<template>
  <HotTable
    ref="hotTableComponent"
    :settings="DefaultSettings()"
    ></HotTable>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { HotTable, HotColumn } from '@handsontable/vue3';

const session = storage.GetSession()
const api:LTOApi = new LTOApiv0(session)
const {invs, activeTable, columns, tags} = useStoreRef()
const hotTableComponent = ref<any>(null)

const updateTable = () => {
  if (invs.value.has(activeTable.value)) {
    const chardat = invs.value.get(activeTable.value)
    if (chardat) {
      const it = new InventoryTable(chardat!, { columns: columns.value, tags: tags.value })
      const hot = (hotTableComponent.value.hotInstance as Handsontable)
      const build = it.BuildTable()
      hot.updateSettings(build.settings)
      hot.updateData(build.data)
    }
  }
}
// register Handsontable's modules
registerAllModules();

watch([columns.value.dirty,tags.value.dirty, activeTable], () => {
  updateTable()
})

</script>

<script lang="ts">
import { defineComponent, computed, PropType, defineProps, defineEmits, watch} from 'vue';
import { registerAllModules } from 'handsontable/registry';
import { DefaultSettings, InventoryTable, TableRecipe } from '../lib/table';
import { Columns, ColumnByNames, ColumnInfo } from '../lib/columns';
import { TricksterItem, SampleData } from '../lib/trickster';
import Handsontable from 'handsontable';
import { useStoreRef } from '../state/state';
import { storage } from '../session_storage';
import { LTOApi, LTOApiv0 } from '../lib/lifeto';
</script>

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