Style in lightning datatable. Overlap values

Question

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

In standard table, a scroll appear and value not overlap.

Thanks

Try using slds-scrollable class. – Venky Jan 23 '19 at 09:47 — Venky, Jan 23 '19 at 09:47
https://www.lightningdesignsystem.com/utilities/scrollable/ – Venky Jan 23 '19 at 09:48 — Venky, Jan 23 '19 at 09:48

score 1 · Accepted Answer · answered Jan 23 '19 at 10:52

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>

score 0 · Answer 2 · answered Jan 23 '19 at 13:12

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

Style in lightning datatable. Overlap values

2 Answers2