SpreadsheetComponent

<SpreadsheetComponent />

    <div id="spreadsheet"></div>

import React from 'react';
import { createRoot } from 'react-dom/client';
import {
  SheetDirective,
  SheetsDirective,
  SpreadsheetComponent,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  return (
    /* Set 'Car Stock Report' sheet as active sheet. */
    <SpreadsheetComponent activeSheetIndex={1}>
      <SheetsDirective>
        <SheetDirective name="Car Sales Report" />
        <SheetDirective name="Car Stock Report" />
      </SheetsDirective>
    </SpreadsheetComponent>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const autoFillSettings: AutoFillSettingsModel = {
    fillType: 'CopyCells',
    showFillOptions: true,
  };

  return (
    <SpreadsheetComponent
      autoFillSettings={autoFillSettings}
    />
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const cellStyle: CellStyleModel = {
    fontWeight: 'bold',
    fontSize: '12pt',
    fontStyle: 'italic',
    textIndent: '2pt',
    backgroundColor: '#4b5366',
    color: '#ffffff',
  };
  return <SpreadsheetComponent cellStyle={cellStyle} />;
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const cssClass: string = 'e-custom1 e-custom2';
  return <SpreadsheetComponent cssClass={cssClass} />;
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const definedNames: DefineNameModel[] = [
    { name: 'Group1', refersTo: 'Sheet1!A1:B5' },
  ];

  return (
    <SpreadsheetComponent definedNames={definedNames} />
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  return (
    <SpreadsheetComponent
      height="600px"
    ></SpreadsheetComponent>
  );
};

export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const scrollSettings: ScrollSettingsModel = {
    isFinite: true,
    enableVirtualization: false,
  };

  return (
    <SpreadsheetComponent
      scrollSettings={scrollSettings}
      allowScrolling={true}
    ></SpreadsheetComponent>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const selectionSettings: SelectionSettingsModel = {
    mode: 'None',
  };

  return (
    <SpreadsheetComponent
      selectionSettings={selectionSettings}
    ></SpreadsheetComponent>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

import React from 'react';
import { createRoot } from 'react-dom/client';
import { salesData } from './data';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
  RangesDirective,
  RangeDirective,
  RowsDirective,
  RowDirective,
  CellsDirective,
  CellDirective,
  ColumnsDirective,
  ColumnDirective,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  return (
    <SpreadsheetComponent>
      <SheetsDirective>
        <SheetDirective name="First Sheet">
          <RangesDirective>
            <RangeDirective dataSource={salesData} />
          </RangesDirective>
          <RowsDirective>
            <RowDirective index={30}>
              <CellsDirective>
                <CellDirective index={4} value="Total Amount:" />
                <CellDirective formula="=SUM(F2:F30)" />
              </CellsDirective>
            </RowDirective>
          </RowsDirective>
        </SheetDirective>
        <SheetDirective name="Second Sheet">
          <ColumnsDirective>
            <ColumnDirective width={180} />
            <ColumnDirective width={130} />
            <ColumnDirective width={130} />
          </ColumnsDirective>
        </SheetDirective>
      </SheetsDirective>
    </SpreadsheetComponent>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  return (
    <SpreadsheetComponent
      /**
       * Specifies the width.
       */
      width="600px"
    />
  );
};
export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { closest } from '@syncfusion/ej2-base';
import { BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-navigations';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const contextMenuBeforeOpen = (args: BeforeOpenCloseMenuEventArgs): void => {
    // Add context menu items to the sheet content context menu.
    if (closest(args.event.target as Node, '.e-sheet-content')) {
      spreadsheetRef.current?.addContextMenuItems(
        [{ text: 'Custom Item' }],
        'Paste Special',
        false
      );
    }
    // Add context menu items to the column header context menu.
    else if (closest(args.event.target as Node, '.e-colhdr-table')) {
      spreadsheetRef.current?.addContextMenuItems(
        [{ text: 'Custom Column' }],
        'Insert Column',
        false
      );
    }
    // Add context menu items to the row header context menu.
    else if (closest(args.event.target as Node, '.e-rowhdr-table')) {
      spreadsheetRef.current?.addContextMenuItems(
        [{ text: 'Custom Row' }],
        'Insert Row',
        false
      );
    }
    // Add context menu items to the sheet tab context menu.
    else if (closest(args.event.target as Node, '.e-toolbar-item')) {
      spreadsheetRef.current?.addContextMenuItems(
        [{ text: 'Custom tab' }],
        'Insert',
        false
      );
    }
  };

  return (
    <SpreadsheetComponent
      ref={spreadsheetRef}
      contextMenuBeforeOpen={contextMenuBeforeOpen}
    />
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const created = (): void => {
    // Add custom library function to compute the square root of a number.
    spreadsheetRef.current?.addCustomFunction('SQRTHandler', 'SQRT');
  };

  return <SpreadsheetComponent ref={spreadsheetRef} created={created} />;
};
export default App;

(window as any).SQRTHandler = (num: number) => Math.sqrt(num);

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const created = (): void => {
    const spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
    // Add data validation with the specified validation rules to the range.
    spreadsheet?.addDataValidation(
      { type: 'TextLength', operator: 'LessThanOrEqualTo', value1: '4' },
      'A2:A5'
    );
    spreadsheet?.addDataValidation(
      { type: 'WholeNumber', operator: 'NotEqualTo', value1: '1' },
      'B2:B5'
    );
    spreadsheet?.addDataValidation(
      { type: 'Date', operator: 'NotEqualTo', value1: '04/11/2019' },
      'F2:F5'
    );
    spreadsheet?.addDataValidation(
      {
        type: 'Time',
        operator: 'Between',
        value1: '10:00:00 AM',
        value2: '11:00:00 AM',
      },
      'G2:G5'
    );
    spreadsheet?.addDataValidation(
      { type: 'Decimal', operator: 'LessThan', value1: '100000.00' },
      'H2:H5'
    );
    // Add a cell range as a data source to the list validation dropdown.
    spreadsheet?.addDataValidation(
      { type: 'List', inCellDropDown: true, value1: '=Sheet1!A2:A3' },
      'J2:J5'
    );
    spreadsheet?.addDataValidation(
      { type: 'List', inCellDropDown: true, value1: '10, 20, 30' },
      'I2:I5'
    );
  };
  return <SpreadsheetComponent ref={spreadsheetRef} created={created} />;
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const created = (): void => {
    // Set the specified cell range's name to 'Group1'.
    spreadsheetRef.current?.addDefinedName({
      name: 'Group1',
      refersTo: '=Sheet1!B2',
    });
  };
  return <SpreadsheetComponent ref={spreadsheetRef} created={created} />;
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const created = (): void => {
    // Place the 'Print' option before the 'Save As' option in the File menu.
    spreadsheetRef.current?.addFileMenuItems(
      [{ text: 'Print' }],
      'Save As',
      false
    );
  };
  return <SpreadsheetComponent ref={spreadsheetRef} created={created} />;
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Insert a hyperlink into the 'A5' cell.
    spreadsheetRef.current?.addHyperlink('https://www.google.com/', 'A5');
  };

  return (
    <div>
      <button onClick={onClick}>Add Hyperlink</button>
      <SpreadsheetComponent ref={spreadsheetRef} />
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
  RangesDirective,
  RangeDirective,
} from '@syncfusion/ej2-react-spreadsheet';
import { salesData } from './data';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Highlight the invalid data on the specified range.
    spreadsheetRef.current?.addInvalidHighlight('F2:F5');
  };

  const onCreated = (): void => {
    // Add data validation to the specified range.
    spreadsheetRef.current?.addDataValidation(
      { type: 'Decimal', operator: 'LessThan', value1: '1000' },
      'F2:F5'
    );
  };

  return (
    <div>
      <button onClick={onClick}>Highlight Invalid Data</button>
      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated}>
        <SheetsDirective>
          <SheetDirective name="Car Sales Report">
            <RangesDirective>
              <RangeDirective dataSource={salesData} />
            </RangesDirective>
          </SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onCreated = (): void => {
    // Place the 'Custom' ribbon tab before the existing 'Data' tab.
    spreadsheetRef.current?.addRibbonTabs(
      [
        {
          header: { text: 'Custom' },
          content: [{ text: 'Custom', tooltipText: 'Custom Button' }],
        },
      ],
      'Data'
    );
  };
  return <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} />;
};

export default App;

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

<div id="spreadsheet"></div>

import React, { useRef } from "react";
import { createRoot } from "react-dom/client";
import { SpreadsheetComponent } from "@syncfusion/ej2-react-spreadsheet";

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onCreated = (): void => {
    // Place the custom toolbar items to the 'Home' tab ribbon toolbar.
    spreadsheetRef.current?.addToolbarItems("Home", [
      { type: "Separator" },
      { text: "Custom", tooltipText: "Custom Btn" },
    ]);
  };

  return <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} />;
};
export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
  RangesDirective,
  RangeDirective,
  getCellIndexes,
  getColumnHeaderText,
  getCell,
  SheetModel,
} from '@syncfusion/ej2-react-spreadsheet';
import { PredicateModel } from '@syncfusion/ej2-grids';
import { salesData } from './data';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    const sheet: SheetModel = spreadsheetRef.current?.getActiveSheet();
    const cell: number[] = getCellIndexes(sheet.activeCell);
    const predicates: PredicateModel[] = [
      {
        field: getColumnHeaderText(cell[1] + 1),
        operator: 'equal',
        value: getCell(cell[0], cell[1], sheet).value,
        matchCase: false,
      },
    ];
    spreadsheetRef.current?.applyFilter(predicates, 'A1:F1');
  };

  return (
    <div>
      <button onClick={onClick}>Apply Filter</button>
      <SpreadsheetComponent ref={spreadsheetRef}>
        <SheetsDirective>
          <SheetDirective name="Car Sales Report">
            <RangesDirective>
              <RangeDirective dataSource={salesData} />
            </RangesDirective>
          </SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
  RangesDirective,
  RangeDirective,
} from '@syncfusion/ej2-react-spreadsheet';
import { salesData } from './data';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // To auto fit the columns content.
    spreadsheetRef.current?.autoFit('D:F');
    // To auto fit the rows content.
    spreadsheetRef.current?.autoFit('5:10');
  };

  return (
    <div>
      <button onClick={onClick}>AutoFit Content</button>
      <SpreadsheetComponent ref={spreadsheetRef}>
        <SheetsDirective>
          <SheetDirective name="Car Sales Report">
            <RangesDirective>
              <RangeDirective dataSource={salesData} />
            </RangesDirective>
          </SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Apply the styles to the cells in the specified range.
    spreadsheetRef.current?.cellFormat(
      {
        fontWeight: 'bold',
        fontSize: '12pt',
        backgroundColor: '#279377',
        color: '#ffffff',
      },
      'A2:E2'
    );
    spreadsheetRef.current?.cellFormat(
      { verticalAlign: 'middle', fontFamily: 'Axettac Demo' },
      'A2:E12'
    );
    spreadsheetRef.current?.cellFormat({ textAlign: 'center' }, 'A2:A12');
    // Apply text-indent to 2nd & 4th columns.
    const style: { textAlign: string; textIndent: string } = {
      textAlign: 'left',
      textIndent: '8pt',
    };
    spreadsheetRef.current?.cellFormat(style, 'B2:B12');
    spreadsheetRef.current?.cellFormat(style, 'D2:D12');
    spreadsheetRef.current?.cellFormat(
      { fontStyle: 'italic', textAlign: 'right' },
      'C3:C12'
    );
    spreadsheetRef.current?.cellFormat({ textAlign: 'center' }, 'E2:E12');
  };

  return (
    <div>
      <button onClick={onClick}>Apply Cell Format</button>
      <SpreadsheetComponent ref={spreadsheetRef} />
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Clear the content within the specified range.
    spreadsheetRef.current?.clear({ type: 'Clear Contents', range: 'A1:A10' });
    // Clear the formats used in the given range.
    spreadsheetRef.current?.clear({ type: 'Clear Formats', range: 'A1:A10' });
    // Remove all hyperlinks from the provided range.
    spreadsheetRef.current?.clear({
      type: 'Clear Hyperlinks',
      range: 'A1:A10',
    });
    // Clear the content, formats, and hyperlinks applied in the given range.
    spreadsheetRef.current?.clear({ type: 'Clear All', range: 'B1:B10' });
  };

  return (
    <div>
      <button onClick={onClick}>Clear</button>
      <SpreadsheetComponent ref={spreadsheetRef} />
    </div>
  );
};

export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
  RangesDirective,
  RangeDirective,
} from '@syncfusion/ej2-react-spreadsheet';
import { salesData } from './data';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Clear the conditional format within the range specified.
    spreadsheetRef.current?.clearConditionalFormat('E2:E30');
    // The range can also be specified using the sheet name.
    spreadsheetRef.current?.clearConditionalFormat('Sheet1!F2:F30');
  };

  const onCreated = (): void => {
    // Highlight the cells with a value greater than the specified value.
    spreadsheetRef.current?.conditionalFormat({
      type: 'GreaterThan',
      cFColor: 'RedFT',
      value: '10/8/2014',
      range: 'E2:E30',
    });
    // Highlight the cells that have a value within the specified range.
    spreadsheetRef.current?.conditionalFormat({
      type: 'Between',
      cFColor: 'GreenFT',
      value: '11/24/2014,06/26/2023',
      range: 'F2:F30',
    });
  };

  return (
    <div>
      <button onClick={onClick}>Clear Conditional Format</button>
      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated}>
        <SheetsDirective>
          <SheetDirective name="Car Sales Report">
            <RangesDirective>
              <RangeDirective dataSource={salesData} />
            </RangesDirective>
          </SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
  RangesDirective,
  RangeDirective,
  getCellIndexes,
  getColumnHeaderText,
  getCell,
  SheetModel,
} from '@syncfusion/ej2-react-spreadsheet';
import { PredicateModel } from '@syncfusion/ej2-grids';
import { salesData } from './data';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    spreadsheetRef.current?.clearFilter();
  };

  const onCreated = (): void => {
    // The filter UI is applied to the range of cells in the sheet.
    const sheet: SheetModel = spreadsheetRef.current?.getActiveSheet();
    const cell: number[] = getCellIndexes(sheet.activeCell);
    const predicates: PredicateModel[] = [
      {
        field: getColumnHeaderText(cell[1] + 1),
        operator: 'equal',
        value: getCell(cell[0], cell[1], sheet).value,
        matchCase: false,
      },
    ];
    // Specifies the predicates and cell range.
    spreadsheetRef.current?.applyFilter(predicates, 'A1:F1');
  };

  return (
    <div>
      <button onClick={onClick}>Clear Filter</button>
      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated}>
        <SheetsDirective>
          <SheetDirective name="Car Sales Report">
            <RangesDirective>
              <RangeDirective dataSource={salesData} />
            </RangesDirective>
          </SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    spreadsheetRef.current?.closeEdit();
  };

  return (
    <div>
      <button onClick={onClick}>Cancel Edit</button>
      <SpreadsheetComponent ref={spreadsheetRef} />
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Calculate the result of an arithmetic expression or formula.
    spreadsheetRef.current?.computeExpression('522+1');
    spreadsheetRef.current?.computeExpression('=SUM(F2:F3)');
  };

  return (
    <div>
      <button onClick={onClick}>To Compute Expression</button>
      <SpreadsheetComponent ref={spreadsheetRef} />
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Apply blue data bar to the specified range.
    spreadsheetRef.current?.conditionalFormat({
      type: 'BlueDataBar',
      range: 'D3:D18',
    });
    // Apply three stars to the specified range.
    spreadsheetRef.current?.conditionalFormat({
      type: 'ThreeStars',
      range: 'F3:F18',
    });
    // Highlight the cells that contain a value greater than the specified value.
    spreadsheetRef.current?.conditionalFormat({
      type: 'GreaterThan',
      cFColor: 'RedFT',
      value: '10/15/2023',
      range: 'E2:E30',
    });
    // Highlight the cells that contain a value between the specified range.
    spreadsheetRef.current?.conditionalFormat({
      type: 'Between',
      cFColor: 'GreenFT',
      value: '03/04/2023,06/26/2023',
      range: 'E2:E30',
    });
    // Highlight the cells that contain a value greater than the average of the specified range.
    spreadsheetRef.current?.conditionalFormat({
      type: 'AboveAverage',
      cFColor: 'RedFT',
      range: 'F2:F30',
    });
    // Apply the RGY (Red-Green-Yellow) color scale to the specified range.
    spreadsheetRef.current?.conditionalFormat({
      type: 'RYGColorScale',
      range: 'F2:F30',
    });
  };

  return (
    <div>
      <button onClick={onClick}>Add Conditional Format</button>
      <SpreadsheetComponent ref={spreadsheetRef} />
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // To copy the selected cell.
    spreadsheetRef.current?.copy();

    // To copy the specified cell.
    spreadsheetRef.current?.copy('A2');

    // You can specify the address with sheet name.
    spreadsheetRef.current?.copy('Car Sales Report!B2');
  };

  return (
    <div>
      <button onClick={onClick}>Copy Cell</button>
      <SpreadsheetComponent ref={spreadsheetRef}>
        <SheetsDirective>
          <SheetDirective name="Car Sales Report" />
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // To cut the selected cell.
    spreadsheetRef.current?.cut();
    // To cut the specified cell.
    spreadsheetRef.current?.cut('A2');
    // You can specify the address with sheet name.
    spreadsheetRef.current?.cut('Car Sales Report!B2');
  };

  return (
    <div>
      <button onClick={onClick}>To Cut</button>
      <SpreadsheetComponent ref={spreadsheetRef}>
        <SheetsDirective>
          <SheetDirective name="Car Sales Report" />
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    spreadsheetRef.current?.delete(1, 1, 'Row', 'Sheet1');
    spreadsheetRef.current?.delete(2, 2, 'Column', 'Sheet1');
  };

  return (
    <div>
      <button onClick={onClick}>Delete Row & Column</button>
      <SpreadsheetComponent ref={spreadsheetRef} />
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);

  const onClick = (): void => {
    spreadsheetRef.current?.deleteChart('Chart');
  };

  const onCreated = (): void => {
    spreadsheetRef.current?.insertChart([
      {
        type: 'Line',
        theme: 'Material',
        isSeriesInRows: false,
        range: 'A1:B5',
        id: 'Chart',
      },
    ]);
  };

  return (
    <div>
      <button onClick={onClick}>Delete Chart</button>
      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} />
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    spreadsheetRef.current?.deleteImage('spreadsheet_overlay_picture_1', 'A3');
  };

  const onCreated = (): void => {
    spreadsheetRef.current?.insertImage(
      [
        {
          src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png',
          height: 400,
          width: 400,
        },
      ],
      'A3'
    );
  };

  return (
    <div>
      <button onClick={onClick}>Delete Image</button>
      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} />
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    spreadsheetRef.current?.duplicateSheet();
    spreadsheetRef.current?.duplicateSheet(0);
  };

  return (
    <div>
      <button onClick={onClick}>Make Duplicate Sheet</button>
      <SpreadsheetComponent ref={spreadsheetRef} />
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const contextMenuBeforeOpen = (): void => {
    // Disable the 'Hyperlink' context menu option.
    spreadsheetRef.current?.enableContextMenuItems(['Hyperlink'], false, false);
    // You can disable the option by specifying the context menu option id.
    spreadsheetRef.current?.enableContextMenuItems(
      ['spreadsheet_cmenu_copy'],
      false,
      true
    );
  };

  return (
      <SpreadsheetComponent
        ref={spreadsheetRef}
        contextMenuBeforeOpen={contextMenuBeforeOpen}
      ></SpreadsheetComponent>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const fileMenuBeforeOpen = (): void => {
    // Disable the 'New' option in the File menu.
    spreadsheetRef.current?.enableFileMenuItems(['New'], false, false);
  };

  return (
    <SpreadsheetComponent
      ref={spreadsheetRef}
      fileMenuBeforeOpen={fileMenuBeforeOpen}
    ></SpreadsheetComponent>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Disable the 'Home' option in the Ribbon.
    spreadsheetRef.current?.enableRibbonTabs(['Home'], false);
  };

  return (
    <div>
      <button onClick={onClick}>Disable Home Ribbon Tab</button>
      <SpreadsheetComponent ref={spreadsheetRef}></SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Disable the list of toolbar items in the 'Home' ribbon tab.
    spreadsheetRef.current?.enableToolbarItems(
      'Home',
      ['spreadsheet_line-through'],
      false
    );
    spreadsheetRef.current?.enableToolbarItems('Home', [3, 4], false);
  };

  return (
    <div>
      <button onClick={onClick}>To Enable/Disable Toolbar Items</button>
      <SpreadsheetComponent ref={spreadsheetRef}></SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);

  const onClick = (): void => {
    // If the spreadsheet is editable, you can use this method to save the cell.
    spreadsheetRef.current?.endEdit();
  };

  return (
    <div>
      <button onClick={onClick}>End Edit</button>
      <SpreadsheetComponent ref={spreadsheetRef}></SpreadsheetComponent>
    </div>
  );
};
export default App;

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

    <div id="spreadsheet"></div>

import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { salesData } from './data';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
  RangesDirective,
  RangeDirective,
  FindOptions,
} from '@syncfusion/ej2-react-spreadsheet';


const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // To find the cell value specified.
    const findOption: FindOptions = {
      value: 'Jenna Schoolfield',
      sheetIndex: 0,
      findOpt: 'next',
      mode: 'Sheet',
      isCSen: false,
      isEMatch: false,
      searchBy: 'By Row',
    };
    spreadsheetRef.current?.find(findOption);
  };

  return (
    <div>
      <button onClick={onClick}>To Find</button>
      <SpreadsheetComponent ref={spreadsheetRef}>
        <SheetsDirective>
          <SheetDirective name="Car Sales Report">
            <RangesDirective>
              <RangeDirective dataSource={salesData} />
            </RangesDirective>
          </SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
};
export default App;

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