Getting datatables reference set in SPFx

khaos

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"
      ]
    }
  },
. . . 

allan

I don't have experience of using SPFx I'm afraid, but hopefully we can figure this out between us.

// import 'datatables.net'; // commented because Blows up

What error does it give? The CDN file in your config.json doesn't do exports, so I'd imagine it will be something to do with it not being a module?

Can you npm install modules in your SPFx project? If so, I'd go with that approach at the moment.

Allan

khaos

Allen, I nearly have this complete. When it is I will share with you to hopefully help others stuck in SPFx hell.

allan

What would be awesome - thank you!

Allan