Sending data to lightning-datatable lwc custom column type

Question

I have a custom datatable with a custom column type containing a button, and a modal that pops up after the button is clicked.

I am having trouble figuring out how to send my datatable data to the modal and have it appear in the modal. The data is returned in JSON format, but when I reference the field names like I do in the other columns, salesforce treats them like strings rather than variables.

Please see attached screenshots.

Any help would be much appreciated!

@track columns = [
    { label: 'DETAILS', type: 'detailsButton', fieldName: 'details', fixedWidth: 70, cellAttributes: { alignment: "center" }, typeAttributes:
        {
            car: '?',
            tag: '?',
            entryDateTime: 'this.trips.entryDateTime',
            entryPoint: 'entryPoint',
            exitDateTime: 'exitDateTime',
            exitPoint: 'exitPoint',
        }
    },
    { label: 'COLOR', fieldName: 'color', type: 'text', fixedWidth: 90},
    { label: 'CAR', fieldName: 'car', type: 'text', initialWidth: 90, sortable: true},
    { label: 'TAG', fieldName: 'tag', type: 'text', fixedWidth: 70, sortable: true},
    { label: 'ENTRY DATE/TIME', fieldName: 'entryDateTime', type: 'text', sortable: true},
    { label: 'ENTRY POINT', fieldName: 'entryPoint', type: 'text', sortable: true},
    { label: 'EXIT DATE/TIME', fieldName: 'exitDateTime', type: 'text', sortable: true},
    { label: 'EXIT POINT', fieldName: 'exitPoint', type: 'text', sortable: true}
]

Answer 1

Ideally you should fire event with data of record identifier (Id field) which should be handled in parent component for fetching whole record based on passed Id and then showing record data in modal and the modal should be implemented in parent component which will show up in this event handler.

Explanation:

just pass the Id for fieldName without typeAttributes as below:

{ label: 'DETAILS', type: 'detailsButton', fieldName: 'Id', fixedWidth: 70, cellAttributes: { alignment: "center" }}

In the custom component dispatch event with composed and bubbles as true so that it becomes API for datatable:

this.dispatchEvent(new CustomEvent('showmodal', {
        detail: {
            recordId: this.recordId
        },
        bubbles: true,
        composed: true
    }));

You should define @api recordId and assign the value to recordId in custom component template so that value comes from mentioned fieldName - which is Id. You can refer to this example for understanding importance of value in template.

Now in the parent component handle the event:

<c-my-datatable onshowmodal={handleShowModal}