Installing

Editor can be installed in a number of different ways, and which is best for you will depend upon your project and the tooling that you use. Editor can be installed:

As a standard script file included on your page, or
Via an NPM package manager (e.g. npm, yarn, pnpm and others)

Download packages

The latest version of Editor is always available on the download page and we have five download packages that are available for Editor. These include server-side libraries and a full suite of examples in a package that can be configured to run on your own database (with the exception of the JS+CSS only download, which does not include examples).

Download and installation instructions for each are available:

Direct inclusion

For direct inclusion on the page (i.e. a script loading Editor directly) from any of the download packages use the following:

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-2.2.2/b-3.2.3/sl-3.0.0/datatables.min.css"/>
<link rel="stylesheet" href="Editor-2.4.2/css/editor.dataTables.css">

<script src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-2.2.2/b-3.2.3/sl-3.0.0/datatables.min.js"></script>
<script src="Editor-2.4.2/js/dataTables.editor.js"></script>

As well as loading the Editor files, it also includes DataTables, Buttons and Select (which are commonly used with Editor) from our CDN. While Editor itself is not available on the CDN (as it has a commercial license), all of our other software can be included from there for easy inclusion.

Customised download

You can customise the software included from our CDN, including what styling integration to use through the DataTables download builder. The customised build can their either be included as above, or you can select the download option to download the entire package. Install the downloaded files onto your web-server and your includes for the software would then be:

<link rel="stylesheet" href="DataTables/datatables.min.css"/>
<script src="DataTables/datatables.min.js"></script>

NPM package manager

Use of a package manager offers a number of significant advantages such as easy inclusion of new libraries and tight integration with tooling (e.g. a bundler such as Vite). It also helps for keeping your project up to date with the latest releases.

Editor can be installed from our private npm repository and works for both licensed and trial versions of Editor.

Configure access

Our private npm repository uses an authentication token to allow installation of Editor. Login with your account that has a license, or start a trial on our download page to get your secret token.

To use this token in your project, create a .npmrc file in the root directory of your project (where your package.json file is) and add the following:

@datatables.net:registry=https://npm.datatables.net/
//npm.datatables.net/:_authToken=your-auth-token

If you are using Yarn v2+, you'll need a yarnrc.yml file instead (note that Yarn v1 will work with the .npmrc method described above):

npmScopes:
 datatables.net:
   npmAlwaysAuth: true
   npmRegistryServer: "https://npm.datatables.net/"
   npmAuthToken: "your-auth-token"

Install your package

The next step is to install the Editor package with the package manager of your choice. As with DataTables core and its other extensions, Editor offers full integration with multiple styling libraries. Use the selector below to pick your style to show the installation package name:

Install with npm:

npm install --save @datatables.net/{editor-module-name}

Or if you are using yarn:

yarn add @datatables.net/{editor-module-name}

Note that this will install the styling package for Editor. The Editor core library is a separate package, which is a dependency of the package shown above and will automatically be installed.

Load into your Javascript

The final step is to load the Editor Javascript into your application. Exactly how to do that will depend upon if you are using ES modules or CommonJS.

ES modules

Import Editor from {editor-module-name} just as you would with any other package. For example, this is how to import both Editor and DataTables core:

import DataTable from 'datatables.net-dt';
import Editor from '@datatables.net/{editor-module-name}';

let editor = new Editor({
    // config options...
});

let table = new DataTable('#myTable', {
    // config options...
});

CommonJS

In a CommonJS environment you would use:

To include Editor in a CommonJS environment, you can use:

const DataTable = require( 'datatables.net-dt' );
const Editor = require( '@datatables.net/{editor-module-name}' );

let editor = new Editor({
    // config options...
});

let table = new DataTable('#myTable', {
    // config options...
});

Note that prior to Editor 2.1.2, the require() function would return a function, so you would have to call it like: require('@datatables.net/{editor-module-name}')(). This was updated in 2.1.2 to allow direct compatibility with the ES module import signature. The old style function return can still be used if upgrading or using a window-less environment.