Installation

The easiest way to install any extension for for DataTables, including and in particular Buttons due to is modular structure, is with the download builder. With the download builder, you select the components of the DataTables suites and styling you want, and it will generate the packages / install commands for you to use.

The download builder includes options for direct loading with script and link tags, details for using a package manager such as npm and NuGet, or a download option if you wish to have the files locally.

The download builder is strongly recommended for getting started with Buttons, and all other DataTables software, particularly so you make sure that the correct styling integration files are available on your page.

However, if you prefer to create the installation yourself, below is an overview of installation via the CDN and npm for the DataTables default styling of AutoFill.

Modular file structure

Rather than loading everything in a single file and potentially adding unnecessary code to your page, buttons provides a number of files:

• Buttons core (collection, spacer, pageLength)
• HTML export buttons (copy, csv, excel, pdf)
• Print (print)
• Column visibility (colvis and friends).

Additionally, some buttons have external dependencies:

• excel - Requires JSZip
• pdf - Requires pdfmake.

Please make sure you load the files you need for the features you want, and only those files! Again, use the download builder to make sure of this. If you find you need an extra feature, it is easy to add at a later date.

CDN

Assuming that you already have DataTables installed add the CSS and JS for Buttons and the button libraries that you want by inserting the following tags to your HTML (delete the parts you don't want), after the core DataTables file has been included.

<link href="https://cdn.datatables.net/buttons/4.0.0-beta.1/css/buttons.dataTables.min.css" rel="stylesheet">

<!-- JSZip for Excel export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
 
<!-- pdfmake for PDF export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js" script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

<!-- Buttons core -->
<script src="https://cdn.datatables.net/buttons/4.0.0-beta.1/js/dataTables.buttons.min.js"></script>

<!-- Optional button libraries -->
<script src="https://cdn.datatables.net/buttons/4.0.0-beta.1/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/4.0.0-beta.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/4.0.0-beta.1/js/buttons.print.min.js"></script>

Once done you will be able to define buttons in the DataTable configuration option using the layout option and buttons feature. Please see the configuration documentation for full details.

NPM

To install Buttons via npm use:

npm install datatables.net-buttons-dt

Note that the -dt at the end of the package name denotes that it is for DataTables default styling. For other styling integrations, this postfix must be changed. Use the download builder to get the required packages.

To use Buttons in your own software include the following just after you import the core DataTables library, again, deleting the parts that you don't need - e.g.:

// JSZip for Excel export
import jszip from 'jszip';

// pdfmake for PDF export
import pdfmake from 'pdfmake';

// DataTables and Buttons core
import DataTable from 'datatables.net-dt';
import 'datatables.net-buttons-dt';

// Optional button libraries
import 'datatables.net-buttons/js/buttons.colVis.mjs';
import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-buttons/js/buttons.print.mjs';
 
// Register JSZip and pdfmake for use with buttons
DataTable.Buttons.jszip(jszip);
DataTable.Buttons.pdfMake(pdfmake);

Note that Buttons doesn't import to a specific constant - rather the software is automatically attached to the constant imported from DataTables core and made available from there.

You will now be able to use the buttons feature in the DataTable options (specifically layout) to configure Buttons. Please see the configuration documentation for details.

Sources

If you are interested in building Buttons from source yourself, you can find it on Github. The source is Typescript and SCSS which is transpiled to Javascript and CSS. The AutoFill source is released under the MIT license. See the DataTables manual for more details on building DataTables and the extensions.