Installing

One of the best ways of getting started with a new software library is to jump right into the examples provided and start playing with the options each example presents. This lets you directly see the effect of each option on the pre-built examples, providing solid groundwork for when you start creating editable tables yourself.

Editor has a number of examples that are included in the .NET and PHP download packages so you can manipulate the examples to your heart's content!

Download the package

To get started, you need to download the Editor software so you can run it from your server. The latest version of Editor can always be downloaded from the Editor download page.

There are four packages that are available:

For full instructions on how to install the server-side component of each package, please refer to the documentation links above. The instructions are different for each platform.

Javascript and CSS includes

To use Editor the following files need to be included:

  • jQuery (Javascript only)
  • DataTables (Javascript and CSS)
  • Editor (Javascript and CSS).

Optionally you can also select to install

  • Buttons (Javascript and CSS)
  • Select (Javascript and CSS)
    • Buttons and Select are often used in combination with Editor to provide buttons for control of the editing form and row selection options. The examples on this site generally will use both, although they are optional.

The easiest way to ensure that we include all of the required software is to use the DataTables downloader. This interface will provide a single URL to include all of the required software from the DataTables CDN, with the exception of Editor which must be included locally.

CDN

The DataTables CDN provides a convenient way to load files that are already hosted on the internet and includes all of our open source software. Editor needs to be hosted locally due to its commercial nature, so the HTML to include the required CSS and Javascript will look like this:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.13.4/b-2.3.6/sl-1.6.2/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="Editor-2.1.2/css/editor.dataTables.css">

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.13.4/b-2.3.6/sl-1.6.2/datatables.min.js"></script>
<script type="text/javascript" src="Editor-2.1.2/js/dataTables.editor.js"></script>

Download

You may also wish to download the software to host all of it on your own servers. This can be achieved through the DataTables download builder. Select the software you wish to include in the download, including Editor, and then select the download option. Install the downloaded files onto your web-server and your includes for the software would then look similar to:

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

npm

The Editor client-side software is not currently directly available on npm, but we do provide a wrapper module for it, which will take the downloaded Editor file's and install them into the node packages as if it were any other package. The wrapper module is called datatables.net-editor

npm install datatables.net-editor

When the package has been installed you need to then use its install.js script to copy the downloaded licensed Editor files from the zip file, to node_modules:

node node_modules/datatables.net-editor/install.js pathToEditorZip

For example:

node node_modules/datatables.net-editor/install.js ~/Downloads/Editor.zip

ES modules

Once the files are in place, you can use ES module syntax to import Editor, just as you can with DataTables:

import DataTable from 'datatables.net';
import Editor from 'datatables.net-editor';

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

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

CommonJS

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

var DataTable = require( 'datatables.net' );
var Editor = require( 'datatables.net-editor' );

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')(). 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.

AMD

In an AMD environment such as RequireJS, DataTables, Editor and the other extensions will automatically include their required components - e.g.:

require( ['jquery', 'datatables.net', 'datatables.net-editor'], function ($, DataTable, Editor) {
    let editor = new Editor({
        // config options...
    });

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