DataTables.net with webpack

jquery-datatables-webpack

Here's how to make jQuery DataTables work with npm and webpack. This is the simplest way I found to do it.
See the previous revision of this gist for a way to do it with forcing AMD to be disabled if you need that.

Install DT core: npm install datatables.net
Install a DT style: npm install datatables.net-dt

Then to initialize DT in your app, do this in your main entry point:

// you can use import or require
import dt from 'datatables.net';
import 'datatables.net-dt/css/jquery.datatables.css';

Now you can use .DataTable():
$('table[data-table]').DataTable(); // or whatever you want

See also discussion at https://datatables.net/forums/discussion/comment/93380

What about other plugins?
I get this error with Buttons
app.js:sourcemap:57381 TypeError: Cannot set property 'c' of undefined at Buttons (app.js:sourcemap:34034) at Object.<anonymous> (app.js:sourcemap:57361) at Object.<anonymous> (app.js:sourcemap:57441) at __webpack_require__ (app.js:sourcemap:20) at Object.c (app.js:sourcemap:56146) at __webpack_require__ (app.js:sourcemap:20) at Object.<anonymous> (app.js:sourcemap:201872) at __webpack_require__ (app.js:sourcemap:20) at app.js:sourcemap:66 at app.js:sourcemap:69

HI!

Thanks for this gist! I don't know if it is related to a recent update but the right path for the css is:
import 'datatables.net-dt/css/jquery.dataTables.css'.

I was going mad looking for the problem, luckily it was only a typo :)

Cheers

VM8624 jquery-3.2.1.min.js:2 Uncaught TypeError: $(...).DataTable is not a function

Thank you Marcstober, and also Valsdav for pointing out the thing with uppercase T in dataTable.

Thank you Marcstober, and also Valsdav for pointing out the thing with uppercase T in dataTable.

Saved the day.