# TypeDefault

> _Since v1.0.0_

Type-level defaults for formatters and renderers.
Applied to all columns of a given type unless overridden at column level.

Note: `editor` and `editorParams` are added via module augmentation when
EditingPlugin is imported. `filterPanelRenderer` is added by FilteringPlugin.

#### Example

```typescript
typeDefaults: {
  currency: {
    format: (value) => new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(value as number),
  },
  country: {
    renderer: (ctx) => {
      const span = document.createElement('span');
      span.innerHTML = `<img src="/flags/${ctx.value}.svg" /> ${ctx.value}`;
      return span;
    }
  }
}
```

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `format?` | <code>(value: unknown, row: TRow) =&gt; string</code> | Default formatter for all columns of this type. |
| `renderer?` | <code><a href="/grid/api/core/types/columnviewrenderer/">ColumnViewRenderer</a>&lt;TRow, unknown&gt;</code> | Default renderer for all columns of this type. |
| `editor?` | <code><a href="/grid/api/core/types/columneditorspec/">ColumnEditorSpec</a>&lt;unknown, unknown&gt;</code> | Default editor for all columns of this type. Requires EditingPlugin. |
| `editorParams?` | <code>Record&lt;string, unknown&gt;</code> | Default editor parameters for all columns of this type. Requires EditingPlugin. |
| `filterPanelRenderer?` | <code><a href="/grid/plugins/filtering/types/filterpanelrenderer/">FilterPanelRenderer</a></code> | Custom filter panel renderer for this type. Requires FilteringPlugin. |

### Property Details

#### format

Default formatter for all columns of this type.

Transforms the raw cell value into a display string. Use when you need
consistent formatting across columns without custom DOM (e.g., currency,
percentages, dates with specific locale).

**Resolution Priority**: Column `format` → Type `format` → Built-in

```typescript
typeDefaults: {
  currency: {
    format: (value) => new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(value as number),
  },
  percentage: {
    format: (value) => `${(value as number * 100).toFixed(1)}%`,
  }
}
```

---

#### renderer

Default renderer for all columns of this type.

Creates custom DOM for the cell content. Use when you need more than
text formatting (e.g., icons, badges, interactive elements).

**Resolution Priority**: Column `renderer` → Type `renderer` → App-level (adapter) → Built-in

```typescript
typeDefaults: {
  status: {
    renderer: (ctx) => {
      const badge = document.createElement('span');
      badge.className = `badge badge-${ctx.value}`;
      badge.textContent = ctx.value as string;
      return badge;
    }
  },
  country: {
    renderer: (ctx) => {
      const span = document.createElement('span');
      span.innerHTML = `<img src="/flags/${ctx.value}.svg" /> ${ctx.value}`;
      return span;
    }
  }
}
```

---

#### editor

Default editor for all columns of this type. Requires EditingPlugin.

Use type-level editors when multiple columns share the same editing behavior.
Column-level `editor` takes precedence over type-level.

**Resolution Priority**: Column `editor` → Type `editor` → Built-in

```typescript
// All 'date' columns use a custom datepicker
typeDefaults: {
  date: {
    editor: (ctx) => {
      const picker = new MyDatePicker();
      picker.value = ctx.value;
      picker.onSelect = (d) => ctx.commit(d);
      picker.onCancel = () => ctx.cancel();
      return picker;
    }
  }
}
```

---

#### editorParams

Default editor parameters for all columns of this type. Requires EditingPlugin.

Applied to built-in editors when no column-level `editorParams` is set.
Useful for setting consistent constraints across columns (e.g., all currency
fields should have `min: 0` and `step: 0.01`).

**Resolution Priority**: Column `editorParams` → Type `editorParams` → Built-in defaults

```typescript
// All 'currency' columns use these number editor params
typeDefaults: {
  currency: {
    editorParams: { min: 0, step: 0.01 }
  }
}

// Column can still override:
columns: [
  { field: 'price', type: 'currency', editable: true },  // Uses type defaults
  { field: 'discount', type: 'currency', editable: true,
    editorParams: { min: -100, max: 100 } }  // Overrides type defaults
]
```

---

#### filterPanelRenderer

Custom filter panel renderer for this type. Requires FilteringPlugin.

Use type-level filter panels when you need custom filtering UI for all
columns of a specific type (e.g., custom datepickers for all date columns).

The renderer receives the container element and `FilterPanelParams` with
helper methods for applying filters. Return nothing; append content to container.

**Resolution Priority**: Plugin `filterPanelRenderer` → Type `filterPanelRenderer` → Built-in

```typescript
// All 'date' columns use a custom filter panel with your datepicker
typeDefaults: {
  date: {
    filterPanelRenderer: (container, params) => {
      const picker = new MyDateRangePicker();
      picker.onApply = (from, to) => {
        params.applyTextFilter('between', from, to);
      };
      picker.onClear = () => params.clearFilter();
      container.appendChild(picker);
    }
  }
}
```

**See also:** FilterPanelParams for available methods (applySetFilter, applyTextFilter, clearFilter, closePanel)

---

## See Also

- [`ColumnViewRenderer`](/grid/api/core/types/columnviewrenderer.md) for custom renderer function signature
- [`ColumnType`](/grid/api/core/types/columntype.md) for type strings that can have defaults
- [`GridConfig.typeDefaults`](/grid/api/core/interfaces/gridconfig.md#typedefaults) for registering type defaults