Get location of an element(column) which is dynamically created by lightning-datatable

Question

This is the lightning datatable and I want to get the location of Email column (3rd). But the problem is that there is no HTML code for the table, so I can not use querySelector for it. Lightning datatable dynamically creates the whole table itself.

Here is my code :

main.html

<template>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}
                onrowaction={handleRowAction}>
        </lightning-datatable>
    </div>
</template>

main.js

import { LightningElement } from 'lwc';
import generateData from './generateData';

const actions = [
    { label: 'Show details', name: 'show_details' },
    { label: 'Delete', name: 'delete' },
];

const columns = [
    { label: 'First Name', fieldName: 'First Name' },
    { label: 'Last Name', fieldName: 'Last Name' },
    { label: 'Email', fieldName: 'Email', type: 'email' },
    { label: 'Phone', fieldName: 'phone', type: 'phone' },
    { label: 'Account Name', fieldName: 'Account Name' },
    {
        type: 'action',
        typeAttributes: { rowActions: actions },
    },
];

export default class BasicDatatable extends LightningElement {
    data = [];
    columns = columns;

    connectedCallback() {
        const data = generateData({ amountOfRecords: 5 });
        this.data = data;
    }

handleRowAction(event) {
        const actionName = event.detail.action.name;
        const row = event.detail.row;
        switch (actionName) {
            case 'delete':
                this.deleteRow(row);
                break;
            case 'show_details':
                this.showRowDetails(row);
                break;
            default:
        }
    }

    deleteRow(row) {
        const { id } = row;
        const index = this.findRowIndexById(id);
        if (index !== -1) {
            this.data = this.data
                .slice(0, index)
                .concat(this.data.slice(index + 1));
        }
    }

    findRowIndexById(id) {
        let ret = -1;
        this.data.some((row, index) => {
            if (row.id === id) {
                ret = index;
                return true;
            }
            return false;
        });
        return ret;
    }
}

Answer 1

I think we can use Shadow DOM to create HTML markup and then use querySelector to find desired element.

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_dom