Add special behavior to First and Last row in Iteration in Lightning Web Component | LWC Stack ☁️⚡️

Kapil February 05, 2022

 In this blog I will show you how you can add some special behavior to your first and last row in a Iteration.

In lightning web component to show records on UI we are using <template for:each={data} >

But here while using it what if you want to show something on the first row or maybe on the last row ? 

For that you may use iterator instead of for:each loop.

In below example I am having two list of records in my Lightning Web Component. First one is using for each and the next one is using the iterator.

In the 2nd list you will notice in first and last row I have added some special behavior. Like in first row I have added a border and in last row I have removed the <hr/> tag using first and last value in iterator.


HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<template>
  <!-- With for each loop -->
  <div class="slds-box" style="background-color: white; border: 1px solid red">
    <template if:true={accounts.data}>
      <template for:each={accounts.data} for:item="account">
        <a
          href="#"
          key={account.Id}
          data-account-id={account.Id}
          onclick={handleSelect}
        >
          <lightning-layout>
            <lightning-layout-item padding="horizontal-small">
              <p>{account.Name}</p>
              <hr />
            </lightning-layout-item>
          </lightning-layout>
        </a>
      </template>
    </template>
  </div>

  <!-- With iterator loop -->
  <div class="slds-box" style="background-color: white; border: 1px solid blue">
    <template if:true={accounts.data}>
      <template iterator:it={accounts.data}>
        <a
          href="#"
          key={it.value.Id}
          data-account-id={it.value.Id}
          onclick={handleSelect}
        >
          <lightning-layout>
            <lightning-layout-item padding="horizontal-small">
              <div if:true={it.first}>
                <div style="border: 5px solid black"></div>
              </div>
              <p>{it.value.Name}</p>
              <div if:false={it.last}>
                <hr />
              </div>
            </lightning-layout-item>
          </lightning-layout>
        </a>
      </template>
    </template>
  </div>
</template>


JS

1
2
3
4
5
6
import { LightningElement,wire } from 'lwc';
import getAccList from '@salesforce/apex/AccountController.getAccList';

export default class GetAccountList extends LightningElement {
    @wire(getAccList) accounts;
}


Apex

1
2
3
4
5
6
7
8
public with sharing class AccountController{
   	public String contentVersionId { get; set; }

    @AuraEnabled(cacheable=true)
    public static List<Account> getAccList(){
        return [SELECT Id, Name, Phone,Rating FROM ACCOUNT ORDER BY CreatedDate desc Limit 10];
    }
}


Output


Checkout complete video below


 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments