테이블 컬럼 설정 바꿔보기

지난 튜토리얼에서 워크플로우를 활용하여 테이블 컴포넌트를 만들어 보았습니다.
이번 튜토리얼에서는 만들어 둔 테이블로 컬럼을 설정하는 방법에 대해 살펴보겠습니다.

컬럼의 이름 바꾸기

우선 테이블에 표기될 컬럼의 이름을 바꿔 보도록 합니다.
프로퍼티 우측의 컬럼 목록 중 변경할 컬럼을 클릭합니다.

tutorial 2-1

그리고 컬럼의 이름을 '이름'으로 변경해 줍니다.
그러면 테이블 헤더가 변경된 컬럼의 이름으로 표기된 것을 확인할 수 있습니다.

tutorial 2-2

다음은 이름 컬럼의 값을 변형해 봅시다.
이름 컬럼 우측에 있는 설정 버튼을 클릭 후 {{ item }} 값을 {{ item ?? '' }}으로 변경해 줍니다.
값이 null이면 빈 문자열('')을 표기하기 위한 코드입니다.

tutorial 2-3

이번에는 컬럼을 삭제해 봅시다.
현재 컬럼 설정 프로퍼티 가장 상단에서 테이블 이름을 눌러주면 테이블 프로퍼티로 돌아갈 수 있습니다.

tutorial 2-4

컬럼 목록에서 삭제할 컬럼에 마우스를 올리면 가장 우측에 있는 삭제 아이콘을 클릭할 수 있습니다.

tutorial 2-5

또는 컬럼 설정 프로퍼티의 우측 상단 메뉴를 누른 뒤 컬럼을 삭제할 수도 있습니다.

tutorial 2-6

이번에는 컬럼을 새로 추가해 봅시다.
컬럼 목록 가장 오른쪽에 있는 + 버튼을 클릭합니다.

tutorial 2-7

추가한 컬럼을 변경해 봅시다.
컬럼의 소스를 워크플로우에서 가져온 데이터 중에서 선택할 수 있습니다.

tutorial 2-8

데이터 정렬 방식을 변경하거나 컬럼 너비를 고정하는 등의 설정을 변경할 수 있습니다.
컬럼 너비를 200px로 고정해 보겠습니다.

tutorial 2-9

컬럼 설정에 맞추어 테이블에 컬럼이 추가된 것을 확인할 수 있습니다.

tutorial 2-10

이번 튜토리얼에서는 테이블의 컬럼 설정을 하는 방법을 소개해 드렸습니다.
앞으로 더 많은 튜토리얼을 통해 홉스로 얼마나 빠르고 쉽게 어드민, 백오피스 개발을 할 수 있는지 소개해 드리도록 하겠습니다.