How to assign DataTable type to a ref in Vue 3 using options api

barrierreef

I am trying to assign a reference to my vue 3 datatable using the options API. Here is how it is setup in the template:

<DataTable :options="gridOptions" ref="selectAccountsTable"></DataTable>

From my understanding, I should be able to access this ref using this.$refs.selectAccountsTable. This doesn't cause any issues but when I try to access the table by doing this.$refs.selectAccountsTable.value.dt, I run into this typescript error Object is of type unknown. How do I assign the DataTables type to this so I don't get this error?

Appreciate any help I can get!

allan

This is Typescript is it? You could try:

this.$refs.selectAccountsTable.value.dt as DataTablesLib.Api;

Assuming you have imported from datatables.net as DataTablesLib.

Allan

barrierreef

That unfortunately doesn't work for me. I get a red error under DataTablesLib.Api

Scrolling over the DataTablesLib, I get this message: Error TS2713 (TS) Cannot access 'DataTablesLib.Api' because 'DataTablesLib' is a type, but not a namespace. Did you mean to retrieve the type of the property 'Api' in 'DataTablesLib' with 'DataTablesLib["Api"]'?

This is how I import the datatables library
import DataTablesLib from 'datatables.net-dt';