Rendering plug-ins

Data renderers can be used to transform data from a feed from one format into another. This can be useful if you want to customise the data the user sees - for example showing percentage bars for numbers.

DataTables has three built in renderers (datetime, number and text), which can be expanded upon through the plug-ins below. More can also be created as required - please see this blog post for a full description on creating your own plug-ins.

How to use

Data rendering plug-ins are really just functions that are applied to the columns.render option (see the DataTables renderers documentation for more details). When loaded data rendering plug-ins are attached to the DataTable.render object, which you then reference for the columns.render option.

Browser

Loading data rendering plug-ins directly in the browser is just a case of loading the Javascript for the plug-in. As an example the code below makes use of the ellipsis plug-in saved into a file:

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.ellipsis.js"></script>
<script type="text/javascript">
    var table = new DataTable('#myTable', {
        columnDefs: [
            {
                target: 0,
                render: DataTable.render.ellipsis(),
            },
        ],
    });
</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 data renderer 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 ellipsis again:

import DataTable from 'datatables.net';
import 'datatables.net-plugins/dataRender/ellipsis.mjs';

var table = new DataTable('#myTable', {
    columnDefs: [
        {
            target: 0,
            render: DataTable.render.ellipsis(),
        },
    ],
});

CommonJS

If you are using CommonJS (i.e. in an older version of Node or Webpack), the .js files can be loaded in, and it will automatically add the plug-in to DataTables. As with DataTables core and the extensions, the CommonJS loader provides a function that you need to call with the window and $/jQuery objects - e.g.:

var $ = require('jquery');
var DataTable = require('datatables.net')(window, $);
require('datatables.net-plugins/dataRender/ellipsis.js')(window, $);

Plug-ins