Installation

The easiest way to install ColumnControl for DataTables is with the download builder. With the download builder, you select the software (including ColumnControl!) and styling you want, and it will generate the details 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 ColumnControl, particularly so you make sure that the correct styling integration files are available on your page.

That said, below is an overview of installation via the CDN and npm for the DataTables default styling of ColumnControl.

CDN

Assuming that you already have DataTables installed simply add the following two tags to your HTML, after the core DataTables file has been included.

<link href="https://cdn.datatables.net/columncontrol/1.0.4/css/columnControl.dataTables.min.css" rel="stylesheet">
 
<script src="https://cdn.datatables.net/columncontrol/1.0.4/js/dataTables.columnControl.min.js"></script>

Once done you will be able to define the columnControl option in the DataTable options to configure ColumnControl. Please see the configuration documentation for details.

NPM

To install ColumnControl via npm use:

npm install datatables.net-columncontrol-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 ColumnControl in your own software include the following just after you import the core DataTables library - e.g.:

import DataTable from 'datatables.net-dt';
import 'datatables.net-columncontrol-dt';

Note that ColumnControl 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 define the columnControl option in the DataTable options to configure ColumnControl. Please see the configuration documentation for details.

Sources

If you are interested in building ColumnControl from source yourself, you can find it on Github. The source is Typescript and SCSS which is transpiled to Javascript and CSS. The source is released under the MIT license.