<div id="tbleditable">/</div>
                                

var localData = [
    {'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'},
    {'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'},
    {'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'},
    {'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'},
    {'brand': 'Mercedes', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'},
    {'brand': 'Volvo', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'},
    {'brand': 'Honda', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'},
    {'brand': 'Jaguar', 'year': 2013, 'color': 'White', 'vin': 'greg34'},
    {'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'},
    {'brand': 'Fiat', 'year': 2013, 'color': 'Red', 'vin': '245t2s'}
];

$('#tbleditable').puidatatable({
    caption: 'Editable Cells',
    editMode: 'cell',
    columns: [
        {field: 'vin', headerText: 'Vin', editor: 'input'},
        {field: 'brand', headerText: 'Brand', editor: 'input'},
        {field: 'year', headerText: 'Year', editor: 'input'},
        {field: 'color', headerText: 'Color', editor: 'input'}
    ],
    datasource: localData,
    cellEdit: function(event, ui) {
        $('#messages').puigrowl('show', [{severity: 'info', summary: 'Cell Edit', detail: 'Old Value: ' + ui.oldValue + ', New Value: ' + ui.newValue + ' for ' + ui.field}]);
    }
});

$('#messages').puigrowl();