Lightning Web Component

How to Refresh Lightning Datatable LWC

When we talk about Lightning Datatable in a Lighting Web Component, one of the most common requirements is refreshing it without refreshing the page. In this article, you will find different ways to refresh the data from the Lightning Datatable

Refresh Lightning Datatable

Methods for Refreshing Lightning Datable Data

In these examples, we will use the following HTML to refresh the data with a button. However, you can call the refreshData() function anywhere in your code where you need to refresh the data.

<template>
    <lightning-button label="Refresh Data" variant="brand" onclick={refreshData}></lightning-button>
    <lightning-datatable
        data={data}
        columns={columns}
        key-field="id"
        class="custom-datatable-style"
    ></lightning-datatable>
</template>

Imperative Apex Call

One of the most common methods for refreshing a Lightning Datatable lwc is an imperative Apex call. This method is proper when you need to refresh the data in the Lightning Datatable based on a user action, such as clicking a button.

The imperative Apex call is also helpful when you need to refresh the data in the Lightning Datatable based on a change in the data itself, such as when a record is updated.

import { LightningElement } from 'lwc';
import getAccounts from '@salesforce/apex/GetAllAccounts.getAccounts';

const COLUMNS = [
    { label: 'Name', fieldName: 'Name' },
    { label: 'Industry', fieldName: 'Industry' },
    { label: 'Phone', fieldName: 'Phone', type: 'phone' },
];

export default class RefreshLightningDatatable extends LightningElement {
    data = [];
    columns = COLUMNS;

    connectedCallback() {
        // Fetch data when the component is mounted.
        this.refreshData();
    }
    
    refreshData() {
        getAccounts()
        .then(result => {
            this.data = result;
        })
        .catch(error => {
            // Handle error
        });
    }

}

Using Refresh Apex

Another method for refreshing a Datatable in LWC is to use the refreshApex() method. To use this method, you must define your Apex Method with (cacheable=true). Otherwise, the @wire property is not going to work correctly.

import { LightningElement, wire } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import getAccounts from '@salesforce/apex/GetAllAccounts.getAccounts';

const COLUMNS = [
    { label: 'Name', fieldName: 'Name' },
    { label: 'Industry', fieldName: 'Industry' },
    { label: 'Phone', fieldName: 'Phone', type: 'phone' },
];

export default class RefreshLightningDatatable extends LightningElement {
    data = [];
    columns = COLUMNS;

    @wire(getAccounts) 
    getData(result){
        const {data, error} = result;
        this.refreshTable = result;

        if(data){
            this.data = data;
            console.log(data);
        }
        if(error){
            console.log(error);
        }
    }

    refreshData(){
        refreshApex(this.refreshTable);
    }
}

Considerations for Choosing the Right Method