Download builder updates

The download builder is a corner stone of getting DataTables installed and working in your project. Over the last few weeks I've been working on a number of updates for it and will introduce the changes in this post.

What is the download builder?

If you aren't yet familiar with the download builder you might wonder why there is a need for it. That's a great question and it is important to answer that to explain the design decisions made in the download builder. First and foremost the download builder will let you select the software you need and only that software - there is no point in including the entire DataTables suite on your page if you only need specific parts!

Secondly, the download builder will help with styling integration - DataTables currently supports eight different styling integrations! Which styling integration you want will impact what files should be included on the page (both Javascript and CSS)!

Finally, there are many ways to install Javascript on your page. You can of course simply use a <script> tag, and you may wish to use our CDN to get the files, or you might wish to download them and serve them locally. If you are using a bundler for your site / app there is a good chance you will want to use npm (or yarn, or similar package manager). Alternatively, if you are a .NET developer, you might wish to use NuGet. The installation instructions for each method are different and the one that is suitable for you to use will depend upon your project.

The download builder is designed to answer these three points, creating a single UI where you can select the options you want and get customised installation instructions for your build.

What's new

If you've used the download builder before it will immediately be familiar to you, but almost every aspect has received attention to improve it. The main changes are detailed below.

SubResource Integrity

We've provided DataTables on our CDN for many years now and a lot of sites make use of it (51TB of data per month currently). Using a CDN requires a certain level of trust - you trust the remote Javascript to do what it says it will and not change to do something nefarious in future. SubResource Integrity (SRI) is designed to address specifically this concern. In your script / link tags you give a hash for the file that you are loading that it must match. If it doesn't then the file has been altered from what you were expecting.

It has always been possible to use SRI with the DataTables CDN files, but now the hash calculations are done for you and shown in the generated link and script tags. The following is an example of the output for just DataTables 2.2.2:

<link
    href="https://cdn.datatables.net/v/dt/dt-2.2.2/datatables.min.css"
    rel="stylesheet" integrity="sha384-2vMryTPZxTZDZ3GnMBDVQV8OtmoutdrfJxnDTg0bVam9mZhi7Zr3J1+lkVFRr71f"
    crossorigin="anonymous"
>
 
<script
    src="https://cdn.datatables.net/v/dt/dt-2.2.2/datatables.min.js"
    integrity="sha384-2Ul6oqy3mEjM7dBJzKOck1Qb/mzlO+k/0BQv3D3C7u+Ri9+7OBINGa24AeOv5rgu"
    crossorigin="anonymous"
></script>

Improved npm install instructions

When installing DataTables with npm (or a compatible package manager such as yarn) there are three parts you need to consider:

Which packages to install
How to include the packages in your Javascript
How to include the style files

The NPM tab for the download builder now shows code snippets for all three, based on the options you've selected. Previously, the download builder showed both CommonJS require statements and ES Module import statements. ES Modules are now dominant for new projects in the Javascript world, so to reduce potential confusion the download builder only shows ESM import statements now. If you have an old project CommonJS will still work, but ESM is preferred moving forward.

React and Vue

As we now have React and Vue components for DataTables, these components have now been added to the download builder. They are only available through npm at this time and the download builder reflects this by disabling the other installation options if either component is selected.

The components require an extra line of code - assigning the DataTables core library to the component. This is now shown in the "Javascript loader" code generated by the download builder.

StackBlitz

StackBlitz is an amazing platform that can create a complete IDE and environment in your web-browser through their WebContainers technology. It is excellent for creating sharable examples and test cases and the download builder can now create example projects that will set up a full StackBlitz project.

Both the CDN and NPM installation options have a StackBlitz button at the bottom of their respective tabs now. Click the button will generate a new project that has an Ajax loaded DataTable. In the case of the NPM option, Vite is used as a bundler with Typescript in the generated project.

This isn't intended to be a complete project generator for DataTables - for example, it doesn't automatically set options based on the extensions selected, but it can be very useful for experimenting, creating test cases and understanding how various parts fit together.

Wrapping up

One of the most surprising things I've learned while working on DataTables (17 years now!) is that the majority of development time is not spent in the code for the software, but rather on the infrastructure that goes around it. This website, packages for installation, documentation, and support tools such as the download builder. These are no less important than the core software.

I hope you find the improvements to the download builder useful, and as always, feedback is welcome in the forum.