<p-growl id="messages"></p-growl>

<p-datatable datasource="Showcase.demo.loadAllCars" paginator rows="10" selectionmode="single" onrowselect="handleRowSelect">
    <p-column field="vin" headertext="Vin" sortable filter></p-column>
    <p-column field="year" headertext="Year" sortable filter></p-column>
    <p-column field="brand" headertext="Brand" sortable filter></p-column>
    <p-column field="color" headertext="Color" sortable filter> 
        <template>
            <span style="color:{{color}}">{{color}}</span>
        </template>
    </p-column>
</p-datatable>
                                

var demo = {

    loadAllCars: function(callback) {
        $.ajax({
            type: "GET",
            url: 'showcase/resources/data/cars-large.json',
            dataType: "json",
            context: this,
            success: function (response) {
                callback.call(this, response);
            }
        });
    }

};

handleRowSelect = function(event, data) {
    document.getElementById('messages').show([{severity: 'info', summary: 'Row Selected', detail: data.vin + ' ' + data.year}]);
};