# 표

## Content

`표` 보고서 항목은 열에 정렬된 필드 집합과 행에 표시되는 각 데이터 레코드를 사용하여 여러 열, 여러 행 방식으로 바인딩된 데이터를 시각화하는 [데이터 영역](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions)입니다. 행과 열이 교차하는 지점은 [텍스트 상자](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) 또는 [이미지](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers/Image)와 같은 [데이터 시각화 도우미](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers)가 포함된 `표 셀`입니다. `병합된 셀`은 여러 열 또는 행에 걸쳐 있습니다. 또한 표는 미리 정의된 조건 또는 사용자 입력을 기반으로 데이터를 그룹화, 정렬 및 필터링할 수도 있습니다.

`표` 데이터 영역을 사용하여 `표 형식 보고서`를 작성할 수 있습니다. 자세한 내용은 [표 형식 보고서 시작하기](/activereportsjs/docs/ReportAuthorGuide/QuickStart/인쇄가능-리포트/Tutorial-1-Tabular-Report) 자습서를 참조하십시오.

### 표 추가

[도구 상자](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#toolbox)에서 해당 항목을 두 번 클릭하거나 보고서 페이지 영역으로 끌어 놓아 보고서에 `표`를 추가할 수 있습니다.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 도구 상자를 통해 표 추가 보기
DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithDrillDownReport/AddingTable.gif)
DOC-DETAILS-TAG-CLOSE

또는 [데이터 패널](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#data-panel)에서 데이터 집합 필드를 선택한 다음 보고서 페이지로 끌어 놓을 수 있습니다. 새로 작성된 표는 데이터 집합으로 자동으로 바인딩되고 선택한 필드의 캡션 및 값을 표시합니다.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 데이터 패널을 통해 표 추가 보기
DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithTabularReport/AddingTable.gif)
DOC-DETAILS-TAG-CLOSE

### 표 디자이너

다음 다이어그램은 경계 상자 내 아무 곳이나 클릭하면 나타나는 `표 디자이너`의 기본 구조를 보여줍니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Table/table-designer.png)

### 일반 표 구성

다음 두 가지 방법 중 하나를 사용하여 일반 표 구성을 [속성 패널](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#properties-panel)로 로드할 수 있습니다.

* [보고서 탐색기](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#report-explorer)에서 `표` 항목을 선택합니다.
* 표 디자이너에서 `루트 처리기`를 클릭합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 표의 일반적인 구성 수정 보기
DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithTabularReport/AddingFilters.gif)
DOC-DETAILS-TAG-CLOSE

일반 구성에는 [기본 보고서 항목 속성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#base-properties), [공통 스타일 속성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#style-properties), [데이터 영역 속성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions#common-properties), [표시 여부](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#visibility), [페이지 나누기](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#page-break) 및 다음 특정 속성이 있습니다.

* 때때로 표 푸터가 페이지 맨 위에 단독으로 나타날 수 있습니다. `분리된 바닥글 방지` 스위치를 켜서 이전 행을 다음 페이지로 이동하여 "고립된" 푸터와 함께 나타나도록 할 수 있습니다.
* `함께 유지` 플래그는 `표`가 맞는 경우 항상 단일 페이지에 표시될지 여부를 결정합니다.
* `새 섹션` 플래그는 `표`에 페이지 번호 매기기가 있는지 여부를 나타냅니다. 자세한 내용은 [전역 참조](/activereportsjs/docs/ReportAuthorGuide/Expressions/references#page-numbering) 문서를 확인하십시오.
* `고정된 행` 및 `고정된 열` 숫자 속성은 보고서를 보는 사람이 [보고서 뷰어 컴포넌트](/activereportsjs/docs/GettingStarted/QuickStart)의 표시 영역을 넘어가는 테이블을 스크롤할 때 고정적으로 표시되어야 하는 행과 열의 수를 나타냅니다.

### 표 열

`열`은 `표` 내에서 `셀`의 세로 그룹입니다. `도구 상자`를 통해 표를 추가하면 기본적으로 열 세 개가 있습니다. 데이터 집합 필드를 사용하여 표를 만드는 경우 표에는 필드당 열 하나가 있습니다. 열 처리기를 마우스 오른쪽 버튼으로 클릭하면 열리는 컨텍스트 메뉴를 사용하여 새 열을 추가하거나 기존 열을 삭제할 수 있습니다.
`열` 구성에는 다음 속성이 포함됩니다.

* `자동 폭` 속성은 하나 이상의 다른 열이 동적으로 숨겨진 경우 사용 가능한 공간을 차지하도록 열 너비를 자동으로 조정할 수 있는지 여부를 결정합니다. 이 기능이 어떻게 작동하는지 보려면 [라이브 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/AutoTableColumnWidth/purejs)를 확인하세요. 이 속성에는 두 가지 값이 있습니다.
    * `없음` \- 열 너비가 자동으로 조정되지 않습니다\.
    * `비례` \- 열 너비가 사용 가능한 공간을 차지하도록 자동으로 조정됩니다\. `자동 폭` 속성이 `비례`로 설정된 열이 여러 개 있는 경우 사용 가능한 공간이 그 열에 균등하게 분배됩니다.
* [길이 단위](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#length)의 `너비`는 행 내 표 셀의 너비를 결정합니다. 열의 총 너비는 표 너비와 동일합니다.
* [표시 여부](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#visibility) 속성은 미리 보기 시 열의 정적 또는 동적 표시 여부를 결정합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 열 추가 및 열 너비 설정 보기
DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithFixedReports/SettingColumnsWidth.gif)
DOC-DETAILS-TAG-CLOSE
`열 처리기`를 클릭하면 해당 열의 셀에 있는 보고서 항목이 모두 자동으로 선택됩니다. `속성 패널`에는 이러한 보고서 항목을 모두 동시에 수정할 수 있는 추가 탭이 표시됩니다. 대부분의 일반적인 시나리오에서 이러한 추가 탭은 `텍스트 상자`라고 하고 모든 열의 텍스트 상자 속성을 변경합니다.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 열 속성의 텍스트 상자 탭 사용 보기
DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Table/ColumnTextBoxTab.gif)
DOC-DETAILS-TAG-CLOSE

### 표 행 삭제

`행`은 `표` 내에서 `셀`의 가로 그룹입니다. 여러 행 유형이 다양한 용도를 지원하지만 공통 속성을 공유합니다.

* [길이 단위](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#length)의 `높이`는 행 내 표 셀의 초기 높이를 결정합니다. 그러나 셀은 미리 보기 시 높이를 늘이거나 줄일 수 있습니다. 자세한 내용은 [텍스트 상자](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) 보고서 항목의 `확장 가능` 및 `축소 가능` 속성을 참조하십시오.
* `작업` 속성은 보고서 독자가 `미리 보기` 시간에 행 셀에 포함된 `텍스트박스` 등의 보고서 항목을 클릭할 때 발생하는 대화형 동작을 결정합니다.
* [표시 여부](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#visibility) 속성은 미리 보기 시 행의 정적 또는 동적 표시 여부를 결정합니다.

[행 처리기](/activereportsjs/docs/v6.1/#table-designer)를 마우스 오른쪽 버튼으로 클릭하면 열리는 컨텍스 메뉴를 사용하여 새 행을 추가하거나 기존 행을 삭제할 수 있습니다.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 표 푸터에 행 추가 보기
DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithFixedReports/AddingExtraRows.gif)
DOC-DETAILS-TAG-CLOSE
`행 처리기`를 클릭하면 해당 행의 셀에 있는 보고서 항목이 모두 자동으로 선택됩니다. `속성 패널`에는 이러한 보고서 항목을 모두 동시에 수정할 수 있는 추가 탭이 표시됩니다. 대부분의 일반적인 시나리오에서 이러한 추가 탭은 `텍스트 상자`라고 하고 모든 행의 텍스트 상자 속성을 변경합니다.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 행 속성의 텍스트 상자 탭 사용 보기
DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithTabularReport/AddingConditionalFormatting.gif)
DOC-DETAILS-TAG-CLOSE

### 표 헤더

`표 헤더`은 표의 시작 부분에 나타납니다. 또한 `새 페이지에서 반복` 스위치가 켜져 있으면 표 내용이 표시된 모든 페이지에 인쇄됩니다. 헤더 행을 사용하여 표 형식 보고서의 제목 또는 로고를 표시할 수 있습니다. 예를 들어, `표 형식 보고서 시작하기` [데모](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs)에는 헤더 행의 첫 번째 셀에 `제품 목록` [텍스트 상자](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox)가 있습니다. 표에는 헤더 행이 여러 개 있을 수 있습니다.

### 그룹 헤더

`그룹 헤더` 행은 [그룹 인스턴스](/activereportsjs/docs/v6.1/#table-grouping)의 시작 부분에 나타납니다. 또한 `새 페이지에서 반복` 스위치가 켜져 있으면 표 내용이 표시된 모든 페이지에 인쇄됩니다. 그룹 헤더 행을 사용하여 그룹의 필드 값 또는 요약 값을 표시할 수 있습니다. 예를 들어, `표 형식 보고서 시작하기` [데모](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs)에서는 범주별로 제품을 그룹화하고 모든 페이지에 인쇄되는 그룹 헤더가 있으며 범주 이름을 표시하는 텍스트 상자를 포함합니다. 그룹에는 헤더 행이 여러 개 있을 수 있습니다.

### 세부 정보

`세부 정보` 행은 [데이터 집합 필터](/activereportsjs/docs/ReportAuthorGuide/Databinding#data-set-filters)와 [데이터 영역 필터](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions#common-properties)를 통해 전달된 [바인딩된 데이터 집합](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions#data-set-name) 레코드에 대해 반복됩니다. 예를 들어, `표 형식 보고서 시작하기` [데모](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs)의 세부 정보 행에는 해당하는 열에 이름, 가격 및 기타 제품 필드가 표시됩니다. 단종된 제품은 필터링되어 제외됩니다.

표에 구성된 [그룹화](/activereportsjs/docs/v6.1/#table-grouping)가 있으면 세부 정보 행이 바깥쪽 [그룹 인스턴스](/activereportsjs/docs/v6.1/#table-grouping)의 헤더 및 푸터 사이에 나타납니다.

표에는 세부 정보 행이 두 개 이상 있을 수 있습니다. 예를 들어, [이미지가 있는 표](/activereportsjs/demos/Reports/TableWithImage/purejs)의 예에는 세부 정보 행이 4개 있습니다.

### 그룹 푸터

`그룹 푸터` 행은 [그룹 인스턴스](/activereportsjs/docs/v6.1/#table-grouping)의 끝 부분에 나타납니다. 또한 `새 페이지에서 반복` 스위치가 켜져 있으면 표 내용이 표시된 모든 페이지에 인쇄됩니다. 그룹 푸터 행을 사용하여 요약 값을 표시할 수 있습니다. 예를 들어, `표 형식 보고서 시작하기` [데모](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs)에서 표의 그룹 푸터 행에는 해당하는 열에 `재고 유닛` 및 `주문 유닛` 그룹화 합계가 표시됩니다. 그룹에는 푸터 행이 여러 개 있을 수 있습니다.

### 표 푸터

`푸터` 행은 표 끝 부분에 나타납니다. 또한 `새 페이지에서 반복` 스위치가 켜져 있으면 표 내용이 표시된 모든 페이지에 인쇄됩니다. 푸터 행을 사용하여 총합계를 표시할 수 있습니다. 예를 들어, `고정 레이아웃 보고서 시작하기` [데모](/activereportsjs/demos/Reports/GetStartedWithFixedReports/purejs)의 표에는 송장 합계를 표시하는 푸터 행이 세 개 있습니다.

### 표 셀

`표 셀`은 행과 열이 교차하는 지점입니다. 기본적으로 각 표 셀에는 [텍스트 상자](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) 보고서 항목이 포함되어 있습니다. 그러나 해당 항목을 `도구 상자`에서 셀로 끌어 놓아 [이미지](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers/Image)와 같은 다른 데이터 시각화 도우미와 바꿀 수 있습니다.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 표 셀에 이미지 추가 보기
DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Table/AddingImageInCell.gif)
DOC-DETAILS-TAG-CLOSE
또한 표 셀에는 [중첩된 데이터 영역](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions#nested-data-regions)이 있을 수 있습니다. 예를 들어, `표 내의 목록` [데모](/activereportsjs/demos/Reports/NestedDataRegionsDemo/purejs)에는 세 번째 `세부 정보` 행에 [목록](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/List) 보고서 항목이 포함되어 있습니다.

### 병합된 셀

`병합된 셀`은 여러 열 또는 행에 걸쳐 있습니다. 인접한 셀을 가로 또는 세로로 병합할 수 있습니다. 가로로 병합하려면 셀이 같은 행에 있어야 하고 세로로 병합하려면 셀이 같은 열에 있어야 합니다. 예를 들어, [이미지가 있는 표](/activereportsjs/demos/Reports/TableWithImage/purejs) 데모의 표에는 첫 번째 열에 세로로 병합된 세부 정보 셀이 있습니다.

셀을 병합하려면 Windows에서는 `Ctrl` 키를, Mac OS에서는 `Cmd`를 길게 누른 상태에서 선택 항목을 마우스 오른쪽 버튼으로 클릭한 다음 컨텍스트 메뉴에서 `셀 > 셀 병합` 항목을 선택합니다.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 셀 병합 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithDrillDownReport/SettingTableHeader.gif)
DOC-DETAILS-TAG-CLOSE

### 표 그룹화

`표`를 사용하면 하나 이상의 기준별로 `세부 정보` 행을 그룹화할 수 있습니다. 예를 들어, `표 형식 보고서 시작하기` [데모](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs)에서는 제품 행을 범주별로 그룹화합니다. 그룹화를 구성하려면 [표 디자이너](/activereportsjs/docs/v6.1/#table-designer)의 `그룹 편집기`를 사용하는 것이 좋습니다.

### 그룹 추가

다음 두 가지 방법 중 하나를 사용하여 표 그룹을 추가할 수 있습니다.

* 표의 경계 상자 내에서 아무 곳이나 마우스 오른쪽 버튼으로 클릭한 후 컨텍스트 메뉴에서 `그룹 -> 그룹 삽입` 항목을 선택합니다.
* 그룹화하려는 필드를 [데이터 패널](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#data-panel)에서 `그룹 편집기`로 끌어 놓습니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 끌어 놓아 그룹화 추가 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithTabularReport/AddingGrouping.gif)
DOC-DETAILS-TAG-CLOSE

### 자식 또는 부모 그룹 삽입

중첩된 그룹을 여러 개 사용하여 표에서 행을 정렬할 수 있습니다.

자식 그룹을 삽입하려면 `그룹 편집기`에서 그룹 이름을 마우스 오른쪽 버튼으로 클릭한 다음 컨텍스트 메뉴에서 `그룹 -> 그룹 삽입` 항목을 선택합니다. 또는 필드를 데이터 패널에서 그룹 편집기로 끌어 놓을 수 있으며, 이 경우 새로 추가된 그룹의 위치는 `<새 그룹>` 자리 표시자를 사용하여 기존 그룹에 대해 표시됩니다.

또한 컨텍스트 메뉴에서 해당 항목을 사용하여 그룹을 추가하거나 [헤더](/activereportsjs/docs/v6.1/#group-header) 또는 [푸터](/activereportsjs/docs/v6.1/#group-footer)을 제거하거나 추가할 수 있습니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Table/group-context-menu.png)

### 그룹 구성

`그룹 편집기`에는 그룹 이름이 열거되고, 이 이름을 클릭하면 그룹의 구성이 [속성 패널](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#properties-panel)로 로드됩니다.

* `그룹 이름`은 그룹 편집기에 표시되는 그룹 `ID`입니다.
* `그룹 식`은 [바운딩된 필드 참조](/activereportsjs/docs/ReportAuthorGuide/Expressions/references#data-set-fields)의 [컬렉션](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#collection) 또는 고급 식입니다. 그룹 식의 고유 값은 선택적 `그룹 헤더` 및 `그룹 푸터`과 `세부 정보` 행으로 구성된 `그룹 인스턴스`를 생성합니다. 예를 들어, `표 형식 보고서 시작하기` [데모](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs)에는 `{categoryId}` 그룹 식이 있습니다. 따라서 표에서는 제품 범주당 하나씩 7개 그룹 인스턴스가 생성됩니다.
* `부모` [표현식](/activereportsjs/docs/ReportAuthorGuide/Expressions)은 재귀적 계층 구조에서 부모 그룹을 결정합니다. 이 속성을 사용하는 일반적인 사용 사례는 부모와 자식 간의 관계가 데이터 세트 필드로 표현되는 트리와 같은 데이터를 표시하는 것입니다. 예를 들어, [대화형 계층](https://demo.mescius.co.kr/activereportsjs/demos/Reports/InteractiveHierarchy/purejs) 데모는 각 `매장` 레코드에 `EntityKey` 및 `ParentEntityKey` 필드가 있는 소매 체인을 표시합니다. 전자는 테이블의 세부 그룹 표현식에 있고 후자는 `부모` 표현식에 있습니다.
* `레이블` [식](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#expression)은 [보고서 맵](/activereportsjs/docs/ReportAuthorGuide/Interactivity#report-map)의 그룹 인스턴스 링크의 텍스트를 결정합니다.
* 그룹의 [필터 편집기](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#filters-editor)에서는 특정 그룹 인스턴스를 필터링할 수 있습니다.

### 그룹 레이아웃 구성

* 때때로 `그룹 푸터` 행이 페이지 맨 위에 단독으로 나타날 수 있습니다. `분리된 푸터 방지` 플래그를 켜서 그룹 인스턴스의 마지막 `세부 정보` 행을 다음 페이지로 이동하여 "고립된" 그룹 푸터와 함께 나타나도록 할 수 있습니다.
* `함께 유지` 플래그는 그룹 인스턴스가 맞는 경우 항상 단일 페이지에 나타나도록 합니다.
* `페이지 나누기` 속성은 그룹 인스턴스로 생성되는 페이지 나누기의 위치를 결정합니다.
    * `None` \- 페이지 나누기가 생성되지 않습니다\.
    * `Start` \- 각 그룹 인스턴스가 `그룹 헤더` 또는 첫 번째 `세부 정보` 행 앞에 페이지 나누기를 삽입합니다.
    * `End` \- 각 그룹 인스턴스가 `그룹 푸터` 또는 마지막 `세부 정보` 행 뒤에 페이지 나누기를 삽입합니다.
    * `StartAndEnd` - `Start` 및 `End` 옵션의 조합입니다.
    * `Between` \- 각 그룹 인스턴스가 새 페이지에서 시작합니다\. `표 형식 보고서 시작하기` [데모](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs)에서는 이 옵션을 사용합니다.
* [표시 여부](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#visibility) 속성은 그룹 인스턴스의 정적 또는 동적 표시 여부를 결정합니다. `드릴다운 보고서 시작하기` [데모](/activereportsjs/demos/Reports/GetStartedWithDrillDownReports/purejs)는 드릴다운 상호작용을 구현하기 위해 `제품` 그룹의 동적 표시 여부를 설정합니다.
* `새 섹션` 플래그는 각 그룹 인스턴스에 페이지 번호 매기기 적용 여부를 결정합니다. 자세한 내용은 [전역 참조](/activereportsjs/docs/ReportAuthorGuide/Expressions/references#page-numbering) 문서를 확인하십시오.

### 세부 정보 그룹화

또는 그룹을 추가하지 않고 `세부 정보` 행을 그룹화할 수 있습니다. `<세부 정보 그룹>`에는 헤더 및 푸터가 없지만 `세부 정보` 행의 수를 고유한 그룹화 값당 행 하나로 줄입니다. 그룹 편집기에서 해당하는 항목을 클릭하여 세부 정보 그룹 속성을 편집할 수 있습니다. 위에서 설명한 거의 모든 속성을 사용할 수 있습니다.

### 세부 정보 행 정렬

[데이터 영역 정렬 구성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions#common-properties)을 사용하여 표의 세부 정보 행 모양의 순서를 설정할 수 있습니다. 또한 보고서 독자가 `정렬 아이콘`을 호스트할 텍스트 상자의 [사용자 정렬](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox#user-sort) 구성을 설정하여 미리 보기 시 세부 정보 행을 정렬하도록 할 수 있습니다. 예를 들어, `표 형식 보고서 시작하기` [데모](/activereportsjs/demos/Reports/GetStartedWithTabularReports/purejs)의 `제품 이름` 텍스트 상자에는 속성 패널의 `사용자 정렬` 섹션에 `정렬 식={productName}`이 있습니다. 따라서 미리 보기 시 `정렬 아이콘`이 텍스트 오른쪽에 나타나 보고서 독자가 이름별로 제품을 정렬할 수 있습니다.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
미리 보기 시 실제로 정렬하는 방법을 보려면 확장하십시오
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Table/InteractiveSorting.gif)
DOC-DETAILS-TAG-CLOSE
`제품 이름` 텍스트 상자가 [그룹 헤더](/activereportsjs/docs/v6.1/#group-header)에 있기 때문에 각 범주 내 제품은 독립적으로 정렬할 수 있습니다. 표 내 모든 세부 정보 행에 적용하려면 `사용자 정렬` 구성의 `정렬 대상` 속성을 `Table1`로 설정해야 합니다.

### 그룹 인스턴스 정렬

표 그룹의 `정렬 식` 속성은 그룹 인스턴스를 정렬하도록 허용하는 항목의 [컬렉션](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#collection)입니다. 각 항목은 [식](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Common-Properties#expression)과 정렬 방향으로 구성됩니다. 예를 들어, `대화형 정렬` [데모](/activereportsjs/demos/Reports/InteractiveSorting/purejs)의 그룹에는 `{country}` 정렬 식과 오름차순이 있습니다. 따라서 미리 보기 시 국가가 알파벳순으로 표시됩니다.

또한 보고서 독자가 `정렬 아이콘`을 호스트할 텍스트 상자의 [사용자 정렬](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox#user-sort) 구성을 설정하여 미리 보기 시 그룹화 인스턴스를 정렬하도록 할 수 있습니다. 이렇게 하기 위해 `대화형 정렬` 데모에서 그룹 헤더의 `국가 헤더` 텍스트 상자에는 `정렬 식={country}, 정렬 식 범위=CountryGroup, 정렬 대상=CustomersTable` 구성이 있습니다.