# Built-in Named Cell Template Gallery

## Content

SpreadJS Designer includes a collection of built-in Named Cell Templates for common financial formatting, status tracking, data visualization, and interactive behaviors.
This page summarizes what each template configures when applied.
Templates are grouped into three categories:

* Financial
* Status & Scoring
* Data & Interaction

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

## Financial Templates

These templates provide standardized numeric formats commonly used in financial reporting and analysis.

### Financial Amount

Formats numeric values for general financial reporting.
**Configuration**

* Number format: `#,##0.00`
* Alignment: Right
* Conditional formatting: Values below 0 displayed in red (Accent 2)
* Data validation: Numeric values only

**Effect**
Applies thousand separators and two decimal places, and visually distinguishes negative amounts.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260331.74a839.png?width=200)

### Growth Rate

Formats percentage-based metrics with visual differentiation for positive and negative values.
**Configuration**

* Number format: `0.00%`
* Alignment: Right
* Conditional formatting:
    * Values greater than 0 → green font (Accent 6)
    * Values less than 0 → red font (Accent 2)

**Effect**
Standardizes percentage display and highlights increases and decreases.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260331.d699d7.png?width=200)

### Budget Variance

Displays financial variances with clear visual indicators for favorable and unfavorable results.
**Configuration**

* Number format: `+#,##0.00;-#,##0.00;0.00`
* Alignment: Right
* Conditional formatting:
    * Positive values → green background with dark green text
    * Negative values → red background with dark red text

**Effect**
Emphasizes variance direction using background color for easier comparison.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260331.7e7567.png?width=200)

### Currency

Applies U.S. dollar currency formatting.
**Configuration**

* Number format: `$#,##0.00`
* Alignment: Right

**Effect**
Displays values with a dollar symbol and thousand separators.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260331.34ea6d.png?width=200)

### Accounting Format

Applies accounting-style number formatting for formal financial statements.
**Configuration**

* Accounting number format with aligned currency symbol
* Negative values displayed in parentheses
* Alignment: Right

**Effect**
Ensures consistent accounting presentation and standardized negative value display.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260331.f7d6db.png?width=200)

## Status & Scoring Templates

These templates support structured status management, scoring systems, and progress tracking.

### Workflow Status

Provides a standardized workflow selector with color-coded statuses.
**Configuration**

* Alignment: Center
* Data validation: Dropdown list (Not Started / In Progress / Completed / Blocked)
* Conditional formatting:
    * Completed → green background
    * In Progress → blue background
    * Not Started → gray background
    * Blocked → red background

**Effect**
Ensures consistent status values while visually distinguishing workflow stages.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260331.0c5037.png?width=200)

### Completion Bar

Displays progress as a visual data bar.
**Configuration**

* Number format: Percentage
* Alignment: Center
* Conditional formatting: Data bar (0–100% range)
* Data validation: Decimal between 0 and 1

**Effect**
Represents completion percentage visually while preserving numeric values.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260331.5e60e6.png?width=200)

### Priority Level

Provides a priority selector with color differentiation.
**Configuration**

* Alignment: Center
* Data validation: Dropdown list (High / Medium / Low)
* Conditional formatting:
    * High → red background
    * Medium → yellow background
    * Low → green background

**Effect**
Standardizes priority levels and visually highlights urgency.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260331.40f5b1.png?width=200)

### Due Date

Formats a cell as a date and highlights deadlines.
**Configuration**

* Date format: `yyyy-mm-dd`
* Alignment: Center
* Data validation: Valid date range
* Conditional formatting:
    * Overdue → red background
    * Due today → yellow background

**Effect**
Improves visibility of time-sensitive items and highlights approaching or missed deadlines.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260331.92f85b.png?width=200)

### Grade Score

Applies score-based color grading.
**Configuration**

* Alignment: Center
* Data validation: Integer between 0 and 100
* Conditional formatting:
    * 90–100 → dark green
    * 80–89 → light green
    * 70–79 → yellow
    * 60–69 → light red
    * Below 60 → dark red

**Effect**
Provides visual performance grading based on numeric score ranges.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260331.33f7b7.png?width=200)

### Inventory Level

Highlights stock levels using threshold-based coloring.
**Configuration**

* Number format: `#,##0`
* Alignment: Right
* Data validation: Integer ≥ 0
* Conditional formatting:
    * Below 100 → red (Low)
    * 100–500 → yellow (Normal)
    * Above 500 → green (Sufficient)

**Effect**
Visually categorizes inventory quantities by level.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260331.11b5d4.png?width=200)

### Star Rating

Displays a 1–5 rating scale with color indication.
**Configuration**

* Alignment: Center
* Data validation: Integer between 1 and 5
* Conditional formatting:
    * 5 → dark green
    * 4 → light green
    * 3 → yellow
    * 1–2 → red

**Effect**
Standardizes rating input and visually differentiates score levels.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260331.f9b24b.png?width=200)

### Yes/No Toggle

Provides a Boolean selector with color-coded values.
**Configuration**

* Alignment: Center
* Data validation: Dropdown list (Yes / No)
* Conditional formatting:
    * Yes → green background
    * No → red background

**Effect**
Ensures consistent Boolean input with immediate visual feedback.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260331.612216.png?width=200)

## Data & Interaction Templates

These templates enhance data visualization and interactive behaviors.

### Heat Map

Applies a three-color gradient based on relative cell values.
**Configuration**

* Alignment: Center
* Conditional formatting: Three-color scale
    * Lowest values → red (Accent 2)
    * Midpoint → yellow (Accent 4)
    * Highest values → green (Accent 6)

**Effect**
Highlights value distribution across a range using gradient coloring.
![Heat Map.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/Heat%20Map-20260331.f3bf6e.gif?width=200)

### Editable Field

Creates an input-style cell with interactive visual feedback.
**Configuration**

* Base style: White background with bottom border (Accent 5)
* Cell states:
    * Hover → light blue background
    * Edit → blue background with full border
    * Active → Accent 1 border

**Effect**
Provides form-like interaction feedback for editable fields.
![EditableField.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/EditableField-20260331.b88762.gif?width=200)

### Top/Bottom

Highlights the top and bottom 10% of values within a range.
**Configuration**

* Alignment: Right
* Conditional formatting:
    * Top 10% → green background
    * Bottom 10% → red background

**Effect**
Quickly identifies extreme values in a dataset.
![TopBottom.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/TopBottom-20260331.6ec0e7.gif?width=200)

### Duplicate Check

Highlights duplicate values within a range.
**Configuration**

* Conditional formatting: Duplicate-value rule (yellow background with dark yellow text)

**Effect**
Helps detect repeated entries for data validation and cleanup.
![DuplicateCheck.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/DuplicateCheck-20260331.cf9e8b.gif?width=200)

### Email Address

Formats a cell for email input and validates format.
**Configuration**

* Alignment: Left
* Font color: Accent 1 (blue)
* Data validation: Email format validation rule with input guidance

**Effect**
Encourages correct email entry and visually distinguishes email fields.
![EmailAddress.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/EmailAddress-20260331.4c173c.gif?width=200)

### Active Row

Highlights the entire row of the active cell.
**Configuration**

* Conditional formatting: Row state rule (Active state)
* Background color: Accent 1 (semi-transparent)

**Effect**
Improves row tracking in large datasets.
![ActiveRow.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/ActiveRow-20260331.7e206e.gif?width=200)

### Hover Row

Highlights a row when the mouse hovers over it.
**Configuration**

* Conditional formatting: Row state rule (Hover state)
* Background color: Accent 5 (semi-transparent)

**Effect**
Enhances readability during data browsing.
![HoverRow.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/HoverRow-20260331.ebe47a.gif?width=200)

### Crosshair

Highlights both the row and column of the selected cell.
**Configuration**

* Conditional formatting:
    * Row state rule (Selected state)
    * Column state rule (Selected state)
* Cell state adjustment: Selected cell background set to transparent to avoid overlap

**Effect**
Provides precise positioning within matrix-style data.
![Crosshair.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/Crosshair-20260331.9dc83f.gif?width=200)