Here's an example of how you can perform a search in a Lightning Web Component (LWC) using a table:
HTML file (searchTable.html):
<template>
<lightning-card title="Search Table">
<div class="slds-m-around_medium">
<lightning-input label="Search" value={searchTerm} onchange={handleSearch}></lightning-input>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<th class="slds-text-title_caps">Name</th>
<th class="slds-text-title_caps">Email</th>
</tr>
</thead>
<tbody>
<template for:each={filteredData} for:item="record">
<tr key={record.Id}>
<td>{record.Name}</td>
<td>{record.Email}</td>
</tr>
</template>
</tbody>
</table>
</div>
</lightning-card>
</template>
JavaScript file (searchTable.js):
import { LightningElement, track } from 'lwc';
export default class SearchTable extends LightningElement {
@track searchTerm = '';
@track data = [
{ Id: '1', Name: 'John Doe', Email: 'john.doe@example.com' },
{ Id: '2', Name: 'Jane Smith', Email: 'jane.smith@example.com' },
{ Id: '3', Name: 'Alex Johnson', Email: 'alex.johnson@example.com' },
// Add more data as needed
];
get filteredData() {
if (this.searchTerm) {
return this.data.filter(record => {
return record.Name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
record.Email.toLowerCase().includes(this.searchTerm.toLowerCase());
});
}
return this.data;
}
handleSearch(event) {
this.searchTerm = event.target.value;
}
}
CSS file (searchTable.css):
.slds-m-around_medium {
margin: 1rem;
}
.slds-table {
width: 100%;
margin-bottom: 1rem;
}
.slds-text-title_caps {
text-transform: uppercase;
}
.slds-line-height_reset {
line-height: 1.2rem;
}
This example demonstrates a simple search functionality in an LWC. The component consists of a Lightning Card containing an input field for searching and a table to display the filtered results. The filteredData property returns the filtered data based on the search term entered by the user. The handleSearch method updates the searchTerm property as the user types in the input field. The table dynamically updates based on the filtered results.
Remember to include the necessary Lightning Web Component files (searchTable searchTable.js, and searchTable.css) in your Salesforce project and add the component to the appropriate Lightning page or app for it to be visible and functional.
Please note that this is a basic example, and you can customize and enhance it further based on your specific requirements.