How to apply filters to a 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