import { LightningElement, api, track } from 'lwc'; import getAccountsPaginated from '@salesforce/apex/PaginatedListControllerLwc.getAccountsPaginated'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; import { reduceErrors } from 'c/ldsUtils'; import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name'; import ACCOUNT_TYPE_FIELD from '@salesforce/schema/Account.Type'; import ACCOUNT_PHONE_FIELD from '@salesforce/schema/Account.Type'; import ACCOUNT_EMPLOYEES_FIELD from '@salesforce/schema/Account.NumberOfEmployees'; const COLUMNS = [ { label: 'Account Name', fieldName: ACCOUNT_NAME_FIELD.fieldApiName, type: 'text', sortable: 'true' }, { label: 'Type', fieldName: ACCOUNT_TYPE_FIELD.fieldApiName, type: 'text' }, { label: 'Phone', fieldName: ACCOUNT_PHONE_FIELD.fieldApiName, type: 'phone' }, { label: 'Employees', fieldName: ACCOUNT_EMPLOYEES_FIELD.fieldApiName, type: 'Number' } ]; export default class PaginatedList extends LightningElement { columns = COLUMNS; @track sortBy = 'Name'; @track sortDirection = 'asc'; @track pageSize = 10; error; records; currentPageToken = 0; nextPageToken = this.pageSize; @track loader = false; @track pageNumber = 1; @track paginationVisibility = false; @track totalPages = 1; @api pageSizeOptions = [10, 25, 50, 75, 100]; connectedCallback() { this.getAccounts(); } getAccounts() { this.loader = true; getAccountsPaginated({ pageSize: this.pageSize, pageToken: this.currentPageToken, sortField: this.sortBy, sortOrder: this.sortDirection }) .then((result) => { this.loader = false; if (result) { this.records = result.records; this.nextPageToken = result.nextPageToken; this.totalRecords = result.totalRecords; this.recordStart = result.recordStart; this.recordEnd = result.recordEnd; this.totalPages = Math.ceil( result.totalRecords / this.pageSize ); this.paginationVisibility = this.totalPages > 1 ? true : false; } }) .catch((error) => { this.loader = false; this.error = error; this.currentPageToken = 0; const evt = new ShowToastEvent({ title: 'Error', message: reduceErrors(error).join(', '), variant: 'error' }); this.dispatchEvent(evt); }); } doSorting(event) { console.log('Sort'); this.sortBy = event.detail.fieldName; this.sortDirection = event.detail.sortDirection; this.currentPageToken = 0; this.getAccounts(); } handlePrevious() { this.currentPageToken = Number(this.currentPageToken) - Number(this.pageSize); this.getAccounts(); } handleNext() { this.currentPageToken = Number(this.currentPageToken) + Number(this.pageSize); this.getAccounts(); } handleFirst() { this.currentPageToken = 0; this.getAccounts(); } handleLast() { this.currentPageToken = this.totalPages > 1 ? (this.totalPages - 1) * this.pageSize : 0; this.getAccounts(); } handlePageschange(event) { console.log(event.detail); this.pageSize = event.detail; this.currentPageToken = 0; this.getAccounts(); } get previousButtonDisabled() { return this.currentPageToken === 0; } get nextButtonDisabled() { return this.nextPageToken === undefined; } }