JSGrid ColorPicker Custom Field

HTML

<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.7.0/spectrum.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.6.1/spectrum.min.css">
<div id="jsGrid"></div>

CSS

html,
body {
    height: 100%;    
}

JavaScript

var db = {

    loadData: function(filter) {
        return $.grep(this.users, function(user) {
            return (!filter.Name || user.Name.indexOf(filter.Name) > -1);
        });
    },
    
    insertItem: function(item) {
        this.users.push(item);
    },
    
    deleteItem: function(item) {
        var index = $.inArray(item, this.users);
        this.users.splice(index, 1);
    }
    
};

window.db = db;

db.users = [
    {
        "Account": "A758A693-0302-03D1-AE53-EEFE22855556",
        "Name": "Carson Kelley",
        "Color": "red"
    },
    {
        "Account": "D89FF524-1233-0CE7-C9E1-56EFF017A321",
        "Name": "Prescott Griffin",
        "Color": "steelblue"
    },
    {
        "Account": "06FAAD9A-5114-08F6-D60C-961B2528B4F0",
        "Name": "Amir Saunders",
        "Color": "skyblue"
    },
    {
        "Account": "EED7653D-7DD9-A722-64A8-36A55ECDBE77",
        "Name": "Derek Thornton",
        "Color": "#FFAAAA"
    },
    {
        "Account": "2A2E6D40-FEBD-C643-A751-9AB4CAF1E2F6",
        "Name": "Fletcher Romero",
        "Color": "#FFAAAA"
    },
    {
        "Account": "3978F8FA-DFF0-DA0E-0A5D-EB9D281A3286",
        "Name": "Thaddeus Stein",
        "Color": "#FFAAAA"
    },
    {
        "Account": "658DBF5A-176E-569A-9273-74FB5F69FA42",
        "Name": "Nash Knapp",
        "Color": "#FFAAAA"
    }
];

var ColorField = function(config) {
    jsGrid.Field.call(this, config);
};

ColorField.prototype = new jsGrid.Field({
    
    itemTemplate: function(value) {
        return $("<div>").css({
            display: "inline-block",
            background: value,
            width: "50px",
            height: "20px"
        });
    },
    
    insertTemplate: function(value) {
        var insertPicker = this._insertPicker = $("<input>").attr("type", "color");
        setTimeout(function() {
            insertPicker.spectrum({
                color: "#fff"
            });
        });
        
        return insertPicker;
    },
   ...