Column Types in Apex Grid

Each column in the Apex grid declares a type that determines how it renders, how it sorts, and which editor it uses in inline-editing mode. Types are managed through a declarative registry that ships with seven built-in entries and accepts custom registrations.

Built-in types

Type	Display	Editor	Notes
string (default)	Plain text	Single-line input
number	Right-aligned, locale-formatted	Numeric input
boolean	Polished checkbox / dash glyph	Native checkbox
select	Label for the matched option	Dropdown of options[]	Provide options on the column
rating	Star bar (filled / empty)	Star bar with keyboard support	Configurable max value
date	Locale-formatted date	Native date picker	Accepts Date or ISO string
image	Inline image preview	URL input	Falls back to alt text on load failure

Declaring a column type

{
  key: 'createdAt',
  type: 'date',
}

For types that need configuration:

{
  key: 'priority',
  type: 'select',
  options: [
    { value: 'low',    label: 'Low'    },
    { value: 'medium', label: 'Medium' },
    { value: 'high',   label: 'High'   },
  ],
}

{
  key: 'score',
  type: 'rating',
  max: 5,
}

Custom column types

Register a new type once at module level; reference it by name on any column.

import { registerColumnType } from 'apex-grid';
import { html } from 'lit';

registerColumnType('currency', {
  displayTemplate: ({ value }) =>
    html`<span class="currency">$${(value as number).toFixed(2)}</span>`,
  editorTemplate: ({ value, commit }) => html`
    <input
      type="number"
      step="0.01"
      .value=${value}
      @change=${(e: Event) => commit(parseFloat((e.target as HTMLInputElement).value))}
    />
  `,
  compare: (a, b) => (a as number) - (b as number),
});

Type definition

type ColumnTypeDefinition<T = unknown> = {
  displayTemplate: (ctx: { value: T; row: unknown }) => unknown;
  editorTemplate?: (ctx: {
    value: T;
    commit: (next: T) => void;
    cancel: () => void;
  }) => unknown;
  compare?: (a: T, b: T) => number;
};

• displayTemplate is required. It returns the Lit template rendered in the cell.
• editorTemplate is required only if the column type participates in inline editing. The template receives commit and cancel callbacks for the editor lifecycle.
• compare is an optional sort comparator. Falls back to the default string/number comparison when omitted.

Migrating from custom column classes

Apex Grid 1.x supported custom column types via direct class extension. The 2.x registry replaces that pattern. Existing custom classes need to be rewritten as ColumnTypeDefinition registrations. See src/components/cell-types in the source repo for the reference implementations of the built-in types.