+ Start a Discussion
Pavushetti Abhilash 3Pavushetti 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.
Suraj Tripathi 47Suraj Tripathi 47

Hi Pavushetti,
Please Tyr this code 
//CreateTale.html file 
    <div style="background-color: aliceblue;">
            <div class="slds-p-around_medium lgc-bg">
                <lightning-input type="text" label="Enter Your Column" onchange={handleInputChange1}></lightning-input>
            <div class="slds-p-around_medium lgc-bg">
                <lightning-input type="text" label="Enter Row" onchange={handleInputChange}></lightning-input>
                <button onclick={generateCole}>click</button>
                    <template for:each={rowArrayData} for:item="col">
                        <th key={col}>Col</th>
                <template for:each={collArrayData} for:item="col">
                    <tr key={col}>
                        <template for:each={rowArrayData} for:item="col">
                            <td key={col}>Row</td>


//CreateTable.js File
import { LightningElement, track } from 'lwc';
export default class CreateTable extends LightningElement {
    @track rowArrayData = [];
    @track collArrayData = [];

    handleInputChange1(event) {
        this.rowValue = event.target.value;
    handleInputChange(event) {
        this.colValue = event.detail.value;
    generateCole() {
        for (let i = 0; i < this.rowValue; i++) {
        for (let i = 0; i < this.colValue; i++) {

//createTable.js-meta.xml file
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

I hope you find the above solution helpful.
If it does, please mark as Best Answer to help others too.
Thanks and Regards,