Loaders for plug-ins

Plug-ins are a very important part of the DataTables eco-system. They expand DataTables' capabilities, wrap common actions into simple functions and provide a way for code to be shared in the community. We store plug-ins developed by ourselves and also those submitted from the community in our plug-ins repo and document them on this site. However, to date, there hasn't been much consistency in how the plug-ins are written. With the release of DataTables 1.13.3 today, and the plug-ins repo alongside it, that has now changed.

All plug-ins now:

• Are formatted by Prettier More (basically Prettier with a few extra options).
• Provide multiple loader options:
  • ESM
  • CommonJS
  • AMD
  • Browser
• Provide Typescript definitions for themselves.

Note that there are two exceptions to these rules:

• The paging plug-ins have not been updated. The paging API in DataTables needs work, which will be addressed in a future version.
• Legacy plug-ins have not been updated, since they are no longer needed (e.g. currency sorting).

Using the plug-ins

The documentation for each plug-in type has been updated so you aren't left wondering how you can actually make used of a plug-in. If we take the average() API plug-in as an example, you will be able to see that it has instructions for:

• Loading in the browser from our CDN (or you can download and host it locally)
• Installing via the datatables.net-plugins NPM package and then:
  • Loading as an ES module, or
  • Loading as a Common JS module.

Continued move to ESM and Typescript

If you've been following along with DataTables development, you'll be aware that development of all new DataTables software has been in Typescript (e.g. Editor 2, SearchPanes, SearchBuilder, etc), and while I don't propose to move the entire code base to Typescript exclusively, I am committed to fully supporting Typescript with type definitions for any of our vanilla Javascript libraries. If you import the plug-ins, you'll now see automatic hinting through the plug-in type definitions. As an example, this is the definition for the AlphabetSearch feature plug-in.

DataTables is also moving with the rest of the Javascript ecosystem towards ES modules. DataTables core, Editor and the extensions all support ESM loaders, as well as continuing support for the existing CommonJS, AMD and browser loaders. This update of the plug-ins completes our supported software's ability to be used via any of these loaders. When using a modern bundler such as Vite, the ESM loader will be selected automatically and optimised as such.

Contributing

Got an idea of a plug-in? Head on over to the plug-ins repo and submit a pull request with your plug-in there (with the exception of translations, which should be submitted on this site). The directory organisation for the plug-in categories is self explanatory, and each contains a src directory where the Typescript file is hosted. These then get compiled down to Javascript and wrapped in suitable loaders automatically.

If you have any questions about contributed, feel free to open a discussion in the forum.