# View Styling and Rules

## Content

In addition to defining structure, a View can control how data is visually interpreted and dynamically evaluated.
This includes:

* Conditional formatting
* Sparkline rules
* View-level style rules
* Automatic filter and sort reapplication
* Data length inspection

## Conditional Formatting (Column-Level)

Conditional formatting can be defined directly in the column configuration using the `conditionalFormats` property.
These rules are evaluated per cell.

### Formula-Based Rule

```javascript
var formulaRule = {
    ruleType: "formulaRule",
    formula: "@ > 50",
    style: {
        backColor: "pink"
    }
};

var myView = productTable.addView("myView", [
    { value: "productId", caption: "ID" },
    { value: "unitPrice", caption: "Unit Price", conditionalFormats: [formulaRule] }
]);
```

* `@` refers to the current cell value.
* The style is applied when the formula evaluates to true.

### Sparkline Conditional Rules

Sparkline rules allow data to be visualized directly within cells.
They are also defined through `conditionalFormats`.
**Bullet Sparkline Example**

```javascript
var bulletRule = {
    ruleType: "sparklineRule",
    sparklineType: "BULLETSPARKLINE",
    sparklineOptions: {
        measure: '@',
        target: 500,
        maxi: 1000,
        good: 700,
        bad: 250
    },
    showSparklineOnly: true
};

var myView = salesTable.addView("salesView", [
    { value: "region", caption: "Region", width: 130 },
    { value: "target", caption: "Target ($K)", width: 100 },
    { value: "actual", caption: "Actual ($K)", width: 100 },
    { value: "actual1", caption: "Performance", width: 220, conditionalFormats: [bulletRule] }
]);
```

**Lollipop Variance Example**

```javascript
var lollipopRule = {
    ruleType: "sparklineRule",
    sparklineType: "LOLLIPOPVARISPARKLINE",
    sparklineOptions: {
        plannedValue: '[target]',
        actualValue: '$CF_RANGE$',
        index: '@',
        reference: 0,
        mini: -0.3,
        maxi: 0.3
    },
    showSparklineOnly: true
};

var myView = salesTable.addView("salesView", [
    { value: "region", caption: "Region", width: 130 },
    { value: "target", caption: "Target ($K)", width: 100 },
    { value: "actual", caption: "Actual ($K)", width: 100 },
    { value: "actual2", caption: "Variance", width: 220, conditionalFormats: [lollipopRule] }
]);
```

Sparkline rules allow inline data visualization without modifying underlying data.

## View-Level Style Rules

In addition to column-level conditional formatting, you can define style rules at the View level.
These rules can be:

* Formula-based
* State-based

### Add a View-Level Rule

```javascript
view.addStyleRule(
    "dirtyRowStyle",
    { backColor: "yellow" },
    {
        direction: GC.Data.StateRuleDirection.row,
        state: GC.Data.RowColumnStates.dirty
    }
);
```

### Manage View-Level Rules

```javascript
view.getStyleRule();               // get all rules
view.getStyleRule("ruleName");     // get specific rule
view.removeStyleRule("ruleName");  // remove rule
view.clearStyleRules();            // remove all rules
```

View-level rules apply across the entire view rather than a single column.

## Automatic Filter and Sort Reapplication

A View exposes two properties:

```javascript
view.autoFilte
rview.autoSort
```

These control whether existing filter or sort definitions are automatically re-applied when underlying data changes.

* When `true` (default), filtering and sorting are re-evaluated after data updates.
* When `false`, the existing state remains unchanged until manually triggered.

These properties affect runtime behavior only.

## Data Length Methods

A View provides two methods to inspect data size:

```javascript
view.length();
view.visibleLength();
```

* `length()` returns the total data length of the host table.
* `visibleLength()` returns the current visible data length in the view.

The visible length may differ from total length depending on filtering or view state.