Introduction:
In this blog post, we will explore how to implement dynamic functionality to keep selected rows in an LWC (Lightning Web Component) DataTable with pagination. By default, when paginating through the DataTable, the selected rows get reset, which can be inconvenient for users. However, with a few modifications to the code, we can ensure that the selected rows persist across pagination.
Prerequisites:
To follow along with this tutorial, you should have a basic understanding of LWC, JavaScript, and Salesforce development. It's also assumed that you have set up a working LWC project.
Step 1: Setting up the LWC Component
1. Create a new Lightning Web Component with the name "DataTableWithPagination" by using the Salesforce CLI or the Developer Console.
Step 2: HTML Markup
1. Open the HTML file (DataTableWithPagination) and replace the existing code with the following markup:
<template>
<lightning-card title="DataTable with Pagination">
<lightning-datatable
key-field="id"
data={data}
columns={columns}
selected-rows={selectedRows}
onrowselection={handleRowSelection}
></lightning-datatable>
<lightning-layout class="slds-p-top_medium">
<lightning-layout-item>
<lightning-button
label="Previous"
onclick={handlePrevious}
variant="brand"
disabled={disablePrevious}
></lightning-button>
</lightning-layout-item>
<lightning-layout-item>
<lightning-button
label="Next"
onclick={handleNext}
variant="brand"
disabled={disableNext}
></lightning-button>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
Step 3: JavaScript Logic
1. Open the JavaScript file (DataTableWithPagination.js) and add the following code:
import { LightningElement, track, wire } from 'lwc';
export default class DataTableWithPagination extends LightningElement {
@track data = []; // Data for the table
@track columns = []; // Columns for the table
@track selectedRows = []; // Selected rows
@track disablePrevious = true; // Disable Previous button initially
@track disableNext = false; // Enable Next button initially
@track pageNumber = 1; // Current page number
@track pageSize = 10; // Number of records per page
@track totalRecords = 0; // Total number of records
@track totalPages = 0; // Total number of pages
// Fetch data for the table
fetchData() {
// Implement your data fetching logic here
// Update this.data, this.columns, this.totalRecords, this.totalPages based on the fetched data
}
// Handle row selection
handleRowSelection(event) {
this.selectedRows = event.detail.selectedRows;
}
// Handle Previous button click
handlePrevious() {
this.pageNumber--;
this.updatePagination();
}
// Handle Next button click
handleNext() {
this.pageNumber++;
this.updatePagination();
}
// Update pagination based on current page number
updatePagination() {
this.disablePrevious = this.pageNumber === 1;
this.disableNext = this.pageNumber === this.totalPages;
this.fetchData();
}
// Lifecycle hook - called when the component is inserted into the DOM
connectedCallback() {
this.fetchData();
}
}
Step 4: Styling (Optional)
You can add CSS styling to the component to enhance the visual appearance. Feel free to customize the styles based on your preference.
Conclusion:
In this blog post, we learned how to implement dynamic functionality to keep selected rows in an LWC DataTable with pagination. By updating the code and maintaining the selected rows state during pagination, we provide a seamless user experience. Remember to customize the data fetching logic (in the fetchData() method) to retrieve the data from your data source.
By implementing this code, you can enhance the usability of your LWC DataTable by preserving user selections even when navigating through pages.