Worksheet in React Spreadsheet component
1 Jul 202424 minutes to read
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 Sheetbutton 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
Insertoption from the context menu to insert a new empty sheet before the current active sheet. - Using
insertSheetmethod, you can insert one or more sheets at your desired index.
The following code example shows the insert sheet operation in spreadsheet.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
function App() {
const spreadsheetRef = React.useRef(null);
React.useEffect(() => {
const 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 },
]
}];
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
// Applies style formatting to the active sheet before inserting a new sheet
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
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
spreadsheet.insertSheet(insSheetModel);
// Applies style formatting for the inserted sheet
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Inserted Sheet!A1:H1');
spreadsheet.cellFormat({ textAlign: 'center' }, 'Inserted Sheet!D2:H11');
}
}, []);
return (
<SpreadsheetComponent showRibbon={false} ref={spreadsheetRef} showFormulaBar={true}>
<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>
);
};
export default App;
const root = createRoot(document.getElementById('root'));
root.render(<App />);import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, SheetModel } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
function App() {
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
React.useEffect(() => {
const 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 }]
}];
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
// Applies style formatting to the active sheet before inserting a new sheet
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
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
spreadsheet.insertSheet(insSheetModel);
// Applies style formatting for the inserted sheet
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Inserted Sheet!A1:H1');
spreadsheet.cellFormat({ textAlign: 'center' }, 'Inserted Sheet!D2:H11');
}
}, []);
return (
<SpreadsheetComponent showRibbon={false} ref={spreadsheetRef} showformulaBar={true}>
<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>
);
};
export default App;
const root = createRoot(document.getElementById('root')!);
root.render(<App />);/**
* Insert sheet data source
*/
export let data = [
{ '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 }
];/**
* 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 }
];Insert a sheet programmatically and make it active sheet
A sheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. Using insertSheet method, you can insert one or more sheets at the desired index. Then, you can make the inserted sheet as active sheet by focusing the start cell of that sheet using the goTo method.
The following code example shows how to insert a sheet programmatically and make it the active sheet.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data, employeeData } from './datasource';
function App() {
const spreadsheetRef = React.useRef(null);
const btnClick = () => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.insertSheet(
[
{
index: 1,
name: 'new_sheet',
ranges: [
{
dataSource: employeeData,
startCell: 'A1'
},
]
},
]
);
// Use the timeout function to wait until the sheet is inserted.
setTimeout(() => {
// Method for switching to a new sheet.
spreadsheet.goTo('new_sheet!A1');
})
}
};
return (
<div>
<button className='e-btn custom-btn' onClick={btnClick}>Insert Sheet</button>
<SpreadsheetComponent ref={spreadsheetRef}>
<SheetsDirective>
<SheetDirective name="Car Sales Report">
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
</div>
);
}
export default App;
const root = createRoot(document.getElementById('root'));
root.render(<App />);import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data, employeeData } from './datasource';
function App() {
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
const btnClick = (): void => {
let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.insertSheet(
[
{
index: 1,
name: 'new_sheet',
ranges: [
{
dataSource: employeeData,
startCell: 'A1'
},
]
},
]
);
// Use the timeout function to wait until the sheet is inserted.
setTimeout(() => {
// Method for switching to a new sheet.
spreadsheet.goTo('new_sheet!A1');
})
}
};
return (
<div>
<button className='e-btn custom-btn' onClick={btnClick}>Insert Sheet</button>
<SpreadsheetComponent ref={spreadsheetRef}>
<SheetsDirective>
<SheetDirective name="Car Sales Report">
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
</div>
);
}
export default App;
const root = createRoot(document.getElementById('root')!);
root.render(<App />);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
Deleteoption from context menu. - Using
deletemethod to delete the sheets.
Rename sheet
You can dynamically rename an existing worksheet in the following way,
- Right-click on the sheet tab, and then select
Renameoption 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
Viewtab, and then selectHide Headersoption to hide both the row and column headers. - Set
showHeadersproperty insheetsastrueorfalseto show or hide the headers at initial load. By default, theshowHeadersproperty 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
Viewtab, and then selectHide Gridlinesoption to hide the gridlines in worksheet. - Set
showGridLinesproperty insheetsastrueorfalseto show or hide the gridlines at initial load. By default, theshowGridLinesproperty is enabled in each worksheet.
The following code example shows the headers and gridlines operation in spreadsheet.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
function App() {
const spreadsheetRef = React.useRef(null);
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:H11');
// The gridlines have been removed to set border for the range of cells
spreadsheet.setBorder({ border: '1px solid #e0e0e0' }, 'A1:H11');
}
}, []);
return (
<SpreadsheetComponent ref={spreadsheetRef} 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>
);
};
export default App;
const root = createRoot(document.getElementById('root'));
root.render(<App />);import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
function App() {
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:H11');
// The gridlines have been removed to set border for the range of cells
spreadsheet.setBorder({ border: '1px solid #e0e0e0' }, 'A1:H11');
}
}, []);
return (
<SpreadsheetComponent ref={spreadsheetRef} 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>
);
};
export default App;
const root = createRoot(document.getElementById('root')!);
root.render(<App />);/**
* Ribbon customization data source
*/
export let data = [
{ '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 }
];/**
* 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 }
];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.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
function App() {
const spreadsheetRef = React.useRef(null);
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
// Applies style formatting to active visible sheet
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:H11');
// Applies style formatting to active hidden sheet
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Hidden Sheet!A1:H1');
spreadsheet.cellFormat({ textAlign: 'center' }, 'Hidden Sheet!D2:H11');
}
}, []);
return (
<SpreadsheetComponent showFormulaBar={false} ref={spreadsheetRef} openUrl={"https://services.syncfusion.com/react/production/api/spreadsheet/open"}
saveUrl={"https://services.syncfusion.com/react/production/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>
);
};
export default App;
const root = createRoot(document.getElementById('root'));
root.render(<App />);import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
function App() {
const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
React.useEffect(() => {
let spreadsheet = spreadsheetRef.current;
if (spreadsheet) {
// Applies style formatting to active visible sheet
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:H1');
spreadsheet.cellFormat({ textAlign: 'center' }, 'D2:H11');
// Applies style formatting to active hidden sheet
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Hidden Sheet!A1:H1');
spreadsheet.cellFormat({ textAlign: 'center' }, 'Hidden Sheet!D2:H11');
}
}, []);
return (
<SpreadsheetComponent showFormulaBar={false} ref={spreadsheetRef} openUrl={"https://services.syncfusion.com/react/production/api/spreadsheet/open"}
saveUrl={"https://services.syncfusion.com/react/production/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>
);
};
export default App;
const root = createRoot(document.getElementById('root')!);
root.render(<App />);/**
* Hide/show sheet data source
*/
export let data = [
{ '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 }
];/**
* 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 }
];Note
You can refer to our React Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our React Spreadsheet example to knows how to present and manipulate data.