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="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(),
        },
    ],
});

Plug-ins

percentBar	Display percentage value as a bar
convertTo	Convert numbers to Farsi, English, Arabic.
multi	Use multiple renderers
anchor	Renders the column data as HTML anchor (`a` tag)
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