Handsontable: Adding drop down values dynamically

I am adding a drop down to all columns of the first row using the following code.

var hot = new Handsontable(container,
    {
        data: results,
        colWidths: [200, 200, 200, 200, 200, 200, 200, 200, 200],
        colHeaders: false,
        contextMenu: true,
        cells : function (row, col, prop) {
            if (row === 0) {
              this.type = 'dropdown';
              var val = this.instance.getValue();
              if(typeof val != 'undefined') {
                this.source = [val, 'Code', 'Type', 'Color'];
              }
            }
        }
    });

In my cells function I am trying to add the current cell value to the drop down (default values are Code, Type and Color). But if the user decided to enter in "Weight" in the cell, then I would want the drop down to contain ("Weight", "Code", "Type" and "Color").

The function above did do this but not correctly... The value that was added got replaced by the next every time the function was called.

I then tried creating a list which I would add the value val to and setting source to that list.

But I can't help but feeling that there is a better way to do this.

Any pointers would be appreciated!