Set cell renderer individually

I have a fully functional formatting feature implemented (bold, italic, alignment, colors and etc) and as I initialize the instance I go through my formatting object inside cells method, like so:

this.cells = (function(row, col) {
        this.hasFormatting = false;
        var properties = {};

        ['cells'].forEach(function(group) {
          var filtered = formattingObject[group].filter(function(c) {
            return c.cell[0] == row && c.cell[1] == col;
          });
          if (filtered.length >= 1) {
            this.hasFormatting = true;
            //do stuff
          }
        }.bind(this));

        if (this.hasFormatting === true) {properties.renderer = this._textFormattingRenderer.bind()};
        return properties;
      }.bind(this));

The problem with this approach is that “cells” runs for each cell in the table and we’re working with huge sheets. Is there a way to apply a renderer to a cell outside of cells method? My formatting object is this:

{
"formatting": {
	"cells": [{
		"cell": [
			0,
			0
		],
		"style": [
			"border-top",
			"border-right",
			"border-bottom",
			"border-left"
		],
		"color": "4BACC6",
		"bgColor": "C0504D",
		"textRotation": "rotation_counter_clockwise"
	}]
}}

So, by iterating my formatting object I already know the cells that has formatting and by that I want to have a function that adds a renderer to that cell, like HotInstance.setRenderer(row, col, rendererName).

Is this possible? Is there any other approach different than “cells” to add renderers. I’m using ngHandsontable and CE version is 0.28.4

Thanks

Yes, there is. You can se the setCellMeta method. Here’s an example Handsontable example - JSFiddle - Code Playground

If you have any other questions, I’m happy to assist you.

1 Like

Awesome! Thanks very much, this will help a lot with performance.

Great :slight_smile: I am happy that I could help.

Have a great day!