Custom vs. Default Renderer

Getting help Questions
,
1

Hi,

I am having trouble getting numericFormat to work with numbro when using imports. I followed the given examples and numbro itself works fine but handsontable does not “collaborate”.

This is why I’m considering to solve the issue by defining a custom renderer which is often recommended here, however, I wonder about the performance implications.

The docs mention here that custom renderers can lead to degrading performance because they are called (multiple times) for each cell. Is this only true for custom renderers or for all renderers? Or in other words, is there a meaningful difference in how the built-in renderers work compared to custom ones? So will performing the same tasks (e. g. formatting numbers using numbro or assigning colors) perform worse if I use a custom renderer as opposed to the built-in method?

2

Hi @jaytug

It would be best if you could share your current implementation so we can see what the problem is.

Regarding the custom editors and the performance concerns. In general it is expected that the custom renderers will be more heavy on the performance because usually they contain additional attributes, and/or HTML elements and styling. Basic renderers are very lightweight so they don’t impact the performance significantly. So if you keep your custom renderers fairly simple the general performance shouldn’t be affected that much.

3

Hi @adrian.szymanski

thank you for your quick response. I guess that sounds okay, about what I was expecting.

My current implementation is a node/npm app with Handsontable 16.01. and node 22. After some research I basically arrived at the identical setup to what is shown in this guide in the docs. But for me it doesn’t work.

So my HTML is loading my test.js file while inside test.js I have (adapted from the example in docs):

import 'node_modules/handsontable/dist/handsontable.full.min.js';
import numbro from 'node_modules/numbro/dist/es/numbro.js';
import deDE from 'node_modules/numbro/es/languages/de-DE.js';
import languages from 'node_modules/numbro/es/languages.js';

// either works with numbro directly but not with handsontable
numbro.registerLanguage(deDE);
//numbro.registerLanguage(languages["de-DE"]);

numbro.setLanguage("de-DE")

// Works
console.log(numbro(1234.678).format());

const formatDE = {
  pattern: '0,0.00 $',
  culture: 'de-DE',
};

const container = document.querySelector('#example3');

// Does not work; output format remains unchanged
new Handsontable(container, {
  themeName: 'ht-theme-main',
  data: [
    {
      productName: 'Product A',
      JP_price: 1450.32,
      TR_price: 202.14,
    },
    {
      productName: 'Product B',
      JP_price: 2430.22,
      TR_price: 338.86,
    },
    {
      productName: 'Product C',
      JP_price: 3120.1,
      TR_price: 435.2,
    },
  ],
  columns: [
    {
      data: 'productName',
      type: 'text',
      width: '150',
    },
    {
      data: 'JP_price',
      type: 'numeric',
      width: '150',
      numericFormat: formatDE,
    },
    {
      data: 'TR_price',
      type: 'numeric',
      width: '150'
    },
  ],
  autoRowSize: false,
  autoColumnSize: false,
  columnSorting: true,
  colHeaders: ['Product name', 'Price in Japan', 'Price in Turkey'],
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

Interestingly, if I include the numbro language file (not the ES version but the one in node_modules/numbro/dist/languages.min.js) in my html file it works but I’m trying to get it to work as an import.

4

@jaytug

It would be best if you could share your implementation in StackBlitz so we can get the same results.

5

I finally managed to get a working example on Stackblitz. It took me a while because it definitely has some quirks. For example, I just could not get it to load a .js file from an .html file.

But in any case, I ended up just pasting the content of my .js file directly inside the html and in the end it works - with the same result as locally.

Stackblitz Demo
Setup: Node + Express, Handsontable 16.0.1 and Numbro 2.5.0

View result by typing “node index.js” in the terminal and compare the text output (numbro only) to the output in the table.

I’ll be honest, I didn’t expect it to give me the same result as locally so now I’m really curious if this is some sort of bug of HoT16 or what else it could be.

6

Hi @jaytug

my colleague’s off for the weekend but will reply first thing on Monday.

7

Hi @jaytug

Thank you for the example. I tried to set the same settings in our example and it works just fine: handsontable - StackBlitz

One thing I noticed in your demo is that you’re importing the modules from the node_modules instead of from Handsontable directly. Is this only for this example purpose? That might be the reason why the formatting doesn’t work in your project.

8

I think you are right, that is probably the reason. However, I can’t use imports like

import Handsontable from 'handsontable';

because I’m not using a bundler so I can’t use bare module specifiers. Same issue if I try to import /handsontable/index.mjs because that file again contains bare module specifiers (e.g. pointing to core-js). This also can’t be solved by defining static routes (since there’s no leading “/”).

So until I decide to include some sort of bundling, which I may or may not do, it looks like I either need to resort to importing js through HTML or use a custom renderer.

For now I’ve decided to use a custom renderer. Its code is also very short, much shorter than the numericRenderer so I would assume performance shouldn’t decrease (rather increase actually if anything).

Thank you for the pointer. :slightly_smiling_face:

9

@jaytug

I’m glad I could help. Let me know if you need help with anything else.