javascriptvue.jstabulator

js Tabulator trigger event on tickbox selection vue3js


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.


Solution

  • Was able to get this working with rowCLick by moving the tabulator event listener into the onMounted block. Also in ts had to change tabulator ref to the type of your tabulator_full import:

    const tabulator = ref(Tabulator)
    

    onMounted(() => {
      tabulator.value = new Tabulator(table.value, {
        layout: "fitDataTable",
        data: tableData,
        columns: ...
    })
        tabulator.value.on("rowClick", function(e, row){
        //do something
        }
    });