1

As you can see in .js, the table has only 1 row, but it is generating 5 rows... I don't understand why.

.js file

import { LightningElement,track } from 'lwc';

export class Table extends LightningElement {
  @track columns = ['', 'COLUMN 1', 'COLUMN 2', 'COLUMN 3', 'COLUMN 4'];
  @track rows = [1];
}

.html file

<template>
    <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large" aria-modal="true">
        <div class="slds-modal__container">
            <!-- header -->
        </div>
        <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-no-row-hover" role="listbox"
            id="lookup-grouped-table-id-1">
            <thead>
                <tr>
                    <template for:each={columns} for:item="col">
                        <th key={col}>
                            {col}
                        </th>
                    </template>
                </tr>
            </thead>
            <tbody>
                <template for:each={rows} for:item="row">
                    <template for:each={columns} for:item="col">
                        <tr key={row}>
                            <td key={row} class="slds-text-align_left">
                                <div key={row} class="slds-form-element__control">
                                    <input type="radio" id={row} value={row} name="default" checked="" />
                                </div>
                            </td>
                            <td key={row}>
                                <div class="slds-truncate" title="Seattle, WA">XXX</div>
                            </td>
                            <td key={row}>
                                <div class="slds-truncate" title="Seattle, WA">ABC</div>
                            </td>
                            <td key={row}>
                                <div class="slds-truncate" title="Seattle, WA">XYZ</div>
                            </td>
                            <td key={row}>
                                <div class="slds-truncate" title="Seattle, WA">OPQ</div>
                            </td>
                        </tr>
                    </template></template>
            </tbody>
        </table>
        </div>
        </div>
        <div class="slds-modal__footer slds-modal__footer_directional">
            <button class="slds-button slds-button_neutral" aria-label="Cancel and close">Cancel</button>
            <button class="slds-button slds-button_neutral">New Account</button>
        </div>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
</template>

Edit: I followed what @Nick Nick Cook said, but it's rendering like this: enter image description here

2 Answers 2

2

You're creating a row for each column.

change

<template for:each={rows} for:item="row">
       <template for:each={columns} for:item="col">
              <tr key={row}>

to

<template for:each={rows} for:item="row">
    <tr key={row}>
          <template for:each={columns} for:item="col">

and change

           </tr>
        </template></template>

to

       </template>
    </tr>
 </template>

(and associated matching tags/keys)

3
  • Hi! Thanks, but is not rendering correctly...See the picture that I add in my question.
    – Cline
    Jan 19 at 0:05
  • @Caroline did you update the matching tags? I've updated the answer to include that.
    – Nick Cook
    Jan 19 at 0:18
  • Yes! I've just solved it. I put what i did! Thanks
    – Cline
    Jan 19 at 0:20
0

I changed

<template for:each={rows} for:item="row">
       <template for:each={columns} for:item="col">
              <tr key={row}>

To

  <template for:each={rows} for:item="row">
                  <tr key={row}>

I didn't understand how, but it got to identify the number of columns without the need for the other for each

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.