+ 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 
<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