Getting datatables reference set in SPFx

Getting datatables reference set in SPFx

khaoskhaos Posts: 47Questions: 11Answers: 0

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

  • allanallan Posts: 57,686Questions: 1Answers: 9,195 Site admin

    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

  • khaoskhaos Posts: 47Questions: 11Answers: 0

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

  • allanallan Posts: 57,686Questions: 1Answers: 9,195 Site admin

    What would be awesome - thank you!

    Allan

Sign In or Register to comment.