Handsontable key-value renderer and editor

KVDropdown.js

import React from 'react';
import Handsontable, {DropdownEditor} from 'handsontable';
import extend from 'lodash/extend';

const AutocompleteEditor = Handsontable.editors.DropdownEditor;
export function enhancerRenderer(func) {
    return (...args) => {
        args[1].innerHTML = ReactDOMServer.renderToString(func.apply(null, args));
        return args[1]
    }
}

const renderer = enhancerRenderer((instance, td, row, col, prop, value, cellProperties) => {
    return <span>
        {cellProperties.kvmap[value] || value}
        <span className="htAutocompleteArrow">▼</span>
    </span>
});

export default ({options}) => {
    let vkmap = {};
    let kvmap = {};
    const source = options.map(o => {
        const opt = `${o.key} ${o.value}`;
        vkmap[opt] = o.key;
        kvmap[o.key] = o.value;
        return opt;
    });

    return {
        type: 'dropdown',
        renderer: renderer,
        editor: KVDropdownEditor,
        source,
        vkmap,
        kvmap,
    }
};

export const KVDropdownEditor = AutocompleteEditor.prototype.extend();
extend(KVDropdownEditor.prototype, {
    setValue (newValue) {
        const key = this.cellProperties.vkmap[newValue];
        const val = key || newValue;
        AutocompleteEditor.prototype.setValue.apply(this, [val]);
    }
});