Hello, I’m new here and I love the library. I would like to know how I can update the rendering of a cell that was previously rendered. in my component I have a function to Import an excel and I map the data so that Handsontable can do the rendering, this works correctly
const cellRender = function (instance: any, td: any, row: any, col: any, prop: any, value: any, cellProperties: any) {
if (cell.cellStyles.fill?.bgColor?.argb !== undefined) {
td.style.background = `#${cell.cellStyles.fill?.bgColor?.argb.substring(2)}`;
}
if (cell.cellStyles.border?.bottom !== undefined) {
if (cell.cellStyles.border.bottom.style !== undefined) {
td.style.borderBottomStyle = cell.cellStyles.border.bottom.style
td.style.borderBottomWidth = '2px';
if (cell.cellStyles.border.bottom.color !== undefined && cell.cellStyles.border.bottom.color.argb !== undefined)
td.style.borderBottomColor = `#${cell.cellStyles.border.bottom.color.argb.substring(2)}`;
}
}
if (cell.cellStyles.border?.top !== undefined) {
if (cell.cellStyles.border.top.style !== undefined) {
td.style.borderTopStyle = cell.cellStyles.border.top.style
td.style.borderTopWidth = '2px';
if (cell.cellStyles.border.top.color !== undefined && cell.cellStyles.border.top.color.argb !== undefined)
td.style.borderTopColor = `#${cell.cellStyles.border.top.color.argb.substring(2)}`;
}
}
if (cell.cellStyles.border?.left !== undefined) {
if (cell.cellStyles.border.left.style !== undefined) {
td.style.borderLeftStyle = cell.cellStyles.border.left.style
td.style.borderLeftWidth = '2px';
if (cell.cellStyles.border.left.color !== undefined && cell.cellStyles.border.left.color.argb !== undefined)
td.style.borderLeftColor = `#${cell.cellStyles.border.left.color.argb.substring(2)}`;
}
}
if (cell.cellStyles.border?.right !== undefined) {
if (cell.cellStyles.border.right.style !== undefined) {
td.style.borderRightStyle = cell.cellStyles.border.right.style
td.style.borderRightWidth = '2px';
if (cell.cellStyles.border.right.color !== undefined && cell.cellStyles.border.right.color.argb !== undefined)
td.style.borderRightColor = `#${cell.cellStyles.border.right.color.argb.substring(2)}`;
}
}
switch (cell.cellValue.type) {
case 1: // String
Handsontable.renderers.TextRenderer.apply(cellRender, arguments as any);
break;
case 2: // Number
let numFmt: string = cell.cellValue.numFmt;
if (numFmt && numFmt.endsWith('%')) { // La celda es un porcentaje
td.innerHTML = parseFloat(value).toFixed(2) + '%';
Handsontable.renderers.NumericRenderer.apply(cellRender, arguments as any);
} else if (numFmt && numFmt === '0.00E+00') {
td.innerHTML = parseFloat(value).toExponential(2);
Handsontable.renderers.NumericRenderer.apply(cellRender, arguments as any);
} else if (numFmt && (numFmt.includes('$') || numFmt.includes('€'))) {
td.innerHTML = parseFloat(value).toFixed(2);
Handsontable.renderers.TextRenderer.apply(cellRender, arguments as any);
} else if (numFmt && numFmt === "#,##0.00") {
Handsontable.renderers.NumericRenderer.apply(cellRender, arguments as any);
}
else {
Handsontable.renderers.NumericRenderer.apply(cellRender, arguments as any);
}
break;
case 3: // Boolean
Handsontable.renderers.NumericRenderer.apply(cellRender, arguments as any);
break;
case 4: // Date
Handsontable.renderers.HtmlRenderer.apply(cellRender, arguments as any);
break;
case 5: // Object
let hyperLink: string = cell.cellValue.numFmt;
if (hyperLink) { //hyperlink
const link = document.createElement('a');
link.href = value;
link.target = '_blank'; // Abre el enlace en una nueva pestaña
link.textContent = value.text; // Texto visible del enlace
td.style.color = 'blue';
td.appendChild(link);
Handsontable.renderers.HtmlRenderer.apply(cellRender, arguments as any);
} else {
Handsontable.renderers.HtmlRenderer.apply(cellRender, arguments as any);
}
break;
case 6: // Fórmula
if (cell.cellValue.formula !== undefined) {
if (typeof value === 'string' && value.startsWith('=')) {
td.innerText = value; // Renderizar la fórmula tal cual en la celda
} else {
// Renderizar otros valores como texto
td.innerText = value.toString();
}
} else {
}
Handsontable.renderers.TextRenderer.apply(cellRender, arguments as any);
break;
case 7: // Error
break;
case 9:
break;
default: // Other cases
if (cell.cellValue.type === 'list') {
} else {
}
Handsontable.renderers.TextRenderer.apply(cellRender, arguments as any);
break;
}
if (cell.cellValue.numFmt !== undefined) {
cellProperties.format = cell.cellValue.numFmt;
}
}
await this.setCustomRenderer(cell.row, cell.col, cellRender,hot);
async setCustomRenderer(row: number, col: number, customRenderer: any, hot: Handsontable): Promise<void> {
return new Promise<void>((resolve, reject) => {
try {
hot.setCellMeta(row, col, 'renderer', customRenderer);
resolve();
} catch (error) {
reject(error);
}
})
}
When I try to update the background color, the entire render disappears