+ Start a Discussion
The new LearnerThe new Learner 

Custom list view with filter using LWC

Hi Experts,

Can anyone help me out, how to create list view along with filter criteria using LWC.
Best Answer chosen by The new Learner
CharuDuttCharuDutt
Hii New Learner
Try Below Code
<template>
    <lightning-card title="List View" icon-name="custom:custom11">
        <lightning-combobox class="slds-m-around_small" name="Accounts" label="Accounts" value={value} onchange={handleChange} options={options}>
        </lightning-combobox>


        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <thead>
                <tr class="slds-line-height_reset">
                
                        <th class="" scope="col">
                        <div class="slds-truncate"></div>
                        </th>
                       
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Account Name">Account Name</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Type">Type</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <template if:true={records}>
                    <template for:each={records} for:item="record">
                        <tr class="slds-hint-parent" key={record.fields.Id.value}>
                           
                               
                                
                            <td data-label="Name"><a href={recordPageUrl} onclick={handleNavigate} onmouseout={handleMouseout} onmouseover={handleMouseover} data-item={record.fields.Id.value}>{record.fields.Name.value} </a></td>
                            <td data-label="Type">{record.fields.Type.value}</td>
                            
                            
                        </tr>
                        
                    </template>
                    
                </template>
                <template if:false={records}>
                    List View is not contains any data
                </template>
            </tbody>
        </table>
    </lightning-card>
</template>


import { LightningElement,wire,api } from 'lwc';
import { getListUi } from 'lightning/uiListApi';
import fetchListView from '@salesforce/apex/CustomListViewInLwcCtrl.fetchListView';
import NAME_FIELD from '@salesforce/schema/Account.Name';
export default class Test2 extends LightningElement {
    records;
    error;
    wiredActivities;
    options;
    recId;
    recordPageUrl;
    value = "RecentlyViewedAccounts";
    @api recordId;
  
    @wire(fetchListView)
    wiredclass(value){
      this.wiredActivities = value;
      const { data, error } = value;
      if (data) { 
        let lstdata = JSON.parse(JSON.stringify(data));
        let lstOption = [];
        for(var i = 0; i < lstdata.length; i++){
            lstOption.push({ value:lstdata[i].DeveloperName, label:lstdata[i].Name }); 
        }
        this.options = lstOption;      
        this.error = undefined;  
      } else if (error) {  
          this.error = error; 
          this.options = undefined;  
      }  
    }
    @wire(getListUi, {
        objectApiName: 'Account',
        listViewApiName: '$value',
        sortBy: NAME_FIELD,
       
    })listView({ error, data }) {
        if (data) {
            this.records = data.records.records;
            this.error = undefined;
            
        } else if (error) {
            this.error = error;
            this.records = undefined;
        }
    }
    handleChange(event) {
        let value = event.detail.value;
        this.value = value;
        let listlabel = this.options.find(data => data.value == value);
        
    }
    handleNavigate(event){
        this.recId = event.target.dataset.item;
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recId,
                actionName: 'view',
            },
        });
    }
}


public class CustomListViewInLwcCtrl {
    @AuraEnabled(cacheable=true)
    public static list<listView> fetchListView(){
        list<listView> lstListView = [SELECT Id, Name, DeveloperName, SobjectType FROM ListView
                                      WHERE sobjectType ='Account' ORDER by DeveloperName Asc];
    return lstListView;
    }
}
Please Mark It As Best Answer If It Helps
Thank You!

All Answers

AbhinavAbhinav (Salesforce Developers) 
Check this:

https://salesforceprofs.com/custom-list-view-in-lwc/

They have set filter on priority .You can have similar

const filterOptions = [
    { value: HIGH_PRIORITY, label: HIGH_PRIORITY },
    { value: LOW_PRIORITY, label: LOW_PRIORITY },
    { value: MEDIUM_PRIORITY, label: MEDIUM_PRIORITY },
    { value: ALL_PRIORITY, label: ALL_PRIORITY },
];

If it helps mark it as best answer.

Thanks!
 
The new LearnerThe new Learner
Hi Abhinav,

I need dyamic one.
CharuDuttCharuDutt
Hii New Learner
Try Below Code
<template>
    <lightning-card title="List View" icon-name="custom:custom11">
        <lightning-combobox class="slds-m-around_small" name="Accounts" label="Accounts" value={value} onchange={handleChange} options={options}>
        </lightning-combobox>


        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <thead>
                <tr class="slds-line-height_reset">
                
                        <th class="" scope="col">
                        <div class="slds-truncate"></div>
                        </th>
                       
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Account Name">Account Name</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Type">Type</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <template if:true={records}>
                    <template for:each={records} for:item="record">
                        <tr class="slds-hint-parent" key={record.fields.Id.value}>
                           
                               
                                
                            <td data-label="Name"><a href={recordPageUrl} onclick={handleNavigate} onmouseout={handleMouseout} onmouseover={handleMouseover} data-item={record.fields.Id.value}>{record.fields.Name.value} </a></td>
                            <td data-label="Type">{record.fields.Type.value}</td>
                            
                            
                        </tr>
                        
                    </template>
                    
                </template>
                <template if:false={records}>
                    List View is not contains any data
                </template>
            </tbody>
        </table>
    </lightning-card>
</template>


import { LightningElement,wire,api } from 'lwc';
import { getListUi } from 'lightning/uiListApi';
import fetchListView from '@salesforce/apex/CustomListViewInLwcCtrl.fetchListView';
import NAME_FIELD from '@salesforce/schema/Account.Name';
export default class Test2 extends LightningElement {
    records;
    error;
    wiredActivities;
    options;
    recId;
    recordPageUrl;
    value = "RecentlyViewedAccounts";
    @api recordId;
  
    @wire(fetchListView)
    wiredclass(value){
      this.wiredActivities = value;
      const { data, error } = value;
      if (data) { 
        let lstdata = JSON.parse(JSON.stringify(data));
        let lstOption = [];
        for(var i = 0; i < lstdata.length; i++){
            lstOption.push({ value:lstdata[i].DeveloperName, label:lstdata[i].Name }); 
        }
        this.options = lstOption;      
        this.error = undefined;  
      } else if (error) {  
          this.error = error; 
          this.options = undefined;  
      }  
    }
    @wire(getListUi, {
        objectApiName: 'Account',
        listViewApiName: '$value',
        sortBy: NAME_FIELD,
       
    })listView({ error, data }) {
        if (data) {
            this.records = data.records.records;
            this.error = undefined;
            
        } else if (error) {
            this.error = error;
            this.records = undefined;
        }
    }
    handleChange(event) {
        let value = event.detail.value;
        this.value = value;
        let listlabel = this.options.find(data => data.value == value);
        
    }
    handleNavigate(event){
        this.recId = event.target.dataset.item;
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recId,
                actionName: 'view',
            },
        });
    }
}


public class CustomListViewInLwcCtrl {
    @AuraEnabled(cacheable=true)
    public static list<listView> fetchListView(){
        list<listView> lstListView = [SELECT Id, Name, DeveloperName, SobjectType FROM ListView
                                      WHERE sobjectType ='Account' ORDER by DeveloperName Asc];
    return lstListView;
    }
}
Please Mark It As Best Answer If It Helps
Thank You!
This was selected as the best answer
The new LearnerThe new Learner
@chara:

Thanks for the reply its wokring, but can you help me out, how can i apply filter for this list view.
The new LearnerThe new Learner
Hi Charan,

its not showing any data, cant we create an filter like for example if i want to see opportunity record whose stage is closed won we will apply in the list view filter we will see , like wise can we amend the filter in this code.
CharuDuttCharuDutt
No We Can Not Do Like That