How to use the handsontable.renderers function in handsontable

function boldAndAlignRenderer(instance, td, row, col, prop, value, cellProperties) {
  // tslint:disable-next-line:no-invalid-this
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.style.fontWeight = 'bold';
  td.style.verticalAlign = 'middle';
  td.style.textAlign = 'left';
}

initialize: function() {
        RendererModel.__super__.initialize.apply(this, arguments);
        // we add Handsontable manually as extra argument to put it in the scope
        this.fn = new Function('Handsontable', 'return (' + this.get('code') + ')');
        (Handsontable.renderers as any).registerRenderer(this.get('name'), this.fn(Handsontable));
    }
});

"cells": function(row, col, prop) {
            const cellProperties: any = {};
            if (
                (row === 0 && col === 0) ||
                row === 1 ||
                this.instance.getData()[row][col] === "readOnly"
            ) {
                // make cell read-only if it is first row or the text reads 'readOnly'
                cellProperties.readOnly = true;
            }
            if (row === 0 || row === 1) {
                cellProperties.renderer = firstRowRenderer; // uses function directly
            } else if (col === 0) {
                cellProperties.renderer = Handsontable.renderers.TextRenderer;
            } else {
                cellProperties.renderer = Handsontable.renderers.NumericRenderer;
                if ($("#tableview").data("relative_areas") === true) {
                    cellProperties.format = "0.00000";
                }
            }
            return cellProperties;
        },
    };

});
    });
};

// inverse of above
let put_values2d = function(grid, values) {
    // TODO: the Math.min should not be needed, happens with the custom-build
    for(let i = 0; i < Math.min(grid.length, values.length); i++) {
        for(let j = 0; j < Math.min(grid[i].length, values[i].length); j++) {
            grid[i][j].value = values[i][j];
        }
    }
};

// calls the original renderer and then applies custom styling
(Handsontable.renderers as any).registerRenderer('styled', function customRenderer(hotInstance, td, row, column, prop, value, cellProperties) {
    let name = cellProperties.original_renderer || cellProperties.type || 'text';
    let original_renderer = (Handsontable.renderers as any).getRenderer(name);
    original_renderer.apply(this, arguments);
    each(cellProperties.style, function(value, key) {
        td.style[key] = value;
    });
});

let SheetView = widgets.DOMWidgetView.extend({
    render: function() {
        // this.widget_view_promises = {}
        this.widget_views = {}
        this.el.classList.add("handsontable");
        this.el.classList.add("jupyter-widgets");
        this.table_container = document.createElement('div');
        this.el.appendChild(this.table_container);

$(td).addClass('htCenter').addClass('htMiddle').append(tags);
    } else {
        value = (value === null || typeof value  === 'undefined') ? '' : String(value);
        var basename = value.split('/').pop();
        if (value.startsWith('http://') || value.startsWith('https://')) {
            Handsontable.renderers.HtmlRenderer.apply(this, arguments);
            make_url_cell(td, basename.split('.')[0], value);
        } else if (basename.startsWith('mp-') || basename.startsWith('mvc-')) {
            Handsontable.renderers.HtmlRenderer.apply(this, arguments);
            var href = 'https://materialsproject.org/materials/' + basename;
            make_url_cell(td, basename, href);
        } else if (objectid_regex.test(basename)) {
            Handsontable.renderers.HtmlRenderer.apply(this, arguments);
            make_url_cell(td, basename.slice(-7), '/' + basename);
        } else {
            Handsontable.renderers.TextRenderer.apply(this, arguments);
        }
    }
}

(displayValue) => {
      Handsontable.renderers.getRenderer('dropdown').apply(
        this,
        [instance, td, row, col, prop, displayValue !== null ? displayValue : value, cellProperties],
      );
    },
  );

const valueRenderer: Handsontable.renderers.Base = (instance, td, row, col, prop, value, cellProperties) => {
			const node = Handsontable.renderers.TextRenderer.apply(this, arguments);

			if (value === 'null') {
				td.style.fontStyle = 'italic';
				td.style.background = '#eee';
			}

			return node;
		};

function percentRenderer(instance, td, row, col, prop, value, cellProperties) {
          Handsontable.renderers.NumericRenderer.apply(this, arguments);
          td.style.color = (value < 0) ? 'red' : 'green';
        }
      },

function heatmapRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);

  if (heatmap[col]) {
    td.style.backgroundColor = heatmapScale(point(heatmap[col].min, heatmap[col].max, parseFloat(value))).hex();
    td.style.textAlign = 'right';
    td.style.fontWeight = 'bold';
  }
}

cellProperties,
    columnSettings.source,
    columnSettings.keyProperty,
    columnSettings.valueProperty,
    value,
    (displayValue) => {
      Handsontable.renderers.getRenderer('dropdown').apply(
        this,
        [instance, td, row, col, prop, displayValue !== null ? displayValue : value, cellProperties],
      );
    },
  );

}

Handsontable.renderers.registerRenderer('key-value', keyValueRenderer);

export default keyValueRenderer;