You need to sign in to do that
Don't have an account?
Lucas Angeli
How to filter and display a value based on user input
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; } }
Try the Below Code Please Mark It As Best Answer If It Helps
Thank You!
Can you help me?