[SalesForce] Lightning web component to hide Id Column from data table

I am working on one of the component to show cases and contacts on Account detail page, everything is working fine but in the component I just want to show contact Name and Case name but somehow its showing Record Id too.

Can anyone help me out in this issue please

<template>
<lightning-card icon-name="standard:case" title="Case">
<lightning-datatable
            key-field="id"
            data={CaseRec}
            columns={CaseColumns}>
    </lightning-datatable>
    </lightning-card>

    <lightning-card icon-name="standard:contact" title="Contact">
        <lightning-datatable
        key-field="id"
        data={ContactRec}
        columns={ContactColumns}>
</lightning-datatable>
</lightning-card>
    

import { api, LightningElement, wire } from 'lwc';
   import fetchSobject from '@salesforce/apex/fetchContact.fetchSobject';


  export default class ShowChildRecordsOnParentDetailPage extends LightningElement {
@api recordId;
CaseRec;
CaseColumns = [];
ContactRec; 
ContactColumns;

@wire(fetchSobject,{
    RecordId : '$recordId'
})lstObjects({error,data}){
    if(data){
        var CaseCol = [];
        var conCol=[];

     console.log('data===> ' + JSON.stringify(data));
     let lstSobject = JSON.parse(JSON.stringify(data));
     var lstContact =  lstSobject.lstContact;
     var lstCase =  lstSobject.lstCase;

     for(let Rec in lstCase[0]){
        CaseCol.push( { label: Rec, fieldName: Rec });
    }
   this.CaseColumns = CaseCol;
   this.CaseRec = lstCase;



     for(let Rec in lstContact[0]){
            conCol.push( { label: Rec, fieldName: Rec });
        }
       this.ContactColumns = conCol;
       this.ContactRec = lstContact;

    }
    else if(error){
        console.log('error===> ' + JSON.stringify(error));
    }

}
 }

Apex class:

public with sharing class fetchContact {
 @AuraEnabled(cacheable=true)
  public static sobjectWrapper fetchSobject(Id RecordId) {
    sobjectWrapper osobjectWrapper = new sobjectWrapper();
    osobjectWrapper.lstContact = [SELECT Id,Name From Contact 
                                  WHERE AccountId =: RecordId];
    osobjectWrapper.lstCase = [SELECT Id,CaseNumber From Case 
                               WHERE AccountId =: RecordId];

    return osobjectWrapper;
                            }


public class sobjectWrapper {
@AuraEnabled public List<Contact> lstContact{get;set;}
@AuraEnabled public List<Case> lstCase{get;set;}
    }
    }

Best Answer

You're creating the columns dynamically, iterating the fields that your record has (those returned by the SOQL query). You can create the columns statically, as explained in the documentation examples:

// Create constant outside of the class
const CONTACT_COLUMS = [
    { label: 'Contact Name', fieldName: 'Name' }
] 

// Assign it to the property inside the class body
ContactColumns = CONTACT_COLUMS;
Related Topic