How to get selected row while using Vue3 without jQuery

sol

Hi all,
I'm a beginner to Datatables.

I wonder there's a way to get selected row's info ( ex) index, value, invisible cell's value ...etc) while using Vue3 without jQuery

I tried this.$refs.tableCom.dt() or this.$refs.tableCom.row(), but 'Uncaught TypeError: ~ is not a function' occured..

These are my code.. ▼

<template>
<DataTable
class="display"
ref="tableCom"
:columns="this.tableColumns"
:data="this.tableData"
:options="{
scrollY: 200,
scroller: true,
bPaginate: false,
bInfo: false,
bSelect: true,
responsive: true,
autoWidth: true,
select: true,
language: {
zeroRecords: this.zeroRecords,
searchPlaceholder: 'input value',
sSearch: '<span> | </span>',
},
}"
@select="clickRow()"
>
</DataTable>
</template>

import DataTablesLib from 'datatables.net'; 
import DataTable from 'datatables.net-vue3'; 
import 'datatables.net-select'; 
import 'datatables.net-responsive'; 
import 'datatables.net-select-dt'; 
import log from 'loglevel'; 

DataTable.use(DataTablesLib); 
export default { 
   name: 'TableCom', 
   components: { 
       DataTable, 
    }, 
    props: { 
        tableColumns: { 
          type: Array, 
          default: null, 
        }, 
        tableData: { 
           type: Array, 
           default: null, 
         }, 
         zeroRecords: { 
            type: String, 
            default: 'No data.', 
          }, 
     }, 
     data() { 
          return { 
               selectedRow: '',
          }; 
     }, 
     methods: { 
          clickRow() { 
               const table = this.$refs.tableCom; 
               log.info('table: %o', table.dt()); ----> ** this returns 'table.dt is not a function' ** 
          }, 
      }, 
 };

allan

Try:

const table = this.$refs.tableCom.value.dt;

I think you must have found a reference to the old v1 API for this plug-in. The v2 uses value.dt from the reference.

Allan

sol

Thanks @allan, I'm touched by your kind response to many people's questions..

I tried these

const table = this.$refs.tableCom.value.dt;
const table = this.$refs.tableCom.value.dt();

But.. There's an error in both of them

Uncaught TypeError: Cannot read properties of undefined (reading 'dt')

I've thought this error could be related to Vue's lifecycle, because I read this forum.
But actually, I use 'dt' in methods.. so.. It couldn't be related...

sol

OMG @allan.. I solved it!!!!!

const table = this.$refs.tableCom.dt;
log.info('table: %o', table.row().data());

I solved it with this code!
I'll leave it in case it helps other people

Thanks for your help, Allan!
I hope you have a good day:-)

sol

hmm ... It's too early to be happy...
Another error occured...

when I clicked each row, always the first row's data is returned.
I used row().data()... what's wrong my code....

sol

I think, @select="clickRow()" does not return selected row's info..
how can I solve this problem..
I read this. https://datatables.net/reference/api/row().data()

And I tried row(this).data() and row({selected : true}).data() but result is the same...

sol

I solved again.

const table = this.$refs.tableCom.dt;
log.info('table: %o', table.row('.selected').data());

It works!

allan

Nice one - thanks for posting back with your solution!

Allan