Building a SPFx solution with datatables-CodePudding

I apologize in advance for a wall of text question. SPFx is a new requirement mandated from on high and I don't have any working experience with it at this point.

I created a vanilla SPFx project added to github to make it easier. There are just too many moving parts to try and get them all in the question.

https://github.com/cyberjetx/dtspfx/tree/AddDt

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';

in main.js

$(document).ready(function () {
    $('#example').DataTable();  
});

In config.json I would IDEALLY like to just use the combined file from dataTables cdn. I have also tried npm install --save datatables.net-dt and linked in config as "path": "/node_modules/datatables.net/js/jquery.dataTables.min.js", earning the following:

[17:03:22] Error - [webpack] 'dist': "C:\code\dtspfx\node_modules\datatables.net\js\jquery.dataTables.min.js" does not exist. Ensure the path is correct and relative to the project root.

however, it is indeed there, if I copy and paste the path and open in notepad it's there.

. . .
  "externals": {
    "jquery": {
      "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js",
      "globalName": "jQuery"
    }
    ,"datatables.net": {
        "path": "/node_modules/datatables.net/js/jquery.dataTables.min.js",
     // "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"
      ]
    }
  },
. . .

CodePudding user response：

Try removing the leading slash here => /node_modules/datatables/.... It may be looking at the root of your hard drive, not at the root of the project folder.

Other than that, you are probably using a wrong template, you don't need react or typescript if you are not using it. You can use plain javascript to create your webpart.

CodePudding user response：

You can use DataTable in SPFx web parts using jQuery and DataTable libraries.

Follow below documentation and web parts for detailed code: