Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

152
Views
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.
    ]
  }
}

</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.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!