WorkbookModel

23 Sep 202511 minutes to read

Interface for a class Workbook

Properties

beforeCellFormat EmitType<BeforeCellFormatArgs>

Triggers before the cell format applied to the cell.

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

beforeCellUpdate EmitType<BeforeCellUpdateArgs>

Triggers before changing any cell properties.

<div id='Spreadsheet'></div>
 new Spreadsheet({
     beforeCellUpdate: (args: BeforeCellUpdateArgs) => {
     }
     ...
 }, '#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');

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

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

allowAutoFill boolean

It allows to enable/disable AutoFill functionalities.

allowCellFormatting boolean

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

allowChart boolean

It allows you to insert the chart in a spreadsheet.

allowConditionalFormat boolean

It allows you to apply conditional formatting to the sheet.

allowDataValidation boolean

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

allowDelete boolean

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

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.

allowFiltering boolean

It allows to enable/disable filter and its functionalities.

allowFindAndReplace boolean

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

allowFreezePane boolean

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

It allows to enable/disable Hyperlink and its functionalities.

allowImage boolean

It allows you to insert the image in a spreadsheet.

allowInsert boolean

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

allowMerge boolean

It allows you to merge the range of cells.

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.

allowOpen boolean

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

allowPrint boolean

Enables or disables the printing functionality in the spreadsheet.

allowSave boolean

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

allowSorting boolean

It allows to enable/disable sort and its functionalities.

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.

calculationMode CalculationMode

Specifies the mode of calculation within the spreadsheet.
Setting the calculation mode to Manual can enhance performance,
particularly when working with multiple sheets at the same time.

  • Automatic: Calculations are performed automatically whenever a cell value changes.
  • Manual: Calculations are performed only when explicitly triggered, improving performance
    when loading or working with large spreadsheets.

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

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

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.

enablePersistence boolean

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

enableRtl boolean

Enable or disable rendering component in right to left direction.

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

isProtected boolean

Specifies to protect the workbook.

listSeparator string

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

locale string

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

openSettings OpenSettingsModel

Specifies the options for configuration when opening a document.

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

const App = () => {
  const spreadsheetRef = useRef<SpreadsheetComponent>(null);
  const openSettings: OpenSettingsModel = {
    chunkSize: 100000,
    retryCount: 3
  };

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

export default App;

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

openUrl string

Specifies the service URL to open excel file in spreadsheet.

password string

Specifies the password.

saveUrl string

Specifies the service URL to save spreadsheet as Excel file.

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

showFormulaBar boolean

It shows or hides the formula bar and its features.

showRibbon boolean

It shows or hides the ribbon in spreadsheet.

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.

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