Editor field type plug-ins

Field type plug-ins provide the ability to customise a single field in a reusable script, allowing any field in the editing form to be customised to match your exact needs. For example, you might wish to use a WYSIWYG rich text Editor such as Quill, or provide a method to scan QR codes.

A number of plug-ins have been built for Editor and are ready to be used below. You can also create your own custom plug-in if you don't find one that suits your needs here.

How to use

Using a field type plug-in is a simple matter of including the Javascript for the plug-in (and any CSS or external libraries that the plug-in depends upon) and then initialising the field using the fields.type option, set to the plug-in type.

Browser

Loading a field type plug-in directly in the browser is just a case of loading the Javascript for the plug-in (after you have loaded the core DataTables Javascript). As an example the code below makes use of the Quill plug-in saved into a file:

<script type="text/javascript" src="https://cdn.quilljs.com/latest/quill.min.js"></script>
<script type="text/javascript" src="dataTables.js"></script>
<script type="text/javascript" src="editor.quill.js"></script>
<script type="text/javascript">
    const editor = new DataTable.Editor({
        ajax: '/api/todo',
        table: '#todo',
        fields: [{
            label: 'Description:',
            name: 'description',
            type: 'ckeditor'
        }]
    });
</script>

Plug-ins which can be included in the browser are available on our CDN. See the details page for each plug-in for the full CDN URL.

ES modules

The sorting plug-ins are also available as ES modules, which can be loaded from the datatables.net-plugins package (.mjs files). You need to include the file required for the plug-in. Below we use the example of quill again:

import Quill from 'quill';
import DataTable from 'datatables.net';
import 'datatables.net-plugins/editorFields/editor.quill.mjs';

const editor = new DataTable.Editor({
    ajax: '/api/todo',
    table: '#todo',
    fields: [{
        label: 'Description:',
        name: 'description',
        type: 'ckeditor'
    }]
});

Plug-ins