Datatables Custom Column Render Example Code

Datatables Example Table Custom Column Render

Column render in Datatables is use to display column data with special formatting, maybe you want to add some currency format, maybe you want to cut the string if it's too long, etc. If you are a fans of Datatables and don't know how to do custom column render, here's how.

$("#datatable").DataTable({
    dom: "Bfrtip",
    buttons: [
        "copy", "csv", "excel", "pdf", "print"
    ],
    "aoColumnDefs": [
        {
            "render": function ( data, type, row ) {
                return data+ " - TEST" ;
            },
            "targets": [4]
        }
    ],
    "processing": true,
    "serverSide": true,
    "ajax" : "http://localhost/data",
});

So as you can see the codes above, aoColumnDefs property is the one responsible for column render. The render property will provide you with (data, type and row), you can do console.log to print  what the data is being sent by Datatables.

The targets property is the index of column you want to do custom render in it. And property ajax: http://localhost/data should be your web service to provide the data you want to display on the table

Using Datatables JavaScript library has been really great thing in the past, now people start using React as their Front end framework, and the awesomeness of Datatables is now started to deteriorate. I still use this library heavily for my company i work, because they are slow to adapt to new technology.

Actually there's React Datatables you can use from Mdbootstrap here's the link https://mdbootstrap.com/docs/react/tables/datatables/. You can use that React component, but this is not official from Datatables owner. They don't provide the custom column render API i think as the time of this post is published.