How to Apply Filters to Protected Sheet in React Spreadsheet?

This knowledge base article explains how to apply filters to a protected sheet in React Spreadsheet. When a sheet is protected in the Spreadsheet component, filtering cannot be applied through UI interaction, as the sheet protection prevents changes to the spreadsheet.

However, filters can still be applied programmatically to a protected sheet using the applyFilter method, as demonstrated in the example below.

[index.js]

import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective, RowsDirective, RowDirective, CellsDirective, CellDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { defaultData } from './data';

function Default() {
   let spreadsheet;
   const boldRight = { fontWeight: 'bold', textAlign: 'right' };
   const bold = { fontWeight: 'bold' };
   function onCreated() {
       spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
       spreadsheet.applyFilter([{ field: 'D', operator: 'equal', value: 'Credit Card' }], 'A1:F30');
   }
   return (<div className='control-pane'>
           <div className='control-section spreadsheet-control'>
               <SpreadsheetComponent openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open' saveUrl='https://services.syncfusion.com/react/production/api/spreadsheet/save' ref={(ssObj) => { spreadsheet = ssObj; }} created={onCreated.bind(this)}>
                   <SheetsDirective>
                       <SheetDirective name="Car Sales Report" isProtected={true}>
                           <RangesDirective>
                               <RangeDirective dataSource={defaultData}></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>
       </div>);
}
export default Default;

const root = createRoot(document.getElementById('sample'));
root.render(<Default />); 

Sample Link: https://stackblitz.com/edit/react-unkfzb-mfbc6k?file=index.js

Output:

For more information, please refer the UG link mentioned below.

UG link: https://ej2.syncfusion.com/react/documentation/spreadsheet/filter

Conclusion
I hope you enjoyed learning on how to apply filters to a protected sheet in React Spreadsheet.
You can refer to our React Spreadsheet feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Spreadsheet Example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!