Auto focus to first cell of empty row in lightning datatable when new is clicked

Question

I have a Add button and a lightning datatable.

When I click on add button I want to add a row to datatable.

Now, Instead of showing a popup (after clicking add btn) I want to show an empty row and focus to the first cell of the row so that user can type the information. If the first cell column is of type picklist then I want to show all the picklist value options available in that field as a drop down or sth similar.

I can add an empty row in the table but I am not able to focus on the first cell (or the new row).

So, Need help on how I can focus the new row and directly type in information. Also is it possible to show all the picklist values in the first cell if the first column is of type picklist (so that when a user clicks on add, I automatically focus the first cell and show all the picklist options)

Here Is my change so far ?

<template>
    <lightning-card title='HelloTable'>
            <lightning-button variant="brand" label="Add" title="Add data" onclick={addRow}></lightning-button>
        <lightning-datatable class="testclass" 
            key-field="Id" 
            columns={tableColumns} 
            data={tableData} 
            hide-checkbox-column=true
            wrap-text-max-lines="3">
        </lightning-datatable>
    </lightning-card>

</template>

import { LightningElement, track, api } from 'lwc';

const dummyColumns = [
    {label: 'Opportunity name', fieldName: 'opportunityName', type: 'text', editable: true},
    {label: 'Confidence', fieldName: 'confidence', type: 'percent', cellAttributes:
    { iconName: { fieldName: 'trendIcon' }, iconPosition: 'right' }, editable: true},
    {label: 'Amount', fieldName: 'amount', type: 'currency', typeAttributes: { currencyCode: 'EUR'}, editable: true},
    {label: 'Contact Email', fieldName: 'contact', type: 'email', editable: true},
    {label: 'Contact Phone', fieldName: 'phone', type: 'phone', editable: true},
];


const dummyData = [{
                   id: 'a',
                   opportunityName: 'Cloudhub',
                   confidence: 0.2,
                   amount: 25000,
                   contact: '[email protected]',
                   phone: '2352235235',
                   trendIcon: 'utility:down'
               },
               {
                   id: 'b',
                   opportunityName: 'Quip',
                   confidence: 0.78,
                   amount: 740000,
                   contact: '[email protected]',
                   phone: '2352235235',
                   trendIcon: 'utility:up'
               }];


    export default class App extends LightningElement {
        @track
        _tableData;
        _tableColumns;
    
        constructor(){
            super()
            this._tableData= dummyData
            this._tableColumns= dummyColumns
    
        }
    
        @api
        get tableColumns(){
            return this._tableColumns;
        }
    
        set tableColumns(val) {
            this._tableColumns= val;
        }
        @api
        get tableData(){
            return this._tableData;
        }
    
        set tableData(val){
            this._tableData= val; 
        }
    
        addRow(event) {
            let randomData = {
                id: 'c',
                opportunityName: '',
                confidence:'',
                amount: '',
                contact: '',
                phone: '',
                trendIcon: ''
            };
            debugger;
            this._tableData = [...this._tableData , randomData];
            let testVal = this.template.querySelector('.slds-cell-edit');
            testVal.focus();
            console.log(JSON.stringify(testVal));
        }
        
    
         
    
    }

Answer 1

I don't think this is possible with the existing features of lightning-datatable. You would have to implement a custom data table to achieve this. Your code will run into error in the line after this.template.querySelector('.slds-cell-edit') because this code doesn't fetch anything. Note that every component (base or custom) in LWC operates under its own shadow DOM and one component cannot reach into another components DOM. In the aforementioned code, you are trying to reach into the shadow DOM of lightning-datatable and hence, that code will return null. There are no column or data attributes in lightning-datatable at the moment that facilitate your requirement.

At the most, if you are creating custom data type to be used in the data-table cell, you would be able to specify data-navigation="enable" (which enables accessibility and keyboard navigation using the accessibility modules i.e., basically this helps with TAB key navigation) and doesn't help with your requirement.