Using datatables.net with angular15
Using datatables.net with angular15
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
Can you create a minimal git repo or Stackblotz showing the issue please? I'll be able to debug that.
Thanks,
Allan
https://stackblitz.com/~/github.com/rahul71/datatable-issue
Thanks for your help
Thank you. You have:
However, there is no
DataTables
type. Did you try to define it globally somewhere or something?I think you need something like:
And then use:
but that gives an error as well:
I don't know what
dt
is meant to be? Is it a DataTables API instance, or something else?Allan
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.
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
Thanks Alan, is there an example of using these types in angular/typescript?
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