I would like to use the following columnDef on two boolean columns to display a check for true and x for false. However, nothing gets displayed on the columns:
{
targets: [5, 6],
render: function (data, type, row) {
return (data === true) ? '<span class="glyphicon glyphicon-ok txt-green"></span>' : '<span class="glyphicon glyphicon-remove txt-red"></span>';
}
}
The following does work, but it is difficult to see the checkmarks for values that are true. I prefer the glyphicon option:
{
targets: [5, 6],
render: function (data, type, full, meta) {
return data ? '<input type="checkbox" disabled checked/>' : '<input type="checkbox" disabled />';
}
}
The glyphicons example was not working because they are no longer supported in Bootstrap 4 and above.
The following is my solution using fontawesome icons:
{
targets: [5, 6],
render: function (data) {
return data ? '<span class="fa fa-solid fa-check" style="color: green"></span>' : '<span class="fa fa-solid fa-times" style="color: red"></span>';
}
}