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:
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.
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
}
});