js Tabulator trigger event on tickbox selection vue3js

Viewed 62

I'm using Vue3 and Tabulator (5.2.7) to get a data table. I'm using the Composition API.

I'm omitting some irrelevant code in the bits below.

//DataTable.vue
<script setup>
import { TabulatorFull as Tabulator } from 'tabulator-tables';
import { useDataStore } from '@/stores/DataStore.vue';
import { ref, reactive, onMounted } from 'vue';

const store = useDataStore(); //get data from state manager

// this is as per the tabulator docs w/vue
const table = ref(null);
const tabulator = ref(null);
const tableData = reactive(store.getData);

onMounted(() => {
  tabulator.value = new Tabulator(table.value, {
    layout: "fitDataTable",
    data: tableData,
    reactiveLayout: true,
    responsiveLayout: true,
    selectable: 1, // be able to select only 1 row at a time
    columns: [
      {formatter: "rowSelection", titleFormatter: "rowSelection", headerSort: false, cellClick: function(e, cell) {
        const r = cell.getRow();
        console.log(r._row.data);
      }
      // some more data but its just regular title/field assoc.
    ]
  })
});

// added this as per the comment reply
tabulator.value.on('rowClick', function(e, row) {
  console.log('hello world')
})

//this did not work, but i tried it anyway
// tabulator.on('rowClick', function(e, row) {
//   console.log('hello world')
// })
</script>


<template>
  <div ref="table"></div>
</template>

I unfortunately cannot share screenshots, but I have an image: enter image description here

So what I want to happen, is when I tick the checkbox (red area), it will console log the data (and eventually do other stuff). When I click on the green area (rest of the cell), it does, as well as selecting the row. When I click the checkbox, it doesn't. The row is selected, but it does not console log or trigger any function.

I have tried passing in the documented (http://tabulator.info/docs/5.2/events#row) event listeners and callbacks, but everytime I try to do a table.on(), such as table.on("rowDblClick", () => {return 1}) it gives me an error that table.on is not a function, and the row event listeners were removed in 5.0.

The only reason I am using Tabulator, is because Vuetify doesn't work with Vue3 yet (it's in beta still if I recall), and I found this in my google quests.

EDIT: Alternatively, if anyone knows how to get the built-in event listeners or rowClick callback parameters to work, that would be an acceptable solution.

1 Answers
Related