📋 Paginated Data Table – Reusable Salesforce LWC
A reusable Lightning Web Component built on lightning-datatable that adds server-side sorting, pagination controls, row selection, loading states, and complete backend independence.
📖 Project Overview
Paginated Data Table is a fully controlled Salesforce Lightning Web Component that extends the standard lightning-datatable with enterprise-ready pagination and sorting capabilities.
Unlike traditional datatable implementations, this component never performs data retrieval itself. Instead, it simply renders the current page of data and communicates user actions back to the parent component using custom events. This makes it reusable with Apex, REST APIs, GraphQL services, wired adapters, or even static datasets.
The repository also includes a complete demo implementation powered by Apex using secure SOQL queries with WITH SECURITY_ENFORCED.
✨ Features
| Feature | Description |
|---|---|
| Server-side Sorting | Fires sort events instead of sorting locally, allowing Apex or external services to perform sorting. |
| Pagination Controls | First, Previous, Next, Last navigation with configurable page size. |
| Row Selection | Supports standard lightning-datatable row selection events. |
| Row Actions | Fully compatible with Edit, Delete and custom row action menus. |
| Loading State | Built-in spinner overlay while data is loading. |
| Error Handling | Displays configurable error banners for backend failures. |
| Empty State | Shows custom messages when no records are available. |
| Imperative API | Provides getSelectedRows() for parent components. |
| Backend Agnostic | Works with Apex, REST APIs, GraphQL or static arrays. |
🏗 Component Architecture
📁 Project Structure
force-app │ ├── classes │ ├── PaginatedTableController.cls │ └── PaginatedTableControllerTest.cls │ ├── lwc │ ├── paginatedDataTable │ └── paginatedDataTableDemo │ └── README.md
⚙️ Public API
| Property | Purpose |
|---|---|
| columns | Column configuration for the datatable. |
| data | Current page records. |
| totalRecords | Total number of available records. |
| pageSize | Records displayed per page. |
| currentPage | Current active page. |
| sortedBy | Current sorted field. |
| sortedDirection | Ascending or Descending order. |
| isLoading | Displays loading spinner. |
🔄 User Workflow
Load Page
│
▼
Parent Fetches Records
│
▼
Render Current Page
│
▼
User Sorts Column
│
▼
Sort Event Fired
│
▼
Parent Retrieves Data
│
▼
Refresh Table
📡 Supported Events
- sort — User changes column sorting.
- pagechange — User navigates between pages.
- rowselection — Selected rows change.
- rowaction — Standard row actions.
🎯 Business Use Cases
- Large Contact Lists
- Opportunity Management
- Account Dashboards
- Service Case Management
- Lead Administration
- Experience Cloud Data Tables
- External REST Data
- Enterprise Reporting Dashboards
🔒 Security
- Supports Salesforce CRUD/FLS.
- Uses WITH SECURITY_ENFORCED in Apex demo.
- Backend-independent architecture.
- Compatible with enterprise security best practices.
🚀 Deployment
sf org login web --alias my-org sf project deploy start \ --source-dir force-app \ --target-org my-org sf apex run test \ --class-names PaginatedTableControllerTest
📌 Conclusion
Paginated Data Table is a lightweight, reusable, and enterprise-ready Lightning Web Component that extends the standard Salesforce datatable with server-side pagination, sorting, row selection, and configurable states. By separating presentation from data retrieval, it can be seamlessly integrated with Apex controllers, REST services, GraphQL APIs, or any custom backend while remaining highly reusable across Salesforce applications.
