Add icon into different cells

[Tomas De arco]

Hi friends, let me ask you a question.

How can I add an icon into any cell?

For example:

rows: [{ index: 30, cells: [ { index: 4, value: 'Total Amount:', style: { fontWeight: 'bold', textAlign: 'right', icon: 'fa-user' }}, ] }],

[Janakiraman Sakthivel]

Hi Tomas De arco,

We have validated your reported requirement, and you can add the icon as expected in our spreadsheet using the beforeCellRender event with the code snippets shared below. This beforeCellRender event triggers before the cell element is appended to the DOM.

For your reference, we have added the icon to cell A2 in the shared sample below to help you achieve your requirement.

Sample: https://stackblitz.com/edit/dnfzpw-zzj5tl?file=index.html,index.ts

CODE SNIPPET:

beforeCellRender: (args): void => {

        if (args.address === 'A2') {

        // if (args.colIndex === 0 && !isNullOrUndefined(args.rowIndex)) - To apply an icon to column A, you can add a condition like this.

            // Create the new div element

            const childEle = document.createElement('div');

            // Create the first span element for icon

            const iconSpan = document.createElement('span');

            iconSpan.className = 'fas fa-user';

            // Create the second span element for cell value

            const valueSpan = document.createElement('span');

            valueSpan.innerText = args.element.innerText;

            // Append the span elements to the div

            childEle.appendChild(iconSpan);

            childEle.appendChild(valueSpan);

            // Append the new div to the target element

            args.element.innerText = '';

            args.element.appendChild(childEle);

        }

    }

Kindly, check the above information in your end and get back to us for further validation.

[Tomas De arco]

thanks for your help.

[Babu Periyasamy]

Hi Tomas De arco,

We're glad that your query has been resolved. Please get back to us for further assistance in the future.