+ Start a Discussion
Sainath VenkatSainath Venkat 

LWC Datatable to show records based on grouping

Can anyone help me out in creating a LWC component where I want to show group of case records based on Status Picklist.

On datatable, I want to show Cases which are active and inactive, under active I want to show all cases which are active and under inactive I want to show all cases which are inactive.

for example

ACTIVE
CASE1
CASE2
CASE3

Inactive
Case100
Case101
Case103

Active and Inactive are picklist values on case object under Status__c field
ANUTEJANUTEJ (Salesforce Developers) 
Hi Sainath,

>> https://developer.salesforce.com/forums/?id=9062I000000QyGmQAK

As mentioned in the above link the lwc datatable doesn't support grouping by default however there is a snippet that you can try as mentioned in the above link.

EDIT: One possibility you can check is to use lightning-tree documentation link: https://developer.salesforce.com/docs/component-library/bundle/lightning-tree/example

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
Malika Pathak 9Malika Pathak 9

Hi Sainath,

please find the solution

//Template
<template>
    <lightning-card title="Active Case" icon-name="standard:record">
        <template if:true={getCasesActive.data}>
            <lightning-datatable
                key-field="Id"
                data={getCasesActive.data}
                columns={columns}
            >
           </lightning-datatable>
        </template>
    </lightning-card>
    <lightning-card title="Inactive Case" icon-name="standard:record">
        <template if:true={getCasesInactive.data}>
            <lightning-datatable
                key-field="Id"
                data={getCasesInactive.data}
                columns={columns}
            >
           </lightning-datatable>
        </template>
    </lightning-card>
</template>
//JavaScript
import { LightningElement, wire } from 'lwc';
import CASENUMBER_FIELD from '@salesforce/schema/Case.CaseNumber';
import ORIGIN_FIELD from '@salesforce/schema/Case.Origin';
import PRIORITY_FIELD from '@salesforce/schema/Case.Priority';
import STATUS_FIELD from '@salesforce/schema/Case.Status__c';
import getCasesActive from '@salesforce/apex/AccountControllerLWC.getCasesActive';
import getCasesInactive from '@salesforce/apex/AccountControllerLWC.getCasesInactive';

const COLUMNS = [
    { label: 'Case Number', fieldName: CASENUMBER_FIELD.fieldApiName, type: 'text' },
    { label: 'Origin', fieldName: ORIGIN_FIELD.fieldApiName, type: 'text' },
    { label: 'Priority', fieldName: PRIORITY_FIELD.fieldApiName, type: 'text' },
    { label: 'Status', fieldName: STATUS_FIELD.fieldApiName, type: 'text'}
];
export default class AccountList extends LightningElement {
    columns = COLUMNS;
    @wire(getCasesActive)getCasesActive;
    @wire(getCasesInactive)getCasesInactive;
}
//Controller
public with sharing class AccountControllerLWC {
    @AuraEnabled(cacheable=true)
    public static List<Case> getCasesActive() {
        List<Case> caseList=new List<Case>();
        caseLIst=[SELECT Id,CaseNumber,Origin,Priority,Status__c FROM Case WHERE Status__c =:'Active' LIMIT 20];
        system.debug('query-->'+caseLIst);
        return caseLIst;
    }
    @AuraEnabled(cacheable=true)
    public static List<Case> getCasesInactive() {
        List<Case> caseList=new List<Case>();
        caseLIst=[SELECT Id,CaseNumber,Origin,Priority,Status__c FROM Case WHERE Status__c =:'Inactive' LIMIT 20];
        system.debug('query-->'+caseLIst);
        return caseLIst;
    }
}

If you find this solution is helpful for you please mark the best answer
Saad J 5Saad J 5
Hi Sainath,
Use the LWC tree grid to achieve active and inactive data in a single table. 
Here is the tutorial link, which explains you: https://rajvakati.com/2018/12/30/lightning-web-component-tree-grid/ 


If you find this solution is helpful for you please mark the best answer
Sainath VenkatSainath Venkat
@Malika Pathak 9, thanks a lot for helping me out in this issue, but I have more than 20 picklist values in status field, so I cant write 20 methods for the same, can you help me out in this issue, just for example I mentioned active and inactive but I have more than 20 picklist values for the same