ColumnEditorSpec

Since v0.1.1

Editor specification for inline cell editing. Supports multiple formats for maximum flexibility.

Format Options:

• string - Custom element tag name (e.g., ‘my-date-picker’)
• function - Factory function returning an editor element
• object - External component spec for framework integration

type ColumnEditorSpec = string | (context: ColumnEditorContext<TRow, TValue>) => HTMLElement | string | object

Example

// 1. Custom element tag name
columns: [
  { field: 'date', editor: 'my-date-picker' }
]

// 2. Factory function (full control)
columns: [
  {
    field: 'status',
    editor: (ctx) => {
      const select = document.createElement('select');
      select.innerHTML = `
        <option value="active">Active</option>
        <option value="inactive">Inactive</option>
      `;
      select.value = ctx.value;
      select.onchange = () => ctx.commit(select.value);
      select.onkeydown = (e) => {
        if (e.key === 'Escape') ctx.cancel();
      };
      return select;
    }
  }
]

// 3. External component (React, Angular, Vue)
columns: [
  {
    field: 'country',
    editor: {
      component: CountrySelect,
      props: { showFlags: true }
    }
  }
]

See Also

• ColumnEditorContext for the context passed to factory functions