Lightning web component to hide Id Column from data table

Question

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;}
    }
    }

Answer 1

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;

Answer 2

You should set your data-table columns with the field name you wish to show.

ContactColumns = [{label: ‘Name’, fieldName:’Name’, type=‘text’}];

The data table component accepts the columns and data payload and will parse the data based on the columns you specify.

Answer 3

I suggest you to filter your data before like example:

Js code:

@track columns    
@track myData
    
const DATA = [{label: 'Id', fieldName: 'id'}, {label: 'firstName', fieldName: 'first name'}];

this.columns = DATA.filter(field => field.fieldName.toLowerCase() !== 'id');

Html code:

<lightning-datatable key-field="Id" data={myData} columns={columns} ></lightning-datatable>