skip to Main Content

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

2

Answers


  1. 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.

    Login or Signup to reply.
  2. You can use DataTable in SPFx web parts using jQuery and DataTable libraries.

    Follow below documentation and web parts for detailed code:

    1. Migrate jQuery and DataTables solution built using Script Editor web part to SharePoint Framework
    2. SharePoint Framework DataTable web part sample
    3. DataTable Using MUI table
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search