I am trying to enhance my LWC Skill , so i am trying to mimic file object in SF. So file object in SF classic we have search criteria which is not available in Lightning. Hence I am trying to add search bar in owned by me by trying to build the whole thing from scratch. Now I am stuck how to filter data of data table without sending the search key to apex class below is my Html and JS file , if some one can help me it will be helpful Html <template> <lightning-layout multiple-rows=true> <lightning-layout-item size="12"> <lightning-card variant="narrow"> <div slot="title"> <h5>Files</h5> <h1><b>{chooseOptionName}</b></h1> <h5>{sizeofOptionList} items Sorted by Last Modified Date</h5> </div> <div slot ="actions" class="button"> <lightning-button label="Upload Files" onclick={handleUploadFiles} ></lightning-button> </div> </lightning-card> </lightning-layout-item> <lightning-layout-item size = "2"> <div class="options page-section page-right"> <span> <ul> <li><a onclick={handleOptionClick}>Owned by Me</a></li><br/> <li><a onclick={handleOptionClick}>Shared with Me</a></li><br/> <li><a onclick={handleOptionClick}>Recent</a></li><br/> <li><a onclick={handleOptionClick}>Following</a></li><br/> <li><a onclick={handleOptionClick}>Libraries</a></li><br/> </ul> </span> </div> </lightning-layout-item> <lightning-layout-item size="10"> <lightning-layout> <lightning-layout-item size="5" class="search"> <lightning-input id="search-01" type="search" onchange={handleSearch} onemptied={handleEmpty}></lightning-input> <lightning-button label="Search" variant="brand" onclick={handleSearchButton} ></lightning-button> </lightning-layout-item> </lightning-layout> <div class="options"> <lightning-datatable key-field="Id" data={contentDoc} columns={columns} hide-checkbox-column=true> </lightning-datatable> </div> </lightning-layout-item> </lightning-layout> </template> JS File export default class SearchFile extends LightningElement { @track chooseOptionName = 'Owned by Me'; @track sizeofOptionList; @track contentDoc = []; userId = Id; @track searchKey =''; columns = cols; handleSearch(event){ this.searchKey = event.target.value; if(this.searchKey === ''){ this.getFile(); } } handleSearchButton(){ if(this.contentDoc.length >0 && this.searchKey !=''){ console.log('this is search key',this.searchKey); let doc = this.filterObj(this.contentDoc,this.searchKey); console.log('This is Content doc',this.doc); } } filterObj(arrayOfObject,string){ Console.log('I am in filter',arrayOfObject); return arrayOfObject.filter(obj => Object.keys(obj).some(k => obj[k].toLowerCase().includes(string.toLowerCase()))); } handleEmpty(event){ console.log('Close box is clicked'); } handleOptionClick(event){ this.chooseOptionName = event.target.text; console.log(this.chooseOptionName); if(this.chooseOptionName.includes("Owned")){ this.getFile(); } } getFile(){ getFileOwned({userId : this.userId}) .then(result => { if(result.length >0){ const contentList = result; this.sizeofOptionList = result.length; console.log('This is Option List size ',this.sizeofOptionList); let ownerName; let titleUrl; this.contentDoc = contentList.map(row => { titleUrl = `/${row.Id}`; ownerName = row.Owner.Name; return {...row,titleUrl,ownerName} }); console.log(this.contentDoc); } }) .catch(error => { console.log(error); this.contentDoc = []; }); } get content (){ if(this.contentDoc){ return true; } } Apex Handler Class enter public with sharing class searchFileHandler { @AuraEnabled(cacheable = true) public static List<ContentDocument> getFileOwned(String userId){ return [SELECT Id,FileExtension,FileType,Title,Owner.Name,LastModifiedDate FROM ContentDocument ORDER BY LastModifiedDate desc]; } }