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

jQuery UI AutoComplete	Use jQuery UI's AutoComplete library with Editor to allow easy and
Bootstrap DatePicker	Date picker control which is tightly integrated with Bootstrap for
Chosen	Use the Chosen library with Editor for complex select input options.
CKEditor v4	WYSIWYG editor
CKEditor v5	WYSIWYG editor
Bootstrap DateTimePicker (2)	Date and time input selector styled with Bootstrap
Bootstrap DateTimePicker (1)	Date and time input selector styled with Bootstrap
Read only display	Read only field which does not display an input option
Handwriting	Canvas input for mouse / finger input of data
imask	Display user input in a given format
Incrementor	Show + and - buttons on either side of a numeric input field with FontAwesome icons
Masked inputs	Display user input in a given format
ProseMirror	Use ProseMirror RTE library with Editor to allow Rich Text to be added
Instascan	QR Reader for HTML5
Quill	Quill WYSIWYG editor
Select2	Use the Select2 library with Editor for complex select input options.
Selectize	Use the Selectize library with Editor for complex select input options.
jQuery Signature Pad	Use jQuery Signature Pad library with Editor to allow Signatures
Formatted telephone numbers	An input that will fromat international telephone numbers
TinyMCE	WYSIWYG editor
Field set title	Field grouping display
Tristate checkbox	Provide a tristate checkbox to allow three values to be represented.
Anti-span / Anti-bot validation	Integration with Turnstile to help validate that it is humans who are