0

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: 'jrogers@cloudhub.com',
                   phone: '2352235235',
                   trendIcon: 'utility:down'
               },
               {
                   id: 'b',
                   opportunityName: 'Quip',
                   confidence: 0.78,
                   amount: 740000,
                   contact: 'quipy@quip.com',
                   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));
        }
        
    
         
    
    }
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.

2
  • How can I target the first cell, if I create a custom lightning datable? – lambad Aug 27 '20 at 23:57
  • If you were to implement a custom data table (i.e. define your own HTML), you would be handling the logic of adding new row within this custom component and this.template.querySelector would work within this component and focus method should work. But, keep in mind that implementing a custom data table could of medium to high complexity depending on your requirement. – arut Aug 28 '20 at 4:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.