이 섹션에서는 행과 열의 테이블 구조로 데이터베이스의 레코드와 같은 목록을 표시하는 데 사용되는 테이블 요소에 대해 다룹니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
테이블 요소는 Repeating Groups와 비슷하게 데이터베이스의 레코드와 같은 목록을 보여주기 위해 그룹의 내용을 각 항목마다 한 번씩 반복하는 요소입니다. 그러나 두 요소는 몇 가지 기본적인 차이점이 있으며, 이름에서 알 수 있듯이 테이블 요소는 깔끔한 테이블을 만들기에 적합하도록 특별한 속성을 갖추고 있습니다.
테이블 요소를 사용하면 쉽게 고정 열 헤더가 있는 테이블을 설정할 수 있습니다.
먼저 반복 그룹과 테이블 요소가 어떻게 다른지 살펴보겠습니다:
The difference between repeating groups and tables
이 두 요소 유형은 많은 특성을 공유하며 편집 방법도 거의 동일합니다. 하나의 셀 안에 넣은 요소는 해당 요소의 데이터 소스에 지정된 각 레코드에 대해 반복됩니다.
예를 들어, User 데이터 유형의 목록을 이러한 요소 중 하나로 로드하고 현재 셀의 사용자의 이메일 주소를 참조하는 텍스트 요소를 넣으면 각 행은 데이터베이스의 해당 항목의 이메일 주소를 표시합니다.
테이블 요소는 테이블을 더 쉽게 설정하고 유지할 수 있는 몇 가지 추가 기능을 제공합니다:
•
요소의 데이터 소스에 의해 테이블 상단에 있는 하나 이상의 정적 행이 영향을 받지 않도록 설정할 수 있습니다. 이는 열 머리글을 만드는 데 유용합니다.
•
정적 행을 고정시킬 수 있으며, 이는 아래의 레코드를 스크롤하는 동안 상단에 유지됩니다.
•
행 및 열을 추가 및 삭제할 수 있어 전체 테이블 구조를 필요에 따라 더 쉽게 변경할 수 있습니다.
•
행 및 열을 복사/붙여넣기할 수 있습니다.
•
테이블에는 행 내에서 내용을 완벽하게 정렬하는 데 도움이 되는 열이 있습니다.
반복 그룹은 간단한 목록, 카드 디자인 또는 메이슨리 그리드와 같은 리스트 정보의 유연한 디스플레이를 설정하려는 경우에 최적의 선택입니다. 테이블 요소는 행/열 및 레이블이 있는 클래식한 테이블 구조를 설정하려는 경우에 더 빠르게 작업할 수 있습니다.
Using the table element
페이지에 테이블 요소를 그릴 때 상단 행이 정적인 세 개의 열과 네 개의 행이 있는 테이블이 생성됩니다.
Static rows/columns
자동으로 생성된 테이블의 상단 행은 정적 행으로, 아래 행에 로드된 데이터 목록에 의존하지 않습니다. 하나 이상의 정적 행을 가질 수 있으며, 그 안에 넣은 요소는 반복되지 않습니다(반복 행 및 반복 그룹과는 다릅니다).
테이블 요소는 행뿐만 아니라 열도 사용하므로 정적 행의 내용을 반복 행의 내용과 쉽게 정렬할 수 있습니다. 이렇게 하면 일관된 크기 조정이 가능한 깔끔한 테이블을 디자인하는 데 용이합니다. 예를 들어 정적 행에 열 머리글을 배치하면 그것들이 반복 행의 내용과 자동으로 정렬됩니다.
테이블을 수직 대신 수평 방향으로 구성하면 행과 열이 전치됩니다.
Repeating rows/columns
반복 행에는 요소의 데이터 유형 및 데이터 소스 필드에서 지정한 데이터가 포함됩니다. 반복 그룹과 마찬가지로 각 행은 데이터 소스 목록의 항목당 한 번씩 (그 내용과 함께) 반복됩니다.
즉, 첫 번째 반복 행만 편집할 수 있습니다. 그런 다음 해당 내용이 아래의 행으로 복제됩니다. 필요한 만큼 많은 열을 추가할 수 있으며 각 열에는 자체 요소를 포함할 수 있습니다.
테이블을 수직 대신 수평 방향으로 구성하면 행과 열이 전치됩니다.
Selecting and managing the table element
테이블 요소에는 행 및 열의 축을 전환할 수 있는 orientation 속성이 있습니다. 기본적으로 테이블 방향은 수직입니다. 방향이 수평으로 구성되면 아래의 정보가 반전되어 행과 열이 전치됩니다.
테이블 요소는 다른 Bubble 요소와 약간 다르게 작동하며 각각 고유한 속성을 가진 가상 요소를 선택할 수 있습니다. 테이블 요소 위로 마우스를 가져가면 열 및 행 핸들이 나타나 선택을 도울 수 있습니다. 요소 자체 및 가상 요소는 개별적으로 선택할 수 있습니다.
General properties
왼쪽 상단의 아이콘을 클릭하여 전체 테이블 요소를 선택할 수 있습니다. 이것은 요소의 전체 속성 편집기를 열고 로드할 데이터 유형, 목록의 데이터 소스, 그리고 스타일, 반응형 동작 및 조건에 대한 일반 설정을 선택하는 곳입니다.
테이블 요소는 여러 행 및 열을 선택하여 한 번에 특정 속성을 적용할 수 있습니다. 여러 행 또는 열을 선택하려면 Shift 키를 누른 상태에서 포함할 행/열을 클릭하십시오.
Managing rows
정적 및 반복 행을 모두 선택하고 관리할 수 있습니다. 추가한 각 정적 행은 개별적으로 선택할 수 있지만, 첫 번째 반복 행만 선택할 수 있습니다.
행을 선택하는 가장 쉬운 방법은 번호가 매겨진 행 핸들을 클릭하는 것입니다. Bubble은 또한 행과 열을 요소 트리에서 가상 요소로 표시합니다.
행이 선택되면 다음을 설정할 수 있습니다:
•
배경 스타일
•
투명도
•
높이 컨트롤(Min width / Max width / Fit height to content)
•
페이지 로드 가시성
•
조건
행 추가/제거
테이블에 필요한 만큼 행을 추가 및 제거할 수 있습니다. 이와 관련하여 정적 및 반복 행은 다르게 동작합니다:
정적 행
정적 행을 추가하려면 정적 행이나 상단 반복 행을 마우스 오른쪽 버튼으로 클릭하고 위/아래에 행 추가를 선택하십시오. 삭제하려면 해당 행을 마우스 오른쪽 버튼으로 클릭하고 플로팅 메뉴에서 삭제를 선택하십시오.
반복 행
반복 행은 개별적으로 추가되지 않습니다. 대신 최상위 반복 행에 지정된 속성으로 제어됩니다.
1.
행 핸들을 클릭하여 최상위 반복 행을 선택하십시오. 해당 행은 ∞ 기호로 표시됩니다.
2.
a.
Set fixed number of repeating rows 상자에 체크 표시가 되어 있으면 Row count 설정을 사용하여 표시할 행 수를 지정할 수 있습니다.
b.
Set fixed number of repeating rows 상자에 체크 표시가 되어 있지 않으면 Bubble은 데이터 소스 목록의 항목 수만큼 행을 로드합니다.
Managing columns
열을 선택하려면 열 핸들(A, B 등)을 클릭하십시오. 여기서 열의 속성을 조절할 수 있습니다:
•
페이지 가시성
•
반응형 동작
•
조건
Adding/removing columns
두 가지 다른 방법으로 열을 추가할 수 있습니다:
•
열을 마우스 오른쪽 버튼으로 클릭하고 왼쪽/오른쪽에 열 추가를 선택하십시오.
•
두 열 사이의 분리기 위로 마우스를 가져가면 플로팅 + 기호가 나타납니다. 클릭하면 오른쪽에 열이 추가됩니다.
또한 두 가지 방법으로 열을 제거할 수 있습니다:
•
열을 마우스 오른쪽 버튼으로 클릭하고 삭제를 선택하십시오.
•
열 핸들 위로 마우스를 가져가면 테이블 위에 떠 있는 X 기호를 클릭하십시오.
참고: 마지막 열은 삭제할 수 없습니다.
Managing cells
각 셀은 고유한 속성이 있으며 조건을 할당할 수 있습니다. 셀을 선택하려면 셀을 클릭하면 속성 편집기에서 해당 셀의 설정이 표시됩니다.
Working with elements
다른 Bubble 컨테이너 요소와 마찬가지로 테이블 요소를 사용하면 부모-자식 관계의 요소를 배치할 수 있습니다. 그러나 앞서 살펴본 것처럼 테이블 요소는 만들어진 행, 열 및 셀에 대한 가상 자식 컨테이너가 포함된 점에서 다른 Bubble 컨테이너와 약간 다릅니다.
Navigating the pseudo-groups
테이블의 정적 및 반복 행의 다른 셀을 탐색하는 가장 쉬운 방법은 직접 클릭하는 것입니다. 의사-그룹은 편집기 왼쪽에있는 요소 트리를 사용하여 검토할 수도 있습니다. 이것은 부모 및 자식 컨테이너의 계층 구조로 표시되며 최상위 부모는 테이블 요소 자체입니다. 정적 행은 테이블 요소 바로 아래에 표시되며 반복 행은 그 뒤에 나타납니다.
반복 행의 경우 정적 행과 마찬가지로 원하는대로 편집할 수 있지만, 반복 행의 경우 첫 번째 행만 편집할 수 있습니다. 해당 행의 콘텐츠는 아래의 모든 행에 복제됩니다.
Responsive behavior
테이블 요소의 반응형 동작을 처리할 때 부모 요소(테이블 자체) 및 각 행 및 열을 별도의 컨테이너로 생각하는 것이 도움이 됩니다.
Total width and height
전체 테이블 컨테이너의 전체 너비 및 높이는 부모 요소(테이블 요소 자체)에서 설정됩니다. 마찬가지로 컨테이너의 너비 및 높이는 최대 너비 및 높이를 제어하며 테이블 컨테이너가 내용에 맞게 너비/높이를 맞추도록 설정되지 않은 경우 최대 값이 없습니다.
Column width
열 너비는 개별 열 수준에서 설정됩니다. 핸들을 클릭하거나 요소 트리에서 선택하여 속성 편집기에서 필요한 변경을 수행한 다음 열의 너비는 정적 및 반복 행을 포함한 모든 행에 대해 동일합니다.
Row height
행 높이는 개별 행 수준에서 설정됩니다. 반복 행의 경우 높이 속성은 첫 번째(위) 행에서 설정됩니다.
Container layout
일반 그룹과 마찬가지로 각 셀은 자체의 개별 컨테이너 레이아웃(fixed, row, column 및 align to parent)을 가질 수 있으며 이는 해당 셀의 하위 요소의 동작을 제어합니다. 정적 행의 셀의 경우 각각의 셀을 개별적으로 제어할 수 있지만 반복 행의 셀은 첫 번째(위) 행의 각 개별 셀에 의해 제어됩니다.
Other ways to learn
Core reference: table element settings
