0

Context - I am attempting to replace a legacy Visual Force table with a Lightning-Datatable. The only drawback I'm facing is that I cannot make the Case number in the table a link that jumps to the specific case. I can only get the number back as a NON-LINK.

Question - Is there a way to make the Case number a link that goes to the respective Case object (page), inside the Lightning-Datatable?

Visual Representation of What I am trying to accomplish: enter image description here

1

You should use column type button with variant base and handle the row action to navigate to case. You have 2 options to implement this:


Option 1 :

Define the columns and implement own logic to get and set the data. You can use the columns from below example and implement your logic for getting data and handling the row actions.


Option 2 :

You can use this datatable which uses standard lightning-datatable but fetches the data automatically. Below is the sample code:

HTML:

<template>
    <div class="slds-theme_default slds-box">
        <c-datatable config={config}
                     onrowaction={handleRowAction}>
        </c-datatable>
    </div>
</template>

JS:

import { LightningElement, wire, api, track } from 'lwc';
import { NavigationMixin, CurrentPageReference } from 'lightning/navigation';

export default class Poc extends NavigationMixin(LightningElement) {
    config = {
        objectName: 'Case',
        pageSize: 5,
        limit: 1000,
        tableConfig: {
            hideCheckboxColumn: true,
            columns: [
                {
                    api: 'CaseNumber',
                    fieldName: 'CaseNumber',
                    label: 'Case Number',
                    type: 'button',
                    typeAttributes: { label: { fieldName: 'CaseNumber' }, name: 'goToCase', variant: 'base' }
                },
                { api: 'Subject', fieldName: 'Subject', label: 'Subject' },
                { api: 'Account.Name', fieldName: 'AccountName', label: 'Account' },
                { api: 'Contact.Name', fieldName: 'ContactName', label: 'Contact' }
            ]
        }
    };

    handleRowAction(event) {
        const actionName = event.detail.action.name;
        const row = event.detail.row;
        switch (actionName) {
            case 'goToCase':
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: row.Id,
                        actionName: 'view'
                    }
                });
                break;
            default:
        }
    }
}
| improve this answer | |
  • When community members take out precious time to answer your questions, I think you should also reciprocate with either accepting answer/upvote/commenting if it did not work. Please go through meta.stackexchange.com/questions/5234/… – salesforce-sas Sep 11 '19 at 19:27

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.