Insert and Position images in React Spreadsheet

10 Jul 20263 minutes to read

In the React Spreadsheet Editor component, images can be inserted into a worksheet and placed in a specific cell. The target cell determines where the image initially appears, and the image is rendered as an overlay on top of the grid.

Images are inserted programmatically using the insertImage method. This method allows you to define the image source along with its initial width and height, and specify the cell address where the image should be placed.

Once an image is inserted, it can be repositioned by selecting and dragging it to another location within the worksheet. The image remains independent of cell values and does not interfere with data editing, sorting, or filtering operations. You can also insert multiple images at once by passing multiple image configurations to the method.

The following code example shows how to insert an image in spreadsheet:

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);

  const onCreated = () => {
    // Insert a single image anchored at A1 with initial size
    spreadsheetRef.current.insertImage(
      [
        {
          src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png',
          width: 480,
          height: 250
        }
      ],
      'A1'
    );
  };

  return (
  <div>
      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} allowImage={true}>
      </SpreadsheetComponent>
</div>
  );
}

export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);
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);

  const onCreated = (): void => {
    // Insert a single image anchored at A1 with initial size
    spreadsheetRef.current.insertImage(
      [
        {
          src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png',
          width: 480,
          height: 250
        }
      ],
      'A1'
    );
  };

  return (
  <div>
      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} allowImage={true}>
      </SpreadsheetComponent>
</div>
  );
}

export default App;

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