DataTables Rendering Column with Row Data

It is possible for us to customize how the column is begin render by using columnDefs like:

var table = $("#table").DataTable({
	dom: 'rti',
	pageLength: -1,
        order: [[0, "asc"]],
        columnDefs: [
           {
               "targets": 0,
               "render": function (data, type, row) {
                  if (data === "Active") {
                     return '<span class="active">Active</span>';
                  }
                  else {
                     return '<span style="background-color:#d21605">Inactive</span>';
                  }
               }
           },
           {
               "targets": 1,
               "render": function (data, type, row) {
                  return '<span style="background-color:#d21605">' + data + ' at row ' + row + '</span>'
               }
           }
        ]
});

In this example, we use columnDefs to customize the first two columns, with targets for the index of column, and a render function. The render function has two parameters. data is the data that originally display on the table, the type is the type of the data, and the row of the row index. The function return the HTML code for the corresponding table cell.