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

anchor	Renders the column data as HTML anchor (`a` tag)
datetime	Convert date / time source data into one suitable for display
ellipsis	Restrict output data to a particular length, showing anything
hyperLink	Displays url data in hyperLink with custom plcaeholder
intl	Use the Intl Javascript API to render dates and numbers
multi	Use multiple renderers
numberTo	convert numbers to farsi, english, arabic.
percentageBars	Display percentage value as a bar