Add Custom Icons to Cells in React Spreadsheet

29 Jun 20268 minutes to read

In the Spreadsheet, you can render custom icons inside specific cells by defining a custom template property within the cell model. During the beforeCellRender event, the icon element can be appended to the corresponding table cell (td) by checking whether the cell contains this template property.

The following sample demonstrates how to add icons to cells by assigning the template property in the cell definition. Additionally, a custom ribbon item named “Add Icon” is included under a new “Template” ribbon tab. When this ribbon item is selected, the Spreadsheet dynamically inserts an icon into the currently active cell.

app.jsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function App() {
  const spreadsheetRef = React.useRef(null);

  // To create plus icon wrapper.
  const createPlusIconWrapper = () => {
    const wrapperDiv = document.createElement("div");
    wrapperDiv.className = 'e-custom-wrapper';
    const iconSpan = document.createElement("span");
    iconSpan.className = 'e-icons e-plus e-custom-icon';
    wrapperDiv.appendChild(iconSpan);
    return wrapperDiv;
  };

  const handleCreated = () => {
    if (!spreadsheetRef.current) return;
    spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'A1');
    spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'B1');
    spreadsheetRef.current.updateCell({ template: 'plus-icon' }, 'C1');
    spreadsheetRef.current.resize();
    spreadsheetRef.current.addRibbonTabs([
      {
        header: { text: 'Template' },
        content: [
          {
            text: 'Add Icon',
            tooltipText: 'Initialize',
            click: () => {
              if (!spreadsheetRef.current) return;
              const sheet = spreadsheetRef.current.getActiveSheet();
              spreadsheetRef.current.updateCell({ template: 'plus-icon' }, sheet.activeCell);
              spreadsheetRef.current.resize();
            },
          },
        ],
      },
    ]);
  };

  const handleBeforeCellRender = (args) => {
    if (args.cell && args.cell.template === 'plus-icon') {
      const wrapperDiv = createPlusIconWrapper();
      args.element.insertBefore(wrapperDiv, args.element.firstChild);
    }
  };

  return (
    <div>
      <SpreadsheetComponent
        ref={spreadsheetRef}
        created={handleCreated}
        beforeCellRender={handleBeforeCellRender}
      />
    </div>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<App />);

app.tsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function App(): React.ReactElement {
  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);

  // To create plus icon wrapper.
  const createPlusIconWrapper = (): HTMLElement => {
    const wrapperDiv: HTMLDivElement = document.createElement("div");
    wrapperDiv.className = 'e-custom-wrapper';
    const iconSpan: HTMLSpanElement = document.createElement("span");
    iconSpan.className = 'e-icons e-plus e-custom-icon';
    wrapperDiv.appendChild(iconSpan);
    return wrapperDiv;
  };

  const handleCreated = (): void => {
    if (!spreadsheetRef.current) return;
    spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'A1');
    spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'B1');
    spreadsheetRef.current.updateCell({ template: 'plus-icon' } as any, 'C1');
    spreadsheetRef.current.resize();
    spreadsheetRef.current.addRibbonTabs([
      {
        header: { text: 'Template' },
        content: [
          {
            text: 'Add Icon',
            tooltipText: 'Initialize',
            click: () => {
              if (!spreadsheetRef.current) return;
              const sheet: any = spreadsheetRef.current.getActiveSheet();
              spreadsheetRef.current.updateCell(
                { template: 'plus-icon' } as any,
                sheet.activeCell
              );
              spreadsheetRef.current.resize();
            },
          },
        ],
      },
    ]);
  };

  const handleBeforeCellRender = (args: any) => {
    if (args.cell && args.cell.template === 'plus-icon') {
      const wrapperDiv: HTMLElement = createPlusIconWrapper();
      args.element.insertBefore(wrapperDiv, args.element.firstChild);
    }
  };

  return (
    <div>
      <SpreadsheetComponent
        ref={spreadsheetRef}
        created={handleCreated}
        beforeCellRender={handleBeforeCellRender}
      />
    </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);