Interface for a class Spreadsheet
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');
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');
Triggers when the Hyperlink function gets completed.
<div id='Spreadsheet'></div>
new Spreadsheet({
afterHyperlinkClick: (args: AfterHyperlinkArgs ) => {
}
...
}, '#Spreadsheet');
Triggers after the hyperlink inserted.
<div id='Spreadsheet'></div>
new Spreadsheet({
afterHyperlinkCreate: (args: afterHyperlinkArgs ) => {
}
...
}, '#Spreadsheet');
EmitType<BeforeCellFormatArgs>
Triggers before the cell format applied to the cell.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeCellFormat: (args: BeforeCellFormatArgs) => {
}
...
}, '#Spreadsheet');
Triggers before the cell appended to the DOM.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeCellRender: (args: CellRenderEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers when before the cell is saved.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeCellSave: (args: CellEditEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<BeforeCellUpdateArgs>
Triggers before changing any cell properties.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeCellUpdate: (args: BeforeCellUpdateArgs) => {
}
...
}, '#Spreadsheet');
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');
EmitType<Object>
Triggers before the data is populated to the worksheet.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeDataBound: (args: Object) => {
}
...
}, '#Spreadsheet');
Triggers when the Hyperlink is clicked.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeHyperlinkClick: (args: BeforeHyperlinkArgs ) => {
}
...
}, '#Spreadsheet');
Triggers before insert a hyperlink.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeHyperlinkCreate: (args: BeforeHyperlinkArgs ) => {
}
...
}, '#Spreadsheet');
Triggers before opening an Excel file.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeOpen: (args: BeforeOpenEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers before saving the Spreadsheet as Excel file.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeSave: (args: BeforeSaveEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<BeforeSelectEventArgs>
Triggers before the cell or range of cells being selected.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeSelect: (args: BeforeSelectEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers before sorting the specified range.
<div id='Spreadsheet'></div>
new Spreadsheet({
beforeSort: (args: BeforeSortEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers when the cell is being edited.
<div id='Spreadsheet'></div>
new Spreadsheet({
cellEdit: (args: CellEditEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers when the cell has been edited.
<div id='Spreadsheet'></div>
new Spreadsheet({
cellEdited: (args: CellEditEventArgs) => {
}
...
}, '#Spreadsheet');
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');
Triggers when the edited cell is saved.
<div id='Spreadsheet'></div>
new Spreadsheet({
cellSave: (args: CellSaveEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<BeforeOpenCloseMenuEventArgs>
Triggers before closing the context menu.
<div id='Spreadsheet'></div>
new Spreadsheet({
contextMenuBeforeClose: (args: BeforeOpenCloseMenuEventArgs) => {
}
...
}, '#Spreadsheet');
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');
Triggers when the context menu item is selected.
<div id='Spreadsheet'></div>
new Spreadsheet({
contextMenuItemSelect: (args: MenuSelectEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<Event>
Triggers when the component is created.
<div id='Spreadsheet'></div>
new Spreadsheet({
created: () => {
}
...
}, '#Spreadsheet');
EmitType<Object>
Triggers when the data is populated in the worksheet.
<div id='Spreadsheet'></div>
new Spreadsheet({
dataBound: (args: Object) => {
}
...
}, '#Spreadsheet');
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');
EmitType<DialogBeforeOpenEventArgs>
Triggers before opening the dialog box.
<div id='Spreadsheet'></div>
new Spreadsheet({
dialogBeforeOpen: (args: DialogBeforeOpenEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<BeforeOpenCloseMenuEventArgs>
Triggers before closing the file menu.
<div id='Spreadsheet'></div>
new Spreadsheet({
fileMenuBeforeClose: (args: BeforeOpenCloseMenuEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<BeforeOpenCloseMenuEventArgs>
Triggers before opening the file menu.
<div id='Spreadsheet'></div>
new Spreadsheet({
fileMenuBeforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers when the file menu item is selected.
<div id='Spreadsheet'></div>
new Spreadsheet({
fileMenuItemSelect: (args: MenuSelectEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<Object>
Triggers when the spreadsheet importing gets completed.
<div id='Spreadsheet'></div>
new Spreadsheet({
openComplete: (args: Object) => {
}
...
}, '#Spreadsheet');
Triggers when the opened Excel file fails to load.
<div id='Spreadsheet'></div>
new Spreadsheet({
openFailure: (args: OpenFailureArgs) => {
}
...
}, '#Spreadsheet');
Triggered every time a request is made to access cell information.
<div id='Spreadsheet'></div>
new Spreadsheet({
queryCellInfo: (args: CellInfoEventArgs) => {
}
...
}, '#Spreadsheet');
EmitType<SaveCompleteEventArgs>
Triggers after saving the Spreadsheet as Excel file.
<div id='Spreadsheet'></div>
new Spreadsheet({
saveComplete: (args: SaveCompleteEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers after the cell or range of cells is selected.
<div id='Spreadsheet'></div>
new Spreadsheet({
select: (args: SelectEventArgs) => {
}
...
}, '#Spreadsheet');
Triggers after sorting action is completed.
<div id='Spreadsheet'></div>
new Spreadsheet({
sortComplete: (args: SortEventArgs) => {
}
...
}, '#Spreadsheet');
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 />);
boolean
It allows to enable/disable AutoFill functionalities.
boolean
It allows you to apply styles (font size, font weight, font family, fill color, and more) to the spreadsheet cells.
boolean
It allows you to insert the chart in a spreadsheet.
boolean
It allows you to apply conditional formatting to the sheet.
boolean
It allows you to apply data validation to the spreadsheet cells.
boolean
It allows you to delete rows, columns, and sheets from a spreadsheet.
boolean
It allows you to add new data or update existing cell data. If it is false, it will act as read only mode.
boolean
It allows to enable/disable filter and its functionalities.
boolean
It allows to enable/disable find and replace with its functionalities.
boolean
It allows to enable/disable freeze pane functionality in spreadsheet.
boolean
It allows to enable/disable Hyperlink and its functionalities.
boolean
It allows you to insert the image in a spreadsheet.
boolean
It allows you to insert rows, columns, and sheets into the spreadsheet.
boolean
It allows you to merge the range of cells.
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.
boolean
It allows you to open an Excel file (.xlsx, .xls, and .csv) in Spreadsheet.
boolean
Enables or disables the printing functionality in the spreadsheet.
boolean
If allowResizing
is set to true, spreadsheet columns and rows can be resized.
boolean
It allows you to save Spreadsheet with all data as Excel file (.xlsx, .xls, and .csv).
boolean
It specifies whether the Spreadsheet should be rendered with scrolling or not.
To customize the Spreadsheet scrolling behavior, use the scrollSettings
property.
boolean
It allows to enable/disable sort and its functionalities.
boolean
It allows to enable/disable undo and redo functionalities.
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.
Configures the auto fill settings.
The autoFillSettings fillType
property has FOUR types and it is described below:
<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 betrue
.
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.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 />);
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 />);
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 />);
boolean
It enables or disables the clipboard operations (cut, copy, and paste) of the Spreadsheet.
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.
boolean
It allows you to interact with cell, sheet tabs, formula bar, and ribbon through the keyboard device.
boolean
It enables shortcut keys to perform Spreadsheet operations like open, save, copy, paste, and more.
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.
boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable rendering component in right to left direction.
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 />);
boolean
Specifies to protect the workbook.
string
Specifies the list separator which is used as the formula argument separator.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
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 />);
string
Specifies the service URL to open excel file in spreadsheet.
string
Specifies the password.
string
Specifies the service URL to save spreadsheet as Excel file.
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 betrue
.
Configures the selection settings.
The selectionSettings mode
property has three values and is described below:
<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 />);
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 />);
boolean
If showAggregate
is set to true, spreadsheet will show the AVERAGE, SUM, COUNT, MIN and MAX values based on the selected cells.
boolean
It shows or hides the formula bar and its features.
boolean
It shows or hides the ribbon in spreadsheet.
boolean
It shows or hides the sheets tabs, this is used to navigate among the sheets and create or delete sheets by UI interaction.
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 />);