JSGrid Timer Rows

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid-theme.css">
<div id="jsGrid"></div>

CSS

.jsgrid-cell { 
    overflow: hidden; 
}

.jsgrid-pager { text-align: center; }

JavaScript

var data = [
    {
        "id": 1,
        "timeout": 10
    }
];

$("#jsGrid").jsGrid({
        height: 300,
        width: "100%",
 
        autoload: true,
 
 				confirmDeleting: false,
 
        controller: {
        	loadData: function() {
          	return data;
          }
        },
        
        fields: [
            { name: "timeout", // assume there is a 'timeout' field in the item

itemTemplate: (function() {
var timers = {};
return function(value, item) {
	var scheduleTimer = function() {
		clearTimeout(timers[item.id]);
		timers[item.id] = setTimeout(function() {
			if(item.timeout <= 1) {
				$("#jsGrid").jsGrid("deleteItem", item);
			}

			if(item.timeout > 1) {
				$result.text(--item.timeout);
				scheduleTimer();
			}
		}, 1000);
	}

	var $result = $("<div>");
	$result.text(item.timeout);

	scheduleTimer();

	return $result;
};
})()}
        ]
    });