how to highlight certain rows in prime-ui datatable, depending on a condition (from the json data )

Question

I am using the prime-ui datatable. I have to highlight certain rows if a condition is true. This condition depends on the Json data which we pass to the table.

How can we specify the condition in this case ?

$('#divInWhichTableIsRendered').puidatatable({
              columns: [ 
                  {field:'f1', headerText: 'f1', sortable:true}, 
                  {field:'f2', headerText: 'f2', sortable:true},
                  {field:'f3', headerText: 'f3', sortable:true},
                  {field:'f4', headerText: 'f4', sortable:true},
                  {field:'f5', headerText: 'f5', sortable:true}
              ], 
              datasource: ourJson1,
 });

Answer 1

Played around a amount of time, did come up with this 'solution'. Unfortunately it is not the exact solution you want. I'll explain the problem after the solution.

1.) We need to use the property content of the colum definitions.

content: A function that takes row data and expects a string or a jQuery object to customize the cell.

2.) Use content on every column:

{
    field: 'vin',
    headerText: 'Vin',
    sortable: true,
    content: function(rowData) {
        return contentFunc(rowData, 'vin');
    }
}

3.) Write a function that takes the rowData and checks if this element must be highlighted or not.

function contentFunc(rowData, prop) {
    var result = $("<span />").html(rowData[prop]);
    if (rowData.highlight) {
        result.css('background', 'red');
    }
    return result;
}

Problem: We can only 'highlight' the span we've created. Neither the td nor the tr. Why? Because the span gets inserted when the function returns the jQuery object. Before that, we do not have access to the td or tr. I don't know of we can add some callbacks to do it afterwards. (A hack will be a mouseover which ranges over the whole viewport and calls a function, but that's a hack imho.)

Bring this all together:

<div id="tbllocal"></div>

var ourJson1 = [{
    'highlight': false,
    'brand': 'Volkswagen',
    'year': 2012,
    'color': 'White',
    'vin': 'dsad231ff'
}, {
    'highlight': true,
    'brand': 'Audi',
    'year': 2011,
    'color': 'Black',
    'vin': 'gwregre345'
}, {
    'highlight': false,
    'brand': 'Renault',
    'year': 2005,
    'color': 'Gray',
    'vin': 'h354htr'
}, {
    'highlight': false,
    'brand': 'Bmw',
    'year': 2003,
    'color': 'Blue',
    'vin': 'j6w54qgh'
}, {
    'highlight': false,
    'brand': 'Mercedes',
    'year': 1995,
    'color': 'White',
    'vin': 'hrtwy34'
}, {
    'highlight': false,
    'brand': 'Opel',
    'year': 2005,
    'color': 'Black',
    'vin': 'jejtyj'
}, {
    'highlight': true,
    'brand': 'Honda',
    'year': 2012,
    'color': 'Yellow',
    'vin': 'g43gr'
}, {
    'highlight': false,
    'brand': 'Chevrolet',
    'year': 2013,
    'color': 'White',
    'vin': 'greg34'
}, {
    'highlight': false,
    'brand': 'Opel',
    'year': 2000,
    'color': 'Black',
    'vin': 'h54hw5'
}, {
    'highlight': false,
    'brand': 'Mazda',
    'year': 2013,
    'color': 'Red',
    'vin': '245t2s'
}];

$('#tbllocal').puidatatable({
    caption: 'Local Datasource',
    columns: [{
        field: 'vin',
        headerText: 'Vin',
        sortable: true,
        content: function(rowData) {
            return contentFunc(rowData, 'vin');
        }
    }, {
        field: 'brand',
        headerText: 'Brand',
        sortable: true,
        content: function(rowData) {
            return contentFunc(rowData, 'brand');
        }
    }, {
        field: 'year',
        headerText: 'Year',
        sortable: true,
        content: function(rowData) {
            return contentFunc(rowData, 'year');
        }
    }, {
        field: 'color',
        headerText: 'Color',
        sortable: true,
        content: function(rowData) {
            return contentFunc(rowData, 'color');
        }
    }],
    datasource: ourJson1,
    content: contentFunc
});

function contentFunc(rowData, prop) {
    var result = $("<span />").html(rowData[prop]);
    if (rowData.highlight) {
        result.css('background', 'red');
    }
    return result;
}

Here is the fiddle