function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ryan FrankRyan Frank 

lightning:datatable row level actions - options are hidden if there is only 1 record in the table.

I have a lightning:datatable correctly showing records from my class, and I have a row level action for each of the rows - all functioning correctly if there is more than a single result in the query.  If there is only a single record from the query, then the row level action box is not displayed in an action-able window.  A scroll bar appears - but the action cannot be accessed.  Any thoughts?

Screenshot of the action with multiple rows:
User-added image

Screenshot with 2 rows:
User-added image

Screenshot with a single row:
User-added image

Thanks in advance!
Best Answer chosen by Ryan Frank
Alain CabonAlain Cabon
Hi Ryan, 
.THIS div.slds-scrollable_y { 
     height: 500px;
}

This style should be sufficient with "height" at the same same value that the "div" that includes the datatable.
 

All Answers

Alain CabonAlain Cabon
Hi Ryan,

If we look at the samples of code, we need a <div> for the default height otherwise the space provided for the datatable could be too small.

Using Infinite Scrolling to Load More Rows​
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_datatable.htm
  
<div style="height: 500px">
        <lightning:datatable
                columns="{! v.columns }"
                data="{! v.data }"
                keyField="id"
                enableInfiniteLoading="true"
                onloadmore="{! c.loadMoreData }"/>
 </div>
It is a known problem with a html solution. There is no "height" attribute for the <lightning:datatable> component itself.
Ryan FrankRyan Frank
As always - thanks for the help Alain!

Unfortunately the style only makes the table larger, and not the individual rows.  As a result, we still have the same problem.  Screenshot below:
User-added image
 
Alain CabonAlain Cabon
Hi Ryan

Without the source code, it is hard to propose solutions on something like this because there is something wrong in your code that we don't see clearly.
Ryan FrankRyan Frank
Alain - 

My apologies for the delay, please see the code below:

Component: 
<aura:component controller="AppRecordController">
    <aura:attribute name="applicationID" type="String" default="" />
    <aura:attribute name="folder" type="String" default="" />
    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:attribute name="selectedRow" type="List"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    
    
    
    
    


    <lightning:datatable data="{! v.mydata }" 
        columns="{! v.mycolumns }" 
        keyField="Id"
        hideCheckboxColumn="true"
		onrowaction="{! c.handleRowAction }"/>

    
    
    
</aura:component>

Component:
​ 
({
   init: function (cmp, event, helper) {
       
       
       var actions = [
            { label: 'Preview', name: 'preview' }
      		]; 
       
       
       cmp.set('v.mycolumns', [
           {label: 'Name', fieldName: 'Application_File_Name_For__c', type: 'text', initialWidth: '500px'},    
            {label: 'Category', fieldName: 'Category__c', type: 'text'},
           {label: 'Days in Folder', fieldName: 'Days_in_Folder__c', type: 'number'},
            { type: 'action', typeAttributes: { rowActions: actions } }
            ]);
        helper.getData(cmp);
    },
    
    
    
    
    
    
    
    
    
    
    handleRowAction: function (cmp, event, helper) {
        var action = event.getParam('action');
        var row = event.getParam('row');
        switch (action.name) {
                case 'preview':
                alert('Preview: ' + JSON.stringify(row));
                break;
            
        }
    }
    
    
})

Taking a step back - I'm just trying to have a row level dynamic action that can call a component/helper and preview/reference an ID.  For example, I would like to have a dynamic link on each row that if clicked would bring up that record's page.  I'm using these actions at the end of the row because I thought that was the only way, but I'm wondering if there is another way?

Thanks in advance to all!
Ryan FrankRyan Frank
I found this related article:  https://salesforce.stackexchange.com/questions/207411/lightningdatatable-actions-menu-is-hidden?noredirect=1&lq=1&utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

But the answer isn't helping.  The CSS I'm inserting doesn't solve the overflow to visible.  Code below:

Component: 
<div style= "overflow">
    <lightning:datatable data="{! v.mydata }" 
        columns="{! v.mycolumns }" 
        keyField="Id"
        hideCheckboxColumn="true"
		onrowaction="{! c.handleRowAction }"/>
</div>

Style: 
.THIS.overflow {
    overflow: visible; 
    overflow-y: visible; 
    overflow-x: visible;

    
}

 
Alain CabonAlain Cabon
Hi Ryan, 
.THIS div.slds-scrollable_y { 
     height: 500px;
}

This style should be sufficient with "height" at the same same value that the "div" that includes the datatable.
 
This was selected as the best answer
Vishakha SainiVishakha Saini
Hi Ryan,

I am also facing same issue with single row. Can you please let me know if it is resolved?