Having trouble adding a new row when clicking the New Button in a Lightning Data table. I've created a lightning-button in HTML and called the method in JavaScript. However, when I click the New button, I'm getting an error message saying Undefined.
**CustomComponent.html:**
<template>
<lightning-card >
<lightning-button-group>
<lightning-button label="New" onclick={addRow}></lightning-button>
</lightning-button-group>
<lightning-datatable data={strpData} columns={columns} onsave={saveHandleAction}
draft-values={fldsItemValues} key-field="Id" onrowselection={getSelectedRows}>
</lightning-datatable>
</lightning-card >
</template>
**CustomComponent.JS:**
import { LightningElement, track, api, wire } from 'lwc';
const columns = [
{label:'NUMBER', fieldName:'Name' },
{label: 'Test1', fieldName: 'Test1'}
];
export default class CustomComponent extends LightningElement {
@track columns = columns;
@track strpData = [];
addRow() {
// this.isShowModal = true;
console.log('>>>adding row>>>');
const newRow ={'Name':'','Test1':''};
console.log('>>>new row>>>'+this.newRow);
this.strpData.push(newRow);
console.log('strpData ==>>> '+JSON.stringify(strpData));
}
}
Encountering a console log error during this process:
https://i.sstatic.net/tvqgm.png
Appreciate any assistance with this issue. Thank you.