LWC 기본테이블 (1)

컴포넌트 개발중에 제일 기본적이고 많이 사용하는것이 테이블이다 

데이터 조회용도 있지만 보통 수정 삭제가 가능한 테이블을 많이 사용한다. 

 

1. 우선 데이터를 조회하기 위한 Contact 에 샘플데이터를 넣어준다. 

2. LWC 컴포넌트 생성 

 

html 은 아래와 같다

<template>

    <table class="slds-table slds-table_bordered slds-table_col-bordered">

        <!-- 헤더 -->

        <thead>

            <tr>

                <th>No</th>

                <th>이름</th>

                <th>폰번호</th>

                <th>이메일</th>

            </tr>

        </thead>

        <!-- 내용 -->

        <tbody>

            <template for:each={contactData} for:item="item" for:index="index">

                <tr key={item.No}>

                    <td>{item.number}</td>

                    <td>{item.LastName}</td>

                    <td>{item.MobilePhone}</td>

                    <td>{item.Email}</td>

                </tr>

            </template>

        </tbody>

    </table>

</template>

 

JS는 아래와 같다 

아래 주석에서 설명한 것 과 같이 LWC 배열에서 seq 정보를 활용할땐 시작이 0 부터 나온다. 

1부터 노출을 원한다면 js 에서 index 를 재배열해서 노출시켜야한다 ( html에서 {index+1} 이런방법은 먹히질 않는다)

import { LightningElement } from 'lwc';

import getContactData from '@salesforce/apex/tableSampleController.getContactData';

export default class sampleTable extends LightningElement {

   

    contactData = [];

    connectedCallback(){

        console.log('로딩하면서 찍힘');

        this.getData();

    }

    /*

    컨트롤러에서 Contact 정보를 가져옴

    */

    getData(){

        getContactData({})

        .then((data) => {

            console.log(' 가져온값 확인 => ' , data );

            console.log(' 데이터길이 확인 => ' , data.length );

            if ( data.length > 0 ){

                // LWC 에서 seq를 표현할땐 0부터 시작하기때문에 1부터 시작하도록 하려면 js로 재배열해줘야한다  

                this.contactData = data.map((contact, index) => {

                    return { ...contact, number: index + 1 };

                });

            }

        })

        .catch((error) => {

            console.log(' 에러난거임 => ' , error );

        })

    }

}

 

Controller는 아래와 같다 

LWC 에서 활용하는 컨트롤러는 @AuraEnabled 어노테이션을 필수로 붙여야한다. 

쿼리문에는 LIMIT 을 붙이는 습관을 들이는게 좋다. ( 50,000건이 넘어가면 LimitException 에러난다 )

public with sharing class tableSampleController {

    /*

    연락처(Contact)정보를 가져와서 반환

    */

    @AuraEnabled

    public static List<Contact> getContactData(){

        List<Contact> con = [ SELECT id , LastName , email , MobilePhone FROM Contact WHERE MobilePhone !=null LIMIT 1000 ];

        return con;

    }

}

 

이렇게 1차적으로 기본적인 table조회용 컴포넌트는 마무리

2차로 테이블에 css 넣는건 다음포스팅 참조!