테이블 컬럼 설정 바꿔보기

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

컬럼의 이름 바꾸기

우선 테이블에 표기될 컬럼의 이름을 바꿔 보도록 합니다.
location 컬럼 우측에 있는 설정 버튼을 클릭 후 하단의 설정 버튼을 클릭합니다.
그리고 컬럼의 이름을 '지역'으로 변경해 줍니다.
그러면 테이블 헤더가 변경된 컬럼의 이름으로 표기된 것을 확인할 수 있습니다.

컬럼의 값 변경하기

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

컬럼 삭제하기

이번에는 컬럼을 삭제해 봅시다.
테이블 헤더의 가장 오른쪽에 있는 birth_year 컬럼의 설정 버튼을 클릭 후 상세 설정에서 삭제 버튼을 클릭합니다.

컬럼 추가하기

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

컬럼 변경하기

추가한 컬럼을 변경해 봅시다.
첫 번째로 컬럼의 소스를 변경합니다. 최상단의 소스를 연결된 워크플로우에 있는 소스 중에 선택하여 변경할 수 있습니다.
여기서는 birth_year를 선택해 보겠습니다.

그리고 컬럼의 이름을 생일로 변경해주고 데이터 정렬도 가운데 정렬로 바꾸어 주겠습니다.
컬럼 너비 또한 200px으로 고정해 보겠습니다.

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

더 알아보기

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