1

How to have on click action for specific column in data table in lwc. consder this as example, js:

columns = [ {label: 'Opportunity name', fieldName: 'opportunityName', type: 'text'},
{label: 'Confidence', fieldName: 'confidence', type: 'percent', cellAttributes: { iconName: { fieldName: 'trendIcon' }, iconPosition: 'right' }} ];

I want to open a modal by clicking on "Confidence". if I give onclick in html, for example:

<lightning-datatable data={data} columns={columns}" onclick={openmodal}></lightning-datatable>

In this case modal will open wherever I click on data-table, instead of specific column.

Anyone knows any solution for this?

1 Answer 1

3

Implement a custom data type with your html executing modal on click

Recently a new feature was released which allows to define custom data types in standard lightning:datatable component.

Create a LWC component customTable with the following JS

import LightningDatatable from 'lightning/datatable';
import clickModal from './clickModal.html';
 
export default class CustomTable extends LightningDatatable {
    static customTypes = {
        clickModal: {
            template: clickModal,
            standardCellLayout: true
        }
    }
}

Create in the customTable folder additional file clickModal.html

<template>
    <lightning-formatted-text value={value} onclick={openModal}></lightning-formatted-text>
</template>

Use overridden version of Lightning Data Table

<c-custom-table ...> 

Set the column type to clickModal

columns = [ {
    label: 'Opportunity name', fieldName: 'opportunityName', type: 'text'}, {
    label: 'Confidence', fieldName: 'confidence', type: 'clickModal', cellAttributes: {
        iconName: { fieldName: 'trendIcon' },
        iconPosition: 'right'
    }
} ];
2
  • sorry, i didnt understand how will that become specific to a column. could you please elaborate if possible
    – userName
    Commented Sep 30, 2021 at 15:20
  • I have updated my answer to include more details
    – Patlatus
    Commented Sep 30, 2021 at 15:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .