# Customize Display Null and Empty Values

## Content

By default, when a data value is `null`, `undefined`, or an empty string (`""`), the cell appears blank in a TableSheet. This makes it difficult to distinguish between:

* A `null` value
* An empty string
* A missing value

To improve clarity, you can specify custom display text for these values at the column level.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260319.75a713.png?width=600)

## Column Properties

```typescript
interface GC.Data.IColumn {
  showNullAs?: string;   // Display text for null or undefined
  showEmptyAs?: string;  // Display text for empty string ("")
}
```

* `showNullAs` applies when the value is `null` or `undefined`.
* `showEmptyAs` applies when the value is an empty string (`""`).

Both properties can be used on the same column.

## Configure in Code

This example demonstrates:

* Default blank behavior
* Configuration at the table schema level
* Additional configuration at the view level

**Step 1: Prepare Sample Data**

```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: "" }
];
```

Without configuration, `null` and empty string values appear as blank cells.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260319.236d0d.png?width=600)
**Step 2: Configure at the Table Schema Level**

```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" }
        }
    }
});
```

In this step:

* `Name` and `Email` display custom text for both `null` and empty string values.
* `Score` displays `[N/A]` when the value is `null`.

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260319.7bedee.png?width=600)
**Step 3: Configure at the View Level**

```typescript
var myView = myTable.addView("myView", [
    { value: "Id", caption: "ID", width: 60 },
    { value: "Name", caption: "Name", width: 150 },
    { value: "Email", caption: "Email", width: 200 },
    // View-level configuration for Phone and 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]" }
]);
```

In this step:

* `Phone` and `Notes` are configured at the view level.
* View-level settings apply to that specific view.

>type=note
> If a column is not configured in the view, the schema-level configuration is used (if defined).

**Step 4: Render the View**

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

When rendered in the TableSheet, `null` and empty string values display the configured text.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260319.fc1607.png?width=600)

## Alignment Considerations

If `hAlign` is not explicitly defined in the column style, alignment follows the **default rule** based on the **underlying data type**.
When a custom display text is used:

* The alignment of normal values follows their data type.
* The custom display text follows text alignment.

**Example**
Assume `Email` is a number column:

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

Then:

* Numeric values are right-aligned.
* The displayed `"0"` for `null` is left-aligned.

![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260319.34236c.png?width=600)

## Configure in Designer

### On the View

1. Select the TableSheet view.
2. Open the **Column Setting** ribbon tab.
3. In the **Blank Display** section, set display text for:
    * Null values
    * Empty values

![view.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/view-20260319.82c7c5.gif?width=800)

### On the Table Schema

1. Open Data Source.
2. Select the table.
3. Go to **Column Setting**.
4. Configure blank display options for the column.

![tableSchema.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/tableSchema-20260319.b9551b.gif?width=800)

## Export Behavior

When exporting to Excel, whether the custom display text is exported depends on the [`saveAsView`](https://developer.mescius.com/spreadjs/api/interfaces/GC.Spread.Sheets.ISerializationOption#saveasview) in [`ExportOptions`](https://developer.mescius.com/spreadjs/api/modules/GC.Spread.Sheets#exportoptions).

* `saveAsView = true`: The exported Excel file contains the displayed text defined by `showNullAs` and `showEmptyAs`.
* `saveAsView = false` (default): The exported file contains the original underlying values. Cells with null or empty string values appear blank in Excel.

**Using `saveAsView`**

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

In the Designer, the corresponding export **checkbox** controls the same option.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260415.889909.png?width=800)