HandsonTable Empty Cell

Tags: #<Tag:0x00007efc728601f8> #<Tag:0x00007efc728600b8>
#1

Hello,

I am currently working on displaying data within Handsontable using a custom renderer. My goal is to render the decimal value of each cell when it is not null. However, if the cell’s value is null, I intend to display an empty cell. Despite my efforts, cells with null values are being displayed as zero in the UI. Could anyone advise on how to explicitly set these cells to appear empty rather than showing a zero?
The following is the custom renderer I’m using,
const valueRenderer = (
instance,
td,
row,
col,
prop,
value,
cellProperties ) => {
if (value !== null) {
td.textContent = Number(value).toFixed();
} else {
td.textContent = null;
}
};

Thank you.

#2

Hi @rohithnaircn225

Can you please share a code demo with your current implementation? It will be easier to find a solution having the full picture.

#3

Hi @adrian.szymanski

This is how my implementation looks,

data = [24, null, 47.55, 902.22, null]

const updateCells = () => {
const cellProperties: Handsontable.CellMeta = {};
cellProperties.renderer = valueRenderer;
cellProperties.readOnly = true;
return cellProperties;
};

HotTable cells={updateCells} data={data}>

#4

Hi @rohithnaircn225

Please, use this example and modify it, so it matches your implementation:

https://jsfiddle.net/handsoncode/sLq1b9f8/

#5

Hi @adrian.szymanski

I realized my code was incorrectly converting null values to zero, which wasn’t aligning with my expectations. By adjusting the code to preserve null values as intended, the issue was resolved. Thank you for your assistance, and apologies for any confusion.

#6

Hi @rohithnaircn225

Thank you for the update, and I’m glad that you’ve found the solution to this problem. In this case I will close this topic.

1 Like
#7