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>

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];
    
}

}