0

This question already has an answer here:

I have data of customers and their numbers. I want to show it in dataTable. Additionally, I am trying to color those rows whose numbers are invalid and also disable the checkbox for that row. I have stored 'invalid-number' in the column:'valid' of the Customer objects for those records. First, I have tried to hide checkbox for those records by writing following code:

<lightning:datatable data="{! v.CustomerList }" class="slds-m-top_medium"
    columns="{! v.columns }" 
    keyField="id"
    hideCheckboxColumn="{!valid == 'invalid-number'}"
    onrowselection="{! c.getSelectedName }"/>   

But this code is not working for me and also I need pointers for coloring these rows with invalid numbers.

marked as duplicate by sfdcfox, David Reed, battery.cord, Oleksandr Berehovskyi, glls Sep 21 '18 at 18:57

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • hideCheckboxColumn applies to the entire column, not individual rows. You will need to implement a custom SLDS table to do something like this. There's no way to apply logic to individual checkbox rows. – sfdcfox Sep 21 '18 at 11:31
0

This is not possible using hideCheckboxColumn as it applies to entire rows.

You can do this alternatively, I will just give you some code snippet. You can work based on that

I did this code for "Custom Hide/Show More option" for Rows on a Table component. But this caters to your requirement too.

<table aura:id="ffTable" class="slds-table slds-table_bordered slds-table_cell-buffer">
    <thead class="tableHead">
        <tr>
            <th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
            <th scope="col"><div class="slds-truncate" title="Date/Time">Date/Time</div></th>
            <th scope="col"><div class="slds-truncate" title="Status">Status</div></th>
        </tr>
    </thead>
    <tbody>
        <aura:iteration items="{!v.AllFulfillments}" var="wrap" indexVar="idx" end="{!v.toggleCount}">
            <tr>
                <th scope="row"><div class="slds-truncate" title="{!wrap.Category__c}">{!wrap.Category__c}</div></th>
                <th scope="row"><div class="slds-truncate" title="{!wrap.Timestamp__c}">
                    <ui:outputDateTime class="slds-truncate" value="{!wrap.Timestamp__c}" format="DD-MMM-YY HH:mm"/>
                    </div></th>

                <th scope="row">
                    <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-truncate">
                        <aura:if isTrue="{!wrap.Status__c != 'Success'}">
                            <button id="convertButton" class="slds-button slds-button_icon slds-button_icon-medium" 
                                    aria-haspopup="true" title="Mark as Complete"
                                    onclick="{!c.convert}" data-custom="{!idx}">

                                <span class="slds-icon_container" title="{!wrap.Status__c + ' -> Success'}">
                                    <aura:unescapedHtml value="{!wrap.Status_Flag__c}" />
                                </span>

                            </button>
                            <aura:set attribute="else">
                                <span class="slds-icon_container" title="{!wrap.Status__c}">
                                    <aura:unescapedHtml value="{!wrap.Status_Flag__c}" />
                                </span>
                            </aura:set>
                        </aura:if>
                    </div>    
                </th>

            </tr>
        </aura:iteration>
    </tbody>
</table>

JS Controller :

// Do this onload (or) on any button click .. your choice

    doInit : function(component, event, helper){

        // This will return the CHILD of Table as Thead and TBody
        // arr = component.find("ffTable").getElement().childNodes;
        // This will return exactly one element of the 2nd Child
        // var singleNode = component.find("ffTable").getElement().childNodes[1].childNodes[2];

        // to get the count of all the Records in the Table
        var tableRecordCount = component.find("ffTable").getElement().childNodes[1].children.length;
        console.log("length: " +tableRecordCount);

        // to get all the CHILDREN Nodes of the TBODY Tag of the Table
        var tableBody = [];
        tableBody = component.find("ffTable").getElement().childNodes[1].children;

        var i;
        for (i = baseCount; i < tableRecordCount; i++) {
            $A.util.toggleClass(tableBody[i],"toggleRecord");
        }
    },

CSS Styles:

/* You can hide or show a specific row / column using this option */
/* this below code shows the 4th Row (include the table header) will be hidden */
.THIS table tr:nth-child(n+4) {
    /* background-color : red; */
    display:none;
}

If this resolves your question, Please mark it as Solved

  • Thanks @AjaySFDC ! I really appreciate your response but I have already done this task in <table>. I wanted to do the same with dataTable. – Igniter Sep 21 '18 at 12:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.