# Null 값 및 빈 값 표시 사용자 지정

## Content

기본적으로 데이터 값이 `null`, `undefined` 또는 빈 문자열(`""`)인 경우 테이블 시트에서는 셀이 비어 있는 것으로 표시됩니다. 이로 인해 다음 값을 구분하기 어렵습니다.

* `null` 값
* 빈 문자열
* 누락된 값

가독성을 높이기 위해 열 수준에서 이러한 값에 대한 사용자 지정 표시 텍스트를 지정할 수 있습니다.
![image-20260319.75a713.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260319.75a713-20260604.c339b8.png?width=600)

## 열 속성

```typescript
interface GC.Data.IColumn {
  showNullAs?: string;   // null 또는 undefined에 대한 표시 텍스트
  showEmptyAs?: string;  // 빈 문자열("")에 대한 표시 텍스트
}
```

* `showNullAs`는 값이 `null` 또는 `undefined`인 경우 적용됩니다.
* `showEmptyAs`는 값이 빈 문자열(`""`)인 경우 적용됩니다.

두 속성은 동일한 열에서 함께 사용할 수 있습니다.

## 코드에서 구성

이 예제에서는 다음을 보여줍니다.

* 기본 빈 값 표시 동작
* 테이블 스키마 수준 구성
* 뷰 수준 추가 구성

**1단계: 샘플 데이터 준비**

```javascript
var sampleData = [
  { Id: 1, Name: "John Doe", Email: "john@example.com", Phone: "123-456-7890", Score: 85, Notes: "Regular" },
  { Id: 2, Name: null, Email: "", Phone: "234-567-8901", Score: null, Notes: null },
  { Id: 3, Name: "Jane Smith", Email: null, Phone: "", Score: 92, Notes: "" },
  { Id: 4, Name: "", Email: "jane@example.com", Phone: null, Score: 78, Notes: "VIP" },
  { Id: 5, Name: "Bob Wilson", Email: "", Phone: null, Score: null, Notes: "" }
];
```

구성하지 않으면 `null` 및 빈 문자열 값은 빈 셀로 표시됩니다.
![image-20260319.236d0d.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260319.236d0d-20260604.6afd12.png?width=600)
**2단계: 테이블 스키마 수준에서 구성**

```typescript
var myTable = dataManager.addTable("myTable", {
    data: sampleData,
    schema: {
        columns: {
            Id: { dataType: "number" },
            Name: { showNullAs: "[NULL]", showEmptyAs: "[EMPTY]" },
            Email: { showNullAs: "[NULL]", showEmptyAs: "[EMPTY]" },
            Score: { showNullAs: "[N/A]", dataType: "number" }
        }
    }
});
```

이 단계에서는:

* `Name` 및 `Email`에 대해 `null` 값과 빈 문자열 값 모두에 대한 사용자 지정 텍스트를 표시합니다.
* `Score` 값이 `null`인 경우 `[N/A]`를 표시합니다.

![image-20260319.7bedee.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260319.7bedee-20260604.81e7fc.png?width=600)
**3단계: 뷰 수준에서 구성**

```typescript
var myView = myTable.addView("myView", [
    { value: "Id", caption: "ID", width: 60 },
    { value: "Name", caption: "Name", width: 150 },
    { value: "Email", caption: "Email", width: 200 },
    // Phone 및 Notes에 대한 뷰 수준 구성
    { value: "Phone", caption: "Phone", width: 130, showNullAs: "[NO PHONE]", showEmptyAs: "[BLANK]" },
    { value: "Score", caption: "Score", width: 80},
    { value: "Notes", caption: "Notes", width: 150, showNullAs: "[NULL]", showEmptyAs: "[NO NOTES]" }
]);
```

이 단계에서는:

* `Phone` 및 `Notes`를 뷰 수준에서 구성합니다.
* 뷰 수준 설정은 해당 뷰에만 적용됩니다.

>type=note
> 뷰에서 열을 구성하지 않은 경우 스키마 수준 설정이 사용됩니다(정의된 경우).

**4단계: 뷰 렌더링**

```javascript
myView.fetch().then(function() {
    tableSheet.setDataView(myView);
});
```

테이블 시트에 렌더링되면 `null` 및 빈 문자열 값이 구성된 텍스트로 표시됩니다.
![image-20260319.fc1607.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260319.fc1607-20260604.32c739.png?width=600)

## 정렬 고려 사항

열 스타일에서 `hAlign`을 명시적으로 정의하지 않은 경우 정렬은 **기본 데이터 형식**에 따른 **기본 규칙**을 따릅니다.
사용자 지정 표시 텍스트를 사용하는 경우:

* 일반 값의 정렬은 데이터 형식을 따릅니다.
* 사용자 지정 표시 텍스트는 텍스트 정렬을 따릅니다.

**예제**
`Email`이 숫자 열이라고 가정합니다.

```typescript
showNullAs: "0"
```

그러면:

* 숫자 값은 오른쪽 정렬됩니다.
* `null` 값에 대해 표시되는 `"0"`은 왼쪽 정렬됩니다.

![image-20260319.34236c.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260319.34236c-20260604.01c125.png?width=600)

## 디자이너에서 구성

### 뷰에서 구성

1. 테이블 시트 뷰를 선택합니다.
2. **열 설정** 리본 탭을 엽니다.
3. **빈 값 표시** 섹션에서 다음에 대한 표시 텍스트를 설정합니다.
    * Null 값
    * 빈 값

![view-20260319.82c7c5.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/view-20260319.82c7c5-20260604.223d00.gif?width=800)

### 테이블 스키마에서 구성

1. 데이터 원본을 엽니다.
2. 테이블을 선택합니다.
3. **열 설정**으로 이동합니다.
4. 해당 열의 빈 값 표시 옵션을 구성합니다.

![tableSchema-20260319.b9551b.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/tableSchema-20260319.b9551b-20260604.5c1db8.gif?width=800)

## 내보내기 동작

Excel로 내보낼 때 사용자 지정 표시 텍스트를 내보낼지 여부는 [`ExportOptions`](https://developer.mescius.com/spreadjs/api/modules/GC.Spread.Sheets#exportoptions)의 [`saveAsView`](https://developer.mescius.com/spreadjs/api/interfaces/GC.Spread.Sheets.ISerializationOption#saveasview) 옵션에 따라 달라집니다.

* `saveAsView = true`: 내보낸 Excel 파일에 `showNullAs` 및 `showEmptyAs`로 정의된 표시 텍스트가 포함됩니다.
* `saveAsView = false`(기본값): 내보낸 파일에는 원래 값이 포함됩니다. `null` 또는 빈 문자열 값은 Excel에서 빈 셀로 표시됩니다.

**`saveAsView` 사용**

```javascript
spread.export(function (blob) {
    saveAs(blob, "export.xlsx");
}, function (e) {
    console.log(e);
}, {
    fileType: GC.Spread.Sheets.FileType.excel,
    saveAsView: true
});
```

디자이너에서는 해당 내보내기 **확인란**이 동일한 옵션을 제어합니다.
![image-20260415.889909.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260415.889909-20260604.cc9fbe.png?width=800)