RBGrid Inline Editors

Overview

• RBGrid now supports rich inline editors per column, driven by optional schema and user preferences.
• Editors include enum dropdowns, date/datetime pickers, numeric spinners (min/max), secure blurred fields, reference (QBE) pickers, and large-text editors (Markdown/JSON/YAML).

How It Works

• Column schema: pass columnSchema to RBGrid as a map of columnKey → schema.
• Supported schema fields:
  • type: string | number | boolean | date | datetime | enum | object | json | markdown | image
  • enumValues: string[] (required for enum)
  • min/max/step: numeric constraints
  • refType: enables reference picking via onReferencePick
  • secure: when true, renders blurred until clicked (e.g., passwords, api keys)
  • editor: default | markdown | json | yaml | spreadsheet | image
• User preferences: provide editorPreferences mapping (e.g., WorkflowTable#meta: "json") to force a field editor.

Usage Example

import { RBGrid } from '@valkyr/component-library/BootstrapGrid';
import type { ColumnSchema } from '@valkyr/component-library/BootstrapGrid/RBGrid';

const columnSchema: Record<string, ColumnSchema> = {
  status: { type: 'enum', enumValues: ['running','stopped','ready','warning','error','disabled'] },
  createdDate: { type: 'datetime' },
  description: { type: 'string' },
  meta: { type: 'json', editor: 'json' },
  apiKey: { secure: true, type: 'string' },
};

<RBGrid
  data={rows}
  columns={cols}
  columnSchema={columnSchema}
  onReferencePick={async (rowId, field, refType) => {/* open QBE modal and return {id,label} */}}
  editorPreferences={{ 'WorkflowTable#meta': 'json' }}
  {...handlers}
/>

Behavior

• Enum: inline <select> with enumValues.
• Date/Datetime: <input type="date|datetime-local">.
• Number: <input type="number"> with min/max/step.
• Secure: value is blurred and click-to-reveal; still respects aspect masking on the backend.
• Reference/QBE: when refType present and onReferencePick provided, shows a Pick button which calls your handler to choose or create a related object.
• Large text: if editor preference is markdown|json|yaml, the inline editor uses a multi-line textarea; complex editors (Markdown renderer, Spreadsheet) can be integrated subsequently and toggled by the same preference.

Preferences

• Store field editor choices under a custom key (e.g., UX:FieldEditors) via UserPreferenceService.setCustomPrefsKey() and feed them into editorPreferences.

Notes

• Backend SecureField still governs masking/decrypt at the API boundary; the blurred UI is an additional UX safeguard only.
• For QBE, pass onReferencePick to open your modal or inline picker and return the selected object.