Sheet visibility
29 May 202624 minutes to read
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://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open"}
saveUrl={"https://document.syncfusion.com/web-services/spreadsheet-editor/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://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open"}
saveUrl={"https://document.syncfusion.com/web-services/spreadsheet-editor/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 }
];