0

I used 'View' button in datatable to navigate to record. I put the LWC in VF page using lightning out and it made the UI inconsistent. Check this question for details. Is there something else that I can use for navigation other than button and button-icon? Maybe convert name to a hyperlink that will navigate to respective records? Hopefully, it will make the UI consistent.

It seems like a salesforce bug

Classic View

Classic view

Lightning View

Lighting View

HTML

<div style="height: 300px;">
      <lightning-datatable key-field="Id" data={wrappers} columns={columns}
            onrowaction={navigateToRecordViewPage} hide-checkbox-column="true">
      </lightning-datatable>
</div>

Declaration of columns for datatable

const columns = [
    {
        label: 'View',
        type: 'button',
        initialWidth: 50,
        typeAttributes: {
            label: 'View',
            title: 'View',
            variant: 'base',
            alternativeText: 'View',
            target:'_blank'
        }
    },
    { label: 'Name', fieldName: 'name', type:'text' },
    { label: 'Email', fieldName: 'email', type: 'email' },
    { label: 'Phone', fieldName: 'phone', type: 'phone'},
    { label: 'MDM ID', fieldName: 'mdm', type: 'text' },
];

Navigation

navigateToRecordViewPage(event) {
        this.record = event.detail.row;
        if(this.isLightning===true){
            this[NavigationMixin.GenerateUrl]({
                type: 'standard__recordPage',
                attributes: {
                    recordId: this.record.id,
                    actionName: 'view'
                }
            }).then(url => {
                window.open(url);
            });
        }
        else{
            window.location.assign(window.open('/'+this.record.id));
        }
    }

Your Answer

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

Browse other questions tagged or ask your own question.