You need to sign in to do that
Don't have an account?
Pavushetti Abhilash 3
Display LWC datatable based on Row input and Column input fields
Hi Everyone.
I need to display LWC datatable based on two input fields. One input field is for ROW and second input field for COLUMN. When user give 2 as row input field, 3 as column input field. Then 2 -Row 3-Column empty datatable shoold display. Please let me know on this.
I need to display LWC datatable based on two input fields. One input field is for ROW and second input field for COLUMN. When user give 2 as row input field, 3 as column input field. Then 2 -Row 3-Column empty datatable shoold display. Please let me know on this.
Hi Pavushetti,
Please Tyr this code
//CreateTale.html file
<template>
<div style="background-color: aliceblue;">
<div>
<div class="slds-p-around_medium lgc-bg">
<lightning-input type="text" label="Enter Your Column" onchange={handleInputChange1}></lightning-input>
</div>
<div class="slds-p-around_medium lgc-bg">
<lightning-input type="text" label="Enter Row" onchange={handleInputChange}></lightning-input>
</div>
<div>
<button onclick={generateCole}>click</button>
</div>
</div>
<table>
<thead>
<tr>
<template for:each={rowArrayData} for:item="col">
<th key={col}>Col</th>
</template>
</tr>
</thead>
<tbody>
<template for:each={collArrayData} for:item="col">
<tr key={col}>
<template for:each={rowArrayData} for:item="col">
<td key={col}>Row</td>
</template>
</tr>
</template>
</tbody>
</table>
</div>
</template>
//CreateTable.js File
import { LightningElement, track } from 'lwc';
export default class CreateTable extends LightningElement {
@track rowArrayData = [];
@track collArrayData = [];
rowValue;
colValue;
handleInputChange1(event) {
this.rowValue = event.target.value;
}
handleInputChange(event) {
this.colValue = event.detail.value;
}
generateCole() {
for (let i = 0; i < this.rowValue; i++) {
this.rowArrayData.push(i);
}
for (let i = 0; i < this.colValue; i++) {
this.collArrayData.push(i);
}
}
}
//createTable.js-meta.xml file
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
I hope you find the above solution helpful.
If it does, please mark as Best Answer to help others too.
Thanks and Regards,
Suraj