Pagination, Searching, and Filtering
By the end of this lesson, you'll be able to:
- Compare client-side and server-side pagination approaches
- Implement a simple search/filter pattern above a datatable
- Recognize when server-side filtering via Apex becomes necessary
Prerequisites: "Sorting, Row Actions, and Inline Editing"
Client-Side vs. Server-Side Pagination
- Client-side: all matching data is loaded once, and pagination just slices which portion is displayed. Simple to implement, but doesn't scale — loading thousands of records up front is wasteful and slow.
- Server-side: each page is fetched from Apex on demand (a "load more" or page-number pattern, using
LIMIT/OFFSETin SOQL). More code, but scales to any dataset size — the right choice once record counts grow past what's reasonable to load all at once.
A Simple Client-Side Search/Filter Pattern
searchTerm = '';
handleSearchChange(event) {
this.searchTerm = event.target.value;
}
get filteredAccounts() {
if (!this.searchTerm) {
return this.accounts;
}
const term = this.searchTerm.toLowerCase();
return this.accounts.filter(account => account.name.toLowerCase().includes(term));
}<lightning-input label="Search Accounts" onchange={handleSearchChange}></lightning-input>
<lightning-datatable data={filteredAccounts} columns={columns} key-field="id"></lightning-datatable>A getter (Module 3) recomputes the filtered list reactively whenever searchTerm or accounts changes — a filteredAccounts property, not the raw accounts, is what's bound to the datatable's data.
When to Move Filtering to Apex
Client-side filtering works well once all the candidate data is already loaded — but if the full dataset is too large to load up front, the search itself needs to happen server-side, via a cacheable=true Apex method (Module 7) taking the search term as a parameter and returning only matching records.
Exercise
Write a filteredContacts getter that filters this.contacts by a searchTerm property, matching against the contact's email field.
Show hint
Follow the same pattern as the Account example.
Exercise
Challenge: explain, as a comment, why client-side filtering becomes a poor choice once an org has hundreds of thousands of Accounts.
Show hint
Think about what has to happen before filtering can even begin.
Pagination, Searching, and Filtering Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
Client-side pagination and filtering are simple and fast for small datasets, but server-side approaches — querying only what's needed — become necessary as data grows.