Use multiple renderers

Tags: #<Tag:0x00007efc654df180> #<Tag:0x00007efc654defc8>
#1

Hi, I want to use multiple renderers in my app. I have one renderer, that is a custom one, since I can insert mathjax formulas I am using it to render the formulas. Now I also want to implement currency format into my app, but since I do not want to make custom renderer for that, I want to use numeric renderer that is already implemented in library, to use numericFormat, and patterns.

This is my code:

    _columns(handsontableOptions) {
            const toolTipFunction = this.getTooltipFunction();

            const renderer = (tableInstance, td, rowIndex, columnIndex, prop, value) => {
                // Content section
                // To prevent content of cells to cause overflow we need to provide
                // container that would limit display of long text lines
                const customContent = document.createElement('div');
                customContent.classList.add('custom-content');
                const latexRegex = /\${2}(.*?)\${2}/;
                const hasLatex = latexRegex.test(value);
                if (value) {
                    // Only render MathJax cells if it is initialized and the custom value is a string with MathML code.
                    if (window.MathJax && typeof value === 'string') {
                        if (window.MathJax.mathml2svg && value.includes('<math')) {
                            try {
                                const equationSvg = window.MathJax.mathml2svg(value);
                                customContent.appendChild(equationSvg);
                                td.classList.add('mathjax-cell');
                            } catch (e) {
                                // Fallback if mathml2svg fails, ex. given value is not mathml.
                                customContent.innerHTML = value;
                            }
                        } else if (window.MathJax.tex2svg && hasLatex) {
                            try {
                                const equationSvg = window.MathJax.tex2svg(value.replaceAll('$', ''));
                                customContent.appendChild(equationSvg);
                                td.classList.add('mathjax-cell');
                            } catch (e) {
                                // Fallback if tex2svg fails, ex. given value is not latex.
                                customContent.innerHTML = value;
                            }
                        } else {
                            customContent.innerHTML = value;
                        }
                    } else {
                        customContent.innerHTML = value;
                    }
                }

                td.innerHTML = '';
                td.classList.add('htMiddle');
                td.appendChild(customContent);

                toolTipFunction(td, customContent, rowIndex, columnIndex);

                // Assure that all rows have heights set
                this._handleRowHeight(td.parentElement, rowIndex);
            };

            handsontableOptions.columns = this.columnsOrder.map(columnId => ({
                data: columnId,
                renderer,
                className: 'htMiddle',
            }));
        }
#2

Hi @ahmedskulj10

Can you please tell what is the exact issue you are experiencing?

#3

I do not know how to add Handsontable built in numeric renderer alongside custom renderer, so I can use numericFormat property.

#4

Thank you for the explanation. So, in this case, you would need to apply the native numericRenderer inside your custom renderer, like this, for example:

   import { numericRenderer } from "handsontable/renderers";

   const customRenderer = function (hot, TD, row, col, prop, value, cellProperties) {
      
     // your custom editor logic

      numericRenderer.call(
        hot,
        hot,
        TD,
        row,
        col,
        prop,
        value,
        cellProperties,
      );
    };
#5

Thank you for the explanation, but I figured out different way.

#6

Hi @ahmedskulj10

I understand, thank you for the update. In this case, I will close this topic, but if you have any other questions, feel free to open a new one.

#7