Customize datatable

Question

everyone! I'm a newbie in Salesforce, and I have a problem: I need to create datatable similar to that:

But the only one that I could do is that(I used a standard lightning-datatable, also Usage Target field is a formula that concatenate records of two other fields):

Apex:

 @AuraEnabled
 public static List<UsageMetricWrapper> getUsageMetricRecords(){
     List<UsageMetricWrapper> usageMetricListWrapper = new List<UsageMetricWrapper>();
     List<Usage_Metric__c> usageMetricList = [SELECT Id, Name, Usage_Target__r.Used_Production_And_Licenses__c, Estimated_Last_Usage__c
                                              FROM Usage_Metric__c];
     if(!usageMetricList.isEmpty()){
         for(Usage_Metric__c usageMetric : usageMetricList){
             UsageMetricWrapper usageMetrciWrapper = new UsageMetricWrapper();
             usageMetrciWrapper.Name = usageMetric.Name;
             usageMetrciWrapper.ProductsAndLicenses = usageMetric.Usage_Target__r.Used_Production_And_Licenses__c;
             usageMetrciWrapper.EstimatedLastUsage = usageMetric.Estimated_Last_Usage__c;
             usageMetricListWrapper.add(usageMetrciWrapper);
         }
     }
     return usageMetricListWrapper;
 }

 public class UsageMetricWrapper {
     @AuraEnabled
     public String Name{get;set;}
     @AuraEnabled
     public String ProductsAndLicenses{get;set;}
     @AuraEnabled
     public Date EstimatedLastUsage{get;set;}
 }

JS:

import getUsageMetricRecords from '@salesforce/apex/LWCController.getUsageMetricRecords';

const columns = [
                 { label: 'User', fieldName: 'UserName' },
                 { label: 'Usage Metric: User Name', fieldName: 'Name' },
                 { label: 'Usage Target', fieldName: 'ProductsAndLicenses' },
                 { label: 'Estimated Last Usage', fieldName: 'EstimatedLastUsage' },
                ]

export default class Analysis extends LightningElement {

    columns = columns;
    records = [];

    async connectedCallback() {
        const allRecords = await getUsageMetricRecords();
        this.records = allRecords;
    }

HTML:

lightning-datatable key-field="Id"
                     data={records}
                     columns={columns}

Does anyone know, how to split text in a column so that it appears vertically and is separated by a line and also add the total number of "created" row data to the previous column? I will be grateful for any help!

Answer 1

You want to use an LWC treeGrid.

To get the totals, you just need to calculate the totals and append it to the field name (in setup of the table in LWC I would suggest because it gives you flexibility).

I haven't used treeGrid before, and a quick look at the documentation I didn't find an automatic row count. To do that, you could play with the onClick property (or something that deals with the expansion of the rows) to toggle the field count "on" and "off". Let me know if you need help with that, your work so far suggests you will understand.

Answer 2

You can customize lightning-datatable . I don't know about your requirement . But I have done a component where I need Lookup Component in Lightning Data Table . For that task I referred in github where they imported the lightning datatable component in Javascript . That was an year ago . I cannot find the link .

Similar to the one in this: https://github.com/ericrsmith35/DatatableV2/tree/master/force-app/main/default/lwc/richDatatable

Your requirement is kinda tricky . So I think it cannot be done using Lighning-Datatable . So create your own component like your own datatable for this requirement