Currently, I am utilizing Vue3 along with Tabulator (5.2.7) to create a data table using the Composition API.
In the following code snippets, I have excluded irrelevant parts of the code.
//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(); //obtaining data from state manager
//following tabulator docs w/vue structure
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, //only allow selection of one row at a time
columns: [
{formatter: "rowSelection", titleFormatter: "rowSelection", headerSort: false, cellClick: function(e, cell) {
const r = cell.getRow();
console.log(r._row.data);
}
//additional data omitted for brevity
]
})
});
//added based on comment reply
tabulator.value.on('rowClick', function(e, row) {
console.log('hello world')
})
//attempt that did not work, but still tried
// tabulator.on('rowClick', function(e, row) {
// console.log('hello world')
// })
</script>
<template>
<div ref="table"></div>
</template>
I regretfully cannot provide screenshots, however, here is an image: https://i.stack.imgur.com/lfeGZ.png
The desired outcome is when the checkbox in the red area is checked, it should log the data and execute other actions. Clicking on the green area should also achieve the same result in addition to selecting the row. Unfortunately, clicking the checkbox does not trigger any functions or console logs. The row gets selected, but no further action occurs.
I have attempted to implement documented event listeners and callbacks from , but each time I try table.on() like
table.on("rowDblClick", () => {return 1})table.on is not a function, and row event listeners were removed in version 5.0.
The main reason behind opting for Tabulator is due to Vuetify's lack of compatibility with Vue3, which is currently in beta phase if memory serves me right. After some searching, I stumbled upon this during my online research.
EDIT: Additionally, if anyone has insights on how to make the built-in event listeners or rowClick callback parameters function correctly, that would be an acceptable resolution.