function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Jon-Michael Murphey 2Jon-Michael Murphey 2 

How to remove a column from a Lightning Data Table

CMPT:
<aura:component controller="DTController">
    <aura:attribute name="parentId" type="Id"/>
    <aura:attribute name="nameFilter" type="string"/>
    <aura:attribute type="FIN_RCSAQ__c[]" name="acctList"/>
    <aura:attribute name="showSaveCancelBtn" type="boolean" default="false" />
    <aura:attribute name="isAsc" type="boolean" default="true" description="boolean flag for pass sorting condition to apex class"/> 
    <aura:attribute name="arrowDirection" type="string" default="arrowup" description="Use for change arrow sign direction on header based on click"/>
    <aura:attribute name="selectedTabsoft" type="string" default="firstName" description="Use for show/hide arraow sign on header based on conditions"/>
     
    <aura:handler name="init" value="{!this}" action="{!c.fetchAcc}"/>
    
    <table class="slds-table slds-table_bordered slds-table_col-bordered slds-table_cell-buffer slds-table_edit slds-table_resizable-cols" style="table-layout: fixed; width: 100% !important;">
        <thead>
            <tr class="slds-line-height_reset">
                <th class="slds-is-sortable" scope="col" onclick="{!c.sortName}">
                    <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                        <span class="slds-assistive-text">Sort</span>
                        <span class="slds-truncate" title="Name">Fin-RSCAQ</span>  
                        <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'Name') }">
                            <lightning:icon iconName="utility:arrowdown" alternativeText="Descending" size="xx-small" />
                        </aura:if>  
                        <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'Name') }">
                            <lightning:icon iconName="utility:arrowup" alternativeText="Descending" size="xx-small" /> 
                        </aura:if>                        
                    </a>
                </th>
                <th class="slds-is-sortable" scope="col" onclick="{!c.sortControlNumber}">
                    <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">
                        <span class="slds-assistive-text">Sort</span>
                        <span class="slds-truncate" title="ControlNumber">Control Number</span>  
                        <aura:if isTrue="{! and(v.arrowDirection == 'arrowdown', v.selectedTabsoft == 'ControlNumber') }">
                            <lightning:icon iconName="utility:arrowdown" alternativeText="Ascending" size="xx-small" />
                        </aura:if>  
                        <aura:if isTrue="{! and(v.arrowDirection != 'arrowdown', v.selectedTabsoft == 'ControlNumber') }"> 
                            <lightning:icon iconName="utility:arrowup" alternativeText="Descending" size="xx-small" />
                        </aura:if>                        
                    </a>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-text-align_center" title="ControlObjective">Control Objective</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-text-align_center" title="ControlledElsewhere">Controlled Elsewhere</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-text-align_center" title="ControlledElsewhereHFMCode">Controlled Elsewhere HFM Code</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-text-align_center" title="Frequency">Frequency</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-text-align_center" title="FrequencySelection">Frequency Selection</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-text-align_center" title="Preparer">Preparer</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-text-align_center" title="CreatedBy">Created By</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-text-align_center" title="FirstApprover">First Approver</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate slds-text-align_center" title="SecondApprover">Second Approver</div>
                </th>
            </tr>
        </thead>
        <!--table body start, Iterate contact list as a <tr> -->
        <tbody>
            <aura:iteration items="{!v.acctList}" var="acc">  
                <c:InlineEditRow singleRec="{!acc}" 
                                 rcsaqFrequencyVal="{!acc.RCSAQ_Frequency__c}" 
                                 frequencySelectionVal = "{!acc.Frequency_Selection__c}"
                                 firstOwnerNameVal="{!acc.First_Approver__r.Name}" 
                                 secondOwnerNameVal="{!acc.Second_Approver__r.Name}" 
                                 prepareNameVal="{!acc.Preparer__r.Name}" 
                                 showSaveCancelBtn="{!v.showSaveCancelBtn}"/>
            </aura:iteration>
        </tbody>
    </table> 
    
    <aura:if isTrue="{!v.showSaveCancelBtn}">
        <lightning:buttonGroup class="slds-m-around_medium">
            <lightning:button label="Cancel" />
            <lightning:button label="Save" onclick="{!c.handleSaveEdition}" variant="success"/>
        </lightning:buttonGroup>
    </aura:if> 
</aura:component>

Controller:
({
    fetchAcc : function(component, event, helper) {
        helper.fetchAccHelper(component, event, "Name");
    },
    sortName : function(component, event, helper) {
        component.set("v.selectedTabsoft", "Name"); 
        helper.sortHelper(component, event, "Name");
    },
    sortControlNumber : function(component, event, helper) {
        component.set("v.selectedTabsoft", "ControlNumber"); 
        helper.sortHelper(component, event, "Control_Number__c");
    },
    handleSaveEdition: function (cmp, event, helper) {
        var draftValues = cmp.get("v.acctList");
        console.log(draftValues);
        var action = cmp.get("c.updateAccount");
        action.setParams({"acc" : draftValues});
        action.setCallback(this, function(response) {
            console.log(response);
            helper.fetchAccHelper(cmp, event, "Name");
            cmp.set("v.showSaveCancelBtn", false); 
        });
        $A.enqueueAction(action);
    },
})

Helper:
({
    fetchAccHelper : function(component, event, sortFieldName) {
        var action = component.get("c.fetchAccount");
        action.setParams({
            "parentId" : component.get("v.parentId"),
            "sortField": sortFieldName,
            "isAsc": component.get("v.isAsc"),
            "nameLike":component.get("v.nameFilter")
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var records =response.getReturnValue();
                console.log(records);
                records.forEach(function(record){
                    record.linkName = '/'+record.Id;
                });
                component.set("v.acctList", records);
            }
        });
        $A.enqueueAction(action);
    },
    sortHelper: function (component, event, sortFieldName) {
        var currentDir = component.get("v.arrowDirection");
        if (currentDir == 'arrowdown') {
            component.set("v.arrowDirection", 'arrowup'); 
            component.set("v.isAsc", true);
        } else {
            component.set("v.arrowDirection", 'arrowdown');
            component.set("v.isAsc", false);
        }
        this.fetchAccHelper(component, event, sortFieldName);
    }
})
Style:
.THIS .slds-table td th {
    white-space:normal; /* wraps larger stuff like textarea and long text*/
}
.THIS .widthVal {
    max-width:100% !important;
}

Apex Class:
public class DTController{
    @AuraEnabled
    public static List<FIN_RCSAQ__c> fetchAccounts(String parentId) {
        String query = 'SELECT Id, Name, Control_Number__c, Question_Number__c, Risk_Reference__c, Control_Objective__c,';
        query += 'Group_Control_Description__c,Assertions__c,Controlled_Elsewhere__c,Controlled_Elsewhere_HFM_Code__c,';
        query += 'First_Approver__c,First_Approver__r.Name,Second_Approver__c,Second_Approver__r.Name,';
        query += 'Frequency_Selection__c,RCSAQ_Frequency__c,Preparer__r.Name,';
        query += 'Control_Clarification__c,Frequency__c,Control_Type__c,System_Report_SAP__c,System_Report_OTC__c,System_Name__c,';
        query += 'Excel_File_Name__c,Evidence_of_the_Control__c,Notes_Guidance__c,Preparer__c,Supported_By__c FROM ';
        query += 'FIN_RCSAQ__c WHERE Control_Number__c LIKE \'RR%\'';
        if(String.isNotBlank(parentId)) query += ' AND FIN_RCSA__c = \'' + parentId + '\'';
        List<FIN_RCSAQ__c> accList = Database.query(query);
        System.debug(accList);
        return accList;
    }
    
    @AuraEnabled
    public static List<FIN_RCSAQ__c> fetchAccount(String parentId, String sortField, boolean isAsc, String nameLike) {
        String query = 'SELECT Id, Name, Control_Number__c, Question_Number__c, Risk_Reference__c, Control_Objective__c,';
        query += 'Group_Control_Description__c,Assertions__c,Controlled_Elsewhere__c,Controlled_Elsewhere_HFM_Code__c,';
        query += 'Control_Clarification__c,Frequency__c,Control_Type__c,System_Report_SAP__c,System_Report_OTC__c,System_Name__c,';
        query += 'Preparer__r.Name,First_Approver__c,First_Approver__r.Name,Second_Approver__c,Second_Approver__r.Name,';
        query += 'Frequency_Selection__c,RCSAQ_Frequency__c,';
        query += 'Excel_File_Name__c,Evidence_of_the_Control__c,Notes_Guidance__c,Preparer__c,Supported_By__c FROM ';
        query += 'FIN_RCSAQ__c WHERE Control_Number__c LIKE \'' + nameLike + '%\'';
        if(String.isNotBlank(parentId)) query += ' AND FIN_RCSA__c = \'' + parentId + '\'';
        if (sortField != '') {
            query += ' order by ' + sortField;
            query += isAsc ? ' asc' : ' desc';
        }
        
        system.debug('The query is ' + query);
        return Database.query(query);
    }
    
    @AuraEnabled
    public static String getContactName(String conId) {
        String conName;
        List<Contact> conList = [Select Id,FirstName,LastName from Contact Where Id =: conId];
        if(conList.size() > 0)
            conName = String.isNotBlank(conList[0].FirstName) ? conList[0].FirstName + ' ' + conList[0].LastName : conList[0].LastName;
        System.debug(conName);
        return conName;
    }
    
    @AuraEnabled
    public static String getUserName(String conId) {
        String conName;
        List<User> conList = [Select Id,FirstName,LastName from User Where Id =: conId];
        if(conList.size() > 0)
            conName = String.isNotBlank(conList[0].FirstName) ? conList[0].FirstName + ' ' + conList[0].LastName : conList[0].LastName;
        System.debug(conName);
        return conName;
    }
    
    @AuraEnabled
    public static void updateAccount(List<FIN_RCSAQ__c> acc ){
        update acc;
    }
}

 
Best Answer chosen by Jon-Michael Murphey 2
Maharajan CMaharajan C
Hi John, 

Can you please let me know which column you want to remove.

And also post the  InlineEditRow  lightning component here . This component generate the body for you lightning component.

Thanks,
Maharajan.C

All Answers

Maharajan CMaharajan C
Hi John, 

Can you please let me know which column you want to remove.

And also post the  InlineEditRow  lightning component here . This component generate the body for you lightning component.

Thanks,
Maharajan.C
This was selected as the best answer
Jon-Michael Murphey 2Jon-Michael Murphey 2
Im trying to remove "Created By". Please see the InlineEditRow component code below:
<aura:component controller="DTController">
    <!--declare aura attributes-->
    <aura:attribute name="singleRec" type="FIN_RCSAQ__c" />
    <aura:attribute name="showSaveCancelBtn" type="boolean"/>
    
    <aura:attribute name="firstOwnerId" type="string"/>
    <aura:attribute name="firstOwnerNameVal" type="string"/>
    <aura:attribute name="EditFirstOwner" type="boolean" default="false" />
    
    <aura:attribute name="secondOwnerId" type="string"/>
    <aura:attribute name="secondOwnerNameVal" type="string"/>
    <aura:attribute name="EditSecondOwner" type="boolean" default="false" />
    
    <aura:attribute name="prepareId" type="string"/>
    <aura:attribute name="prepareNameVal" type="string"/>
    <aura:attribute name="EditPrepare" type="boolean" default="false" />
    
    <aura:attribute name="rcsaqFrequencyVal" type="string"/>
    <aura:attribute name="EditRCSAQFrequencyOwner" type="boolean" default="false" />
    
    <aura:attribute name="frequencySelectionVal" type="string"/>
    <aura:attribute name="EditFrequencySelection" type="boolean" default="false" />
    
    <aura:attribute name="showErrorClass" type="boolean" default="false"/>
    
 
Jon-Michael Murphey 2Jon-Michael Murphey 2
  <!--Table Row Start-->  
    <tr class="slds-line-height_reset">
        <td scope="row">
            <div class="slds-truncate" title="{!v.singleRec.Name}">
                <a href="{!v.singleRec.linkName}">View</a>
            </div>
        </td>
        <td scope="row">
            <div class="slds-truncate" title="{!v.singleRec.Control_Number__c}">{!v.singleRec.Control_Number__c}</div>
        </td>
        <td scope="row">
            <div class="slds-truncate" title="{!v.singleRec.Control_Objective__c}">{!v.singleRec.Control_Objective__c}</div>
        </td>
        <td scope="row">
            <div class="slds-truncate" title="{!v.singleRec.Controlled_Elsewhere__c}">{!v.singleRec.Controlled_Elsewhere__c}</div>
        </td> 
        <td scope="row">
            <div class="slds-truncate" title="{!v.singleRec.Controlled_Elsewhere_HFM_Code__c}">{!v.singleRec.Controlled_Elsewhere_HFM_Code__c}</div>
        </td>
        
        <td scope="row" ondblclick="{!c.inlineEditRCSAQFrequency}" class="{! v.showErrorClass == true ? 'slds-cell-edit slds-has-error' : 'slds-cell-edit'}">
            <span class="slds-grid slds-grid_align-spread">
                <!-- show input and output section based on boolean flag --> 
                <aura:if isTrue="{!v.EditRCSAQFrequencyOwner == false}">
                    <div class="slds-truncate" title="{!v.singleRec.RCSAQ_Frequency__c}">
                        {!v.singleRec.RCSAQ_Frequency__c}
                    </div>
                    <button onclick="{!c.inlineEditRCSAQFrequency}" class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit RCSAQ Frequency">
                        <lightning:icon iconName="utility:edit" size="xx-small" alternativeText="edit"/>
                    </button>
                    
                    <!-- Inline Edit Section in else case-->  
                    <aura:set attribute="else">
                        <section tabindex="0" class="slds-popover slds-popover_edit" role="dialog" style="position: absolute; top: 0px">
                            <div class="slds-popover__body">
                                <div class="slds-form-element slds-grid slds-wrap">
                                    <div style="{!v.EditRCSAQFrequencyOwner ? 'slds-show' : 'slds-hide'}" class="slds-form-element__control slds-grow">
                                        <c:LightningDependentPicklistCmp objectName="FIN_RCSAQ__c"
                                                                         isFieldChanged="{!v.showSaveCancelBtn}"
                                                                         hideParentField="{!v.EditRCSAQFrequencyOwner}" 
                                                                         parentFieldAPI="RCSAQ_Frequency__c"
                                                                         childFieldAPI="Frequency_Selection__c"
                                                                         parentValue="{!v.singleRec.RCSAQ_Frequency__c}"
                                                                         childValue="{!v.singleRec.Frequency_Selection__c}"/> 
                                    </div>
                                </div>
                            </div>
                            <span id="form-end1" tabindex="0"></span>
                        </section>  
                    </aura:set>  
                </aura:if> 
            </span>
        </td>
        
        <td scope="row" ondblclick="{!c.inlineEditFrequencySelection}" class="{! v.showErrorClass == true ? 'slds-cell-edit slds-has-error' : 'slds-cell-edit'}">
            <span class="slds-grid slds-grid_align-spread">
                <!-- show input and output section based on boolean flag --> 
                <aura:if isTrue="{!v.EditFrequencySelection == false}">
                    <div class="slds-truncate" title="{!v.singleRec.Frequency_Selection__c}">
                        {!v.singleRec.Frequency_Selection__c}
                    </div>
                    <button onclick="{!c.inlineEditFrequencySelection}" class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small" tabindex="0" title="Edit Frequency Selection">
                        <lightning:icon iconName="utility:edit" size="xx-small" alternativeText="edit"/>
                    </button>
                    
                    <!-- Inline Edit Section in else case-->  
                    <aura:set attribute="else">
                        <section tabindex="0" class="slds-popover slds-popover_edit" role="dialog" style="position: absolute; top: 0px">
                            <div class="slds-popover__body">
                                <div class="slds-form-element slds-grid slds-wrap">
                                    <div style="{!v.EditFrequencySelection ? 'slds-show' : 'slds-hide'}" class="slds-form-element__control slds-grow">
                                        <c:LightningDependentPicklistCmp objectName="FIN_RCSAQ__c"
                                                                         isFieldChanged="{!v.showSaveCancelBtn}"
                                                                         hideParentField="{!v.EditFrequencySelection}" 
                                                                         parentFieldAPI="RCSAQ_Frequency__c"
                                                                         childFieldAPI="Frequency_Selection__c"
                                                                         parentValue="{!v.singleRec.RCSAQ_Frequency__c}"
                                                                         childValue="{!v.singleRec.Frequency_Selection__c}"/>
                                    </div>
                                </div>
                            </div>
                            <span id="form-end2" tabindex="0"></span>
                        </section>  
                    </aura:set>  
                </aura:if> 
            </span>
        </td>
        
     
Jon-Michael Murphey 2Jon-Michael Murphey 2
I found the line the the InlineEdit.cpm to edit