# 테이블 시트 규칙
## Content
테이블 시트는 데이터의 변화를 강조하고 시각화하며 입력되는 데이터의 유형을 제어할 수 있도록 다양한 데이터 규칙을 지원합니다.
## 조건부 서식 및 데이터 유효성 검사
테이블 시트는 테이블 시트 뷰에서 데이터 기반 조건부 서식 및 데이터 유효성 검사를 지원합니다.
`conditionalFormat` 및 `validator` 속성을 뷰 열 정보 정의 시 지정할 수 있습니다. 이 속성들은 아래 표에 나열된 다양한 유형의 규칙 옵션 배열을 허용합니다.
테이블 시트에서 지원되는 조건부 서식 및 데이터 유효성 검사 유형은 다음과 같습니다.
| 속성 | 유형 |
| --- | --- |
| 조건부 서식 (Conditional Format) | `AverageRule`
`CellValueRule`
`DataBarRule`
`DateOccuringRule`
`DuplicateRule`
`FormulaRule`
`IconSetRule`
`SpecificTextRule`
`ThreeScaleRule`
`Top10Rule`
`TwoScaleRule`
`UniqueRule` |
| 데이터 유효성 검사 (Data Validator) | `DateValidator`
`FormulaListValidator`
`FormulaValidator`
`ListValidator`
`NumberValidator`
`TextLengthValidator`
`TimeValidator` |
다음 코드 샘플은 테이블 시트에서 조건부 서식 및 데이터 유효성 검사를 적용하는 방법을 보여줍니다.
```javascript
// 조건수 서식 적용을 위한 수식 정의
var formulaRule = {
ruleType: "formulaRule",
formula: "@<10",
style: {
backColor: "green",
foreColor: "lime"
}
};
// 데이터 유효성 검사 생성
var positiveNumberValidator = {
type: "formula",
formula: '@>0',
inputTitle: 'Data validation:',
inputMessage: 'UnitPrice cannot be less than 0.',
highlightStyle: {
type: 'icon',
color: "red",
position: 'outsideRight',
}
};
// 테이블 시트에 view 바인딩
myTable.fetch().then(function () {
var view = myTable.addView("myView", [
{ value: "stockItem", width: 300, caption: "Stock Item" },
{ value: "unitPrice", width: 120, caption: "Unit Price", conditionalFormats: [formulaRule], validator: positiveNumberValidator }, // apply conditional formating and data validation here
{ value: "taxRate", width: 120, caption: "Tax Rate" },
{ value: "=([@unitPrice] * [@taxRate])/100 + [@unitPrice]", caption: "Total Price", width: 150 }
]);
sheet.setDataView(view);
});
```
## 스타일 규칙
Style Rules는 조건이 충족되었을 때 적용되는 스타일입니다.`GC.Data.View` 클래스의 `addStyleRule` 메서드를 사용하여 상태 규칙(state rule)과 수식 규칙(formula rule)을 추가할 수 있으며, 또는 `addView` 메서드의 `viewOptions` 매개변수를 정의하여 `GC.Data.RowColumnStates` 열거형을 사용해 데이터 매니저 테이블에 뷰를 추가할 수도 있습니다.
또한 스타일 규칙을 구현할 보기 영역(view area)으로 `viewport` 또는 `colHeader`를 선택할 수 있습니다.
* **State Rule** – 행 또는 열 상태가 트리거될 때 스타일을 적용합니다. 예를 들어, 마우스가 행 위에 있을 때 회색 배경색으로 강조하거나 아래 이미지와 같이 선택된 열을 강조할 수 있습니다:
* **Formula Rule** – 특정 조건을 만족하는 값에 스타일을 적용합니다. 예를 들어, 제품의 낮은 가격을 강조하려는 경우 "@UnitPrice<10"과 같은 수식을 설정하고 다른 전경색을 지정할 수 있습니다.:
다음 코드 샘플은 테이블 시트에서 state rule과 formula rule을 모두 적용하는 방법을 보여줍니다.
```javascript
// 수식 규칙 설정
var formulaRule = {
ruleType: "formulaRule",
formula: "@<=10",
style: {
borderLeft: { color: "orange", style: "medium" },
borderRight: { color: "orange", style: "medium" },
borderTop: { color: "orange", style: "medium" },
borderBottom: { color: "orange", style: "medium" }
}
};
// 테이블 시트를 뷰에 바인딩
var myView = productTable.addView("myView", [
{ value: "Id", caption: "ID" },
{ value: "ProductName", caption: "Name", width: 400 },
{ value: "ReorderLevel", caption: "ReorderLevel", width: 120 },
{ value: "UnitPrice", caption: "Unit Price", width: 100, readonly: true, conditionalFormats: [formulaRule] },
{ value: "UnitsInStock", caption: "Units In Stock", width: 100 },
{ value: "UnitsOnOrder", caption: "Units On Order", width: 100 }
]);
// addStyleRule 메서드를 통해 규칙 추가
myView.addStyleRule("lowPrice", { backColor: "green", foreColor: "white" }, {
formula: "[@UnitPrice] <= 10"
});
myView.addStyleRule("HoverStyle", { backColor: "gray", foreColor: "white" }, {
area: GC.Data.ViewArea.colHeader,
direction: GC.Data.StateRuleDirection.row,
state: GC.Data.RowColumnStates.hover
});
myView.addStyleRule("SelectedStyle", { backColor: "yellow", foreColor: "red" }, {
area: GC.Data.ViewArea.colHeader,
direction: GC.Data.StateRuleDirection.column,
state: GC.Data.RowColumnStates.selected
})
myView.fetch().then(function () {
sheet.setDataView(myView);
});
```
**상태 유형**
다음 표는 **GC.Data.RowColumnStates**에서 사용할 수 있는 모든 행 및 열 상태 열거형 옵션을 나열합니다.
| **열거형 값** | **설명** |
| ----- | --- |
| active | 행 또는 열이 포커스를 받을 때, 해당 상태에 "active"가 포함됩니다. |
| dirty | 셀 값이 변경되면, 셀 행 및 열 상태에 "dirty"가 포함됩니다. |
| hover | 마우스가 행 또는 열 위에 있을 때, 해당 상태에 "hover"가 포함됩니다. |
| inserted | 행이 삽입되면, 해당 상태에 "inserted"가 포함됩니다. 이 상태는 행에만 지원됩니다. |
| pin | 행/열을 고정하면, 해당 상태에 "pin"이 포함됩니다. |
| primaryKey | 열이 기본 키를 가지고 있는 경우, 해당 상태에 "primaryKey"가 포함됩니다. 이 상태는 열에만 지원됩니다. |
| readonly | 열이 잠겨 있는 경우, 해당 상태에 "readonly"가 포함됩니다. 이 상태는 열에만 지원됩니다. |
| required | 열의 값이 필수인 경우, 해당 상태에 "required"가 포함됩니다. 이 상태는 열에만 지원됩니다. |
| selected | 셀이 선택 범위 내에 있을 경우, 셀 행 및 열 상태에 "selected"가 포함됩니다. |
| updated | 행이 업데이트된 경우, 해당 상태에 "updated"가 포함됩니다. 이 상태는 행에만 지원됩니다. |
SpreadJS를 사용하여 기본 규칙을 업데이트하거나 제거할 수도 있습니다.
다음 코드 샘플은 **readonly** 상태 아이콘을 업데이트하는 방법을 보여줍니다.
```javascript
// readonly 상태 아이콘 업데이트
view.addStyleRule("readonly", {
decoration: {
icons: [
{
src: 'readonly.png'
}
]
}
}, {
area: GC.Data.ViewArea.colHeader,
direction: GC.Data.StateRuleDirection.column,
state: GC.Data.RowColumnStates.readonly
});
```
다음 코드 샘플은 **readonly** 아이콘의 스타일 규칙을 제거하는 방법을 보여줍니다.
```javascript
// readonly 상태 아이콘 삭제
view.removeStyleRule("readonly");
```
다음 이미지는 테이블 시트 열 머리글에 "Is Primary Key", "Read Only" 및 "IsRequired" 아이콘이 어떻게 표시되는지 보여줍니다.
다음 이미지는 **readonly** 아이콘에서 **removeStyleRule** 메서드를 적용한 후 테이블 시트의 모습을 보여줍니다.
### SpreadJS 디자이너 사용하기
SpreadJS 디자이너의 **열 설정(Column Setting)** 탭을 사용하여 열 머리글에 사전 정의된 규칙을 지정할 수 있습니다.
다음 이미지는 테이블 시트의 열 머리글에 규칙이 표시되는 모습을 보여줍니다.
.fa9a54.png?width=500)
규칙을 적용한 후 SpreadJS 디자이너의 **테이블 시트 디자인(Table Sheet Design)** 탭을 사용하여 테이블 시트의 규칙을 스타일링할 수 있습니다.
**규칙을 스타일링하는 단계는 다음과 같습니다:**
1. 테이블 시트 디자인(Table Sheet Design) 탭에서 상태 규칙(State Rules) 옵션을 클릭하여 상태 규칙 관리(Manage State Rules) 대화 상자를 엽니다.
2. 열 머리글에 규칙을 적용할 적절한 옵션을 선택합니다.
3. 선택된 열 머리글을 스타일링하려면, **새 규칙(New Rule)** 버튼을 사용하여 새 규칙을 만들거나 기존 규칙을 편집하여 열 머리글에 할당할 수 있습니다.
4. Style 열의  아이콘을 사용하여 셀 서식(Format Cells) 대화 상자를 열어 언급된 규칙을 편집할 수 있습니다.
5. 선택한 열 머리글에서 아이콘을 제거하려면 **규칙 제거(Remove Rule)** 버튼을 사용합니다.
**여러 열 설정 지원**여러 열을 선택한 경우 **열 설정** 탭의 설정이 선택된 모든 열에 동시에 적용됩니다.
대화 상자에는 첫 번째로 선택된 열의 설정이 표시되며, 변경한 내용은 선택된 모든 열에 적용됩니다.
여러 열 작업을 지원하지 않는 설정은 비활성화됩니다.
