Technology has always been a bridge, but today, it feels more like a mirror. With the rapid rise of AI , we are seeing things enter our lives and leave them at a pace we can barely track. To understand where this is going, we first have to understand how technology actually impacts the core of who we are. The Survivalist vs. The Ego Our minds are biologically wired for one thing: survival . We are designed to handle the worst-case scenario, an ancient instinct gifted to us by nature. We consider ourselves conscious decision-makers, but a critical question remains: Who is really making the call?
Introduction:
In this blog post, we will explore how to build a Lightning Web Component (LWC) that includes a dynamic datatable. We will focus on implementing a feature where selected rows persist even when filtering the search results. By the end of this tutorial, you will have a better understanding of how to create a fully functional and dynamic LWC datatable.
Prerequisites:
To follow along with this tutorial, you should have a basic understanding of Lightning Web Components (LWC) and have a Salesforce Developer Edition or any Salesforce environment with the necessary permissions to create and modify Lightning components.
Step 1: Setting up the LWC Component
First, let's create a new LWC component by navigating to the appropriate directory in your Salesforce DX project. Use the following command in the terminal:
sfdx force:lightning:component:create -n datatableWithSelection
This command will create a new LWC component with the name "datatableWithSelection" in your project's default LWC directory.
Step 2: Implementing the LWC DataTable
Open the newly created LWC component in your preferred code editor. Inside the HTML file (datatableWithSelection), replace the default code with the following:
<template>
<lightning-card title="Data Table with Selected Rows Persistence">
<div class="slds-m-around_medium">
<lightning-input type="text" label="Filter" onchange={handleFilterChange}></lightning-input>
<lightning-datatable
key-field="id"
data={filteredData}
columns={columns}
onrowselection={handleRowSelection}
selected-rows={selectedRows}
></lightning-datatable>
</div>
</lightning-card>
</template>
Here, we have created a basic structure for our datatable component. We have included a lightning-input element for filtering, a lightning-datatable to display the data, and a lightning-card for overall styling.
Step 3: Defining JavaScript Functions and Variables
Switch to the JavaScript file (datatableWithSelection.js) and replace the default code with the following:
import { LightningElement, wire } from 'lwc';
import fetchData from '@salesforce/apex/DataTableController.fetchData';
export default class DatatableWithSelection extends LightningElement {
filterText = '';
data = [];
selectedRows = [];
columns = [
{ label: 'Name', fieldName: 'Name' },
{ label: 'Email', fieldName: 'Email' },
{ label: 'Phone', fieldName: 'Phone' }
];
@wire(fetchData)
wiredData({ error, data }) {
if (data) {
this.data = data;
}
// Handle error if necessary
}
get filteredData() {
return this.data.filter((row) => {
return row.Name.toLowerCase().includes(this.filterText.toLowerCase());
});
}
handleFilterChange(event) {
this.filterText = event.target.value;
}
handleRowSelection(event) {
this.selectedRows = event.detail.selectedRows;
}
}
In the above code, we import the fetchData Apex method to retrieve the data for our datatable. You will need to create an Apex class and method named DataTableController.fetchData to fetch the data from your Salesforce org. The filteredData getter filters the data based on the filter text entered in the input field. The handleFilterChange function updates the filter text whenever it changes. Lastly, the handleRowSelection function updates the selected rows array whenever a row is selected or deselected.
Step 4: Styling the Component (Optional)
If you want to add custom styles to your component, you can modify the CSS file (datatableWithSelection.css) as per your requirements.
Step 5: Using the Component
To use your newly created LWC component, add it to a Lightning page or any other appropriate location in your Salesforce org. For example, you can add it to a Lightning App Builder page by dragging and dropping the component into a desired location.
Conclusion:
Congratulations! You have successfully built a dynamic LWC datatable that allows selected rows to persist even when filtering the search results. By following this tutorial, you have learned how to create a functional and reusable component to enhance user experience when working with large datasets in Salesforce.
Feel free to customize this component further based on your specific requirements, such as adding pagination, sorting, or additional columns. Happy coding!