DataTable in Lightning Web Component (LWC)

 

1. <lightning-datatable> 이란?

LWC의 DataTable 구성 요소는 Salesforce에서 표 형식 데이터를 표시하고 상호 작용하는 데 필수적인 도구

 

---

2. datatable에서 보여줄 List와 Columns 생성

 

2-1 : data List 생성

 

//js파일

import { LightningElement, track, api } from 'lwc';

 

export default class Kk_gwiseok extends LightningElement {

 

@track data = [];

 connectedCallback() {

   

        const data = [

            { id:'123', TemplateTitle__c:'공급계약서',     TemplateId__c:' tmplate01'},

            { id:'456', TemplateTitle__c:'후지급계약서', TemplateId__c:' tmplate02'}

        ]

 

        this.data = data;

    }

 

}

 

---

2-2 : columns 생성

 

//js파일

 

import { LightningElement, track, api } from 'lwc';

 

 

const columns = [

    { label: '템플릿 제목', fieldName : 'TemplateTitle__c',       type: 'text', sortable: "true", hideDefaultActions : "true"},

    { label: '상태',             fieldName : 'Status__c',                  type: 'text', hideDefaultActions : "true" },

    { label: '생성일',          fieldName : 'CreateDate__c',         type: 'date', hideDefaultActions : "true" },

    { label: '최종 수정일', fieldName : 'LastModifiedDate__c', type: 'date', hideDefaultActions : "true" },

    { type: 'button',

      typeAttributes: {

          label: '필드 매핑',

          name: 'field_mapping',

          title: '필드 매핑',

          variant: 'base' ,

          value: '필드 매핑'

      },

      cellAttributes: { alignment: 'center' },

      initialWidth: 100

    },

    { type: 'button',

      typeAttributes: {

          label: '삭제',

          name: 'delete_button',

          title: '삭제',

          variant: 'destructive-text' ,

          value : '삭제'

      },

      cellAttributes: { alignment: 'center' },

      initialWidth: 100

    }

];

 

export default class Kk_gwiseok extends LightningElement {

   

    columns = columns;

    ....   

 

}

 

 

---

3. HTML 파일 작업

• <lightning-datatable>로 데이터 표시
• 여러 가지 설정 값들로 원하는 대로 테이블 수정 및 표시
• hide-checkbox-column, onrowaction, sorted-by 등

 

<div style="height: 300px;">

                <lightning-datatable

                        key-field="id"

                        data={data}

                        columns={columns}

                        column-widths-mode="auto"

                        hide-checkbox-column="true"

                        onrowaction={handleRowAction}

                >

                </lightning-datatable>

</div>

 

---

4. 화면 확인

---

 

5. 주요 속성 확인

<lightning-datatable

• column-widths-mode="auto" - 열 너비 자동 지정
• hide-checkbox-column="true" - 체크박스 안 나오게 설정
• onrowaction={handleRowAction}  - 행마다 발생하는 action 감지
• sorted-by={sortBy} - 정렬 관련 설정
• sorted-direction={sortDirection} - 정렬 관련 설정
• onsort={doSorting} - 정렬 관련 설정

>