1

I have built a simple custom LWC that shows a query result in a lightning-datatable.

Thing is, it shows too many records and I'd like to fix the rows to 3, plus a link on the bottom that says "Show more". This is what I am trying to achieve:

enter image description here

This is what I currently have:

enter image description here

HTML:

<template>
    <h2> Account Datatable</h2>
    <template if:true={accList}>
        <lightning-datatable data={accList} columns={columns} key-field="Id">
        </lightning-datatable>
    </template>
    <template if:true={error}>
        {error}
    </template>
</template>

JS:

import { LightningElement ,api, wire, track} from 'lwc';
import getAccountList from '@salesforce/apex/AccountHelper.getAccountList';
export default class LightningDatatableLWCExample extends LightningElement {
    @track columns = [{
            label: 'Account name',
            fieldName: 'Name',
            type: 'text',
            sortable: true
        },
        {
            label: 'Type',
            fieldName: 'Type',
            type: 'text',
            sortable: true
        },
        {
            label: 'Annual Revenue',
            fieldName: 'AnnualRevenue',
            type: 'Currency',
            sortable: true
        },
        {
            label: 'Phone',
            fieldName: 'Phone',
            type: 'phone',
            sortable: true
        },
        {
            label: 'Website',
            fieldName: 'Website',
            type: 'url',
            sortable: true
        },
        {
            label: 'Rating',
            fieldName: 'Rating',
            type: 'test',
            sortable: true
        }
    ];
 
    @track error;
    @track accList ;
    @wire(getAccountList)
    wiredAccounts({
        error,
        data
    }) {
        if (data) {
            this.accList = data;
        } else if (error) {
            this.error = error;
        }
    }
}

APEX CONTROLLER:

public with sharing class AccountHelper {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccountList() {
        return [SELECT Id, Name, Type, Rating, Phone, Website, AnnualRevenue FROM Account];
    }
    
}

How could I achieve this?

1
  • 2
    You simply need to manage the content of the data that the component renders (i.e. accList). Hold the full results in a different property, move n results at a time into the accList, initially and when a button you added to the template is pressed.
    – Phil W
    Apr 28, 2022 at 7:30

1 Answer 1

3

Use a different list to display in the UI.

In JavaScript

displayList = [];

In HTML

<lightning-datatable data={displayList} columns={columns} key-field="Id">
</lightning-datatable>

After you get the results in the Wired function add first 3 rows into this list.

this.accList = data;
this.displayList = [...this.accList].splice(0,3);

Add a button below the datatable and onclick of the button load all the data from this.accList to this.displayList

this.displayList = [...this.accList];

To toggle to 3 record view again, use below logic

this.displayList = (this.displayList.length <= 3) ? [...this.accList] : [...this.accList].splice(0,3);

You can also check lazy loading/ infinite scrolling in lightning-datatable documentation.

5
  • Almost identical to what I suggested in my comment :) The difference; you don't allow "Show More" to operate in chunks. It is either show 3 or show all. Which may be what the OP wants, of course.
    – Phil W
    Apr 28, 2022 at 8:08
  • Thank you, this works just fine! Just one more thing: it'd be great if, by clicking on the "Show more" once again, the list would shrink back to 3 again. I wrote the following in the handle click function, but it isn't going back to 3 records: pastebin.com/Sgg9Kgmj
    – robruf
    Apr 28, 2022 at 8:20
  • @robruf Edited my answer to include toggle logic as per your requirement.
    – Sneh
    Apr 28, 2022 at 8:35
  • Great, thanks a lot!
    – robruf
    Apr 28, 2022 at 8:44
  • Check behaviour when there are less than 3 records returned in total.
    – Phil W
    Apr 28, 2022 at 10:56

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .