Asynchronous options
Search remote choices and resolve already selected values.
Large option lists need a search endpoint and a way to resolve labels for existing IDs. Implement both paths so editing a record does not display an unexplained raw identifier.
Configuration example
Start from the React quick start or Vue quick start. The following file extends their product catalog. Pass this configuration through getTableConfig in React or config in Vue.
import { z } from "zod";
import type { FormConfig } from "@/components/ui/yayaw-table/components/forms/types";
const optionSchema = z.array(
z.object({ value: z.string(), label: z.string() })
);
const loadOptions = async (query: URLSearchParams, signal: AbortSignal) => {
const response = await fetch(`/api/customers/options?${query}`, { signal });
if (!response.ok) {
throw new Error("Customer options could not be loaded.");
}
return optionSchema.parse(await response.json());
};
export const customerForm: FormConfig = {
id: "customer-choice",
fields: [
{
name: "customerId",
label: "Customer",
type: "select",
options: [],
searchMinLength: 2,
searchDebounceMs: 250,
searchOptions: (query, _context, signal) =>
loadOptions(new URLSearchParams({ q: query }), signal),
resolveOptions: (values, _context, signal) =>
loadOptions(
new URLSearchParams({ ids: values.map(String).join(",") }),
signal
),
},
],
};import { z } from "zod";
import type { FormConfig } from "@/components/ui/yayaw-table-vue/types";
const optionSchema = z.array(
z.object({ value: z.string(), label: z.string() })
);
const loadOptions = async (query: URLSearchParams, signal: AbortSignal) => {
const response = await fetch(`/api/customers/options?${query}`, { signal });
if (!response.ok) {
throw new Error("Customer options could not be loaded.");
}
return optionSchema.parse(await response.json());
};
export const customerForm: FormConfig = {
id: "customer-choice",
fields: [
{
name: "customerId",
label: "Customer",
type: "select",
options: [],
searchMinLength: 2,
searchDebounceMs: 250,
searchOptions: (query, _context, signal) =>
loadOptions(new URLSearchParams({ q: query }), signal),
resolveOptions: (values, _context, signal) =>
loadOptions(
new URLSearchParams({ ids: values.map(String).join(",") }),
signal
),
},
],
};Endpoint contract
This integration example expects your /api/customers/options route to return an array of { value: string, label: string }. q searches and ids resolves exact stored identifiers. Authorize both operations, validate the input and return only accessible options. The fixture validates the response with Zod; it does not supply this application-specific API.
Dependencies and cancellation
List only fields that affect the options in optionDependencies. Change optionsScope when tenant or permission scope changes. Pass the provided AbortSignal to fetch so a late response cannot overwrite a newer search. resolveOptions must include selected values even when they are not on the first search page.
Create a choice
For a creatable select, createOption returns the newly persisted option. Creation belongs to the host API and should enforce uniqueness and permissions. Test loading failures, fast typing, initial IDs, dependent-field changes and a form closing during a request.