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

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

null 값
빈 문자열
누락된 값

가독성을 높이기 위해 열 수준에서 이러한 값에 대한 사용자 지정 표시 텍스트를 지정할 수 있습니다.

image-20260319.75a713.png

열 속성

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

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

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

코드에서 구성

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

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

1단계: 샘플 데이터 준비

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

2단계: 테이블 스키마 수준에서 구성

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

3단계: 뷰 수준에서 구성

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를 뷰 수준에서 구성합니다.
뷰 수준 설정은 해당 뷰에만 적용됩니다.

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

4단계: 뷰 렌더링

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

테이블 시트에 렌더링되면 null 및 빈 문자열 값이 구성된 텍스트로 표시됩니다.

image-20260319.fc1607.png

정렬 고려 사항

열 스타일에서 hAlign을 명시적으로 정의하지 않은 경우 정렬은 기본 데이터 형식에 따른 기본 규칙을 따릅니다.

사용자 지정 표시 텍스트를 사용하는 경우:

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

예제

Email이 숫자 열이라고 가정합니다.

showNullAs: "0"

그러면:

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

image-20260319.34236c.png

디자이너에서 구성

뷰에서 구성

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

view-20260319.82c7c5.gif

테이블 스키마에서 구성

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

tableSchema-20260319.b9551b.gif

내보내기 동작

Excel로 내보낼 때 사용자 지정 표시 텍스트를 내보낼지 여부는 ExportOptions의 saveAsView 옵션에 따라 달라집니다.

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

saveAsView 사용

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