TypeDefault

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

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?`	(value: `unknown`, row: `TRow`) => `string`	Default formatter for all columns of this type.
`renderer?`	`ColumnViewRenderer`<`TRow`, `unknown`>	Default renderer for all columns of this type.
`editor?`	`ColumnEditorSpec`<`unknown`, `unknown`>	Default editor for all columns of this type. Requires EditingPlugin.
`editorParams?`	`Record`<`string`, `unknown`>	Default editor parameters for all columns of this type. Requires EditingPlugin.
`filterPanelRenderer?`	`FilterPanelRenderer`	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

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

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

// 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

// 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

// 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)