Navigate to List View in LWC

When we work with Lightning Web Component we might come up with a requirement where the user has to be navigated to a list view.

When I say list view, it can be the recent list view or a custom list view that has 18 digits unique Id.

In case of redirecting the user to a list view, we will be exposed to a lot of options, we can navigate the user to a recent list or we can send the user to any one of the custom list views.

If we are interested in sending the user to the standard recent list view the config object is going to look like this.

{
    type: 'standard__objectPage',
    attributes: {
        objectApiName: 'Account',
        actionName: 'list'
    },
    state: {       
        filterName: 'Recent' 
    }
}

Likewise, if you want to redirect the user to any custom list view then the config object is going to look like this.

{
    type: 'standard__objectPage',
    attributes: {
        objectApiName: 'Account',
        actionName: 'list'
    },
    state: {       
        filterName: '00BT0000002TONQMA4' //Custom list view Id
    }
}

Here is the complete snippet(am trying to navigate the user to recent list view)!

import { LightningElement, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class ExploreNavigationToList extends NavigationMixin(LightningElement) {

    handleListViewNavigation() {
        // Navigate to the Accounts object's Recent list view.
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            },
            state: {
                // 'filterName' is a property on 'state'
                // and identifies the target list view.
                // It may also be an 18 character list view id.
                // or by 18 char '00BT0000002TONQMA4'
                filterName: 'Recent' 
            }
        });
    }
}

This is the template file, and it's pretty much straight forward.

<template>  
  <lightning-button label="Navigate" onclick={handleListViewNavigation}></lightning-button>
</template>

Hope this helps!

I have put together a FREE course on Javascript that helps you master Lightning Web Components.

It just takes 2 hours to finish the course and you will be able to feel the difference.