Options And Select Editor

Select editor and options

This guide explains how to render a select dropdown for fields in CreateResourceDialog using the columns configuration, and how to customize the available options. It applies when you use explicit columns or when columns are provided by the database in public.resource_routes.columns.

When the select editor is used

A field renders as a select dropdown when the column entry has an editor with type: "select".
Options are provided via editor.options, which is an array of { label, value }.
Without editor.type: "select", the dialog chooses the input type from data_type:
- "bool" in data_type → checkbox
- Numeric-like (num, int, decimal, currency) → number input
- Otherwise → text input

Column entry structure

Each column can be:

A string column name (minimal config), or
An object with advanced config:

{
  "column_name": "status",
  "header_label": "Status",
  "hidden": false,
  "data_type": "text",
  "editor": {
    "type": "select",
    "options": [
      { "label": "Draft", "value": "draft" },
      { "label": "Active", "value": "active" },
      { "label": "Archived", "value": "archived" }
    ]
  }
}
```typescript

Notes:
- `header_label` (or `header`) controls the visible label. Underscores in keys/labels are converted to spaces.
- `hidden: true` omits the field entirely.
- `data_type` is optional for select; only `editor.type: "select"` and `editor.options` are required.

### Configuring in resource_routes (DB)
Set the `columns` JSON/JSONB field in `public.resource_routes` to include select-enabled entries. Example payload for `columns`:

```json
[
  "name",
  {
    "column_name": "status",
    "header_label": "Status",
    "editor": {
      "type": "select",
      "options": [
        { "label": "Draft", "value": "draft" },
        { "label": "Active", "value": "active" },
        { "label": "Archived", "value": "archived" }
      ]
    }
  },
  {
    "column_name": "priority",
    "header_label": "Priority",
    "data_type": "int"
  }
]
```typescript

If your dialog is opened with only `resourceName` (no explicit `columns`), the dialog fetches this structure from `resource_routes` and will render `status` as a searchable select.

### Configuring in code (explicit columns)
You can bypass DB configuration and pass `columns` directly:

```tsx
import { CreateResourceDialog } from "@/packages/resource-framework/components/create-resource-dialog";

<CreateResourceDialog
  open={open}
  onClose={() => setOpen(false)}
  title="New item"
  table="items"
  columns={[
    "name",
    {
      column_name: "status",
      header_label: "Status",
      editor: {
        type: "select",
        options: [
          { label: "Draft", value: "draft" },
          { label: "Active", value: "active" },
          { label: "Archived", value: "archived" }
        ]
      }
    }
  ]}
/>
```typescript

### UX details
- The dropdown uses `ResponsiveDropdownV2`, which supports:
  - Inline search
  - Keyboard navigation (↑/↓ to move, Enter to select, Esc to close)
  - Mobile-friendly behavior (native select or drawer where applicable)
- The button text shows the current selection or “Select…” when empty.
- No default selection is applied automatically. If you need a default, provide your own `DialogComponent` and initialize the field in `initial` state.

### Customizing options
- Static options: set via `editor.options` as above (DB or code).
- Dynamic or dependent options:
  - Use `DialogComponent` to build a fully custom form and handle dynamic fetching or dependency logic. Call `onSubmit(values)` to pass the final payload to the same insert flow.
  - Alternatively, precompute options in code (server or client) and supply them in `columns` at render time.

### Value semantics
- Comparison is done by string equivalence for rendering active state; values are submitted as provided in the `value` field.
- Use primitive `value` types only: `string | number | boolean`.

### Troubleshooting
- Nothing shows up: ensure `hidden` is not `true`, and the column object has a `column_name`.
- Not rendering as select: verify `editor.type === "select"` and `editor.options` is a non-empty array.
- Option doesn’t appear selected: ensure `values[field]` matches an option’s `value` (string comparison).

Options And Select Editor

Select editor and options

When the select editor is used

Column entry structure

On this page