Contact lightning-datatable

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 :


    <div style="height: 300px;">


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':
            case 'show_details':

    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;
  • 1
    This may be an X-Y Problem. The data you want to get to is already present in the source data that feeds into columns. What are you trying to accomplish by querying the table cell? Explaining your underlying business problem would allow us to help you out better.
    – sfdcfox
    Nov 17, 2022 at 19:38
  • Thanks for trying to help, but I don't want data or any other stuff I only want location of that column. I want to show a popup on 3rd column (Email), so that's why I want the top or left coordinates . Nov 19, 2022 at 15:26
  • Ah, that makes sense. The Shadow DOM, however, prevents you from reading "closed" components, of which all standard components are closed. You'd have to implement something from scratch in order for you to get at those details. The best you can get away with would be to check the clientX/clientY properties to determine where to draw something.
    – sfdcfox
    Nov 20, 2022 at 2:22

1 Answer 1


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


You must log in to answer this question.

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