Uncaught Typeerror: Cannot Read Property 'name' of Undefined Salesfroce

I have created a Custom LWC Datatable following Creating Custom Data Types in Salesforce Documentation . My Custom LWC cell component equally below,

                                  
                    and it's Javascript Controller as below,
                    import { LightningElement, runway, api } from 'lwc'; consign default class invoiceCustomAction extends LightningElement { handlePayNow(event){ console.log('exam A'); //panel.log('value '+ this.value); } handleDownload(event){ console.log('test B'); //console.log('download '+ this.value); } }        

My Custom Data table component every bit below: Markup

JS Controller

          import LightningDatatable from 'lightning/datatable'; import invoiceCustomAction from './invoiceCustomAction.html'; export default class test_InvoicesCustomDatatable extends LightningDatatable { static customTypes = { customInvoiceCell: { template: invoiceCustomAction, standardCellLayout: truthful // Provide template data here if needed } //more custom types here }; }        

Consumer lawmaking:

component markup:

                                  
                    JS Controller
                    import { LightningElement,track,api } from 'lwc'; import FORM_FACTOR from '@salesforce/client/formFactor'; import getInvoices from '@salesforce/apex/Test_InvoiceListController.getInvoices'; const columns = [ { characterization: 'Date issued', fieldName: 'issueDate', type: 'date', sortable : true }, { label: 'Account', fieldName: 'accountNo' , sortable : truthful, blazon: 'text'}, { characterization: 'Invoice #', fieldName: 'invoiceNo', sortable : true, type: 'text'}, { characterization: 'Date due past', fieldName: 'dueDate', blazon: 'date', sortable : true }, { label: 'Amount', fieldName: 'amount', type: 'currency', sortable : true }, { label: 'Status', fieldName: 'condition', sortable : truthful, blazon: 'text'}, { label: 'Activeness', type: 'customInvoiceCell', fieldName: 'index'} ]; consign default class Test_InvoiceList_Outstanding extends LightningElement { @track idw = {listIW:[]}; // Invoices Display Wrapper Object @runway page = ane; // Current Page number @api perpage = 10; // Records per Folio @track pages = []; // Page numbers array set_size = 3; // Number of Folio number buttons @track numberOfPages = 1; // Number of pages to show @rail sortedBy = 'accountNo'; // Sort field @rails sortDirection = 'asc'; // Sort management @track isLoading = true; // Loading UI @track searchText = ''; // Search text @track filteredResults = [] // Filtered Invoice wrappers displayed on Datatable,etc. @rails pageStartIdx = 0; // Page first record alphabetize @track pageEndIdx = 0; // Page end record index @track searchTextPlaceHolder = 'Search past keyword, name'; // Search Text Place holder @track selectedRows = []; // Current page'south row choice @rails allSelectedRows = new Map(); // PageNo => Selected row Ids[] map to go on persistent selection in paginated information table mapPage2SelIdx = new Map() navRefresh = imitation; renderedCallback(){ this.columns = columns; this.renderButtons(); } renderButtons = ()=>{ this.template.querySelectorAll('push').forEach((only)=>{ but.manner.backgroundColor = this.page===parseInt(but.dataset.id,10)?'blue':'white'; }); } get pagesList(){ let mid = Math.floor(this.set_size/2) + 1 ; if(this.page > mid){ if (this.page==(this.pages.length)) // Last page render this.pages.piece(this.page-mid-1, this.page+mid-one); else return this.pages.slice(this.page-mid, this.folio+mid-1); } return this.pages.slice(0,this.set_size); } async connectedCallback(){ this.isLoading = true; this.idw = await getInvoices(); if (this.idw!=cipher && this.idw.listIW!=null) this.filteredResults = this.idw.listIW.slice(0); this.isLoading = simulated; this.setPages(this.filteredResults); } pageData = ()=>{ let page = this.page; let perpage = this.perpage; permit startIndex = (page*perpage) - perpage; let endIndex = (page*perpage); this.pageStartIdx = startIndex + 1; this.pageEndIdx = (endIndex > this.filteredResults.length) ? this.filteredResults.length : endIndex; return this.filteredResults.slice(startIndex,endIndex); } setPages = (information)=>{ this.page = 1; this.pages = []; this.numberOfPages = Math.ceil(data.length / this.perpage); for (let alphabetize = i; index <= this.numberOfPages; index++) { this.pages.push(index); } } get hasPrev(){ return this.page > ane; } get hasNext(){ render this.page < this xss=removed>{ this.navRefresh = true; ++this.page; } onPrev = ()=>{ this.navRefresh = true; --this.page; } onPageClick = (e)=>{ this.navRefresh = true; this.page = parseInt(e.target.dataset.id,10); } get currentPageData(){ this.selectedRows = this.selectedRows.splice(0); return this.pageData(); } get currentSelection(){ allow selectedRecs = this.mapPage2SelIdx.get(this.page); if (!Assortment.isArray(selectedRecs)) selectedRecs = []; render selectedRecs; } updateColumnSorting(outcome) { this.sortedBy = event.particular.fieldName; this.sortDirection = event.detail.sortDirection; this.sortData(this.sortedBy); } sortData(sortedBy){ var data = this.filteredResults; var reverse = this.sortDirection !== 'asc'; data.sort(this.sortBy(sortedBy, reverse)); this.filteredResults = data; } sortBy(field, opposite, primer) { var key = primer ? function(ten) {return primer(x[field])} : function(x) {return x[field]}; opposite = !reverse ? one : -1; return role (a, b) { render a = key(a), b = key(b), reverse * ((a > b) - (b > a)); } } handleFilterChange(effect) { } onRowSelection(event){ } }        

On the custom datatable component cell, when you click any push button/url except the one having upshot handler , it'due south throwing the beneath error.

Any assist to understand what it means? And how to resolve typeerror: cannot read property 'apply' of undefined? what could exist missing in the custom LWC component? Thanks!

In the custom data table implementation code (i.e., the component that extends LightningDatatable/ in your case test_InvoicesCustomDatatable), a reference should be provided to either another custom component or an HTML file. This custom component or HTML file is the 1 that defines the custom cell construction (& related code) to be used in the custom information table.

Case 1: If the custom prison cell displays static content and doesn't implement any custom user interaction, then define a custom HTML file and place it within the custom data table component directory [i.due east., test_InvoicesCustomDatatable volition have test_InvoicesCustomDatatable.html too equally another HTML file (say customCellContent.html) that defines cell content]. Now, in the component JS file, you can import HTML file using the code import customCellContent from './customCellContent.html' and employ this import to define the custom data types. Sample lawmaking every bit shown beneath:

                      static customTypes = { customDataType: { template: customCellContent, standardCellLayout: true, // Provide template information here if needed typeAttributes: ['attrA', 'attrB'] // Define custom attributes, if needed } };        

Case 2: If the custom cell has complex structure or implements custom user interactions (such as buttons etc.), then create a new LWC component (say myCustomCellComp) and identify all the cell related HTML/ code logic in the same. Now, create a HTML file (customCellContent.HTML) within the custom datatable component directory (similar to previous instance) and place the following code in it : . This HTML file will serve as a conduit between the jail cell component and the datatable component. Importing the HTML reference and defining custom data blazon in the JS file will remain the aforementioned as previous case.

So, depending on the requirement, yous might demand to create either 2 or one lightning spider web components and any consumer lwc tin brand use of the custom data table component. For more than details, refer SF official documentation.

Or

 Reason for getting this typeerror: cannot read property 'apply' of undefined is, y'all have disabled Lightning Components Debug Style for the current user.

 To resolve this:

1. Get to Setup
   
2. In quick find type 'Debug Mode'
   
3. Click on the Debug Mode carte under Lightning Components
   
4. Select the user you wish to enable Debug mode for and click enabled.
   
5. Head dorsum to your component and this time you lot should meet a more descriptive error on the Modal.
   

berrysibille.blogspot.com

Source: https://www.janbasktraining.com/community/web-development/cannot-read-property-apply-of-undefined

Share this post