Using datatables.net with angular15

rahulicf

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Cannot find namespace 'DataTables'

Description of problem:
I have the following packages installed with my angular 15 app as a part of upgrading the version of Datatable. In angular I had declared var in some component using DataTables.DataTable but now I get a compile error on that on not recognizing the namespace and type DataTables.

component---
private searchTable: DataTables.DataTable;

Package.json----

"datatables.net": "^1.13.5",
"datatables.net-bs5": "^1.10.19",
"datatables.net-buttons": "^1.5.4",
"datatables.net-buttons-bs5": "^1.5.4",
"datatables.net-dt": "^1.13.8",
"datatables.net-editor": "^1.6.5",
"datatables.net-editor-bs5": "^2.2.0",
"datatables.net-fixedcolumns": "^3.2.6",
"datatables.net-fixedcolumns-bs5": "^3.2.6",
"datatables.net-fixedheader": "^3.1.9",
"datatables.net-fixedheader-bs5": "^3.1.9",
"datatables.net-responsive": "^2.2.3",
"datatables.net-responsive-bs5": "^2.2.3",
"datatables.net-rowreorder": "^1.3.1",
"datatables.net-rowreorder-bs5": "^1.3.1",
"datatables.net-scroller": "^2.2.0",
"datatables.net-scroller-bs5": "^2.2.0",
"datatables.net-select": "^1.2.7",
"datatables.net-select-bs5": "^1.2.7",

"@types/datatables.net": "^1.10.28",

allan

Can you create a minimal git repo or Stackblotz showing the issue please? I'll be able to debug that.

Thanks,
Allan

rahulicf

https://stackblitz.com/~/github.com/rahul71/datatable-issue

Thanks for your help

allan

Thank you. You have:

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'Angular15App';
    dt: DataTables.DataTable;
}

However, there is no DataTables type. Did you try to define it globally somewhere or something?

I think you need something like:

import DataTable from 'datatables.net';

And then use:

dt: DataTable<any>

but that gives an error as well:

Property 'dt' has no initializer and is not definitely assigned in the constructor

I don't know what dt is meant to be? Is it a DataTables API instance, or something else?

Allan

rahulicf

Allan, it works with an older version of the datatables. Also in places in our code we had declared things like

const settings: DataTables.ColumnSettings[]

we now have to change to to 'any' so its taking some type safety away.

allan

That looks like third party types from definitely typed? Did you include @types/datatables.net perhaps? That wasn't written nor supported by us. I'd suggest removing that package since DataTables includes its own, up to date and supported, types now.

edit - yes I see that that package was included. I'd suggest deleting it and using the types DataTables provides. The exported ConfigColumns type for example is our column configuration type.

Allan

rahulicf

Thanks Alan, is there an example of using these types in angular/typescript?

allan

In Typescript yes - for example.

In Angular, no, not yet sorry. I hope to look into a full first class component for Angular next year. There is this third party project for Angular / DataTables integration, but it isn't something I've used myself, so I can't offer any support for it I'm afraid.

Allan