Getting datatables reference set in SPFx
Getting datatables reference set in SPFx
Link to test case:
I created a vanilla SPFx project and the git to make it easier to see what's what. I hope it helps. I am so dead in the water 
https://github.com/cyberjetx/dtspfx/tree/AddDt
https://github.com/cyberjetx/dtspfx/tree/main is the jquery working branch before any datatable changes.
Debugger code (debug.datatables.net):
cant get this far
Error messages shown:
Error - [tsc] src/webparts/area51/Area51WebPart.ts(507,27): error TS2339: Property 'DataTable' does not exist on type 'JQuery<HTMLElement>'.
Description of problem:
Trying to make the basic datatable work with zero configuration in SharePoint framework (SPFx) this is new ground for me and it has been mandated from on-high that we will be using SPFx or not on the intranet at all.
I am trying to document the process so that others using dt will have a base to start from or at least be able to see what is needed to to add dt to their SPFxs. This process is started in the readme.md.
in Area51WebPart.ts
// import 'datatables.net'; // commented because Blows up
some code to prove jquery works and the html from datatables vanilla example
$(document).ready(function () {
//$('#example').DataTable(); // commented because Blows up
});
In config.json
. . .
"externals": {
"jquery": {
"path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js",
"globalName": "jQuery"
}
,"datatables.net": {
"path": "https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr- 1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.4/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.7/sb-1.3.4/sp-2.0.2/sl-1.4.0/sr-1.1.1/datatables.min.js",
"globalName": "jQuery",
"globalDependencies": [
"jquery"
]
}
},
. . .
Answers
I don't have experience of using SPFx I'm afraid, but hopefully we can figure this out between us.
What error does it give? The CDN file in your
config.jsondoesn't do exports, so I'd imagine it will be something to do with it not being a module?Can you
npm installmodules in your SPFx project? If so, I'd go with that approach at the moment.Allan
Allen, I nearly have this complete. When it is I will share with you to hopefully help others stuck in SPFx hell.
What would be awesome - thank you!
Allan