Search results

Worksheet in React Spreadsheet component

Worksheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data.

Add sheet

You can dynamically add or insert a sheet by one of the following ways,

  • Click the Add Sheet button in the sheet tab. This will add a new empty sheet next to current active sheet.
  • Right-click on the sheet tab, and then select Insert option from the context menu to insert a new empty sheet before the current active sheet.
  • Using insertSheet method, you can insert one or more sheets at your desired index.

The following code example shows the insert sheet operation in spreadsheet.

Source
Preview
app.tsx
datasource.tsx
index.html
app.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, SortDescriptor, SheetModel } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component<{}, {}> {
    spreadsheet: SpreadsheetComponent;
    public insSheetModel: SheetModel[] = [{
        index: 1,
        name: 'Inserted Sheet',
        ranges: [{ dataSource: data }],
        columns: [{ width: 150 }, { width: 110 }, { width: 110 }, { width: 85 }, { width: 85 }, { width: 85 }, { width: 85 },
            { width: 85 }]
    }]
    public created(): void {
       // Applies style formatting to the active sheet before inserting a new sheet
       this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
       this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:H11');
       // inserting a new sheet with data at 1st index
       // You can also insert empty sheets by specifying the start and end sheet index instead of sheet model
       this.spreadsheet.insertSheet(this.insSheetModel);
       // Applies style formatting for the inserted sheet
       this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Inserted Sheet!A1:H1');
       this.spreadsheet.cellFormat({ textAlign: 'center' }, 'Inserted Sheet!D2:H11');
    }
     render() {
        return  (<SpreadsheetComponent showRibbon={false} ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.created.bind(this)} showformulaBar={"false"}>
                        <SheetsDirective>
                        <SheetDirective name='Price Details'>
                                <RangesDirective>
                                    <RangeDirective dataSource={data}></RangeDirective>
                                </RangesDirective>
                                <ColumnsDirective>
                                    <ColumnDirective width={150}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                </ColumnsDirective>
                            </SheetDirective>
                        </SheetsDirective>
                    </SpreadsheetComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));
/**
 * Insert sheet data source
 */
export let data: Object[] = [
    { 'Item Name': 'Casual Shoes', 'Date': '02/14/2019', 'Time': '11:34:32 AM', 'Quantity': 10, 'Price': 20, 'Amount': '=D2*E2', 'Discount': 1, 'Profit': 10 },
    { 'Item Name': 'Sports Shoes', 'Date': '06/11/2019', 'Time': '05:56:32 AM', 'Quantity': 20, 'Price': 30, 'Amount': '=D3*E3', 'Discount': 5, 'Profit': 50 },
    { 'Item Name': 'Formal Shoes', 'Date': '07/27/2019', 'Time': '03:32:44 AM', 'Quantity': 20, 'Price': 15, 'Amount': '=D4*E4', 'Discount': 7, 'Profit': 27 },
    { 'Item Name': 'Sandals & Floaters', 'Date': '11/21/2019', 'Time': '06:23:54 AM', 'Quantity': 15, 'Price': 20, 'Amount': '=D5*E5', 'Discount': 11, 'Profit': 67 },
    { 'Item Name': 'Flip- Flops & Slippers', 'Date': '06/23/2019', 'Time': '12:43:59 AM', 'Quantity': 30, 'Price': 10, 'Amount': '=D6*E6', 'Discount': 10, 'Profit': 70 },
    { 'Item Name': 'Sneakers', 'Date': '07/22/2019', 'Time': '10:55:53 AM', 'Quantity': 40, 'Price': 20, 'Amount': '=D7*E7', 'Discount': 13, 'Profit': 66 },
    { 'Item Name': 'Running Shoes', 'Date': '02/04/2019', 'Time': '03:44:34 AM', 'Quantity': 20, 'Price': 10, 'Amount': '=D8*E8', 'Discount': 3, 'Profit': 14 },
    { 'Item Name': 'Loafers', 'Date': '11/30/2019', 'Time': '03:12:52 AM', 'Quantity': 31, 'Price': 10, 'Amount': '=D9*E9', 'Discount': 6, 'Profit': 29 },
    { 'Item Name': 'Cricket Shoes', 'Date': '07/09/2019', 'Time': '11:32:14 AM', 'Quantity': 41, 'Price': 30, 'Amount': '=D10*E10', 'Discount': 12, 'Profit': 166 },
    { 'Item Name': 'T-Shirts', 'Date': '10/31/2019', 'Time': '12:01:44 AM', 'Quantity': 50, 'Price': 10, 'Amount': '=D11*E11', 'Discount': 9, 'Profit': 55 }
];
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Spreadsheet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        body {
            overflow: hidden;
        }
        .customClass.e-cell {
                        background-color: red;
                }
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.insSheetModel = [{
                index: 1,
                name: 'Inserted Sheet',
                ranges: [{ dataSource: data }],
                columns: [{ width: 150 }, { width: 110 }, { width: 110 }, { width: 85 }, { width: 85 }, { width: 85 }, { width: 85 },
                    { width: 85 }]
            }];
    }
    created() {
        // Applies style formatting to the active sheet before inserting a new sheet
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
        this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:H11');
        // inserting a new sheet with data at 1st index
        // You can also insert empty sheets by specifying the start and end sheet index instead of sheet model
        this.spreadsheet.insertSheet(this.insSheetModel);
        // Applies style formatting for the inserted sheet
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Inserted Sheet!A1:H1');
        this.spreadsheet.cellFormat({ textAlign: 'center' }, 'Inserted Sheet!D2:H11');
    }
    render() {
        return (<SpreadsheetComponent showRibbon={false} ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.created.bind(this)} showformulaBar={"false"}>
                        <SheetsDirective>
                        <SheetDirective name='Price Details'>
                                <RangesDirective>
                                    <RangeDirective dataSource={data}></RangeDirective>
                                </RangesDirective>
                                <ColumnsDirective>
                                    <ColumnDirective width={150}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                </ColumnsDirective>
                            </SheetDirective>
                        </SheetsDirective>
                    </SpreadsheetComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

Delete sheet

The Spreadsheet has support for removing an existing worksheet. You can dynamically delete the existing sheet by the following way,

  • Right-click on the sheet tab, and then select Delete option from context menu.

Rename sheet

You can dynamically rename an existing worksheet in the following way,

  • Right-click on the sheet tab, and then select Rename option from the context menu.

Headers

By default, the row and column headers are visible in worksheets. You can dynamically show or hide worksheet headers by using one of the following ways,

  • Switch to View tab, and then select Hide Headers option to hide both the row and column headers.
  • Set showHeaders property in sheets as true or false to show or hide the headers at initial load. By default, the showHeaders property is enabled in each worksheet.

Gridlines

Gridlines act as a border like appearance of cells. They are used to distinguish cells on the worksheet. You can dynamically show or hide gridlines by using one of the following ways,

  • Switch to View tab, and then select Hide Gridlines option to hide the gridlines in worksheet.
  • Set showGridLines property in sheets as true or false to show or hide the gridlines at initial load. By default, the showGridLines property is enabled in each worksheet.

The following code example shows the headers and gridlines operation in spreadsheet.

Source
Preview
app.tsx
datasource.tsx
index.html
app.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component<{}, {}> {
    spreadsheet: SpreadsheetComponent;
    public created(): void {
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
        this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:H11');
        // The gridlines have been removed to set border for the range of cells
        this.spreadsheet.setBorder({ border: '1px solid #e0e0e0' }, 'A1:H11');
    }
     render() {
        return  (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.created.bind(this)} showFormulaBar={false}>
                        <SheetsDirective>
                        <SheetDirective name='Price Details' showGridLines={false} showHeaders={false}>
                                <RangesDirective>
                                    <RangeDirective dataSource={data}></RangeDirective>
                                </RangesDirective>
                                <ColumnsDirective>
                                    <ColumnDirective width={150}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                </ColumnsDirective>
                            </SheetDirective>
                        </SheetsDirective>
                    </SpreadsheetComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));
/**
 * Ribbon customization data source
 */
export let data: Object[] = [
    { 'Item Name': 'Casual Shoes', 'Date': '02/14/2019', 'Time': '11:34:32 AM', 'Quantity': 10, 'Price': 20, 'Amount': '=D2*E2', 'Discount': 1, 'Profit': 10 },
    { 'Item Name': 'Sports Shoes', 'Date': '06/11/2019', 'Time': '05:56:32 AM', 'Quantity': 20, 'Price': 30, 'Amount': '=D3*E3', 'Discount': 5, 'Profit': 50 },
    { 'Item Name': 'Formal Shoes', 'Date': '07/27/2019', 'Time': '03:32:44 AM', 'Quantity': 20, 'Price': 15, 'Amount': '=D4*E4', 'Discount': 7, 'Profit': 27 },
    { 'Item Name': 'Sandals & Floaters', 'Date': '11/21/2019', 'Time': '06:23:54 AM', 'Quantity': 15, 'Price': 20, 'Amount': '=D5*E5', 'Discount': 11, 'Profit': 67 },
    { 'Item Name': 'Flip- Flops & Slippers', 'Date': '06/23/2019', 'Time': '12:43:59 AM', 'Quantity': 30, 'Price': 10, 'Amount': '=D6*E6', 'Discount': 10, 'Profit': 70 },
    { 'Item Name': 'Sneakers', 'Date': '07/22/2019', 'Time': '10:55:53 AM', 'Quantity': 40, 'Price': 20, 'Amount': '=D7*E7', 'Discount': 13, 'Profit': 66 },
    { 'Item Name': 'Running Shoes', 'Date': '02/04/2019', 'Time': '03:44:34 AM', 'Quantity': 20, 'Price': 10, 'Amount': '=D8*E8', 'Discount': 3, 'Profit': 14 },
    { 'Item Name': 'Loafers', 'Date': '11/30/2019', 'Time': '03:12:52 AM', 'Quantity': 31, 'Price': 10, 'Amount': '=D9*E9', 'Discount': 6, 'Profit': 29 },
    { 'Item Name': 'Cricket Shoes', 'Date': '07/09/2019', 'Time': '11:32:14 AM', 'Quantity': 41, 'Price': 30, 'Amount': '=D10*E10', 'Discount': 12, 'Profit': 166 },
    { 'Item Name': 'T-Shirts', 'Date': '10/31/2019', 'Time': '12:01:44 AM', 'Quantity': 50, 'Price': 10, 'Amount': '=D11*E11', 'Discount': 9, 'Profit': 55 }
];
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Spreadsheet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        body {
            overflow: hidden;
        }
        .customClass.e-cell {
                        background-color: red;
                }
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component {
    created() {
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
        this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:H11');
        // The gridlines have been removed to set border for the range of cells
        this.spreadsheet.setBorder({ border: '1px solid #e0e0e0' }, 'A1:H11');
    }
    render() {
        return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.created.bind(this)} showFormulaBar={false}>
                        <SheetsDirective>
                        <SheetDirective name='Price Details' showGridLines={false} showHeaders={false}>
                                <RangesDirective>
                                    <RangeDirective dataSource={data}></RangeDirective>
                                </RangesDirective>
                                <ColumnsDirective>
                                    <ColumnDirective width={150}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                </ColumnsDirective>
                            </SheetDirective>
                        </SheetsDirective>
                    </SpreadsheetComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

Sheet visibility

Hiding a worksheet can help prevent unauthorized or accidental changes to your file.

There are three visibility state as like Microsoft Excel,

State Description
Visible You can see the worksheet once the component is loaded.
Hidden This worksheet is not visible, but you can unhide by selecting the sheet from List All Sheets
dropdown menu.
VeryHidden This worksheet is not visible and cannot be unhidden. Changing the
state property to Visible is the only way to view this sheet.

The following code example shows the three types of sheet visibility state.

Source
Preview
app.tsx
datasource.tsx
index.html
app.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component<{}, {}> {
    spreadsheet: SpreadsheetComponent;
    public created(): void {
        // Applies style formatting to active visible sheet
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
        this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:H11');
        // Applies style formatting to active hidden sheet
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Hidden Sheet!A1:H1');
        this.spreadsheet.cellFormat({ textAlign: 'center' }, 'Hidden Sheet!D2:H11');
    }
     render() {
        return  (<SpreadsheetComponent showFormulaBar={false} ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.created.bind(this)}
        openUrl={"https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open"}
        saveUrl={"https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save"}>
                        <SheetsDirective>
                        <SheetDirective name='Visible Sheet' state={'Visible'}>
                                <RangesDirective>
                                    <RangeDirective dataSource={data}></RangeDirective>
                                </RangesDirective>
                                <ColumnsDirective>
                                    <ColumnDirective width={150}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                </ColumnsDirective>
                            </SheetDirective>
                            <SheetDirective name='Very Hidden Sheet' state={'VeryHidden'}>
                                <RangesDirective>
                                    <RangeDirective dataSource={data}></RangeDirective>
                                </RangesDirective>
                                <ColumnsDirective>
                                    <ColumnDirective width={150}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                </ColumnsDirective>
                            </SheetDirective>
                            <SheetDirective name='Hidden Sheet' state={'Hidden'}>
                                <RangesDirective>
                                   <RangeDirective dataSource={data}></RangeDirective>
                                </RangesDirective>
                                <ColumnsDirective>
                                    <ColumnDirective width={150}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                </ColumnsDirective>
                            </SheetDirective>
                        </SheetsDirective>
                    </SpreadsheetComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));
/**
 * Hide/show sheet data source
 */
export let data: Object[] = [
    { 'Item Name': 'Casual Shoes', 'Date': '02/14/2019', 'Time': '11:34:32 AM', 'Quantity': 10, 'Price': 20, 'Amount': '=D2*E2', 'Discount': 1, 'Profit': 10 },
    { 'Item Name': 'Sports Shoes', 'Date': '06/11/2019', 'Time': '05:56:32 AM', 'Quantity': 20, 'Price': 30, 'Amount': '=D3*E3', 'Discount': 5, 'Profit': 50 },
    { 'Item Name': 'Formal Shoes', 'Date': '07/27/2019', 'Time': '03:32:44 AM', 'Quantity': 20, 'Price': 15, 'Amount': '=D4*E4', 'Discount': 7, 'Profit': 27 },
    { 'Item Name': 'Sandals & Floaters', 'Date': '11/21/2019', 'Time': '06:23:54 AM', 'Quantity': 15, 'Price': 20, 'Amount': '=D5*E5', 'Discount': 11, 'Profit': 67 },
    { 'Item Name': 'Flip- Flops & Slippers', 'Date': '06/23/2019', 'Time': '12:43:59 AM', 'Quantity': 30, 'Price': 10, 'Amount': '=D6*E6', 'Discount': 10, 'Profit': 70 },
    { 'Item Name': 'Sneakers', 'Date': '07/22/2019', 'Time': '10:55:53 AM', 'Quantity': 40, 'Price': 20, 'Amount': '=D7*E7', 'Discount': 13, 'Profit': 66 },
    { 'Item Name': 'Running Shoes', 'Date': '02/04/2019', 'Time': '03:44:34 AM', 'Quantity': 20, 'Price': 10, 'Amount': '=D8*E8', 'Discount': 3, 'Profit': 14 },
    { 'Item Name': 'Loafers', 'Date': '11/30/2019', 'Time': '03:12:52 AM', 'Quantity': 31, 'Price': 10, 'Amount': '=D9*E9', 'Discount': 6, 'Profit': 29 },
    { 'Item Name': 'Cricket Shoes', 'Date': '07/09/2019', 'Time': '11:32:14 AM', 'Quantity': 41, 'Price': 30, 'Amount': '=D10*E10', 'Discount': 12, 'Profit': 166 },
    { 'Item Name': 'T-Shirts', 'Date': '10/31/2019', 'Time': '12:01:44 AM', 'Quantity': 50, 'Price': 10, 'Amount': '=D11*E11', 'Discount': 9, 'Profit': 55 }
];
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Spreadsheet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        body {
            overflow: hidden;
        }
        .customClass.e-cell {
                        background-color: red;
                }
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component {
    created() {
        // Applies style formatting to active visible sheet
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
        this.spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:H11');
        // Applies style formatting to active hidden sheet
        this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Hidden Sheet!A1:H1');
        this.spreadsheet.cellFormat({ textAlign: 'center' }, 'Hidden Sheet!D2:H11');
    }
    render() {
        return (<SpreadsheetComponent showFormulaBar={false} ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.created.bind(this)} openUrl={"https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open"} saveUrl={"https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save"}>
                        <SheetsDirective>
                        <SheetDirective name='Visible Sheet' state={'Visible'}>
                                <RangesDirective>
                                    <RangeDirective dataSource={data}></RangeDirective>
                                </RangesDirective>
                                <ColumnsDirective>
                                    <ColumnDirective width={150}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                </ColumnsDirective>
                            </SheetDirective>
                            <SheetDirective name='Very Hidden Sheet' state={'VeryHidden'}>
                                <RangesDirective>
                                    <RangeDirective dataSource={data}></RangeDirective>
                                </RangesDirective>
                                <ColumnsDirective>
                                    <ColumnDirective width={150}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                </ColumnsDirective>
                            </SheetDirective>
                            <SheetDirective name='Hidden Sheet' state={'Hidden'}>
                                <RangesDirective>
                                   <RangeDirective dataSource={data}></RangeDirective>
                                </RangesDirective>
                                <ColumnsDirective>
                                    <ColumnDirective width={150}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={110}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                    <ColumnDirective width={85}></ColumnDirective>
                                </ColumnsDirective>
                            </SheetDirective>
                        </SheetsDirective>
                    </SpreadsheetComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

See Also