diff --git a/react-openapi/components/FilterBar.tsx b/react-openapi/components/FilterBar.tsx
index 00d5cbe..ba40068 100644
--- a/react-openapi/components/FilterBar.tsx
+++ b/react-openapi/components/FilterBar.tsx
@@ -124,17 +124,10 @@ function extractOptions(
 
     if (field.enumOption?.value) return resolveTemplate(field.enumOption.value, item);
 
-    if (fieldName == 'payee') debugger;
-    const df = field.displayField;
-    if (!df) return null;
-
-    if (Array.isArray(df)) {
-      const parts = df.map((k) => item[k]).filter((v) => v != null);
-      if (parts.length > 0) return parts.join(" ");
-      return null;
+    // Use displayFormat if defined, otherwise fall back to displayField logic (for backward compatibility)
+    if (field.displayFormat) {
+      return resolveTemplate(field.displayFormat, item);
     }
-    const v = item[df];
-    if (v != null) return String(v);
 
     return null;
   };
diff --git a/react-openapi/types/config.ts b/react-openapi/types/config.ts
index 347ab7e..cbea504 100644
--- a/react-openapi/types/config.ts
+++ b/react-openapi/types/config.ts
@@ -21,13 +21,13 @@ export interface EnumOption {
 }
 
 export interface ResourceField {
+  displayFormat: string;
   type: FieldType;
   label: string;
   required?: boolean;
   options?: string[];
   readOnly?: boolean;
   schema?: Record<string, ResourceField>;
-  displayField?: string | string[];
   formatter?: (value: any) => string;
   relation?: string;
   filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range";