How to show a dialog on left mouse click in the first row of a React Spreadsheet?

This knowledge base article explains how to show a dialog on left mouse click in the first row of a React Spreadsheet. To achieve this, add a clickevent listener to the spreadsheet’s e-sheet panel element, which triggers only for left mouse click. In the event listener function, check if the target element contains the e-cell class and verify the aria-rowindex attribute to confirm if it is the first row. Then, you can show the dialog based on your requirements.

[index.tsx]

import * as React from "react";
import { createRoot } from 'react-dom/client';
import './style.css';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './data';
import { Dialog } from "@syncfusion/ej2-spreadsheet/src/spreadsheet/services";

const App = () => {
 const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
 const onCreated = () => {
   let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
   // The below click event is triggered only on the mouse left click.
  spreadsheet.element.querySelector('.e-sheet-panel').addEventListener("click", function (event: MouseEvent) {
      // Check the target has 'e-cell' class and row index is 1 for first row.
      let target: HTMLElement = event.target as HTMLElement;
      if (target && target.classList.contains('e-cell') && target.parentElement.getAttribute('aria-rowindex') === "1") {
          // Display your dialog here
          showDialog();
      }
  });
}
const showDialog = () => {
 let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
  let dialogContent = "First row is left clicked";
  const dialogInstance: Dialog = spreadsheet.serviceLocator.getService('dialog');
  // To show the dialog with the specified content.
  dialogInstance.show({
    header: "Dialog",
    target: spreadsheet.element,
    height: 150,
    width: 300,
    isModal: true,
    allowDragging: true,
    showCloseIcon: true,
    content: dialogContent,
    buttons: [
      {
        buttonModel: { content: 'Ok', isPrimary: true },
        // triggers after clicking the Ok button in dialog.
        click: (args) => {
          // To hide the dialog instance.
          dialogInstance.hide();
        },
      },
    ],
  });
}
 return (<div className='control-pane'>
 <div className='control-section spreadsheet-control'>
     <SpreadsheetComponent openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open' saveUrl='https://services.syncfusion.com/react/production/api/spreadsheet/save' ref={spreadsheetRef} created={onCreated}>
         <SheetsDirective>
             <SheetDirective name="Car Sales Report">
                 <RangesDirective>
                     <RangeDirective dataSource={defaultData}></RangeDirective>
                 </RangesDirective>
             </SheetDirective>
         </SheetsDirective>
     </SpreadsheetComponent>
 </div>
</div>);
};

export default App;

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

Sample Link: https://stackblitz.com/edit/react-ts-ttza8a?file=index.tsx

Output: