Hello, I have a datatable with data from a JSON I have parsed, I need to implement a search bar where the user will input a letter and only the values in the table containing that letter will be displayed, can somebody help me? I'm kinda lost
 

<lightning-input type="search" placeholder={placeholder} value={searchKey} onchange={handleSearch}>
      </lightning-input>

          <lightning-datatable key-field="id" 
                                data={mealNames} 
                                columns={columns} 
                                sorted-by={sortBy}
                                sorted-direction={sortDirection}
                                onsort={handleSort}
                                hide-checkbox-column="true"
                                default-sort-direction={defaultSortDirection}>
          </lightning-datatable>

 

import { api, track, wire, LightningElement } from 'lwc';
import getMealData from '@salesforce/apex/MealsRetriever.getMealData';

const columns =[
    {label: 'Meal ID', fieldName: 'idMeal', editable: false, sortable: true, hideDefaultActions: true},
    {label: 'Meal', fieldName: 'strMeal', editable: false, sortable: true, hideDefaultActions: true},
    {label: 'Category', fieldName: 'strCategory', editable: false, sortable: true, hideDefaultActions: true},
    {label: 'Meal Origin', fieldName: 'strArea', editable: false, sortable: true, hideDefaultActions: true},
    {label: 'How to prepare', fieldName: 'strInstructions', editable: false, sortable: true},
];

export default class DataTableWithSortingInLWC extends LightningElement {
    
    @track columns = columns;
    @track sortBy;
    @track sortDirection;
    @track mealNames;
    @api mealSpinner = false;
    @track searchKey;

    @wire(getMealData)
        mealDataResult(result){
            const {data, error} = result;
            if(data){
                this.mealNames = data;
                this.mealSpinner = true;
                this.error = undefined;
            } else if(error){
                this.mealNames = undefined;
                this.error = error;
            }
        }
    
    handleSearch(){
        getMealData(
            {searchKey: '$searchKey'}
        )
        .then(data =>{
            this.mealNames = data;
            this.error = undefined;
        })
        .catch(error =>{
            this.mealNames = undefined;
            this.error = error;
        })
    }

    handleSort(event){
        this.sortBy = event.detail.fieldName;
        this.sortDirection = event.detail.sortDirection;
        this.sortData(this.sortBy, this.sortDirection);
    }

    sortData(fieldname, direction) {
        let parseData = JSON.parse(JSON.stringify(this.mealNames));
        let keyValue = (a) => {
            return a[fieldname];
        };
        let isReverse = direction === 'asc' ? 1: -1;
        parseData.sort((x, y) => {
            x = keyValue(x) ? keyValue(x) : ''; 
            y = keyValue(y) ? keyValue(y) : '';
            return isReverse * ((x > y) - (y > x));
        });
        this.mealNames = parseData;
    }  
}

 

Hello, I have a datatable with data from a JSON I have parsed, I need to implement a search bar where the user will input a letter and only the values in the table containing that letter will be displayed, can somebody help me? I'm kinda lost
 

<lightning-input type="search" placeholder={placeholder} value={searchKey} onchange={handleSearch}>
      </lightning-input>

          <lightning-datatable key-field="id" 
                                data={mealNames} 
                                columns={columns} 
                                sorted-by={sortBy}
                                sorted-direction={sortDirection}
                                onsort={handleSort}
                                hide-checkbox-column="true"
                                default-sort-direction={defaultSortDirection}>
          </lightning-datatable>

 

import { api, track, wire, LightningElement } from 'lwc';
import getMealData from '@salesforce/apex/MealsRetriever.getMealData';

const columns =[
    {label: 'Meal ID', fieldName: 'idMeal', editable: false, sortable: true, hideDefaultActions: true},
    {label: 'Meal', fieldName: 'strMeal', editable: false, sortable: true, hideDefaultActions: true},
    {label: 'Category', fieldName: 'strCategory', editable: false, sortable: true, hideDefaultActions: true},
    {label: 'Meal Origin', fieldName: 'strArea', editable: false, sortable: true, hideDefaultActions: true},
    {label: 'How to prepare', fieldName: 'strInstructions', editable: false, sortable: true},
];

export default class DataTableWithSortingInLWC extends LightningElement {
    
    @track columns = columns;
    @track sortBy;
    @track sortDirection;
    @track mealNames;
    @api mealSpinner = false;
    @track searchKey;

    @wire(getMealData)
        mealDataResult(result){
            const {data, error} = result;
            if(data){
                this.mealNames = data;
                this.mealSpinner = true;
                this.error = undefined;
            } else if(error){
                this.mealNames = undefined;
                this.error = error;
            }
        }
    
    handleSearch(){
        getMealData(
            {searchKey: '$searchKey'}
        )
        .then(data =>{
            this.mealNames = data;
            this.error = undefined;
        })
        .catch(error =>{
            this.mealNames = undefined;
            this.error = error;
        })
    }

    handleSort(event){
        this.sortBy = event.detail.fieldName;
        this.sortDirection = event.detail.sortDirection;
        this.sortData(this.sortBy, this.sortDirection);
    }

    sortData(fieldname, direction) {
        let parseData = JSON.parse(JSON.stringify(this.mealNames));
        let keyValue = (a) => {
            return a[fieldname];
        };
        let isReverse = direction === 'asc' ? 1: -1;
        parseData.sort((x, y) => {
            x = keyValue(x) ? keyValue(x) : ''; 
            y = keyValue(y) ? keyValue(y) : '';
            return isReverse * ((x > y) - (y > x));
        });
        this.mealNames = parseData;
    }  
}