DataTables logo
≡

Handwriting

Canvas input for mouse / finger input of data

This plug-in makes the Signature Pad library available for use as an Editor field. This allows a user to draw on a canvas using their mouse, finger or other input (depending on their computer).

The data is stored as a data URL, which can then be stored in a database as a string. It also makes it easy to show the resulting image in a DataTable using an img tag.

Use

This plug-in can be obtained and used in multiple different ways.

Browser

This plug-in is available on the DataTables CDN:

JS

The plug-in will then automatically register itself against a global DataTables instance. This file can also be used if you are using an AMD loader such as Require.js.

Note that if you are using multiple plug-ins, it can be beneficial in terms of performance to combine the plug-ins into a single file and host it on your own server, rather than making multiple requests to the DataTables CDN.

NPM

The plug-ins are all available on NPM (which can also be used with Yarn or any other Javascript package manager) as part of the datatables.net-plugins package. To use this plug-in, first install the plug-ins package:

npm install datatables.net-plugins

Then import datatables.net, any other DataTables extensions you need, plus the plug-in:

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

Example

new DataTable.Editor( {
 ajax: '/api/documents',
 table: '#documents',
 fields: [ {
     label: 'Signature:',
     name: 'sig',
     type: 'handwriting'
   },
   // additional fields...
 ]
} );

// In the DataTable `columns` array to display the image:
{
    data: 'sig',
    render: function (d) {
        return d ? '<img src="' + d + '">' : '';
    }
}

Version control

If you have any ideas for how this plug-in can be improved, or spot anything that is in error, it is available on GitHub and pull requests are very welcome!