Using datatables.net with angular15

Using datatables.net with angular15

rahulicfrahulicf Posts: 4Questions: 1Answers: 0

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",

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

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

    Thanks,
    Allan

  • rahulicfrahulicf Posts: 4Questions: 1Answers: 0
    edited December 2023
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

  • rahulicfrahulicf Posts: 4Questions: 1Answers: 0

    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.

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    edited December 2023

    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

  • rahulicfrahulicf Posts: 4Questions: 1Answers: 0
    edited December 2023

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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

Sign In or Register to comment.