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
Matthias GuentherMatthias Guenther 

Make row in lightning:datatable clickable

Hi I have a lightning:datatable:
  
<lightning:datatable data="{!v.OpportunityLineItem}" columns="{!v.Columns}" keyField="Id" hideCheckboxColumn="true"/>
That show all OpportunityLineItem filtered by type and it is working fine to display the records. I am trying to figure out how to make the row clickable so it will open the OpportunityLineItem?

Here is the full component:
  
<aura:component controller="OpportunityLineItemListProductAuraCon" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="Opportunity" type="Opportunity" />
    <aura:attribute name="OpportunityLineItem" type="OpportunityLineItem" />
    <aura:attribute name="Columns" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <force:recordData aura:id="accountRecord"
                      recordId="{!v.recordId}"
                      targetFields="{!v.Opportunity}"
                      layoutType="FULL"
                      />
    <lightning:card iconName="standard:product_item" title="{! 'Products and Services for ' + v.Opportunity.Name}">
        <lightning:datatable data="{!v.OpportunityLineItem}" columns="{!v.Columns}" keyField="Id" hideCheckboxColumn="true"/>
    </lightning:card>	
</aura:component>

Thanks in advance

Matthias
 
Alain CabonAlain Cabon
Hi,

You can use a button and actions on every row.

The easiest way is to add a field which is a link of type 'url'.

Here is an example with Opportunity (only the IDs will differ for OpportunityLineItem )

{fieldName: 'link', type: 'url',typeAttributes: { label: 'Opportunity Id' }}

link: '/one/one.app?#/sObject/0065800000a4oEPAAY/view' 
cmp.set('v.mydata', [{
            id: 'a',
            opportunityName: 'Cloudhub',
            confidence: 0.2,
            amount: 25000,
            contact: 'jrogers@cloudhub.com',
            phone: '2352235235',
            trendIcon: 'utility:down',
            link: '/one/one.app?#/sObject/0065800000a4oEPAAY/view'
        }]);

 cmp.set('v.mycolumns', [
            {type:  'action', typeAttributes: { rowActions: actions } },
            {label: 'Opportunity name', fieldName: 'opportunityName', type: 'text'},
            {label: 'Confidence', fieldName: 'confidence', type: 'percent', cellAttributes:
            {iconName: { fieldName: 'trendIcon' }, iconPosition: 'right' }},
            {label: 'Amount', fieldName: 'amount', type: 'currency', typeAttributes: { currencyCode: 'EUR'}},
            {label: 'Contact Email', fieldName: 'contact', type: 'email'},
            {label: 'Contact Phone', fieldName: 'phone', type: 'phone'},
            {fieldName: 'link', type: 'url',typeAttributes: { label: 'Opportunity Id' }}
        ]);


 <div style="height: 350px; width:100%">
    <lightning:datatable aura:id="suspectsTable" id="IDsuspectsTable"
                         data="{! v.mydata }"
                         columns="{! v.mycolumns }"
                         keyField="Id"
                         hideCheckboxColumn="true"
                         minColumnWidth="150px"
                         sortedBy="{! v.sortedBy }" 
                         sortedDirection="{! v.sortedDirection }" 
                         defaultSortDirection="{! v.defaultSortDirection }"
                         onsort="{!c.updateColumnSorting}"
                         onrowaction="{!c.handleRowAction}" />
 </div>

User-added image

https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/documentation
Sumit Kumar 394Sumit Kumar 394
Hi.
You can also do a row clickable in LWC

// datatable columns with row actions

<div style="width: auto;">
            <template if:true={data}>
                <lightning-datatable data={data}
                                     columns={columns}
                                     key-field="id"
                                     hide-checkbox-column="true"
                                     onrowaction={handleRowActions}></lightning-datatable>
            </template>
 </div>


const columns = [
    { label: 'First Name', fieldName: 'urlpath',type: 'url',typeAttributes: {label: { fieldName: 'FirstName' },value:           {fieldName: 'FirstName'}, target: 'urlpath'}},
    { label: 'Last Name', fieldName: 'LastName' },
    { label: 'Phone', fieldName: 'Phone', type: 'phone'}, 
    { label: 'Email', fieldName: 'Email', type: 'email'},
    {label: 'Sibling', fieldName: 'Sibling__c',type:'number'},
];

@wire(getContactRecord)
    contacts(result){
        this.refreshresult=result;
        if(result.data){
            let currentData = [];
            this.data=result.data;
            var urlpath = 'https://xyz/lightning/r/Contact/';
            this.data.forEach((row) => {
                let rowData = {};
                rowData.FirstName = row.FirstName;
                rowData.LastName = row.LastName;
                rowData.Phone = row.Phone;
                rowData.Email = row.Email;
                rowData.Sibling__c = row.Sibling__c;
                rowData.urlpath = urlpath+row.Id+'/view';
                currentData.push(rowData);
            });
            this.data = currentData;
            console.log('data of search in search component----',this.data);
        }
        if(result.error){
            this.error=result.error;
        }
    }

screen shot