Protect sheet in React Spreadsheet component

3 Jul 202424 minutes to read

Sheet protection helps you to prevent the users from modifying the data in the spreadsheet.

Protect Sheet

Protect sheet feature helps you to prevent the unknown users from accidentally changing, editing, moving, or deleting data in a spreadsheet. And you can also protect the sheet with password. You can use the isProtected property to enable or disable the Protecting functionality.

  • The default value for isProtected property is false.

By default in protected sheet, selecting, formatting, inserting, deleting functionalities are disabled. To enable some of the above said functionalities
the protectSettings options are used in a protected spreadsheet.

The available protectSettings options in spreadsheet are,

Options Uses
Select Cells Used to perform Cell Selection.
Format Cells Used to perform Cell formatting.
Format Rows Used to perform Row formatting.
Format Columns Used to perform Column formatting.
Insert Link Used to perform Hyperlink Insertions.
  • The default value for all protectSettings options are false.

By default, the Protect Sheet module is injected internally into the Spreadsheet to perform sheet protection function.

User Interface:

In the active Spreadsheet, the sheet protection can be done by any of the following ways:

  • Select the Protect Sheet item in the Ribbon toolbar under the Data Tab, and then select your desired options.
  • Right-click the sheet tab, select the Protect Sheet item in the context menu, and then select your desired options.
  • Use the protectSheet() method programmatically.

The following example shows Protect Sheet functionality in the Spreadsheet control.

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 { budgetData, salaryData } from './datasource';

function App() {
    const spreadsheetRef = React.useRef(null);
    const dataBound = () => {
        let spreadsheet = spreadsheetRef.current;
        if (spreadsheet) {
            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
            spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A11:D11');
            spreadsheet.protectSheet(1, { selectCells: true }, "syncfusion"); // protect sheet with password
        }
    };

    return (
        <div>
            <SpreadsheetComponent ref={spreadsheetRef} dataBound={dataBound} allowAutoFill={false} >
                <SheetsDirective>
                    <SheetDirective name={"Budget"} isProtected={true} protectSettings={{ selectCells: true }}>
                        <RangesDirective>
                            <RangeDirective dataSource={budgetData}></RangeDirective>
                        </RangesDirective>
                        <ColumnsDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                        </ColumnsDirective>
                    </SheetDirective>
                    <SheetDirective name={"Salary"}>
                        <RangesDirective>
                            <RangeDirective dataSource={salaryData}></RangeDirective>
                        </RangesDirective>
                        <ColumnsDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></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, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { budgetData, salaryData } from './datasource';

function App() {
    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
    const dataBound = (): void => {
        let spreadsheet = spreadsheetRef.current;
        if (spreadsheet) {
            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
            spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A11:D11');
            spreadsheet.protectSheet(1, { selectCells: true }, "syncfusion"); // protect sheet with password
        }
    };

    return (
        <div>
            <SpreadsheetComponent ref={spreadsheetRef} dataBound={dataBound} allowAutoFill={false} >
                <SheetsDirective>
                    <SheetDirective name={"Budget"} isProtected={true} protectSettings={{ selectCells: true }}>
                        <RangesDirective>
                            <RangeDirective dataSource={budgetData}></RangeDirective>
                        </RangesDirective>
                        <ColumnsDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                        </ColumnsDirective>
                    </SheetDirective>
                    <SheetDirective name={"Salary"}>
                        <RangesDirective>
                            <RangeDirective dataSource={salaryData}></RangeDirective>
                        </RangesDirective>
                        <ColumnsDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                        </ColumnsDirective>
                    </SheetDirective>
                </SheetsDirective>
            </SpreadsheetComponent>
        </div>
    );
};
export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);
export let budgetData = [
    {
        "Expense Type": "Housing",
        "Projected Cost": 7000,
        "Actual Cost": 7500,
        "Difference": -500,
    },
    {
        "Expense Type": "Transportation",
        "Projected Cost": 500,
        "Actual Cost": 500,
        "Difference": 0,
    },
    {
        "Expense Type": "Insurance",
        "Projected Cost": 1000,
        "Actual Cost": 1000,
        "Difference": 0,
    },
    {
        "Expense Type": "Food",
        "Projected Cost": 2000,
        "Actual Cost": 1800,
        "Difference": 200,
    },
    {
        "Expense Type": "Pets",
        "Projected Cost": 300,
        "Actual Cost": 200,
        "Difference": 100,
    },
    {
        "Expense Type": "Personel Care",
        "Projected Cost": 500,
        "Actual Cost": 500,
        "Difference": 0,
    }, {
        "Expense Type": "Loan",
        "Projected Cost": 1000,
        "Actual Cost": 1000,
        "Difference": 0,
    }, {
        "Expense Type": "Tax",
        "Projected Cost": 200,
        "Actual Cost": 200,
        "Difference": 0,
    }, {
        "Expense Type": "Savings",
        "Projected Cost": 1000,
        "Actual Cost": 900,
        "Difference": 100,
    },
    {
        "Expense Type": "Total",
        "Projected Cost": 13500,
        "Actual Cost": 13600,
        "Difference": -100,
    }
];
export let salaryData = [
    {
        "Earnings": "Basic",
        "Credit Amount": 20000,
        "Deductions": "Provident Fund",
        "Debit Amount": 2400,
    },
    {
        "Earnings": "HRA",
        "Credit Amount": 8000,
        "Deductions": "ESI",
        "Debit Amount": 0,
    },
    {
        "Earnings": "Special Allowance",
        "Credit Amount": 25000,
        "Deductions": "Professional Tax",
        "Debit Amount": 200,
    },
    {
        "Earnings": "Incentives",
        "Credit Amount": 2000,
        "Deductions": "TDS",
        "Debit Amount": 2750,
    },
    {
        "Earnings": "Bonus",
        "Credit Amount": 1500,
        "Deductions": "Other Deduction",
        "Debit Amount": 0,
    },
    {
        "Earnings": "Total Earnings",
        "Credit Amount": 56500,
        "Deductions": "Total Deductions",
        "Debit Amount": 5350,
    }
];
export let budgetData: Object[] = [
    {
      "Expense Type": "Housing",
      "Projected Cost": 7000,
      "Actual Cost": 7500,
      "Difference": -500,
    },
    {
      "Expense Type": "Transportation",
      "Projected Cost": 500,
      "Actual Cost": 500,
      "Difference": 0,
    },
    {
      "Expense Type": "Insurance",
      "Projected Cost": 1000,
      "Actual Cost": 1000,
      "Difference": 0,
    },
    {
      "Expense Type": "Food",
      "Projected Cost": 2000,
      "Actual Cost": 1800,
      "Difference": 200,
    },
    {
      "Expense Type": "Pets",
      "Projected Cost": 300,
      "Actual Cost": 200,
      "Difference": 100,
    },
    {
      "Expense Type": "Personel Care",
      "Projected Cost": 500,
      "Actual Cost": 500,
      "Difference": 0,
    },{
      "Expense Type": "Loan",
      "Projected Cost": 1000,
      "Actual Cost": 1000,
      "Difference": 0,
    },{
      "Expense Type": "Tax",
      "Projected Cost": 200,
      "Actual Cost": 200,
      "Difference": 0,
    },{
      "Expense Type": "Savings",
      "Projected Cost": 1000,
      "Actual Cost": 900,
      "Difference": 100,
    },
    {
      "Expense Type": "Total",
      "Projected Cost": 13500,
      "Actual Cost": 13600,
      "Difference": -100,
    }
  ]

  export let salaryData: Object[] = [
    {
      "Earnings": "Basic",
      "Credit Amount": 20000,
      "Deductions": "Provident Fund",
      "Debit Amount": 2400,
    },
    {
      "Earnings": "HRA",
      "Credit Amount": 8000,
      "Deductions": "ESI",
      "Debit Amount": 0,
    },
    {
      "Earnings": "Special Allowance",
      "Credit Amount": 25000,
      "Deductions": "Professional Tax",
      "Debit Amount": 200,
    },
    {
      "Earnings": "Incentives",
      "Credit Amount": 2000,
      "Deductions": "TDS",
      "Debit Amount": 2750,
    },
    {
      "Earnings": "Bonus",
      "Credit Amount": 1500,
      "Deductions": "Other Deduction",
      "Debit Amount": 0,
    },
    {
      "Earnings": "Total Earnings",
      "Credit Amount": 56500,
      "Deductions": "Total Deductions",
      "Debit Amount": 5350,
    }
  ]

Limitations of Protect sheet

  • Password encryption is not supported

Unprotect Sheet

Unprotect sheet is used to enable all the functionalities that are already disabled in a protected spreadsheet.

User Interface:

In the active Spreadsheet, the sheet Unprotection can be done by any of the following ways:

  • Select the Unprotect Sheet item in the Ribbon toolbar under the Data Tab.
  • Right-click the sheet tab, select the Unprotect Sheet item in the context menu.
  • Use the unprotectSheet() method programmatically.

Unlock the particular cells in the protected sheet

In protected spreadsheet, to make some particular cell or range of cells are editable, you can use lockCells() method, with the parameter range and isLocked property as false.

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, ColumnsDirective, ColumnDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { budgetData, salaryData } from './datasource';

function App() {
    const spreadsheetRef = React.useRef(null);
    const dialogRef = React.useRef(null);
    React.useEffect(() => {
        let spreadsheet = spreadsheetRef.current;
        if (spreadsheet) {
            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
            spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A11:D11');
        }
    }, []);
    const lockCells = () => {
        let spreadsheet = spreadsheetRef.current;
        let dialog = dialogRef.current;
        if (spreadsheet) {
            spreadsheet.lockCells('A1:F3', false);
        }
        if (dialog) {
            dialog.hide();
        }
    };
    const showDlg = () => {
        let dialog = dialogRef.current;
        if (dialog) {
            dialog.show();
        }
    };
    const protectSettings = { selectCells: true };
    const btn = [{ click: lockCells, buttonModel: { content: 'Ok', isPrimary: true } }];

    return (
        <div>
            <button onClick={showDlg}>Unlock cells</button>
            <SpreadsheetComponent ref={spreadsheetRef}>
                <SheetsDirective>
                    <SheetDirective name={"Budget"} isProtected={true} protectSettings={protectSettings}>
                        <RangesDirective>
                            <RangeDirective dataSource={budgetData}></RangeDirective>
                        </RangesDirective>
                        <ColumnsDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                        </ColumnsDirective>
                    </SheetDirective>
                    <SheetDirective name={"Salary"}>
                        <RangesDirective>
                            <RangeDirective dataSource={salaryData}></RangeDirective>
                        </RangesDirective>
                        <ColumnsDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                        </ColumnsDirective>
                    </SheetDirective>
                </SheetsDirective>
            </SpreadsheetComponent>
            <DialogComponent ref={dialogRef} header={'Spreadsheet'} target={document.getElementById('spreadsheet')} content={'"A1:F3" range of cells has been unlocked.'}
                showCloseIcon={true} isModal={true} visible={false} width={'500px'} buttons={btn}>
            </DialogComponent>
        </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, SheetsDirective, SheetDirective, RangesDirective, ColumnsDirective, ColumnDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';
import { ButtonPropsModel, DialogComponent } from '@syncfusion/ej2-react-popups';
import { budgetData, salaryData } from './datasource';

function App() {
    const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
    const dialogRef = React.useRef<DialogComponent>(null);
    React.useEffect(() => {
        let spreadsheet = spreadsheetRef.current;
        if (spreadsheet) {
            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
            spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A11:D11');
        }
    }, []);
    const lockCells = (): void => {
        let spreadsheet = spreadsheetRef.current;
        let dialog = dialogRef.current;
        if (spreadsheet) {
            spreadsheet.lockCells('A1:F3', false);
        }
        if (dialog) {
            dialog.hide();
        }
    };
    const showDlg = (): void => {
        let dialog = dialogRef.current;
        if (dialog) {
            dialog.show();
        }
    };
    const protectSettings = { selectCells: true };
    const btn: ButtonPropsModel[] = [{ click: lockCells, buttonModel: { content: 'Ok', isPrimary: true } }];

    return (
        <div>
            <button onClick={showDlg}>Unlock cells</button>
            <SpreadsheetComponent ref={spreadsheetRef}>
                <SheetsDirective>
                    <SheetDirective name={"Budget"} isProtected={true} protectSettings={protectSettings}>
                        <RangesDirective>
                            <RangeDirective dataSource={budgetData}></RangeDirective>
                        </RangesDirective>
                        <ColumnsDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                        </ColumnsDirective>
                    </SheetDirective>
                    <SheetDirective name={"Salary"}>
                        <RangesDirective>
                            <RangeDirective dataSource={salaryData}></RangeDirective>
                        </RangesDirective>
                        <ColumnsDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                            <ColumnDirective width={100}></ColumnDirective>
                        </ColumnsDirective>
                    </SheetDirective>
                </SheetsDirective>
            </SpreadsheetComponent>
            <DialogComponent ref={dialogRef} header={'Spreadsheet'} target={document.getElementById('spreadsheet') as HTMLElement} content={'"A1:F3" range of cells has been unlocked.'}
                showCloseIcon={true} isModal={true} visible={false} width={'500px'} buttons={btn}>
            </DialogComponent>
        </div>
    );
};
export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);
export let budgetData = [
    {
        "Expense Type": "Housing",
        "Projected Cost": 7000,
        "Actual Cost": 7500,
        "Difference": -500,
    },
    {
        "Expense Type": "Transportation",
        "Projected Cost": 500,
        "Actual Cost": 500,
        "Difference": 0,
    },
    {
        "Expense Type": "Insurance",
        "Projected Cost": 1000,
        "Actual Cost": 1000,
        "Difference": 0,
    },
    {
        "Expense Type": "Food",
        "Projected Cost": 2000,
        "Actual Cost": 1800,
        "Difference": 200,
    },
    {
        "Expense Type": "Pets",
        "Projected Cost": 300,
        "Actual Cost": 200,
        "Difference": 100,
    },
    {
        "Expense Type": "Personel Care",
        "Projected Cost": 500,
        "Actual Cost": 500,
        "Difference": 0,
    }, {
        "Expense Type": "Loan",
        "Projected Cost": 1000,
        "Actual Cost": 1000,
        "Difference": 0,
    }, {
        "Expense Type": "Tax",
        "Projected Cost": 200,
        "Actual Cost": 200,
        "Difference": 0,
    }, {
        "Expense Type": "Savings",
        "Projected Cost": 1000,
        "Actual Cost": 900,
        "Difference": 100,
    },
    {
        "Expense Type": "Total",
        "Projected Cost": 13500,
        "Actual Cost": 13600,
        "Difference": -100,
    }
];
export let salaryData = [
    {
        "Earnings": "Basic",
        "Credit Amount": 20000,
        "Deductions": "Provident Fund",
        "Debit Amount": 2400,
    },
    {
        "Earnings": "HRA",
        "Credit Amount": 8000,
        "Deductions": "ESI",
        "Debit Amount": 0,
    },
    {
        "Earnings": "Special Allowance",
        "Credit Amount": 25000,
        "Deductions": "Professional Tax",
        "Debit Amount": 200,
    },
    {
        "Earnings": "Incentives",
        "Credit Amount": 2000,
        "Deductions": "TDS",
        "Debit Amount": 2750,
    },
    {
        "Earnings": "Bonus",
        "Credit Amount": 1500,
        "Deductions": "Other Deduction",
        "Debit Amount": 0,
    },
    {
        "Earnings": "Total Earnings",
        "Credit Amount": 56500,
        "Deductions": "Total Deductions",
        "Debit Amount": 5350,
    }
];
export let budgetData: Object[] = [
    {
      "Expense Type": "Housing",
      "Projected Cost": 7000,
      "Actual Cost": 7500,
      "Difference": -500,
    },
    {
      "Expense Type": "Transportation",
      "Projected Cost": 500,
      "Actual Cost": 500,
      "Difference": 0,
    },
    {
      "Expense Type": "Insurance",
      "Projected Cost": 1000,
      "Actual Cost": 1000,
      "Difference": 0,
    },
    {
      "Expense Type": "Food",
      "Projected Cost": 2000,
      "Actual Cost": 1800,
      "Difference": 200,
    },
    {
      "Expense Type": "Pets",
      "Projected Cost": 300,
      "Actual Cost": 200,
      "Difference": 100,
    },
    {
      "Expense Type": "Personel Care",
      "Projected Cost": 500,
      "Actual Cost": 500,
      "Difference": 0,
    },{
      "Expense Type": "Loan",
      "Projected Cost": 1000,
      "Actual Cost": 1000,
      "Difference": 0,
    },{
      "Expense Type": "Tax",
      "Projected Cost": 200,
      "Actual Cost": 200,
      "Difference": 0,
    },{
      "Expense Type": "Savings",
      "Projected Cost": 1000,
      "Actual Cost": 900,
      "Difference": 100,
    },
    {
      "Expense Type": "Total",
      "Projected Cost": 13500,
      "Actual Cost": 13600,
      "Difference": -100,
    }
  ]

  export let salaryData: Object[] = [
    {
      "Earnings": "Basic",
      "Credit Amount": 20000,
      "Deductions": "Provident Fund",
      "Debit Amount": 2400,
    },
    {
      "Earnings": "HRA",
      "Credit Amount": 8000,
      "Deductions": "ESI",
      "Debit Amount": 0,
    },
    {
      "Earnings": "Special Allowance",
      "Credit Amount": 25000,
      "Deductions": "Professional Tax",
      "Debit Amount": 200,
    },
    {
      "Earnings": "Incentives",
      "Credit Amount": 2000,
      "Deductions": "TDS",
      "Debit Amount": 2750,
    },
    {
      "Earnings": "Bonus",
      "Credit Amount": 1500,
      "Deductions": "Other Deduction",
      "Debit Amount": 0,
    },
    {
      "Earnings": "Total Earnings",
      "Credit Amount": 56500,
      "Deductions": "Total Deductions",
      "Debit Amount": 5350,
    }
  ]

Make cells read-only without protecting worksheet

Previously, you could make cells read-only by protecting the entire sheet using the protectSheet method or through the UI option. Meanwhile, to make a specific range of cells editable within a protected sheet, you needed to use the lockCells method, passing the range parameter and setting the isLocked property to false.

Now, you can make an entire row, an entire column, or a specific range of cells read-only using the setRangeReadOnly method without protecting the entire sheet. This method accepts three parameters, as detailed in the following table:

Parameter Description  
readOnly Specifies whether an entire row, an entire column, or a specific range of cells should be set as read-only (true) or editable (false). .
range Specifies the particular range of cells to be set as read-only.  
sheetIndex Specifies the index of the sheet.  

You can make an entire row, an entire column, or a specific range of cells read-only by passing the range as shown in the code snippet below:

// To set read-only for single cell.
spreadsheet.setRangeReadOnly(true, 'A2', 0)
// To set read-only for range of cells.
spreadsheet.setRangeReadOnly(true, 'A2:B5', 0)
// To set read-only for entire row.
spreadsheet.setRangeReadOnly(true, '3:3', 0)
// To set read-only for entire column.
spreadsheet.setRangeReadOnly(true, 'A:A', 0)

You can make the cells read-only in the cell data binding by setting the isReadOnly property to true for the respective rows, columns, and cells. Please refer to the code snippet below to see how to set cells to read-only in the cell data binding:

<SpreadsheetComponent>
    <SheetsDirective>
        <SheetDirective>
            <RowsDirective>
            {/* To set read-only for entire row. */}
                <RowDirective index={3} isReadOnly={true}></RowDirective>
                <RowDirective index={4}>
                    <CellsDirective>
                    {/* To set read-only for the cell. */}
                        <CellDirective index={4} isReadOnly={true}></CellDirective>
                    </CellsDirective>
                </RowDirective>
            </RowsDirective>
            <ColumnsDirective>
            {/* To set read-only for entire column. */}
                <ColumnDirective isReadOnly={true}></ColumnDirective>
            </ColumnsDirective>
        </SheetDirective>
    </SheetsDirective>
</SpreadsheetComponent>

The following example demonstrates how to make rows, columns, and cells read-only without protecting the sheet:

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective, RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
function App() {
  const spreadsheetRef = React.useRef(null);
  const readOnlyRow = () => {
    let spreadsheet = spreadsheetRef.current;
    spreadsheet.setRangeReadOnly(true, '2:2', spreadsheet.activeSheetIndex);
  }
  const readOnlyCol = () => {
    let spreadsheet = spreadsheetRef.current;
    spreadsheet.setRangeReadOnly(true, 'A:A', spreadsheet.activeSheetIndex);
  }
  const readOnlyCell = () => {
    let spreadsheet = spreadsheetRef.current;
    spreadsheet.setRangeReadOnly(true, 'E5:E5', spreadsheet.activeSheetIndex);
  }
  const removeReadOnly = () => {
    let spreadsheet = spreadsheetRef.current;
    spreadsheet.setRangeReadOnly(false, '2:2', spreadsheet.activeSheetIndex);
    spreadsheet.setRangeReadOnly(false, 'A:A', spreadsheet.activeSheetIndex);
    spreadsheet.setRangeReadOnly(false, 'E5:E5', spreadsheet.activeSheetIndex);
  }
  return (
    <div className='control-section spreadsheet-control'>
            <button className="e-btn custom-btn" onClick={readOnlyRow}>Make Row 2 readOnly</button>
            <button className="e-btn custom-btn" onClick={readOnlyCol}>Make Column A readOnly</button>
            <button className="e-btn custom-btn" onClick={readOnlyCell}>Make E5 cell readOnly</button>
            <button className="e-btn custom-btn" onClick={removeReadOnly}>Remove readOnly</button>
                <SpreadsheetComponent height={300} openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open'  ref={spreadsheetRef} >
                    <SheetsDirective>
                        <SheetDirective name="Car Sales Report">
                            <RangesDirective>
                                <RangeDirective dataSource={data}></RangeDirective>
                            </RangesDirective>
                            <RowsDirective>
                                <RowDirective index={3} isReadOnly={true}></RowDirective>
                                <RowDirective index={4}>
                                    <CellsDirective>
                                        <CellDirective index={5} isReadOnly={true}></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                            </RowsDirective>
                            <ColumnsDirective>
                                <ColumnDirective width={180}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective isReadOnly={true} 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, SheetsDirective, SheetDirective, RangesDirective, RangeDirective, ColumnsDirective, ColumnDirective, RowsDirective, RowDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
function App() {
  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
  const readOnlyRow = (): void => {
    let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
    spreadsheet.setRangeReadOnly(true, '2:2', spreadsheet.activeSheetIndex);
  }
  const readOnlyCol = (): void => {
    let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
    spreadsheet.setRangeReadOnly(true, 'A:A', spreadsheet.activeSheetIndex);
  }
  const readOnlyCell = (): void => {
    let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
    spreadsheet.setRangeReadOnly(true, 'E5:E5', spreadsheet.activeSheetIndex);
  }
  const removeReadOnly = (): void => {
    let spreadsheet: SpreadsheetComponent = spreadsheetRef.current;
    spreadsheet.setRangeReadOnly(false, '2:2', spreadsheet.activeSheetIndex);
    spreadsheet.setRangeReadOnly(false, 'A:A', spreadsheet.activeSheetIndex);
    spreadsheet.setRangeReadOnly(false, 'E5:E5', spreadsheet.activeSheetIndex);
    
  }
  return (
    <div className='control-section spreadsheet-control'>
            <button className="e-btn custom-btn" onClick={readOnlyRow}>Make Row 2 readOnly</button>
            <button className="e-btn custom-btn" onClick={readOnlyCol}>Make Column A readOnly</button>
            <button className="e-btn custom-btn" onClick={readOnlyCell}>Make E5 cell readOnly</button>
            <button className="e-btn custom-btn" onClick={removeReadOnly}>Remove readOnly</button>
                <SpreadsheetComponent height={300} openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open'  ref={spreadsheetRef} >
                    <SheetsDirective>
                        <SheetDirective name="Car Sales Report">
                            <RangesDirective>
                                <RangeDirective dataSource={data}></RangeDirective>
                            </RangesDirective>
                            <RowsDirective>
                                <RowDirective index={3} isReadOnly={true}></RowDirective>
                                <RowDirective index={4}>
                                    <CellsDirective>
                                        <CellDirective index={5} isReadOnly={true}></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                            </RowsDirective>
                            <ColumnsDirective>
                                <ColumnDirective width={180}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective isReadOnly={true} 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 />);
export let data = [
    {
        "Customer Name": "Romona Heaslip",
        "Model": "Taurus",
        "Color": "Aquamarine",
        "Payment Mode": "Debit Card",
        "Delivery Date": "07/11/2015",
        "Amount": "8529.22"
    },
    {
        "Customer Name": "Clare Batterton",
        "Model": "Sparrow",
        "Color": "Pink",
        "Payment Mode": "Cash On Delivery",
        "Delivery Date": "7/13/2016",
        "Amount": "17866.19"
    },
    {
        "Customer Name": "Eamon Traise",
        "Model": "Grand Cherokee",
        "Color": "Blue",
        "Payment Mode": "Net Banking",
        "Delivery Date": "09/04/2015",
        "Amount": "13853.09"
    },
    {
        "Customer Name": "Julius Gorner",
        "Model": "GTO",
        "Color": "Aquamarine",
        "Payment Mode": "Credit Card",
        "Delivery Date": "12/15/2017",
        "Amount": "2338.74"
    },
    {
        "Customer Name": "Jenna Schoolfield",
        "Model": "LX",
        "Color": "Yellow",
        "Payment Mode": "Credit Card",
        "Delivery Date": "10/08/2014",
        "Amount": "9578.45"
    },
    {
        "Customer Name": "Marylynne Harring",
        "Model": "Catera",
        "Color": "Green",
        "Payment Mode": "Cash On Delivery",
        "Delivery Date": "7/01/2017",
        "Amount": "19141.62"
    },
    {
        "Customer Name": "Vilhelmina Leipelt",
        "Model": "7 Series",
        "Color": "Goldenrod",
        "Payment Mode": "Credit Card",
        "Delivery Date": "12/20/2015",
        "Amount": "6543.30"
    },
    {
        "Customer Name": "Barby Heisler",
        "Model": "Corvette",
        "Color": "Red",
        "Payment Mode": "Credit Card",
        "Delivery Date": "11/24/2014",
        "Amount": "13035.06"
    },
    {
        "Customer Name": "Karyn Boik",
        "Model": "Regal",
        "Color": "Indigo",
        "Payment Mode": "Debit Card",
        "Delivery Date": "05/12/2014",
        "Amount": "18488.80"
    },
    {
        "Customer Name": "Jeanette Pamplin",
        "Model": "S4",
        "Color": "Fuscia",
        "Payment Mode": "Net Banking",
        "Delivery Date": "12/30/2014",
        "Amount": "12317.04"
    },
    {
        "Customer Name": "Cristi Espinos",
        "Model": "TL",
        "Color": "Aquamarine",
        "Payment Mode": "Credit Card",
        "Delivery Date": "12/18/2013",
        "Amount": "6230.13"
    },
    {
        "Customer Name": "Issy Humm",
        "Model": "Club Wagon",
        "Color": "Pink",
        "Payment Mode": "Cash On Delivery",
        "Delivery Date": "02/02/2015",
        "Amount": "9709.49"
    },
    {
        "Customer Name": "Tuesday Fautly",
        "Model": "V8 Vantage",
        "Color": "Crimson",
        "Payment Mode": "Debit Card",
        "Delivery Date": "11/19/2014",
        "Amount": "9766.10"
    },
    {
        "Customer Name": "Rosemaria Thomann",
        "Model": "Caravan",
        "Color": "Violet",
        "Payment Mode": "Net Banking",
        "Delivery Date": "02/08/2014",
        "Amount": "7685.49"
    },
    {
        "Customer Name": "Lyell Fuentez",
        "Model": "Bravada",
        "Color": "Violet",
        "Payment Mode": "Debit Card",
        "Delivery Date": "08/05/2016",
        "Amount": "18012.45"
    },
    {
        "Customer Name": "Raynell Layne",
        "Model": "Colorado",
        "Color": "Pink",
        "Payment Mode": "Credit Card",
        "Delivery Date": "05/30/2016",
        "Amount": "2785.49"
    },
    {
        "Customer Name": "Raye Whines",
        "Model": "4Runner",
        "Color": "Red",
        "Payment Mode": "Debit Card",
        "Delivery Date": "12/10/2016",
        "Amount": "9967.74"
    },
    {
        "Customer Name": "Virgina Aharoni",
        "Model": "TSX",
        "Color": "Pink",
        "Payment Mode": "Cash On Delivery",
        "Delivery Date": "10/23/2014",
        "Amount": "5584.33"
    },
    {
        "Customer Name": "Peta Cheshir",
        "Model": "Pathfinder",
        "Color": "Red",
        "Payment Mode": "Net Banking",
        "Delivery Date": "12/24/2015",
        "Amount": "5286.53"
    },
    {
        "Customer Name": "Jule Urion",
        "Model": "Charger",
        "Color": "Violet",
        "Payment Mode": "Debit Card",
        "Delivery Date": "11/20/2013",
        "Amount": "13511.91"
    },
    {
        "Customer Name": "Lew Gilyatt",
        "Model": "Bonneville",
        "Color": "Crimson",
        "Payment Mode": "Credit Card",
        "Delivery Date": "11/19/2013",
        "Amount": "6498.19"
    },
    {
        "Customer Name": "Jobey Fortun",
        "Model": "B-Series",
        "Color": "Blue",
        "Payment Mode": "Net Banking",
        "Delivery Date": "10/30/2014",
        "Amount": "10359.67"
    },
    {
        "Customer Name": "Blondie Crump",
        "Model": "Voyager",
        "Color": "Turquoise",
        "Payment Mode": "Credit Card",
        "Delivery Date": "04/06/2018",
        "Amount": "8118.39"
    },
    {
        "Customer Name": "Florentia Binns",
        "Model": "Grand Prix",
        "Color": "Orange",
        "Payment Mode": "Cash On Delivery",
        "Delivery Date": "10/13/2016",
        "Amount": "10204.37"
    },
    {
        "Customer Name": "Jaquelin Galtone",
        "Model": "Sunbird",
        "Color": "Red",
        "Payment Mode": "Net Banking",
        "Delivery Date": "10/22/2013",
        "Amount": "6528.06"
    },
    {
        "Customer Name": "Hakeem Easseby",
        "Model": "Mirage",
        "Color": "Crimson",
        "Payment Mode": "Debit Card",
        "Delivery Date": "9/12/2014",
        "Amount": "5619.25"
    },
    {
        "Customer Name": "Nickolaus Gidman",
        "Model": "XK",
        "Color": "Orange",
        "Payment Mode": "Debit Card",
        "Delivery Date": "05/12/2016",
        "Amount": "5091.43"
    },
    {
        "Customer Name": "Jenine Iglesia",
        "Model": "Accord",
        "Color": "Orange",
        "Payment Mode": "Debit Card",
        "Delivery Date": "09/03/2018",
        "Amount": "14566.08"
    },
    {
        "Customer Name": "Fax Witherspoon",
        "Model": "Range Rover Sport",
        "Color": "Orange",
        "Payment Mode": "Credit Card",
        "Delivery Date": "2/22/2018",
        "Amount": "5284.87"
    }
];
export let data: Object[] = [
    {
        "Customer Name": "Romona Heaslip",
        "Model": "Taurus",
        "Color": "Aquamarine",
        "Payment Mode": "Debit Card",
        "Delivery Date": "07/11/2015",
        "Amount": "8529.22"
    },
    {
        "Customer Name": "Clare Batterton",
        "Model": "Sparrow",
        "Color": "Pink",
        "Payment Mode": "Cash On Delivery",
        "Delivery Date": "7/13/2016",
        "Amount": "17866.19"
    },
    {
        "Customer Name": "Eamon Traise",
        "Model": "Grand Cherokee",
        "Color": "Blue",
        "Payment Mode": "Net Banking",
        "Delivery Date": "09/04/2015",
        "Amount": "13853.09"
    },
    {
        "Customer Name": "Julius Gorner",
        "Model": "GTO",
        "Color": "Aquamarine",
        "Payment Mode": "Credit Card",
        "Delivery Date": "12/15/2017",
        "Amount": "2338.74"
    },
    {
        "Customer Name": "Jenna Schoolfield",
        "Model": "LX",
        "Color": "Yellow",
        "Payment Mode": "Credit Card",
        "Delivery Date": "10/08/2014",
        "Amount": "9578.45"
    },
    {
        "Customer Name": "Marylynne Harring",
        "Model": "Catera",
        "Color": "Green",
        "Payment Mode": "Cash On Delivery",
        "Delivery Date": "7/01/2017",
        "Amount": "19141.62"
    },
    {
        "Customer Name": "Vilhelmina Leipelt",
        "Model": "7 Series",
        "Color": "Goldenrod",
        "Payment Mode": "Credit Card",
        "Delivery Date": "12/20/2015",
        "Amount": "6543.30"
    },
    {
        "Customer Name": "Barby Heisler",
        "Model": "Corvette",
        "Color": "Red",
        "Payment Mode": "Credit Card",
        "Delivery Date": "11/24/2014",
        "Amount": "13035.06"
    },
    {
        "Customer Name": "Karyn Boik",
        "Model": "Regal",
        "Color": "Indigo",
        "Payment Mode": "Debit Card",
        "Delivery Date": "05/12/2014",
        "Amount": "18488.80"
    },
    {
        "Customer Name": "Jeanette Pamplin",
        "Model": "S4",
        "Color": "Fuscia",
        "Payment Mode": "Net Banking",
        "Delivery Date": "12/30/2014",
        "Amount": "12317.04"
    },
    {
        "Customer Name": "Cristi Espinos",
        "Model": "TL",
        "Color": "Aquamarine",
        "Payment Mode": "Credit Card",
        "Delivery Date": "12/18/2013",
        "Amount": "6230.13"
    },
    {
        "Customer Name": "Issy Humm",
        "Model": "Club Wagon",
        "Color": "Pink",
        "Payment Mode": "Cash On Delivery",
        "Delivery Date": "02/02/2015",
        "Amount": "9709.49"
    },
    {
        "Customer Name": "Tuesday Fautly",
        "Model": "V8 Vantage",
        "Color": "Crimson",
        "Payment Mode": "Debit Card",
        "Delivery Date": "11/19/2014",
        "Amount": "9766.10"
    },
    {
        "Customer Name": "Rosemaria Thomann",
        "Model": "Caravan",
        "Color": "Violet",
        "Payment Mode": "Net Banking",
        "Delivery Date": "02/08/2014",
        "Amount": "7685.49"
    },
    {
        "Customer Name": "Lyell Fuentez",
        "Model": "Bravada",
        "Color": "Violet",
        "Payment Mode": "Debit Card",
        "Delivery Date": "08/05/2016",
        "Amount": "18012.45"
    },
    {
        "Customer Name": "Raynell Layne",
        "Model": "Colorado",
        "Color": "Pink",
        "Payment Mode": "Credit Card",
        "Delivery Date": "05/30/2016",
        "Amount": "2785.49"
    },
    {
        "Customer Name": "Raye Whines",
        "Model": "4Runner",
        "Color": "Red",
        "Payment Mode": "Debit Card",
        "Delivery Date": "12/10/2016",
        "Amount": "9967.74"
    },
    {
        "Customer Name": "Virgina Aharoni",
        "Model": "TSX",
        "Color": "Pink",
        "Payment Mode": "Cash On Delivery",
        "Delivery Date": "10/23/2014",
        "Amount": "5584.33"
    },
    {
        "Customer Name": "Peta Cheshir",
        "Model": "Pathfinder",
        "Color": "Red",
        "Payment Mode": "Net Banking",
        "Delivery Date": "12/24/2015",
        "Amount": "5286.53"
    },
    {
        "Customer Name": "Jule Urion",
        "Model": "Charger",
        "Color": "Violet",
        "Payment Mode": "Debit Card",
        "Delivery Date": "11/20/2013",
        "Amount": "13511.91"
    },
    {
        "Customer Name": "Lew Gilyatt",
        "Model": "Bonneville",
        "Color": "Crimson",
        "Payment Mode": "Credit Card",
        "Delivery Date": "11/19/2013",
        "Amount": "6498.19"
    },
    {
        "Customer Name": "Jobey Fortun",
        "Model": "B-Series",
        "Color": "Blue",
        "Payment Mode": "Net Banking",
        "Delivery Date": "10/30/2014",
        "Amount": "10359.67"
    },
    {
        "Customer Name": "Blondie Crump",
        "Model": "Voyager",
        "Color": "Turquoise",
        "Payment Mode": "Credit Card",
        "Delivery Date": "04/06/2018",
        "Amount": "8118.39"
    },
    {
        "Customer Name": "Florentia Binns",
        "Model": "Grand Prix",
        "Color": "Orange",
        "Payment Mode": "Cash On Delivery",
        "Delivery Date": "10/13/2016",
        "Amount": "10204.37"
    },
    {
        "Customer Name": "Jaquelin Galtone",
        "Model": "Sunbird",
        "Color": "Red",
        "Payment Mode": "Net Banking",
        "Delivery Date": "10/22/2013",
        "Amount": "6528.06"
    },
    {
        "Customer Name": "Hakeem Easseby",
        "Model": "Mirage",
        "Color": "Crimson",
        "Payment Mode": "Debit Card",
        "Delivery Date": "9/12/2014",
        "Amount": "5619.25"
    },
    {
        "Customer Name": "Nickolaus Gidman",
        "Model": "XK",
        "Color": "Orange",
        "Payment Mode": "Debit Card",
        "Delivery Date": "05/12/2016",
        "Amount": "5091.43"
    },
    {
        "Customer Name": "Jenine Iglesia",
        "Model": "Accord",
        "Color": "Orange",
        "Payment Mode": "Debit Card",
        "Delivery Date": "09/03/2018",
        "Amount": "14566.08"
    },
    {
        "Customer Name": "Fax Witherspoon",
        "Model": "Range Rover Sport",
        "Color": "Orange",
        "Payment Mode": "Credit Card",
        "Delivery Date": "2/22/2018",
        "Amount": "5284.87"
    }
];

Protect Workbook

Protect workbook feature helps you to protect the workbook so that users cannot insert, delete, rename, hide the sheets in the spreadsheet. You can use the password property to protect workbook with password. You can use the isProtected property to protect or unprotect the workbook without the password.

The default value for isProtected property is false.

User Interface:

In the active Spreadsheet, you can protect the worksheet by selecting the Data tab in the Ribbon toolbar and choosing the Protect Workbook item. Then, enter the password and confirm it and click on OK.

The following example shows Protect Workbook by using the isProtected property in the Spreadsheet control.

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() {
    return (
        <SpreadsheetComponent isProtected={true}>
            <SheetsDirective>
                <SheetDirective>
                    <RangesDirective>
                        <RangeDirective dataSource={data}></RangeDirective>
                    </RangesDirective>
                    <ColumnsDirective>
                        <ColumnDirective width={100}></ColumnDirective>
                        <ColumnDirective width={110}></ColumnDirective>
                        <ColumnDirective width={100}></ColumnDirective>
                        <ColumnDirective width={180}></ColumnDirective>
                        <ColumnDirective width={130}></ColumnDirective>
                        <ColumnDirective width={130}></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() {
    return (
        <SpreadsheetComponent isProtected={true}>
            <SheetsDirective>
                <SheetDirective>
                    <RangesDirective>
                        <RangeDirective dataSource={data}></RangeDirective>
                    </RangesDirective>
                    <ColumnsDirective>
                        <ColumnDirective width={100}></ColumnDirective>
                        <ColumnDirective width={110}></ColumnDirective>
                        <ColumnDirective width={100}></ColumnDirective>
                        <ColumnDirective width={180}></ColumnDirective>
                        <ColumnDirective width={130}></ColumnDirective>
                        <ColumnDirective width={130}></ColumnDirective>
                    </ColumnsDirective>
                </SheetDirective>
            </SheetsDirective>
        </SpreadsheetComponent>
    );
};
export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);
/**
 * Default data source
 */
export let data = [{
        OrderID: 10248,
        CustomerID: 'VINET',
        EmployeeID: 5,
        ShipName: 'Vins et alcools Chevalier',
        ShipCity: 'Reims',
        ShipAddress: '59 rue de lAbbaye'
    },
    {
        OrderID: 10249,
        CustomerID: 'TOMSP',
        EmployeeID: 6,
        ShipName: 'Toms Spezialitäten',
        ShipCity: 'Münster',
        ShipAddress: 'Luisenstr. 48'
    },
    {
        OrderID: 10250,
        CustomerID: 'HANAR',
        EmployeeID: 4,
        ShipName: 'Hanari Carnes',
        ShipCity: 'Rio de Janeiro',
        ShipAddress: 'Rua do Paço, 67'
    },
    {
        OrderID: 10251,
        CustomerID: 'VICTE',
        EmployeeID: 3,
        ShipName: 'Victuailles en stock',
        ShipCity: 'Lyon',
        ShipAddress: '2, rue du Commerce'
    },
    {
        OrderID: 10252,
        CustomerID: 'SUPRD',
        EmployeeID: 4,
        ShipName: 'Suprêmes délices',
        ShipCity: 'Charleroi',
        ShipAddress: 'Boulevard Tirou, 255'
    }];
/**
 * Default data source
 */
export let data: Object[]  = [{
  OrderID: 10248,
  CustomerID: 'VINET',
  EmployeeID: 5,
  ShipName: 'Vins et alcools Chevalier',
  ShipCity: 'Reims',
  ShipAddress: '59 rue de lAbbaye'
},
{
  OrderID: 10249,
  CustomerID: 'TOMSP',
  EmployeeID: 6,
  ShipName: 'Toms Spezialitäten',
  ShipCity: 'Münster',
  ShipAddress: 'Luisenstr. 48'
},
{
  OrderID: 10250,
  CustomerID: 'HANAR',
  EmployeeID: 4,
  ShipName: 'Hanari Carnes',
  ShipCity: 'Rio de Janeiro',
  ShipAddress: 'Rua do Paço, 67'
},
{
  OrderID: 10251,
  CustomerID: 'VICTE',
  EmployeeID: 3,
  ShipName: 'Victuailles en stock',
  ShipCity: 'Lyon',
  ShipAddress: '2, rue du Commerce'
},
{
  OrderID: 10252,
  CustomerID: 'SUPRD',
  EmployeeID: 4,
  ShipName: 'Suprêmes délices',
  ShipCity: 'Charleroi',
  ShipAddress: 'Boulevard Tirou, 255'
}];

The following example shows Protect Workbook by using the password property in the Spreadsheet control. To unprotect the workbook, click the unprotect workbook button in the data tab and provide the password as syncfusion in the dialog box.

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() {
    return (
        <SpreadsheetComponent password='syncfusion' >
            <SheetsDirective>
                <SheetDirective>
                    <RangesDirective>
                        <RangeDirective dataSource={data}></RangeDirective>
                    </RangesDirective>
                    <ColumnsDirective>
                        <ColumnDirective width={100}></ColumnDirective>
                        <ColumnDirective width={110}></ColumnDirective>
                        <ColumnDirective width={100}></ColumnDirective>
                        <ColumnDirective width={180}></ColumnDirective>
                        <ColumnDirective width={130}></ColumnDirective>
                        <ColumnDirective width={130}></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() {
    return (
        <SpreadsheetComponent password='syncfusion' >
            <SheetsDirective>
                <SheetDirective>
                    <RangesDirective>
                        <RangeDirective dataSource={data}></RangeDirective>
                    </RangesDirective>
                    <ColumnsDirective>
                        <ColumnDirective width={100}></ColumnDirective>
                        <ColumnDirective width={110}></ColumnDirective>
                        <ColumnDirective width={100}></ColumnDirective>
                        <ColumnDirective width={180}></ColumnDirective>
                        <ColumnDirective width={130}></ColumnDirective>
                        <ColumnDirective width={130}></ColumnDirective>
                    </ColumnsDirective>
                </SheetDirective>
            </SheetsDirective>
        </SpreadsheetComponent>
    );
};
export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);
/**
 * Default data source
 */
export let data = [{
        OrderID: 10248,
        CustomerID: 'VINET',
        EmployeeID: 5,
        ShipName: 'Vins et alcools Chevalier',
        ShipCity: 'Reims',
        ShipAddress: '59 rue de lAbbaye'
    },
    {
        OrderID: 10249,
        CustomerID: 'TOMSP',
        EmployeeID: 6,
        ShipName: 'Toms Spezialitäten',
        ShipCity: 'Münster',
        ShipAddress: 'Luisenstr. 48'
    },
    {
        OrderID: 10250,
        CustomerID: 'HANAR',
        EmployeeID: 4,
        ShipName: 'Hanari Carnes',
        ShipCity: 'Rio de Janeiro',
        ShipAddress: 'Rua do Paço, 67'
    },
    {
        OrderID: 10251,
        CustomerID: 'VICTE',
        EmployeeID: 3,
        ShipName: 'Victuailles en stock',
        ShipCity: 'Lyon',
        ShipAddress: '2, rue du Commerce'
    },
    {
        OrderID: 10252,
        CustomerID: 'SUPRD',
        EmployeeID: 4,
        ShipName: 'Suprêmes délices',
        ShipCity: 'Charleroi',
        ShipAddress: 'Boulevard Tirou, 255'
    }];
/**
 * Default data source
 */
export let data: Object[]  = [{
  OrderID: 10248,
  CustomerID: 'VINET',
  EmployeeID: 5,
  ShipName: 'Vins et alcools Chevalier',
  ShipCity: 'Reims',
  ShipAddress: '59 rue de lAbbaye'
},
{
  OrderID: 10249,
  CustomerID: 'TOMSP',
  EmployeeID: 6,
  ShipName: 'Toms Spezialitäten',
  ShipCity: 'Münster',
  ShipAddress: 'Luisenstr. 48'
},
{
  OrderID: 10250,
  CustomerID: 'HANAR',
  EmployeeID: 4,
  ShipName: 'Hanari Carnes',
  ShipCity: 'Rio de Janeiro',
  ShipAddress: 'Rua do Paço, 67'
},
{
  OrderID: 10251,
  CustomerID: 'VICTE',
  EmployeeID: 3,
  ShipName: 'Victuailles en stock',
  ShipCity: 'Lyon',
  ShipAddress: '2, rue du Commerce'
},
{
  OrderID: 10252,
  CustomerID: 'SUPRD',
  EmployeeID: 4,
  ShipName: 'Suprêmes délices',
  ShipCity: 'Charleroi',
  ShipAddress: 'Boulevard Tirou, 255'
}];

Unprotect Workbook

Unprotect Workbook is used to enable the insert, delete, rename, move, copy, hide or unhide sheets feature in the spreadsheet.

User Interface:

In the active Spreadsheet, the workbook Unprotection can be done in any of the following ways:

  • Select the Unprotect Workbook item in the Ribbon toolbar under the Data Tab and provide the valid password in the dialog box.

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.

See Also