Search results

SpreadsheetComponent

SpreadsheetComponent represents the react Spreadsheet.

<SpreadsheetComponent />

Properties

activeSheetIndex

number

Specifies the active sheet index in the workbook.

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

Defaults to 0

allowAutoFill

boolean

It allows to enable/disable AutoFill functionalities.

Defaults to true

allowCellFormatting

boolean

It allows you to apply styles (font size, font weight, font family, fill color, and more) to the spreadsheet cells.

Defaults to true

allowChart

boolean

It allows you to insert the chart in a spreadsheet.

Defaults to true

allowConditionalFormat

boolean

It allows you to apply conditional formatting to the sheet.

Defaults to true

allowDataValidation

boolean

It allows you to apply data validation to the spreadsheet cells.

Defaults to true

allowDelete

boolean

It allows you to delete rows, columns, and sheets from a spreadsheet.

Defaults to true

allowEditing

boolean

It allows you to add new data or update existing cell data. If it is false, it will act as read only mode.

Defaults to true

allowFiltering

boolean

It allows to enable/disable filter and its functionalities.

Defaults to true

allowFindAndReplace

boolean

It allows to enable/disable find and replace with its functionalities.

Defaults to true

allowFreezePane

boolean

It allows to enable/disable freeze pane functionality in spreadsheet.

Defaults to true

It allows to enable/disable Hyperlink and its functionalities.

Defaults to true

allowImage

boolean

It allows you to insert the image in a spreadsheet.

Defaults to true

allowInsert

boolean

It allows you to insert rows, columns, and sheets into the spreadsheet.

Defaults to true

allowMerge

boolean

It allows you to merge the range of cells.

Defaults to true

allowNumberFormatting

boolean

It allows formatting a raw number into different types of formats (number, currency, accounting, percentage, short date, long date, time, fraction, scientific, and text) with built-in format codes.

Defaults to true

allowOpen

boolean

It allows you to open an Excel file (.xlsx, .xls, and .csv) in Spreadsheet.

Defaults to true

allowPrint

boolean

Enables or disables the printing functionality in the spreadsheet.

Defaults to true

allowResizing

boolean

If allowResizing is set to true, spreadsheet columns and rows can be resized.

Defaults to true

allowSave

boolean

It allows you to save Spreadsheet with all data as Excel file (.xlsx, .xls, and .csv).

Defaults to true

allowScrolling

boolean

It specifies whether the Spreadsheet should be rendered with scrolling or not. To customize the Spreadsheet scrolling behavior, use the scrollSettings property.

Defaults to true

allowSorting

boolean

It allows to enable/disable sort and its functionalities.

Defaults to true

allowUndoRedo

boolean

It allows to enable/disable undo and redo functionalities.

Defaults to true

allowWrap

boolean

It allows to enable/disable wrap text feature. By using this feature the wrapping applied cell text can wrap to the next line, if the text width exceeds the column width.

Defaults to true

autoFillSettings

AutoFillSettingsModel

Configures the auto fill settings. The autoFillSettings fillType property has FOUR types and it is described below:

  • CopyCells: To update the copied cells for the selected range.
  • FillSeries: To update the filled series for the selected range.
  • FillFormattingOnly: To fill the formats only for the selected range.
  • FillWithoutFormatting: To fill without the format for the selected range.
    <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 />);

The allowAutoFill property should be true.

Defaults to { fillType: ‘FillSeries’, showFillOptions: true }

cellStyle

CellStyleModel

Specifies the cell style options.

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

Defaults to {}

cssClass

string

To specify a CSS class or multiple CSS class separated by a space, add it in the Spreadsheet root element. This allows you to customize the appearance of component.

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

Defaults to

definedNames

DefineNameModel[]

Specifies the name of a range and uses it in a formula for calculation.

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

Defaults to []

enableClipboard

boolean

It enables or disables the clipboard operations (cut, copy, and paste) of the Spreadsheet.

Defaults to true

enableContextMenu

boolean

It enables or disables the context menu option of spreadsheet. By default, context menu will opens for row header, column header, sheet tabs, and cell.

Defaults to true

enableKeyboardNavigation

boolean

It allows you to interact with cell, sheet tabs, formula bar, and ribbon through the keyboard device.

Defaults to true

enableKeyboardShortcut

boolean

It enables shortcut keys to perform Spreadsheet operations like open, save, copy, paste, and more.

Defaults to true

enableNotes

boolean

Enables or disables the ability to add or show notes in the Spreadsheet. If the property is set to false, the Spreadsheet will not add notes in the cells and the notes in the existing cells will not be visible.

Defaults to true

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

height

string | number

Defines the height of the Spreadsheet. It accepts height as pixels, number, and percentage.

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

Defaults to ‘100%’

isProtected

boolean

Specifies to protect the workbook.

Defaults to false

listSeparator

string

Specifies the list separator which is used as the formula argument separator.

Defaults to ’,’

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to

openUrl

string

Specifies the service URL to open excel file in spreadsheet.

Defaults to

password

string

Specifies the password.

Defaults to

saveUrl

string

Specifies the service URL to save spreadsheet as Excel file.

Defaults to

scrollSettings

ScrollSettingsModel

Configures the scroll settings.

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

The allowScrolling property should be true.

Defaults to { isFinite: false, enableVirtualization: true }

selectionSettings

SelectionSettingsModel

Configures the selection settings. The selectionSettings mode property has three values and is described below:

  • None: Disables UI selection.
  • Single: Allows single selection of cell, row, or column and disables multiple selection.
  • Multiple: Allows multiple selection of cell, row, or column and disables single selection.
    <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 />);

Defaults to { mode: ‘Multiple’ }

sheets

SheetModel[]

Configures sheets and its options.

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

Defaults to []

showAggregate

boolean

If showAggregate is set to true, spreadsheet will show the AVERAGE, SUM, COUNT, MIN and MAX values based on the selected cells.

Defaults to true

showFormulaBar

boolean

It shows or hides the formula bar and its features.

Defaults to true

showRibbon

boolean

It shows or hides the ribbon in spreadsheet.

Defaults to true

showSheetTabs

boolean

It shows or hides the sheets tabs, this is used to navigate among the sheets and create or delete sheets by UI interaction.

Defaults to true

width

string | number

Defines the width of the Spreadsheet. It accepts width as pixels, number, and percentage.

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

Defaults to ‘100%’

Methods

Unfreeze

This method is used to unfreeze the frozen rows and columns from the active sheet.

Parameter Type Description
sheet (optional) number | string Specifies the sheet name or index in which the unfreeze operation will perform. By default,
active sheet will be considered.

Returns void

addContextMenuItems

To add context menu items.

    <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 />);
Parameter Type Description
items MenuItemModel[] Items that needs to be added.
text string Item before / after that the element to be inserted.
insertAfter (optional) boolean Set false if the items need to be inserted before the text.
By default, items are added after the text.
isUniqueId (optional) boolean Set true if the given text is a unique id.

Returns void

addCustomFunction

To add custom library function.

    <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 />);
Parameter Type Description
functionHandler string | Function Custom function handler name
functionName (optional) string Custom function name
formulaDescription (optional) string Specifies formula description.

Returns void

addDataValidation

This method is used to add data validation.

    <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 />);
Parameter Type Description
rules ValidationModel specifies the validation rules like type, operator, value1, value2, ignoreBlank, inCellDropDown, isHighlighted arguments.
range (optional) string range that needs to be add validation.

Returns void

addDefinedName

Adds the defined name to the Spreadsheet.

    <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 />);
Parameter Type Description
definedName DefineNameModel Specifies the name, scope, comment, refersTo.

Returns boolean

addFileMenuItems

To add custom file menu items.

    <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 />);
Parameter Type Description
items MenuItemModel[] Specifies the ribbon file menu items to be inserted.
text string Specifies the existing file menu item text before / after which the new file menu items to be inserted.
insertAfter (optional) boolean Set false if the items need to be inserted before the text.
By default, items are added after the text.
isUniqueId (optional) boolean Set true if the given file menu items text is a unique id.

Returns void

To add the hyperlink in the cell

    <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 />);
Parameter Type Description
hyperlink string | HyperlinkModel to specify the hyperlink
address string to specify the address
displayText (optional) string to specify the text to be displayed, by default value of the cell will be displayed.

Returns void

addInvalidHighlight

This method is used to highlight the invalid data.

    <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 />);
Parameter Type Description
range (optional) string range that needs to be highlight the invalid data.

Returns void

addRibbonTabs

To add custom ribbon tabs.

    <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 />);
Parameter Type Description
items RibbonItemModel[] Specifies the ribbon tab items to be inserted.
insertBefore (optional) string Specifies the existing ribbon header text before which the new tabs will be inserted.
If not specified, the new tabs will be inserted at the end.

Returns void

addToolbarItems

To add the custom items in Spreadsheet ribbon toolbar.

<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 />);
Parameter Type Description
tab string Specifies the ribbon tab header text under which the specified items will be inserted.
items ItemModel[] Specifies the ribbon toolbar items that needs to be inserted.
index (optional) number Specifies the index text before which the new items will be inserted.
If not specified, the new items will be inserted at the end of the toolbar.

Returns void

appendTo

Appends the control within the given HTML Div element.

Parameter Type Description
selector string | HTMLElement Target element where control needs to be appended.

Returns void

applyFilter

Applies the filter UI in the range of cells in the sheet.

    <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 />);
Parameter Type Description
predicates (optional) PredicateModel[] Specifies the predicates.
range (optional) string Specify the range.

Returns Promise

autoFill

Used to perform autofill action based on the specified range in spreadsheet.

Parameter Type Description
fillRange string Specifies the fill range.
dataRange (optional) string Specifies the data range.
direction (optional) AutoFillDirection Specifies the direction(“Down”,“Right”,“Up”,“Left”) to be filled.
fillType (optional) AutoFillType Specifies the fill type(“FillSeries”,“CopyCells”,“FillFormattingOnly”,“FillWithoutFormatting”) for autofill action.

Returns void

autoFit

This method is used to autofit the range of rows or columns

    <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 />);
Parameter Type Description
range string range of rows or columns that needs to be autofit.

Returns void

cellFormat

Applies the style (font family, font weight, background color, etc…) to the specified range of cells.

    <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 />);
Parameter Type Description
style CellStyleModel Specifies the cell style.
range (optional) string Specifies the address for the range of cells.

Returns void

clear

This method is used to Clear contents, formats and hyperlinks in spreadsheet.

    <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 />);
Parameter Type Description
options ClearOptions Options for clearing the content, formats and hyperlinks in spreadsheet.

Returns void

clearConditionalFormat

This method is used for remove conditional formatting.

    <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 />);
Parameter Type Description
range (optional) string range that needs to be remove conditional formatting.

Returns void

clearFilter

Clears the filter changes of the sheet.

    <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 />);
Parameter Type Description
field (optional) string Specify the field.

Returns void

closeEdit

Cancels the edited state, this will not update any value in the cell.

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

Returns void

computeExpression

Used to compute the specified expression/formula.

    <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 />);
Parameter Type Description
formula string Specifies the formula(=SUM(A1:A3)) or expression(2+3).

Returns string | number

conditionalFormat

This method is used to add conditional formatting.

    <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 />);
Parameter Type Description
conditionalFormat ConditionalFormatModel Specify the conditionalFormat.

Returns void

copy

To copy the specified cell or cells properties such as value, format, style etc…

    <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 />);
Parameter Type Description
address (optional) string Specifies the range address.

Returns Promise

cut

To cut the specified cell or cells properties such as value, format, style etc…

    <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 />);
Parameter Type Description
address (optional) string Specifies the range address to cut.

Returns Promise

delete

Used to delete rows, columns and sheets from the spreadsheet.

    <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 />);
Parameter Type Description
startIndex (optional) number Specifies the start sheet / row / column index.
endIndex (optional) number Specifies the end sheet / row / column index.
model (optional) ModelType Specifies the delete model type. By default, the model is considered as Sheet. The possible values are,
- Row: To delete rows.
- Column: To delete columns.
- Sheet: To delete sheets.
sheet (optional) number | string Specifies the sheet name or index in which the delete operation will perform. By default,
active sheet will be considered. It is applicable only for model type Row and Column.

Returns void

deleteChart

Used to delete the chart from spreadsheet.

    <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 />);
Parameter Type Description
id (optional) string Specifies the chart element id.

Returns void

deleteImage

Used to delete the image in spreadsheet.

    <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 />);
Parameter Type Description
id string Specifies the id of the image element to be deleted.
range (optional) string Specifies the range in spreadsheet.

Returns void

deselectChart

Allows you to remove a selection from the active chart.

Returns void

deselectImage

Allows you to remove a selection from the active image.

Returns void

destroy

Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).

    <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?.destroy();
  };

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

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

Returns void

duplicateSheet

Used to make a duplicate/copy of the sheet in the spreadsheet.

    <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 />);
Parameter Type Description
sheetIndex (optional) number Specifies the index of the sheet to be duplicated. By default, the active sheet will be duplicated.

Returns void

enableContextMenuItems

To enable / disable context menu items.

    <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 />);
Parameter Type Description
items string[] Items that needs to be enabled / disabled.
enable (optional) boolean Set true / false to enable / disable the menu items.
isUniqueId (optional) boolean Set true if the given text is a unique id.

Returns void

enableFileMenuItems

To enable / disable file menu items.

    <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 />);
Parameter Type Description
items string[] Items that needs to be enabled / disabled.
enable (optional) boolean Set true / false to enable / disable the menu items.
isUniqueId (optional) boolean Set true if the given file menu items text is a unique id.

Returns void

enableRibbonTabs

To enable / disable the existing ribbon tabs.

    <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 />);
Parameter Type Description
tabs string[] Specifies the tab header text which needs to be enabled / disabled.
enable (optional) boolean Set true / false to enable / disable the ribbon tabs.

Returns void

enableToolbarItems

Enables or disables the specified ribbon toolbar items or all ribbon items.

    <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 />);
Parameter Type Description
tab string Specifies the ribbon tab header text under which the toolbar items need to be enabled / disabled.
items (optional) number[] | string[] Specifies the toolbar item indexes / unique id’s which needs to be enabled / disabled.
If it is not specified the entire toolbar items will be enabled / disabled.
enable (optional) boolean Boolean value that determines whether the toolbar items should be enabled or disabled.

Returns void

endEdit

If Spreadsheet is in editable state, you can save the cell by invoking endEdit.

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

Returns void

find

To find the specified cell value.

    <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 />);
Parameter Type Description
args FindOptions Specifies the replace value with find args to replace specified cell value.

Returns void | string

findAll

To Find All the Match values Address within Sheet or Workbook.

    <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,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // To find all values that match within a sheet or workbook.
    spreadsheetRef.current?.findAll(
      'shoes',
      'Sheet',
      false,
      false,
      spreadsheetRef.current?.getActiveSheet().id - 1
    );
  };

  return (
    <div>
      <button onClick={onClick}>To Find All</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 />);
Parameter Type Description
value string Specifies the value to find.
mode (optional) string Specifies the value to be find within Sheet/Workbook.
isCSen (optional) boolean Specifies the find match with case sensitive or not.
isEMatch (optional) boolean Specifies the find match with entire match or not.
sheetIndex (optional) number Specifies the sheetIndex. If not specified, it will consider the active sheet.

Returns string[]

freezePanes

This method is used to freeze rows and columns after the specified cell in the Spreadsheet.

Parameter Type Description
row (optional) number Specifies the freezed row count.
column (optional) number Specifies the freezed column count.
sheet (optional) number | string Specifies the sheet name or index in which the freeze operation will perform. By default,
active sheet will be considered.

Returns void

getData

Gets the range of data as JSON from the specified address.

    <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,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Return the specified cell address data as JSON.
    spreadsheetRef.current
      ?.getData('Sheet1!A1:B2')
      .then((data) => console.log(data));
    spreadsheetRef.current?.getData('A1:B2').then((data) => console.log(data));
  };

  return (
    <div>
      <button onClick={onClick}>Get Data</button>
      <SpreadsheetComponent ref={spreadsheetRef}>
        <SheetsDirective>
          <SheetDirective>
            <RangesDirective>
              <RangeDirective dataSource={salesData} />
            </RangesDirective>
          </SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
};
export default App;

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
address string Specifies the address for range of cells.

Returns Promise

getDisplayText

Gets the formatted text of the cell.

    <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,
  getCell,
  CellModel,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Get the cell model for the given row, column, and sheet indexes.
    const cell: CellModel = getCell(
      0,
      0,
      spreadsheetRef.current?.getActiveSheet()!
    );
    // To get the formatted cell value, specify the cell model.
    const displayText: string = spreadsheetRef.current?.getDisplayText(cell);
    console.log(displayText);
  };

  return (
    <div>
      <button onClick={onClick}>Get Display Text</button>
      <SpreadsheetComponent ref={spreadsheetRef}>
        <SheetsDirective>
          <SheetDirective>
            <RangesDirective>
              <RangeDirective dataSource={salesData} />
            </RangesDirective>
          </SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
};
export default App;

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
cell CellModel Specifies the cell.

Returns string

getRowData

Used to get a row data from the data source with updated cell value.

Parameter Type Description
index (optional) number Specifies the row index.
sheetIndex (optional) number Specifies the sheet index. By default, it consider the active sheet index.

Returns Object[]

getSelectAllContent

Get the select all div of spreadsheet

Returns HTMLElement

goTo

Used to navigate to cell address within workbook.

    <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 => {
    // To navigate to a cell address within a workbook.
    spreadsheetRef.current?.goTo('B1');
    // You can navigate to a specific cell address by specifying the sheet name as well as the cell address.
    spreadsheetRef.current?.goTo('Sheet2!B1');
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
address string Specifies the cell address you need to navigate.
You can specify the address in two formats,
{sheet name}!{cell address} - Switch to specified sheet and navigate to specified cell address.
{cell address} - Navigate to specified cell address with in the active sheet.

Returns void

hideColumn

Used to hide/show the columns in spreadsheet.

Parameter Type Description
startIndex number Specifies the start column index.
endIndex (optional) number Specifies the end column index.
hide (optional) boolean Set true / false to hide / show the columns.

Returns void

hideFileMenuItems

To show/hide the file menu items in Spreadsheet ribbon.

    <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 => {
    // To show/hide the file menu item.
    spreadsheetRef.current?.hideFileMenuItems(['PDF Document'], true);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
items string[] Specifies the file menu items text which is to be show/hide.
hide (optional) boolean Set true / false to hide / show the file menu items.
isUniqueId (optional) boolean Set true if the given file menu items text is a unique id.

Returns void

hideRibbonTabs

To show/hide the existing ribbon tabs.

    <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 => {
    // Hide the existing 'Formulas' and 'Insert' ribbon tabs.
    spreadsheetRef.current?.hideRibbonTabs(['Formulas', 'Insert'], true);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
tabs string[] Specifies the tab header text which needs to be shown/hidden.
hide (optional) boolean Set true / false to hide / show the ribbon tabs.

Returns void

hideRow

Used to hide/show the rows in spreadsheet.

Parameter Type Description
startIndex number Specifies the start row index.
endIndex (optional) number Specifies the end row index.
hide (optional) boolean To hide/show the rows in specified range.

Returns void

hideSpinner

To hide showed spinner manually.

    <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 => {
    //To manually hide the displayed spinner.
    spreadsheetRef.current?.hideSpinner();
  };

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

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

Returns void

hideToolbarItems

To show/hide the existing Spreadsheet ribbon toolbar items.

    <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 => {
    // To show or hide the ribbon toolbar items with the specified tab name and index.
    spreadsheetRef.current?.hideToolbarItems(
      'Home',
      [0, 1, 2, 4, 14, 15, 22, 23, 24]
    );
    spreadsheetRef.current?.hideToolbarItems('View', [1, 2]);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
tab string Specifies the ribbon tab header text under which the specified items needs to be hidden / shown.
indexes number[] Specifies the toolbar indexes which needs to be shown/hidden from UI.
hide (optional) boolean Set true / false to hide / show the toolbar items.

Returns void

insertChart

Used to set the chart in spreadsheet.

    <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 chart into a spreadsheet using the chart options specified.
    spreadsheetRef.current?.insertChart([
      {
        type: 'Line',
        theme: 'Material',
        isSeriesInRows: false,
        range: 'A1',
        id: 'Chart',
      },
    ]);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
chart (optional) ChartModel[] Specifies the options to insert chart in spreadsheet

Returns void

insertColumn

Used to insert columns in to the spreadsheet.

    <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 the column at the starting column index specified.
    spreadsheetRef.current?.insertColumn([{ index: 1, width: 95 }], 1);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
startColumn (optional) number | ColumnModel[] Specifies the start column index / column model which needs to be inserted.
endColumn (optional) number Specifies the end column index.
sheet (optional) number | string Specifies the sheet name or index in which the insert operation will perform. By default,
active sheet will be considered.

Returns void

insertImage

Used to set the image in spreadsheet.

    <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 => {
    // Insert an image into the spreadsheet using the specified image options.
    spreadsheetRef.current?.insertImage(
      [
        {
          src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png',
          height: 400,
          width: 400,
        },
      ],
      'A1'
    );
  };

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

export default App;
const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
images ImageModel[] Specifies the options to insert image in spreadsheet.
range (optional) string Specifies the range in spreadsheet.

Returns void

insertRow

Used to insert rows in to the spreadsheet.

    <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 row at the specified row index.
    spreadsheetRef.current?.insertRow(4, 4);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
startRow (optional) number | RowModel[] Specifies the start row index / row model which needs to be inserted.
endRow (optional) number Specifies the end row index.
sheet (optional) number | string Specifies the sheet name or index in which the insert operation will perform. By default,
active sheet will be considered.

Returns void

insertSheet

Used to insert sheets in to the spreadsheet.

    <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 sheet at the specified sheet index.
    spreadsheetRef.current?.insertSheet(0, 2);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
startSheet (optional) number | SheetModel[] Specifies the start sheet index / sheet model which needs to be inserted.
endSheet (optional) number Specifies the end sheet index.

Returns void

isValidCell

To determine whether the cell value in a data validation applied cell is valid or not.

Parameter Type Description
cellAddress (optional) string Address of the cell.

Returns boolean

lockCells

Applies cell lock to the specified range of cells.

    <div id="spreadsheet"></div>
import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import {
  ProtectSettingsModel,
  SpreadsheetComponent,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Protect the worksheet.
    const protectSetting: ProtectSettingsModel = {
      selectCells: true,
      formatCells: false,
      formatRows: false,
      formatColumns: false,
      insertLink: false,
    };
    spreadsheetRef.current?.protectSheet('Sheet1', protectSetting);
    // Unlock the A2:AZ100 cell range.
    spreadsheetRef.current?.lockCells('A2:AZ100', false);
    // Lock the A1:Z1 cell range.
    spreadsheetRef.current?.lockCells('A1:Z1', true);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
range (optional) string Specifies the address for the range of cells.
isLocked (optional) boolean -Specifies the cell is locked or not.

Returns void

merge

Used to merge the range of cells.

    <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 => {
    // Merge the cells in the specified range.
    spreadsheetRef.current?.merge('B1:E2');
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
range (optional) string Specifies the range of cells as address.
type (optional) MergeType Specifies the merge type. The possible values are,
- All: Merge all the cells between provided range.
- Horizontally: Merge the cells row-wise.
- Vertically: Merge the cells column-wise.

Returns void

moveSheet

Used to move the sheets to the specified position in the list of sheets.

    <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 => {
    // Move the active sheet to the specified position.
    spreadsheetRef.current?.moveSheet(1);
    // Move the list of specified sheets to the specified position.
    spreadsheetRef.current?.moveSheet(0, [1, 2]);
  };

  return (
    <div>
      <button onClick={onClick}>Move Sheets</button>
      <SpreadsheetComponent ref={spreadsheetRef}>
        <SheetsDirective>
          <SheetDirective></SheetDirective>
          <SheetDirective></SheetDirective>
          <SheetDirective></SheetDirective>
        </SheetsDirective>
      </SpreadsheetComponent>
    </div>
  );
};
export default App;

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
position number Specifies the position to move a sheet in the list of sheets.
sheetIndexes (optional) number[] Specifies the indexes of the sheet to be moved. By default, the active sheet will be moved.

Returns void

numberFormat

Applies the number format (number, currency, percentage, short date, etc…) to the specified range of cells.

    <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,
  getFormatFromType,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onCreated = (): void => {
    // Apply the number format to the specified range of cells.
    spreadsheetRef.current?.numberFormat('$#,##0.00', 'E1:E3');
    // Apply the accounting format to the specified range of cells.
    spreadsheetRef.current?.numberFormat(
      getFormatFromType('Accounting'),
      'E4:E10'
    );
    // Apply the percentage format to the specified range of cells.
    spreadsheetRef.current?.numberFormat('0%', 'F3:F10');
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
format string Specifies the number format code.
range (optional) string Specifies the address for the range of cells.

Returns void

open

Opens the Excel file.

    <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 => {
    fetch(
      'https://js.syncfusion.com/demos/ejservices/data/Spreadsheet/LargeData.xlsx'
    ).then((response) => {
      response.blob().then((fileBlob) => {
        const file = new File([fileBlob], 'Sample.xlsx');
        spreadsheetRef.current?.open({ file });
      });
    });
  };

  return (
    <SpreadsheetComponent
      ref={spreadsheetRef}
      created={onCreated}
      openUrl="https://services.syncfusion.com/react/production/api/spreadsheet/open"
      saveUrl="https://services.syncfusion.com/react/production/api/spreadsheet/save"
    />
  );
};

export default App;

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
options OpenOptions Options for opening the excel file.

Returns void

openFromJson

Opens the specified JSON object.

    <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);
  let response = Object;
  const save = (): void => {
    // Save the spreadsheet data as JSON.
    spreadsheetRef.current?.saveAsJson().then((Json) => (response = Json));
  };

  const open = (): void => {
    // Load the JSON data to the spreadsheetRef.currrent?.
    spreadsheetRef.current?.openFromJson({ file: response.jsonObject });
  };

  return (
    <div>
      <SpreadsheetComponent ref={spreadsheetRef} />
      <button onClick={save}>Save</button>
      <button onClick={open}>Open</button>
    </div>
  );
};
export default App;

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

The available arguments in options are:

  • file: Specifies the spreadsheet model as object or string. And the object contains the jsonObject, which is saved from spreadsheet using saveAsJson method.
  • triggerEvent: Specifies whether to trigger the openComplete event or not.
Parameter Type Description
options Object Options for opening the JSON object.
jsonConfig (optional) SerializationOptions Specify the serialization options to customize the loading of the JSON data.

Returns void

paste

This method is used to paste the cut or copied cells in to specified address.

    <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 => {
    const spreadsheet = spreadsheetRef.current;
    // Paste the selected cell.
    spreadsheet?.paste();
    // Paste all the content to the specified range.
    spreadsheet?.paste('B2', 'All');
    // Paste only the values to the specified range.
    spreadsheet?.paste('B3', 'Values');
    // Paste only the formats to the specified range.
    spreadsheet?.paste('B4', 'Formats');
    // Paste only the formulas to the specified range.
    spreadsheet?.paste('B5', 'Formulas');
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
address (optional) string Specifies the cell or range address.
type (optional) PasteSpecialType Specifies the type of paste.

Returns void

print

This method is used to print the active sheet or the entire workbook.

Parameter Type Description
printOptions (optional) PrintOptions Represents the settings to customize the print type, row and column headers and gridlines in the printing operation.

Returns void

protectSheet

To protect the particular sheet.

    <div id="spreadsheet"></div>
import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { salesData } from './data';
import {
  SpreadsheetComponent,
  SheetsDirective,
  RangesDirective,
  RangeDirective,
  SheetDirective,
  ProtectSettingsModel,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Protect the particular sheet with specified protect settings.
    const protectSetting: ProtectSettingsModel = {
      selectCells: true,
      formatCells: false,
      formatRows: false,
      formatColumns: false,
      insertLink: false,
    };
    spreadsheetRef.current?.protectSheet('Car Sales Report', protectSetting);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
sheet (optional) number | string Specifies the sheet to protect.
protectSettings (optional) ProtectSettingsModel Specifies the protect sheet options.
password (optional) string Specifies the password to protect.

Returns void

redo

To perform the redo operation in spreadsheet.

    <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 => {
    // Perform the redo operation.
    spreadsheetRef.current?.redo();
  };

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

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

Returns void

refresh

Used to refresh the spreadsheet in UI level.

    <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 => {
    // Refresh the spreadsheet.
    spreadsheetRef.current?.refresh(false);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
isNew (optional) boolean Specifies true / false to create new workbook in spreadsheet.

Returns void

removeContextMenuItems

To remove existing context menu items.

    <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 => {
    // Remove existing context menu items by specifying item text.
    spreadsheetRef.current?.removeContextMenuItems(['Cut']);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
items string[] Items that needs to be removed.
isUniqueId (optional) boolean Set true if the given text is a unique id.

Returns void

removeDataValidation

This method is used for remove validation.

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

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

  const onCreated = (): void => {
    spreadsheetRef.current?.addDataValidation(
      { type: 'Decimal', operator: 'LessThan', value1: '100000' },
      'F2:F5'
    );
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
range (optional) string range that needs to be remove validation.

Returns void

removeDefinedName

Removes the defined name from the Spreadsheet.

    <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 => {
    // Remove the defined names from the workbook.
    spreadsheetRef.current?.removeDefinedName('Group1', 'Workbook');
  };

  const onCreated = (): void => {
    // Set the specified cell range's name to 'Group1'.
    spreadsheetRef.current?.addDefinedName({
      name: 'Group1',
      refersTo: '=Sheet1!B2',
    });
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
definedName string Specifies the name.
scope string Specifies the scope of the defined name.

Returns boolean

To remove the hyperlink in the cell

    <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 => {
    // Remove the hyperlink from the given range.
    spreadsheetRef.current?.removeHyperlink('A5');
    // You can pass the range along with the sheet name.
    spreadsheetRef.current?.removeHyperlink('Sheet1!A5');
  };

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

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
range string To specify the range

Returns void

removeInvalidHighlight

This method is used for remove highlight from invalid data.

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Remove the invalid data highlight from the given range.
    spreadsheetRef.current?.removeInvalidHighlight('F2:F5');
  };

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

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
range (optional) string range that needs to be remove invalid highlight.

Returns void

replace

To replace the specified cell value.

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // Replace the cell value with the replace value specified.
    spreadsheetRef.current?.replace({
      replaceValue: 'Issy Humm',
      sheetIndex: 0,
      replaceBy: 'replace',
      value: 'Jenna Schoolfield',
      findOpt: 'next',
      mode: 'Sheet',
      isCSen: false,
      isEMatch: false,
      searchBy: 'By Row',
    });
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
args FindOptions Specifies the replace value with find args to replace specified cell value.

Returns void

resize

Used to resize the Spreadsheet.

    <div id="spreadsheet"></div>
import React, { useRef, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onResize = (): void => {
    document.body.style.height = `${document.documentElement.clientHeight}px`;
    spreadsheetRef.current?.resize();
  };

  useEffect(() => {
    return () => {
      window.removeEventListener('resize', onResize);
    };
  }, []);

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

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

Returns void

save

Saves the Spreadsheet data to Excel file.

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    spreadsheetRef.current?.save({
      url: 'https://services.syncfusion.com/react/production/api/spreadsheet/save',
      fileName: 'Worksheet',
      saveType: 'Xlsx',
    });
  };

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

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

The available arguments in saveOptions are:

  • url: Specifies the save URL.
  • fileName: Specifies the file name.
  • saveType: Specifies the file type need to be saved.
Parameter Type Description
saveOptions (optional) SaveOptions Options for saving the excel file.
jsonConfig (optional) SerializationOptions Specify the serialization options to customize the JSON output.

Returns void

saveAsJson

Saves the Spreadsheet data as JSON object.

    <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);
  let response = Object;
  const save = (): void => {
    // Save the spreadsheet data as JSON.
    spreadsheetRef.current?.saveAsJson().then((Json) => (response = Json));
  };

  const open = (): void => {
    // Load the JSON data to the spreadsheetRef.currrent?.
    spreadsheetRef.current?.openFromJson({ file: response.jsonObject });
  };

  return (
    <div>
      <SpreadsheetComponent ref={spreadsheetRef} />
      <button onClick={save}>Save</button>
      <button onClick={open}>Open</button>
    </div>
  );
};
export default App;

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
jsonConfig (optional) SerializationOptions Specify the serialization options to customize the JSON output.

Returns Promise

selectChart

Allows you to select a chart from the active sheet. To select a specific chart from the active sheet, pass the chart id. If you pass an empty argument, the chart present in the active cell will be selected. If the active cell does not have a chart, the initially rendered chart will be selected from the active sheet.

Parameter Type Description
id (optional) string Specifies the chart id to be selected.

Returns void

selectImage

Allows you to select an image from the active sheet. To select a specific image from the active sheet, pass the image id. If you pass an empty argument, the image present in the active cell will be selected. If the active cell does not have an image, the initially rendered image will be selected from the active sheet.

Parameter Type Description
id (optional) string Specifies the image id to be selected.

Returns void

selectRange

Selects the cell / range of cells with specified address.

    <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 => {
    // Selects the cell / range of cells with the specified address.
    spreadsheetRef.current?.selectRange('B7:B8');
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
address string Specifies the range address.

Returns void

setBorder

Sets the border to specified range of cells.

    <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 => {
    // Sets the border to the specified cell range.
    spreadsheetRef.current?.setBorder(
      { border: '1px solid #000000' },
      'C6:G8',
      'Outer'
    );
    spreadsheetRef.current?.setBorder({ border: '1px solid #000000' });
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
style CellStyleModel Specifies the style property which contains border value.
range (optional) string Specifies the range of cell reference. If not specified, it will considered the active cell reference.
type (optional) BorderType Specifies the range of cell reference. If not specified, it will considered the active cell reference.
isUndoRedo (optional) boolean Specifies is undo redo or not.

Returns void

setColWidth

Set the width of column.

    <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 => {
    // To specify the width of a column of the given size and index.
    spreadsheetRef.current?.setColWidth(140, 2, 0);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
width (optional) number | string To specify the width
colIndex (optional) number To specify the colIndex
sheetIndex (optional) number To specify the sheetIndex

Returns void

setColumnsWidth

Allows you to set the width to the single or multiple columns.

Parameter Type Description
width (optional) number Specifies the width for column.
ranges (optional) string[] Specifies the column range to set the width. If the sheet name is not specified then width will apply to
the column in the active sheet. Possible values are
* Single column range: [‘F’] or [‘F:F’]
* Multiple columns range: [‘A:F’]
* Multiple columns with discontinuous range - [‘A:C’, ‘G:I’, ‘K:M’]
* Multiple columns with different sheets - [‘Sheet1!A:H’, ‘Sheet2!A:H’, ‘Sheet3!A:H’].

Returns void

setRangeReadOnly

Sets or releases the read-only status for a specified range in the given sheet.

Parameter Type Description
readOnly boolean A boolean indicating whether the range should be set as read-only (true) or editable (false).
range string The range to be set as read-only. It can be a single cell, a range of cells (e.g., “A1:B5”), a column (e.g., “C”), or a row (e.g., “10”).
sheetIndex number The index of the sheet where the range is located. If not provided, it defaults to the active sheet index.

Returns void

setRowHeight

Set the height of row.

    <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?.setRowHeight(40, 2, 0);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
height (optional) number | string Specifies height needs to be updated. If not specified, it will set the default height 20.
rowIndex (optional) number Specifies the row index. If not specified, it will consider the first row.
sheetIndex (optional) number Specifies the sheetIndex. If not specified, it will consider the active sheet.
edited (optional) boolean Specifies the boolean value.
skipCustomRow (optional) boolean When this parameter is enabled, the method will skip updating the row height if it has already been modified and its ‘customHeight’ property is set to true.

Returns void

setRowsHeight

Allows you to set the height to the single or multiple rows.

Parameter Type Description
height (optional) number Specifies the height for row.
ranges (optional) string[] Specifies the row range to set the height. If the sheet name is not specified then height will apply to
the rows in the active sheet. Possible values are
* Single row range: [‘2’] or [‘2:2’]
* Multiple rows range: [‘1:100’]
* Multiple rows with discontinuous range - [‘1:10’, ‘15:25’, ‘30:40’]
* Multiple rows with different sheets - [‘Sheet1!1:50’, ‘Sheet2!1:50’, ‘Sheet3!1:50’].
skipCustomRows (optional) boolean When this parameter is enabled, it will skip updating the heights of rows where the height has already been modified, and its ‘customHeight’ property is set to true.

Returns void

showSpinner

By default, Spreadsheet shows the spinner for all its actions. To manually show spinner you this method at your needed time.

    <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 => {
    // To manually display the spinner at the desired time.
    spreadsheetRef.current?.showSpinner();
  };

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

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

Returns void

sort

Sorts the range of cells in the active sheet.

    <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,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // To sort multiple columns using the SortOptions and range specified.
    spreadsheetRef.current?.sort({ containsHeader: true }, 'A1:H11');
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
sortOptions (optional) SortOptions options for sorting.
range (optional) string address of the data range.

Returns Promise

startEdit

Start edit the active cell.

    <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 => {
    // To begin editing in the currently active cell.
    spreadsheetRef.current?.startEdit();
  };

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

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

Returns void

unMerge

Used to split the merged cell into multiple cells.

    <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 => {
    // To split the merged cell into multiple cells.
    spreadsheetRef.current?.unMerge('B1:E2');
  };

  const onCreated = (): void => {
    spreadsheetRef.current?.merge('B1:E2');
  };

  return (
    <div>
      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} />
      <button onClick={onClick}>UnMerge Cells</button>
    </div>
  );
};

export default App;

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
range (optional) string Specifies the range of cells as address.

Returns void

undo

To perform the undo operation in spreadsheet.

    <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 => {
    // To perform the undo operation.
    spreadsheetRef.current?.undo();
  };

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

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

Returns void

unfreezePanes

This method is used to unfreeze the frozen rows and columns from spreadsheet.

Parameter Type Description
sheet (optional) number | string Specifies the sheet name or index in which the unfreeze operation will perform. By default,
active sheet will be considered.

Returns void

unprotectSheet

To unprotect the particular sheet.

    <div id="spreadsheet"></div>
import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import {
  SpreadsheetComponent,
  SheetsDirective,
  SheetDirective,
  ProtectSettingsModel,
} from '@syncfusion/ej2-react-spreadsheet';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    // To remove the sheet protection with the specified sheet index.
    spreadsheetRef.current?.unprotectSheet('1');
    // You can specify the sheet name to unprotect.
    spreadsheetRef.current?.unprotectSheet('Car Sales Report');
  };

  const onCreated = (): void => {
    // To protect the particular sheet with the specified protect settings.
    const protectSetting: ProtectSettingsModel = {
      selectCells: true,
      formatCells: false,
      formatRows: false,
      formatColumns: false,
      insertLink: false,
    };
    spreadsheetRef.current?.protectSheet('Car Sales Report', protectSetting);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
sheet (optional) number | string Specifies the sheet name or index to Unprotect.

Returns void

updateAction

To update the action which need to perform.

    <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 update the action with the specified action name and event options.
    spreadsheetRef.current?.updateAction({
      action: 'cellSave',
      eventArgs: { value: 'Custom value', address: 'Car Sales Report!M2' },
    });
    spreadsheetRef.current?.updateAction({
      action: 'wrap',
      eventArgs: { address: 'Car Sales Report!M2', wrap: true },
    });
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
options CollaborativeEditArgs It describes an action and event args to perform.

Returns void

updateCell

To update a cell properties.

    <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 => {
    // Update the properties of a cell to the specified cell address.
    spreadsheetRef.current?.updateCell({ value: 'Custom Value' }, 'A3');
    spreadsheetRef.current?.updateCell({ value: 'Custom Value' }, 'Sheet1!A4');
  };

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

export default App;

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
cell CellModel Cell properties.
address (optional) string Address to update.

Returns void

updateRange

This method is used to update the Range property in specified sheetIndex.

Parameter Type Description
range RangeModel Specifies the range properties to update.
sheetIdx (optional) number Specifies the sheetIdx to update.

Returns void

updateUndoRedoCollection

To update the undo redo collection in spreadsheet.

    <div id="spreadsheet"></div>
import React, { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { salesData } from './data';
import {
  SpreadsheetComponent,
  SheetsDirective,
  RangesDirective,
  RangeDirective,
  SheetDirective,
  getRangeIndexes,
  SortEventArgs,
  CellSaveEventArgs,
  SaveCompleteEventArgs,
} from '@syncfusion/ej2-react-spreadsheet';
import { addClass, removeClass } from '@syncfusion/ej2-base';

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const onClick = (): void => {
    const cell: string = spreadsheetRef.current?.getActiveSheet().activeCell;
    const cellIdx: number[] = getRangeIndexes(cell);
    const element: HTMLElement = spreadsheetRef.current?.getCell(
      cellIdx[0],
      cellIdx[1]
    );

    if (!element.classList.contains('customClass')) {
      addClass([element], 'customClass');
      spreadsheetRef.current?.updateUndoRedoCollection({
        eventArgs: {
          class: 'customClass',
          rowIdx: cellIdx[0],
          colIdx: cellIdx[1],
          action: 'customCSS',
        },
      });
    }
  };

  const actionComplete = (
    args: SortEventArgs | CellSaveEventArgs | SaveCompleteEventArgs | Object
  ): void => {
    if (args.eventArgs.action === 'customCSS') {
      const element: HTMLElement = spreadsheetRef.current?.getCell(
        args.eventArgs.rowIdx,
        args.eventArgs.colIdx
      );

      if (args.eventArgs.requestType === 'undo') {
        removeClass([element], 'customClass');
      } else {
        addClass([element], 'customClass');
      }
    }
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
args { : } | options for undo redo.

Returns void

wrap

This method is used to wrap/unwrap the text content of the cell.

    <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 => {
    // To wrap/unwrap the cell's text content with the specified address.
    spreadsheetRef.current?.wrap('B5', true);
  };

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

const root = createRoot(document.getElementById('spreadsheet'));
root.render(<App />);
Parameter Type Description
address string Address of the cell to be wrapped.
wrap (optional) boolean Set false if the text content of the cell to be unwrapped.

Returns void

Events

actionBegin

EmitType<BeforeCellFormatArgs|BeforeOpenEventArgs|BeforeSaveEventArgs|BeforeSelectEventArgs|BeforeSortEventArgs|CellEditEventArgs|MenuSelectEventArgs>

Triggers when the Spreadsheet actions (such as editing, formatting, sorting etc..) are starts.

<div id='Spreadsheet'></div>
new Spreadsheet({
      actionBegin: (args: BeforeCellFormatArgs|BeforeOpenEventArgs|BeforeSaveEventArgs|BeforeSelectEventArgs
                   |BeforeSortEventArgs|CellEditEventArgs|MenuSelectEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

actionComplete

EmitType<SortEventArgs|CellSaveEventArgs|SaveCompleteEventArgs|Object``>

Triggers when the spreadsheet actions (such as editing, formatting, sorting etc..) gets completed.

<div id='Spreadsheet'></div>
new Spreadsheet({
      actionComplete: (args: SortEventArgs|CellSaveEventArgs|SaveCompleteEventArgs|Object) => {
      }
     ...
 }, '#Spreadsheet');

afterHyperlinkClick

EmitType<AfterHyperlinkArgs>

Triggers when the Hyperlink function gets completed.

<div id='Spreadsheet'></div>
new Spreadsheet({
      afterHyperlinkClick: (args: AfterHyperlinkArgs ) => {
      }
     ...
 }, '#Spreadsheet');

afterHyperlinkCreate

EmitType<AfterHyperlinkArgs>

Triggers after the hyperlink inserted.

<div id='Spreadsheet'></div>
new Spreadsheet({
      afterHyperlinkCreate: (args: afterHyperlinkArgs ) => {
      }
     ...
 }, '#Spreadsheet');

beforeCellFormat

EmitType<BeforeCellFormatArgs>

Triggers before the cell format applied to the cell.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeCellFormat: (args: BeforeCellFormatArgs) => {
      }
     ...
 }, '#Spreadsheet');

beforeCellRender

EmitType<CellRenderEventArgs>

Triggers before the cell appended to the DOM.

<div id='Spreadsheet'></div>
new Spreadsheet({
     beforeCellRender: (args: CellRenderEventArgs) => {
     }
     ...
 }, '#Spreadsheet');

beforeCellSave

EmitType<CellEditEventArgs>

Triggers when before the cell is saved.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeCellSave: (args: CellEditEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

beforeCellUpdate

EmitType<BeforeCellUpdateArgs>

Triggers before changing any cell properties.

<div id='Spreadsheet'></div>
 new Spreadsheet({
     beforeCellUpdate: (args: BeforeCellUpdateArgs) => {
     }
     ...
 }, '#Spreadsheet');

beforeConditionalFormat

EmitType<ConditionalFormatEventArgs>

Triggers before apply or remove the conditional format from a cell in a range.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeConditionalFormat: (args: ConditionalFormatEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

beforeDataBound

EmitType<Object>

Triggers before the data is populated to the worksheet.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeDataBound: (args: Object) => {
      }
     ...
 }, '#Spreadsheet');

beforeHyperlinkClick

EmitType<BeforeHyperlinkArgs>

Triggers when the Hyperlink is clicked.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeHyperlinkClick: (args: BeforeHyperlinkArgs ) => {
      }
     ...
 }, '#Spreadsheet');

beforeHyperlinkCreate

EmitType<BeforeHyperlinkArgs>

Triggers before insert a hyperlink.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeHyperlinkCreate: (args: BeforeHyperlinkArgs ) => {
      }
     ...
 }, '#Spreadsheet');

beforeOpen

EmitType<BeforeOpenEventArgs>

Triggers before opening an Excel file.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeOpen: (args: BeforeOpenEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

beforeSave

EmitType<BeforeSaveEventArgs>

Triggers before saving the Spreadsheet as Excel file.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeSave: (args: BeforeSaveEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

beforeSelect

EmitType<BeforeSelectEventArgs>

Triggers before the cell or range of cells being selected.

<div id='Spreadsheet'></div>
new Spreadsheet({
     beforeSelect: (args: BeforeSelectEventArgs) => {
     }
     ...
 }, '#Spreadsheet');

beforeSort

EmitType<BeforeSortEventArgs>

Triggers before sorting the specified range.

<div id='Spreadsheet'></div>
new Spreadsheet({
      beforeSort: (args: BeforeSortEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

cellEdit

EmitType<CellEditEventArgs>

Triggers when the cell is being edited.

<div id='Spreadsheet'></div>
new Spreadsheet({
      cellEdit: (args: CellEditEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

cellEdited

EmitType<CellEditEventArgs>

Triggers when the cell has been edited.

<div id='Spreadsheet'></div>
new Spreadsheet({
      cellEdited: (args: CellEditEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

cellEditing

EmitType<CellEditEventArgs>

Triggers every time a request is made to access cell information. This will be triggered when editing a cell.

<div id='Spreadsheet'></div>
new Spreadsheet({
      cellEditing: (args: CellEditEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

cellSave

EmitType<CellSaveEventArgs>

Triggers when the edited cell is saved.

<div id='Spreadsheet'></div>
new Spreadsheet({
      cellSave: (args: CellSaveEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

contextMenuBeforeClose

EmitType<BeforeOpenCloseMenuEventArgs>

Triggers before closing the context menu.

<div id='Spreadsheet'></div>
new Spreadsheet({
      contextMenuBeforeClose: (args: BeforeOpenCloseMenuEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

contextMenuBeforeOpen

EmitType<BeforeOpenCloseMenuEventArgs>

Triggers before opening the context menu and it allows customizing the menu items.

<div id='Spreadsheet'></div>
new Spreadsheet({
      contextMenuBeforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

contextMenuItemSelect

EmitType<MenuSelectEventArgs>

Triggers when the context menu item is selected.

<div id='Spreadsheet'></div>
new Spreadsheet({
      contextMenuItemSelect: (args: MenuSelectEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

created

EmitType<Event>

Triggers when the component is created.

<div id='Spreadsheet'></div>
new Spreadsheet({
      created: () => {
      }
     ...
 }, '#Spreadsheet');

dataBound

EmitType<Object>

Triggers when the data is populated in the worksheet.

<div id='Spreadsheet'></div>
new Spreadsheet({
      dataBound: (args: Object) => {
      }
     ...
 }, '#Spreadsheet');

dataSourceChanged

EmitType<DataSourceChangedEventArgs>

Triggers during data changes when the data is provided as dataSource in the Spreadsheet.

<div id='Spreadsheet'></div>
new Spreadsheet({
      dataSourceChanged: (args: DataSourceChangedEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

dialogBeforeOpen

EmitType<DialogBeforeOpenEventArgs>

Triggers before opening the dialog box.

<div id='Spreadsheet'></div>
new Spreadsheet({
      dialogBeforeOpen: (args: DialogBeforeOpenEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

fileMenuBeforeClose

EmitType<BeforeOpenCloseMenuEventArgs>

Triggers before closing the file menu.

<div id='Spreadsheet'></div>
new Spreadsheet({
      fileMenuBeforeClose: (args: BeforeOpenCloseMenuEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

fileMenuBeforeOpen

EmitType<BeforeOpenCloseMenuEventArgs>

Triggers before opening the file menu.

<div id='Spreadsheet'></div>
new Spreadsheet({
      fileMenuBeforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

fileMenuItemSelect

EmitType<MenuSelectEventArgs>

Triggers when the file menu item is selected.

<div id='Spreadsheet'></div>
new Spreadsheet({
      fileMenuItemSelect: (args: MenuSelectEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

openComplete

EmitType<Object>

Triggers when the spreadsheet importing gets completed.

<div id='Spreadsheet'></div>
new Spreadsheet({
      openComplete: (args: Object) => {
      }
     ...
 }, '#Spreadsheet');

openFailure

EmitType<OpenFailureArgs>

Triggers when the opened Excel file fails to load.

<div id='Spreadsheet'></div>
new Spreadsheet({
      openFailure: (args: OpenFailureArgs) => {
      }
     ...
 }, '#Spreadsheet');

queryCellInfo

EmitType<CellInfoEventArgs>

Triggered every time a request is made to access cell information.

<div id='Spreadsheet'></div>
new Spreadsheet({
     queryCellInfo: (args: CellInfoEventArgs) => {
     }
     ...
 }, '#Spreadsheet');

saveComplete

EmitType<SaveCompleteEventArgs>

Triggers after saving the Spreadsheet as Excel file.

<div id='Spreadsheet'></div>
new Spreadsheet({
      saveComplete: (args: SaveCompleteEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

select

EmitType<SelectEventArgs>

Triggers after the cell or range of cells is selected.

<div id='Spreadsheet'></div>
new Spreadsheet({
     select: (args: SelectEventArgs) => {
     }
     ...
 }, '#Spreadsheet');

sortComplete

EmitType<SortEventArgs>

Triggers after sorting action is completed.

<div id='Spreadsheet'></div>
new Spreadsheet({
      sortComplete: (args: SortEventArgs) => {
      }
     ...
 }, '#Spreadsheet');
Contents
Contents