@liedekef/ftable 1.1.23 → 1.1.25

package/ftable.esm.js

@@ -37,6 +37,7 @@ const FTABLE_DEFAULT_MESSAGES = {
 class FTableOptionsCache {
     constructor() {
         this.cache = new Map();
+        this.pendingRequests = new Map(); // Track ongoing requests
     }
 
     generateKey(url, params) {
@@ -76,6 +77,37 @@ class FTableOptionsCache {
         }
     }
 
+    async getOrCreate(url, params, fetchFn) {
+        const key = this.generateKey(url, params);
+
+        // Return cached result if available
+        const cached = this.cache.get(key);
+        if (cached) return cached;
+
+        // Check if same request is already in progress
+        if (this.pendingRequests.has(key)) {
+            // Wait for the existing request to complete
+            return await this.pendingRequests.get(key);
+        }
+
+        // Create new request
+        const requestPromise = (async () => {
+            try {
+                const result = await fetchFn();
+                this.cache.set(key, result);
+                return result;
+            } finally {
+                // Clean up pending request tracking
+                this.pendingRequests.delete(key);
+            }
+        })();
+
+        // Track this request
+        this.pendingRequests.set(key, requestPromise);
+
+        return await requestPromise;
+    }
+
     size() {
         return this.cache.size;
     }
@@ -141,6 +173,7 @@ class FTableLogger {
         
         const levelName = Object.keys(FTableLogger.LOG_LEVELS)
             .find(key => FTableLogger.LOG_LEVELS[key] === level);
+        console.trace();
         console.log(`fTable ${levelName}: ${message}`);
     }
 
@@ -545,17 +578,109 @@ class FTableFormBuilder {
         this.dependencies = new Map(); // Track field dependencies
         this.optionsCache = new FTableOptionsCache();
         this.originalFieldOptions = new Map(); // Store original field.options
+        this.resolvedFieldOptions = new Map(); // Store resolved options per context
+
+        // Initialize with empty cache objects
+        Object.keys(this.options.fields || {}).forEach(fieldName => {
+            this.resolvedFieldOptions.set(fieldName, {});
+        });
+        Object.entries(this.options.fields).forEach(([fieldName, field]) => {
+            this.originalFieldOptions.set(fieldName, field.options);
+        });
     }
 
-    // Store original field options before any resolution
-    storeOriginalFieldOptions() {
-        if (this.originalFieldOptions.size > 0) return; // Already stored
+    // Get options for specific context
+    async getFieldOptions(fieldName, context = 'table', params = {}) {
+        const field = this.options.fields[fieldName];
+        const originalOptions = this.originalFieldOptions.get(fieldName);
+        
+        // If no options or already resolved for this context with same params, return cached
+        if (!originalOptions) {
+            return null;
+        }
+
+        // Determine if we should skip caching for this specific context
+        const shouldSkipCache = this.shouldForceRefreshForContext(field, context, params);
+        const cacheKey = this.generateOptionsCacheKey(context, params);
+        // Skip cache if configured or forceRefresh requested
+        if (!shouldSkipCache && !params.forceRefresh) {
+            const cached = this.resolvedFieldOptions.get(fieldName)[cacheKey];
+            if (cached) return cached;
+        }
 
-        Object.entries(this.options.fields).forEach(([fieldName, field]) => {
-            if (field.options && (typeof field.options === 'function' || typeof field.options === 'string')) {
-                this.originalFieldOptions.set(fieldName, field.options);
+        try {
+            // Create temp field with original options for resolution
+            const tempField = { ...field, options: originalOptions };
+            const resolved = await this.resolveOptions(tempField, {
+                ...params
+            }, context, shouldSkipCache);
+            
+            // we store the resolved option always
+            this.resolvedFieldOptions.get(fieldName)[cacheKey] = resolved;
+            return resolved;
+        } catch (err) {
+            console.error(`Failed to resolve options for ${fieldName} (${context}):`, err);
+            return originalOptions;
+        }
+    }
+
+    /**
+     * Clear resolved options for specific field or all fields
+     * @param {string|null} fieldName - Field name to clear, or null for all fields
+     * @param {string|null} context - Context to clear ('table', 'create', 'edit'), or null for all contexts
+     */
+    clearResolvedOptions(fieldName = null, context = null) {
+        if (fieldName) {
+            // Clear specific field
+            if (this.resolvedFieldOptions.has(fieldName)) {
+                if (context) {
+                    // Clear specific context for specific field
+                    this.resolvedFieldOptions.get(fieldName)[context] = null;
+                } else {
+                    // Clear all contexts for specific field
+                    this.resolvedFieldOptions.set(fieldName, { table: null, create: null, edit: null });
+                }
             }
-        });
+        } else {
+            // Clear all fields
+            if (context) {
+                // Clear specific context for all fields
+                this.resolvedFieldOptions.forEach((value, key) => {
+                    this.resolvedFieldOptions.get(key)[context] = null;
+                });
+            } else {
+                // Clear everything
+                this.resolvedFieldOptions.forEach((value, key) => {
+                    this.resolvedFieldOptions.set(key, { table: null, create: null, edit: null });
+                });
+            }
+        }
+    }
+
+    // Helper method to determine caching behavior
+    shouldForceRefreshForContext(field, context, params) {
+        // Rename to reflect what it actually does now
+        if (!field.noCache) return false;
+
+        if (typeof field.noCache === 'boolean') return field.noCache;
+        if (typeof field.noCache === 'function') return field.noCache({ context, ...params });
+        if (typeof field.noCache === 'object') return field.noCache[context] === true;
+
+        return false;
+    }
+
+    generateOptionsCacheKey(context, params) {
+        // Create a unique key based on context and dependency values
+        const keyParts = [context];
+
+        if (params.dependedValues) {
+            // Include relevant dependency values in the cache key
+            Object.keys(params.dependedValues).sort().forEach(key => {
+                keyParts.push(`${key}=${params.dependedValues[key]}`);
+            });
+        }
+
+        return keyParts.join('|');
     }
 
     shouldIncludeField(field, formType) {
@@ -568,19 +693,22 @@ class FTableFormBuilder {
     }
 
     createFieldContainer(fieldName, field, record, formType) {
+        // in this function, field.options already contains the resolved values
         const container = FTableDOMHelper.create('div', {
-            className: 'ftable-input-field-container',
+            className: (field.type != 'hidden' ? 'ftable-input-field-container' : ''),
             attributes: {
                 id: `ftable-input-field-container-div-${fieldName}`,
             }
         });
 
-        // Label
-        const label = FTableDOMHelper.create('div', {
-            className: 'ftable-input-label',
-            text: field.inputTitle || field.title,
-            parent: container
-        });
+        if (field.type != 'hidden') {
+            // Label
+            const label = FTableDOMHelper.create('div', {
+                className: 'ftable-input-label',
+                text: field.inputTitle || field.title,
+                parent: container
+            });
+        }
 
         // Input
         const inputContainer = this.createInput(fieldName, field, record[fieldName], formType);
@@ -589,67 +717,10 @@ class FTableFormBuilder {
         return container;
     }
 
-    /*async resolveAllFieldOptions(fieldValues) {
-        // Store original options before first resolution
-        this.storeOriginalFieldOptions();
-
-        const promises = Object.entries(this.options.fields).map(async ([fieldName, field]) => {
-            // Use original options if we have them, otherwise use current field.options
-            const originalOptions = this.originalFieldOptions.get(fieldName) || field.options;
-            
-            if (originalOptions && (typeof originalOptions === 'function' || typeof originalOptions === 'string')) {
-                try {
-                    // Pass fieldValues as dependedValues for dependency resolution
-                    const params = { dependedValues: fieldValues };
-                    
-                    // Resolve using original options, not the possibly already-resolved ones
-                    const tempField = { ...field, options: originalOptions };
-                    const resolved = await this.resolveOptions(tempField, params);
-                    field.options = resolved; // Replace with resolved data
-                } catch (err) {
-                    console.error(`Failed to resolve options for ${fieldName}:`, err);
-                }
-            }
-        });
-        await Promise.all(promises);
-    }*/
-
-    async resolveNonDependantFieldOptions(fieldValues, formType) {
-        // Store original options before first resolution
-        this.storeOriginalFieldOptions();
-
-        const promises = Object.entries(this.options.fields).map(async ([fieldName, field]) => {
-            // Use original options if we have them, otherwise use current field.options
-            if (field.dependsOn) {
-                return;
-            }
-            const originalOptions = this.originalFieldOptions.get(fieldName) || field.options;
-            
-            if (originalOptions && (typeof originalOptions === 'function' || typeof originalOptions === 'string')) {
-                try {
-                    // Pass fieldValues as dependedValues for dependency resolution (but record contains everything too ...)
-                    const params = { dependedValues: fieldValues, source: formType, record: fieldValues };
-                    
-                    // Resolve using original options, not the possibly already-resolved ones
-                    const tempField = { ...field, options: originalOptions };
-                    const resolved = await this.resolveOptions(tempField, params);
-                    field.options = resolved; // Replace with resolved data
-                } catch (err) {
-                    console.error(`Failed to resolve options for ${fieldName}:`, err);
-                }
-            }
-        });
-        await Promise.all(promises);
-    }
-
     async createForm(formType = 'create', record = {}) {
 
         this.currentFormRecord = record;
 
-        // Pre-resolve all options for fields depending on nothing, the others are handled down the road when dependancies are calculated
-        //await this.resolveAllFieldOptions(record);
-        await this.resolveNonDependantFieldOptions(record, formType);
-
         const form = FTableDOMHelper.create('form', {
             className: `ftable-dialog-form ftable-${formType}-form`
         });
@@ -657,12 +728,26 @@ class FTableFormBuilder {
         // Build dependency map first
         this.buildDependencyMap();
 
-        Object.entries(this.options.fields).forEach(([fieldName, field]) => {
+        // Create form fields using for...of instead of forEach, this allows the await to work
+        for (const [fieldName, field] of Object.entries(this.options.fields)) {
             if (this.shouldIncludeField(field, formType)) {
-                const fieldContainer = this.createFieldContainer(fieldName, field, record, formType);
+                let fieldWithOptions = { ...field };
+                if (!field.dependsOn) {
+                    const contextOptions = await this.getFieldOptions(fieldName, formType, {
+                        record,
+                        source: formType
+                    });
+                    fieldWithOptions.options = contextOptions;
+                } else {
+                    // For dependent fields, use placeholder or original options
+                    // They will be resolved when dependencies change
+                    fieldWithOptions.options = field.options;
+                }
+
+                const fieldContainer = this.createFieldContainer(fieldName, fieldWithOptions, record, formType);
                 form.appendChild(fieldContainer);
             }
-        });
+        }
 
         // Set up dependency listeners after all fields are created
         this.setupDependencyListeners(form);
@@ -670,6 +755,13 @@ class FTableFormBuilder {
         return form;
     }
 
+    shouldResolveOptions(options) {
+        return options &&
+               (typeof options === 'function' || typeof options === 'string') &&
+               !Array.isArray(options) &&
+               !(typeof options === 'object' && !Array.isArray(options) && Object.keys(options).length > 0);
+    }
+
     buildDependencyMap() {
         this.dependencies.clear();
 
@@ -717,7 +809,7 @@ class FTableFormBuilder {
         this.handleDependencyChange(form);
     }
 
-    async resolveOptions(field, params = {}) {
+    async resolveOptions(field, params = {}, source = '', noCache = false) {
         if (!field.options) return [];
 
         // Case 1: Direct options (array or object)
@@ -726,13 +818,16 @@ class FTableFormBuilder {
         }
 
         let result;
-        // Create a mutable flag for cache clearing
-        let noCache = false;
 
         // Enhance params with clearCache() method
         const enhancedParams = {
             ...params,
-            clearCache: () => { noCache = true; }
+            source: source,
+            clearCache: () => {
+                noCache = true;
+                // Also update the field's noCache setting for future calls
+                this.updateFieldCacheSetting(field, source, true);
+            }
         };
 
         if (typeof field.options === 'function') {
@@ -752,64 +847,108 @@ class FTableFormBuilder {
         if (typeof url !== 'string') return [];
 
         // Only use cache if noCache is NOT set
-        if (!noCache) {
-            const cached = this.optionsCache.get(url, {});
-            if (cached) return cached;
+        if (noCache) {
+            try {
+                const response = this.options.forcePost
+                    ? await FTableHttpClient.post(url)
+                    : await FTableHttpClient.get(url);
+                return response.Options || response.options || response || [];
+            } catch (error) {
+                console.error(`Failed to load options from ${url}:`, error);
+                return [];
+            }
+        } else {
+            // Use getOrCreate to prevent duplicate requests
+            return await this.optionsCache.getOrCreate(url, {}, async () => {
+                try {
+                    const response = this.options.forcePost
+                        ? await FTableHttpClient.post(url)
+                        : await FTableHttpClient.get(url);
+                    return response.Options || response.options || response || [];
+                } catch (error) {
+                    console.error(`Failed to load options from ${url}:`, error);
+                    return [];
+                }
+            });
         }
 
-        try {
-            const response = this.options.forcePost
-                ? await FTableHttpClient.post(url)
-                : await FTableHttpClient.get(url);
-            const options = response.Options || response.options || response || [];
-
-            // Only cache if noCache is false
-            if (!noCache) {
-                this.optionsCache.set(url, {}, options);
-            }
+    }
 
-            return options;
-        } catch (error) {
-            console.error(`Failed to load options from ${url}:`, error);
-            return [];
+    updateFieldCacheSetting(field, context, skipCache) {
+        if (!field.noCache) {
+            // Initialize noCache as object for this context
+            field.noCache = { [context]: skipCache };
+        } else if (typeof field.noCache === 'boolean') {
+            // Convert boolean to object, preserving existing behavior for other contexts
+            field.noCache = {
+                'table': field.noCache,
+                'create': field.noCache,
+                'edit': field.noCache,
+                [context]: skipCache // Override for this context
+            };
+        } else if (typeof field.noCache === 'object') {
+            // Update specific context
+            field.noCache[context] = skipCache;
         }
+        // Function-based noCache remains unchanged (runtime decision)
     }
 
     clearOptionsCache(url = null, params = null) {
         this.optionsCache.clear(url, params);
     }
 
-    async handleDependencyChange(form, changedFieldname='') {
-        // Build dependedValues: { field1: value1, field2: value2 }
-        const dependedValues = {};
+    getFormValues(form) {
+        const values = {};
 
-        // Get all field values from the form
-        for (const [fieldName, field] of Object.entries(this.options.fields)) {
-            const input = form.querySelector(`[name="${fieldName}"]`);
-            if (input) {
-                if (input.type === 'checkbox') {
-                    dependedValues[fieldName] = input.checked ? '1' : '0';
-                } else {
-                    dependedValues[fieldName] = input.value;
-                }
+        // Get all form elements
+        const elements = form.elements;
+
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            const name = element.name;
+
+            if (!name || element.disabled) continue;
+
+            switch (element.type) {
+                case 'checkbox':
+                    values[name] = element.checked ? element.value || '1' : '0';
+                    break;
+
+                case 'radio':
+                    if (element.checked) {
+                        values[name] = element.value;
+                    }
+                    break;
+
+                case 'select-multiple':
+                    values[name] = Array.from(element.selectedOptions).map(option => option.value);
+                    break;
+
+                default:
+                    values[name] = element.value;
+                    break;
             }
         }
 
-        // Determine form context
+        return values;
+    }
+
+    async handleDependencyChange(form, changedFieldname = '') {
+        // Build dependedValues: { field1: value1, field2: value2 }
+        const dependedValues = this.getFormValues(form);
         const formType = form.classList.contains('ftable-create-form') ? 'create' : 'edit';
         const record = this.currentFormRecord || {};
 
-        // Prepare base params for options function
         const baseParams = {
             record,
             source: formType,
-            form, // DOM form element
+            form,
             dependedValues
         };
 
-        // Update each dependent field
         for (const [fieldName, field] of Object.entries(this.options.fields)) {
             if (!field.dependsOn) continue;
+            
             if (changedFieldname !== '') {
                 let dependsOnFields = field.dependsOn
                     .split(',')
@@ -832,31 +971,27 @@ class FTableFormBuilder {
                     if (datalist) datalist.innerHTML = '';
                 }
 
-                // Build params with full context
+                // Get current field value BEFORE resolving new options
+                const currentValue = input.value || record[fieldName] || '';
+
+                // Resolve options with current context
                 const params = {
                     ...baseParams,
-                    // Specific for this field
                     dependsOnField: field.dependsOn,
                     dependsOnValue: dependedValues[field.dependsOn]
                 };
 
-                // Use original options for dependent fields, not the resolved ones
-                const originalOptions = this.originalFieldOptions.get(fieldName) || field.options;
-                const tempField = { ...field, options: originalOptions };
+                const newOptions = await this.getFieldOptions(fieldName, formType, params);
 
-                // Resolve options with full context using original options
-                const newOptions = await this.resolveOptions(tempField, params);
-
-                // Populate
+                // Populate the input
                 if (input.tagName === 'SELECT') {
-                    this.populateSelectOptions(input, newOptions, '');
+                    this.populateSelectOptions(input, newOptions, currentValue);
                 } else if (input.tagName === 'INPUT' && input.list) {
                     this.populateDatalistOptions(input.list, newOptions);
+                    // For datalist, set the value directly
+                    if (currentValue) input.value = currentValue;
                 }
 
-                // at the end of the event chain: trigger change so other depending fields are notified too
-                // we don't do this without setTimeout so it triggers after the current loop is finished
-                // otherwise the change might trigger too soon
                 setTimeout(() => {
                     input.dispatchEvent(new Event('change', { bubbles: true }));
                 }, 0);
@@ -1176,7 +1311,6 @@ class FTableFormBuilder {
         const select = FTableDOMHelper.create('select', { attributes });
 
         if (field.options) {
-            //const options = this.resolveOptions(field);
             this.populateSelectOptions(select, field.options, value);
         }
 
@@ -1494,6 +1628,11 @@ class FTable extends FTableEventEmitter {
         // Start resolving in background
         this.resolveAsyncFieldOptions().then(() => {
             // re-render dynamic options rows — no server call
+            // this is needed so that once options are resolved, the table shows correct display values
+            // why: load() can actually finish faster than option resolving (and calling refreshDisplayValues
+            //      there is then pointless, since the resolving hasn't finished yet),
+            //      so we need to do it when the options are actually resolved (here)
+            //  We could call await this.resolveAsyncFieldOptions() during load, but that would slow down the loading ...
             setTimeout(() => {
                 this.refreshDisplayValues();
             }, 0);
@@ -1736,53 +1875,45 @@ class FTable extends FTableEventEmitter {
     }
 
     async resolveAsyncFieldOptions() {
-        // Store original field options before any resolution
-        this.formBuilder.storeOriginalFieldOptions();
-
-        for (const fieldName of this.columnList) {
+        const promises = this.columnList.map(async (fieldName) => {
             const field = this.options.fields[fieldName];
+            const originalOptions = this.formBuilder.originalFieldOptions.get(fieldName);
 
-            // Use original options if available
-            const originalOptions = this.formBuilder.originalFieldOptions.get(fieldName) || field.options;
-
-            if (originalOptions &&
-                (typeof originalOptions === 'function' || typeof originalOptions === 'string') &&
-                !Array.isArray(originalOptions) &&
-                !(typeof originalOptions === 'object' && !Array.isArray(originalOptions) && Object.keys(originalOptions).length > 0)
-            ) {
+            if (this.formBuilder.shouldResolveOptions(originalOptions)) {
                 try {
-                    // Create temp field with original options for resolution
-                    const tempField = { ...field, options: originalOptions };
-                    const resolved = await this.formBuilder.resolveOptions(tempField);
-                    field.options = resolved;
+                    // Check if already resolved to avoid duplicate work
+                    const cacheKey = this.formBuilder.generateOptionsCacheKey('table', {});
+                    if (!this.formBuilder.resolvedFieldOptions.get(fieldName)?.[cacheKey]) {
+                        await this.formBuilder.getFieldOptions(fieldName, 'table');
+                    }
                 } catch (err) {
-                    console.error(`Failed to resolve options for ${fieldName}:`, err);
+                    console.error(`Failed to resolve table options for ${fieldName}:`, err);
                 }
             }
-        }
+        });
+
+        await Promise.all(promises);
     }
 
-    refreshDisplayValues() {
+    async refreshDisplayValues() {
         const rows = this.elements.tableBody.querySelectorAll('.ftable-data-row');
         if (rows.length === 0) return;
 
-        rows.forEach(row => {
-            this.columnList.forEach(fieldName => {
+        for (const row of rows) {
+            for (const fieldName of this.columnList) {
                 const field = this.options.fields[fieldName];
-                if (!field.options) return;
-
-                // Check if options are now resolved (was a function/string before)
-                if (typeof field.options === 'function' || typeof field.options === 'string') {
-                    return; // Still unresolved
-                }
+                if (!field.options) continue;
 
                 const cell = row.querySelector(`td[data-field-name="${fieldName}"]`);
-                if (!cell) return;
+                if (!cell) continue;
 
-                const value = this.getDisplayText(row.recordData, fieldName);
+                // Get table-specific options
+                const cacheKey = this.formBuilder.generateOptionsCacheKey('table', {});
+                const resolvedOptions = this.formBuilder.resolvedFieldOptions.get(fieldName)?.[cacheKey];
+                const value = this.getDisplayText(row.recordData, fieldName, resolvedOptions);
                 cell.innerHTML = field.listEscapeHTML ? FTableDOMHelper.escapeHtml(value) : value;
-            });
-        });
+            }
+        }
     }
 
     createMainStructure() {
@@ -1985,7 +2116,7 @@ class FTable extends FTableEventEmitter {
                     case 'datetime-local':
                         if (typeof FDatepicker !== 'undefined') {
                             const dateFormat = field.dateFormat || this.options.defaultDateFormat;
-                            input = document.createElement('div');
+                            const containerDiv = document.createElement('div');
                             // Create hidden input
                             const hiddenInput = FTableDOMHelper.create('input', {
                                 className: 'ftable-toolbarsearch-extra',
@@ -2006,8 +2137,8 @@ class FTable extends FTableEventEmitter {
                                 }
                             });
                             // Append both inputs
-                            input.appendChild(hiddenInput);
-                            input.appendChild(visibleInput);
+                            containerDiv.appendChild(hiddenInput);
+                            containerDiv.appendChild(visibleInput);
 
                             // Apply FDatepicker
                             const picker = new FDatepicker(visibleInput, {
@@ -2016,6 +2147,8 @@ class FTable extends FTableEventEmitter {
                                 altFormat: 'Y-m-d'
                             });
 
+                            input = containerDiv;
+
                         } else {
                             input = FTableDOMHelper.create('input', {
                                 className: 'ftable-toolbarsearch',
@@ -2136,7 +2269,7 @@ class FTable extends FTableEventEmitter {
                 DisplayText: displayText
             }));
         } else if (field.options) {
-            optionsSource = await this.formBuilder.resolveOptions(field);
+            optionsSource = await this.formBuilder.getFieldOptions(fieldName);
         }
 
         // Add empty option only if first option is not already empty
@@ -3039,7 +3172,9 @@ class FTable extends FTableEventEmitter {
         });
 
         this.refreshRowStyles();
-        this.refreshDisplayValues(); // for options that uses functions/url's
+        // the next call might not do anything if option resolving hasn't finished yet
+        // in fact, it might even not be needed, since we call it when option resolving finishes (see init)
+        //this.refreshDisplayValues(); // for options that uses functions/url's
     }
 
     createTableRow(record) {
@@ -3101,7 +3236,9 @@ class FTable extends FTableEventEmitter {
 
     addDataCell(row, record, fieldName) {
         const field = this.options.fields[fieldName];
-        const value = this.getDisplayText(record, fieldName);
+        const cacheKey = this.formBuilder.generateOptionsCacheKey('table', {});
+        const resolvedOptions = this.formBuilder.resolvedFieldOptions.get(fieldName)?.[cacheKey];
+        const value = this.getDisplayText(record, fieldName, resolvedOptions);
         
         const cell = FTableDOMHelper.create('td', {
             className: `${field.listClass || ''} ${field.listClassEntry || ''}`,
@@ -3175,9 +3312,10 @@ class FTable extends FTableEventEmitter {
         });
     }
 
-    getDisplayText(record, fieldName) {
+    getDisplayText(record, fieldName, customOptions = null) {
         const field = this.options.fields[fieldName];
         const value = record[fieldName];
+        const options = customOptions || field.options;
 
         if (field.display && typeof field.display === 'function') {
             return field.display({ record, value });
@@ -3203,8 +3341,8 @@ class FTable extends FTableEventEmitter {
             return this.getCheckboxText(fieldName, value);
         }
 
-        if (field.options) {
-            const option = this.findOptionByValue(field.options, value);
+        if (options) {
+            const option = this.findOptionByValue(options, value);
             return option ? option.DisplayText || option.text || option : value;
         }
 
@@ -3579,7 +3717,9 @@ class FTable extends FTableEventEmitter {
             if (!cell) return;
 
             // Get display text
-            const value = this.getDisplayText(row.recordData, fieldName);
+            const cacheKey = this.formBuilder.generateOptionsCacheKey('table', {});
+            const resolvedOptions = this.formBuilder.resolvedFieldOptions.get(fieldName)?.[cacheKey];
+            const value = this.getDisplayText(row.recordData, fieldName, resolvedOptions);
             cell.innerHTML = field.listEscapeHTML ? FTableDOMHelper.escapeHtml(value) : value;
             cell.className = `${field.listClass || ''} ${field.listClassEntry || ''}`.trim();
         });