В этой статье блога мы рассмотрим различные методы реализации таблицы данных Lightning с функцией поиска в веб-компонентах Lightning (LWC). Мы предоставим примеры кода для каждого метода, чтобы помочь вам понять и реализовать их в ваших проектах LWC. Итак, приступим!

Метод 1: фильтрация на стороне клиента
При этом подходе мы будем фильтровать данные на стороне клиента с помощью JavaScript. Мы привяжем поле ввода поиска к переменной и будем использовать его для фильтрации строк данных на основе поискового запроса пользователя. Вот пример того, как этого можно добиться:

<template>
    <lightning-input type="text" label="Search" onchange={handleSearch}></lightning-input>
    <lightning-datatable data={filteredData} columns={columns}></lightning-datatable>
</template>

import { LightningElement, wire } from 'lwc';
import getData from '@salesforce/apex/Controller.getData';
export default class MyComponent extends LightningElement {
    searchKey = '';
    data = [];
    columns = [
        // Define your columns here
    ];
    @wire(getData)
    wiredData({ error, data }) {
        if (data) {
            this.data = data;
        }
    }
    get filteredData() {
        return this.data.filter(row => row.Name.toLowerCase().includes(this.searchKey.toLowerCase()));
    }
    handleSearch(event) {
        this.searchKey = event.target.value;
    }
}

Метод 2: фильтрация на стороне сервера
Если у вас большой набор данных, для повышения производительности рекомендуется выполнить фильтрацию на стороне сервера. Вот пример того, как можно добиться фильтрации на стороне сервера:

<template>
    <lightning-input type="text" label="Search" onchange={handleSearch}></lightning-input>
    <lightning-datatable data={data} columns={columns}></lightning-datatable>
</template>

import { LightningElement, wire } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import getData from '@salesforce/apex/Controller.getData';
export default class MyComponent extends LightningElement {
    searchKey = '';
    data = [];
    columns = [
        // Define your columns here
    ];
    @wire(getData, { searchKey: '$searchKey' })
    wiredData(result) {
        const { data, error } = result;
        if (data) {
            this.data = data;
        }
    }
    handleSearch(event) {
        this.searchKey = event.target.value;
        // Refresh the wired getData method to invoke server-side filtering
        refreshApex(this.wiredData);
    }
}

В этой статье мы рассмотрели два метода реализации таблицы данных Lightning с функцией поиска в LWC. Первый метод выполняет фильтрацию на стороне клиента, а второй метод использует фильтрацию на стороне сервера для повышения производительности, особенно с большими наборами данных. Следуя этим примерам, вы сможете легко интегрировать функции поиска в свои проекты LWC.