How to filter Data in dataTable lwc based on the input in search bar?

Question

I am trying to enhance my LWC Skill, so I am trying to mimic the 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 a search bar owned by me by trying to build the whole thing from scratch. Now I am stuck on how to filter data of data table without sending the search key to the apex class below is my Html and JS file.

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

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

    }
}

Answer 1

You need a separate backing variable to store all the results, and then a separate variable for just the displayed values. Here's a playground I created that demonstrates this.

import { LightningElement } from 'lwc';

export default class App extends LightningElement {
    _allData = [
        { id: '1', name: 'Marc Benioff' },
        { id: '2', name: 'Bill Gates' },
        { id: '3', name: 'Shigeru Miyamoto' },
        { id: '4', name: 'Arnold Schwarzenegger'}
    ];
    data = [];
    columns = [
        { label: 'People I Have Heard Of', fieldName: 'name' }
    ];
    connectedCallback() {
        this.data = [...this._allData];
    }
    updateSearch(event) {
        var regex = new RegExp(event.target.value,'gi')
        this.data = this._allData.filter(
            row => regex.test(row.name)
        );
    }
}

---

<template>
    <lightning-input type="search" label="Search" onchange={updateSearch}>
    </lightning-input>
    <lightning-datatable data={data} columns={columns} key-field="id">
    </lightning-datatable>
</template>