Order column after Column.render

mdorado

Good Morning,

I need to render a column of a table, in order to display a red cross or a green tick depending on the false/true value. The problem is that I want to sort by that column to get all the rows that are true together when I click in the column. As the value is rendered, it doesn't order by true/false anymore, it tries to order by the rendered value (and it seems it is not able to do that with the tick and the cross).

How can I sort/order/filter the column so that I can get all the Trues on the top of the table or all the Falses on the top, or only get the true/false values?

Thank you!

This is the code for that column:

    {
        data: "estado",
        render: function (data, type, row) {
            if (row.estado === true) {
                return '<i class="fas fa-check" style="color:#01DF01; font-size: 1.5em;"></i>';
            else {
                return '<i class="fas fa-times" style="color:#DF0101; font-size: 1.5em;"></i>';
            }
        },
        className: "dt-body-center"
    }

mdorado

I managed to filter using:

if (type === 'filter') {
    if (row.estado === true) {
        return 'ON';
    } else {
        return 'OFF'
    }
}

But I'm still unable to reorder the table clicking on the column name.