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 date picker that works with Bootstrap, or the excellent Select2 library.

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. For example, to use the ckeditor plug-in:

new $.fn.dataTable.Editor( {
    ajax: "../php/todo.php",
    table: "#todo",
    fields: [ {
        label: "Description:",
        name: "description",
        type: "ckeditor"
    } ]
} );

Plug-ins

Bootstrap DatePicker Date picker control which is tightly integrated with Bootstrap for styling.
Bootstrap DateTimePicker (1) Date and time input selector styled with Bootstrap
Bootstrap DateTimePicker (2) Another Date and time input selector styled with Bootstrap
CKEditor v4 WYSIWYG editor
CKEditor v5 Next generation of the popular WYSIWYG editor
Chosen Use the Chosen library with Editor for complex select input options.
Field set title Field grouping display
Handwriting / Signatures Canvas input for mouse / finger input of data
Masked inputs Display user input in a given format
QR Scanner QR Scanner integration using instascan
Quill WYSIWYG editor that does not use iframes
Read only display Read only field which does not display an input option
Select2 Use the Select2 library with Editor for complex select input options
Selectize Use the Selectize library with Editor for complex select input options
Telephone numbers Formatted telephone number input
TinyMCE WYSIWYG editor