Use when creating or modifying a Handsontable cell renderer function that controls how cell content is displayed in the DOM - pure functions that take cell data and modify TD element
Renderers are pure functions with no class or state:
function myRenderer(hotInstance, TD, row, col, prop, value, cellProperties) {
baseRenderer.apply(this, arguments);
// Modify TD element here
}
Always call baseRenderer first. It applies common properties: readonly CSS class, invalid CSS class, ARIA attributes, and other standard cell setup.
fastInnerText(TD, value) from src/helpers/dom/element.js for setting cell text content. It is XSS-safe and cross-browser optimized.innerHTML without sanitization. All user-provided content must be escaped to prevent XSS.baseRenderer handles standard ARIA. If your renderer changes the cell's role or state, update ARIA attributes accordingly.src/renderers/{rendererName}/
{rendererName}.js # Renderer function
index.js # Re-exports
Registry: src/renderers/registry.js.
import { registerRenderer } from '../../renderers/registry';
registerRenderer('myRenderer', myRenderer);
src/renderers/baseRenderer/baseRenderer.js -- Must be called by every renderer.src/renderers/textRenderer/textRenderer.js -- Simplest renderer, good starting template.src/renderers/htmlRenderer/htmlRenderer.js -- Renders raw HTML (use with caution).src/renderers/numericRenderer/numericRenderer.js -- Formatting with numeral.js.Renderers are called for every cell in the viewport on every render cycle (both fast and slow renders). They must be highly optimized:
getBoundingClientRect, offsetWidth) -- causes layout thrashingbaseRenderer first, which skips readonly/invalid CSS and ARIA setup.innerHTML with unsanitized user input.cellProperties or source data inside a renderer.null or undefined values gracefully.