0

I have a lightning datatable, and I have a problem. If I edit the bottom column, the values is overlap on the table Steps: click on editIcon on botton column (OK), click on editIcon on other value of botton column (the value is overlap)

<lightning:datatable
    aura:id="objectDataTable"
    columns="{! v.columnsObject }"
    data="{! v.objectList }"
    keyField="Id"
    hideCheckboxColumn="true"
    onsort="{!c.updateColumnSorting}"
    sortedBy="{!v.sortedBy}"  
    sortedDirection="{!v.sortedDirection}"
    onsave ="{!c.onSave}"

The value is overlaping the table enter image description here

In standard table, a scroll appear and value not overlap. enter image description here

Thanks

1

you can use the slds-scrollable property and width and height.

<div class="slds-scrollable" style="height: 10rem; width: 50rem;">
            <lightning:datatable data="{!v.mydata}" columns="{!v.mycolumns}" keyField="id" hideCheckboxColumn="true" onsort="{!c.updateColumnSorting}"
                  sortedDirection="{!v.sortedDirection}" /> 
</div>
0

I found this post: Lightning Component Height/Width Adjustment

Creating a dynamic style:

<aura:attribute name="divHeight" type="Integer" default="100" />
<div onclick="{!c.changeHeight}" style="{! 'height:'+v.divHeight+'px;'}"></div> 

In the controller, I controll the number of items:

if(numItems > 0){
   var height = 110 + 25 * numItems;
   cmp.set('v.divHeight', height);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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