@liedekef/ftable 1.1.45 → 1.1.47

package/ftable.esm.js

@@ -29,7 +29,7 @@ const FTABLE_DEFAULT_MESSAGES = {
     sortingInfoNone: 'No sorting applied',
     resetSorting: 'Reset sorting',
     csvExport: 'CSV',
-    printTable: '🖨️  Print',
+    printTable: '🖨️ Print',
     cloneRecord: 'Clone Record',
     resetTable: 'Reset table',
     resetTableConfirm: 'This will reset all columns, pagesize, sorting to their defaults. Do you want to continue?',
@@ -186,36 +186,45 @@ class FTableLogger {
 }
 
 class FTableDOMHelper {
+    static PROPERTY_ATTRIBUTES = new Set([
+        'value', 'checked', 'selected', 'disabled', 'readOnly',
+        'name', 'id', 'type', 'placeholder', 'min', 'max',
+        'step', 'required', 'multiple', 'accept', 'className',
+        'textContent', 'innerHTML', 'title'
+    ]);
+
     static create(tag, options = {}) {
         const element = document.createElement(tag);
         
-        if (options.className) {
-            element.className = options.className;
+        // Handle special cases first
+        if (options.style !== undefined) {
+            element.style.cssText = options.style;
         }
+        
+        FTableDOMHelper.PROPERTY_ATTRIBUTES.forEach(prop => {
+            if (prop in options && options[prop] !== null) {
+                element[prop] = options[prop];
+            }
+        });
 
-        if (options.style) {
-            element.style.cssText = options.style;
+        if (options.parent !== undefined) {
+            options.parent.appendChild(element);
         }
 
+        // the attributes last, so we can override stuff if needed
         if (options.attributes) {
             Object.entries(options.attributes).forEach(([key, value]) => {
-                if (value !== null)
-                    element.setAttribute(key, value);
+                if (value !== null) {
+                    // Use property if it exists on the element, otherwise use setAttribute
+                    if (FTableDOMHelper.PROPERTY_ATTRIBUTES.has(key)) {
+                        element[key] = value;
+                    } else {
+                        element.setAttribute(key, value);
+                    }
+                }
             });
         }
         
-        if (options.text) {
-            element.textContent = options.text;
-        }
-        
-        if (options.html) {
-            element.innerHTML = options.html;
-        }
-        
-        if (options.parent) {
-            options.parent.appendChild(element);
-        }
-        
         return element;
     }
 
@@ -472,14 +481,14 @@ class FtableModal {
         // Header
         const header = FTableDOMHelper.create('h2', {
             className: 'ftable-modal-header',
-            text: this.options.title,
+            textContent: this.options.title,
             parent: this.modal
         });
 
         // Close button
         const closeBtn = FTableDOMHelper.create('span', {
             className: 'ftable-modal-close',
-            html: '×',
+            innerHTML: '×',
             parent: this.modal
         });
 
@@ -507,7 +516,7 @@ class FtableModal {
             this.options.buttons.forEach(button => {
                 const btn = FTableDOMHelper.create('button', {
                     className: `ftable-dialog-button ${button.className || ''}`,
-                    html: `<span>${button.text}</span>`,
+                    innerHTML: `<span>${button.text}</span>`,
                     parent: footer
                 });
 
@@ -742,7 +751,7 @@ class FTableFormBuilder {
             // Label
             const label = FTableDOMHelper.create('div', {
                 className: 'ftable-input-label',
-                text: field.inputTitle || field.title,
+                textContent: field.inputTitle || field.title,
                 parent: container
             });
         }
@@ -1064,10 +1073,10 @@ class FTableFormBuilder {
 
         let input;
 
-        if (value == undefined) {
+        if (value === undefined) {
             value = null;
         }
-        if (value == null && field.defaultValue ) {
+        if (value === null && field.defaultValue ) {
             value = field.defaultValue;
         }
         // Auto-detect select type if options are provided
@@ -1145,7 +1154,7 @@ class FTableFormBuilder {
         if (field.explain) {
             const explain = FTableDOMHelper.create('div', {
                 className: 'ftable-field-explain',
-                html: `<small>${field.explain}</small>`,
+                innerHTML: `<small>${field.explain}</small>`,
                 parent: container
             });
         }
@@ -1161,21 +1170,15 @@ class FTableFormBuilder {
             const container = document.createElement('div');
             // Create hidden input
             const hiddenInput = FTableDOMHelper.create('input', {
-                attributes: {
-                    id: 'real-' + fieldName,
-                    type: 'hidden',
-                    value: value,
-                    name: fieldName
-                }
+                id: 'real-' + fieldName,
+                type: 'hidden',
+                value: value,
+                name: fieldName
             });
 
             // Create visible input
             const attributes = {
-                id: `Edit-${fieldName}`,
-                type: 'text',
-                'data-date': value,
-                placeholder: field.placeholder || null,
-                readOnly: true
+                'data-date': value
             };
             // Set any additional attributes
             if (field.inputAttributes) {
@@ -1183,9 +1186,13 @@ class FTableFormBuilder {
                 Object.assign(attributes, parsed);
             }
 
-            const visibleInput = FTableDOMHelper.create('input', {
+            const visibleInput = FTableDOMHelper.create('input', { 
+                attributes: attributes,
+                id: `Edit-${fieldName}`,
+                type: 'text',
+                placeholder: field.placeholder || null,
                 className: field.inputClass || 'datepicker-input',
-                attributes: attributes
+                readOnly: true
             });
 
             // Append both inputs
@@ -1225,12 +1232,7 @@ class FTableFormBuilder {
 
     createTypedInput(fieldName, field, value) {
         const inputType = field.type || 'text';
-        const attributes = {
-            type: inputType,
-            id: `Edit-${fieldName}`,
-            placeholder: field.placeholder || null,
-            value: value
-        };
+        const attributes = { };
 
         // extra check for name and multiple
         let name = fieldName;
@@ -1247,11 +1249,15 @@ class FTableFormBuilder {
                 name = `${fieldName}[]`;
             }
         }
-        attributes.name = name;
 
-        const input = FTableDOMHelper.create('input', {
+        const input = FTableDOMHelper.create('input', { 
+            attributes: attributes,
+            type: inputType,
+            id: `Edit-${fieldName}`,
             className: field.inputClass || null,
-            attributes: attributes
+            placeholder: field.placeholder || null,
+            value: value,
+            name: name
         });
 
         // Prevent form submit on Enter, trigger change instead
@@ -1269,11 +1275,6 @@ class FTableFormBuilder {
 
     createDatalistInput(fieldName, field, value) {
         const attributes = {
-            type: 'text',
-            name: fieldName,
-            id: `Edit-${fieldName}`,
-            placeholder: field.placeholder || null,
-            value: value,
             list: `${fieldName}-datalist`
         };
 
@@ -1284,15 +1285,18 @@ class FTableFormBuilder {
         }
 
         const input = FTableDOMHelper.create('input', {
+            attributes: attributes,
+            type: 'search',
+            name: fieldName,
+            id: `Edit-${fieldName}`,
             className: field.inputClass || null,
-            attributes: attributes
+            placeholder: field.placeholder || null,
+            value: value
         });
 
         // Create the datalist element
         const datalist = FTableDOMHelper.create('datalist', {
-            attributes: {
-                id: `${fieldName}-datalist`
-            }
+            id: `${fieldName}-datalist`
         });
 
         // Populate datalist options
@@ -1312,18 +1316,16 @@ class FTableFormBuilder {
         if (Array.isArray(options)) {
             options.forEach(option => {
                 FTableDOMHelper.create('option', {
-                    attributes: {
-                        value: option.Value || option.value || option
-                    },
-                    text: option.DisplayText || option.text || option,
+                    value: option.Value || option.value || option,
+                    textContent: option.DisplayText || option.text || option,
                     parent: datalist
                 });
             });
         } else if (typeof options === 'object') {
             Object.entries(options).forEach(([key, text]) => {
                 FTableDOMHelper.create('option', {
-                    attributes: { value: key },
-                    text: text,
+                    value: key,
+                    textContent: text,
                     parent: datalist
                 });
             });
@@ -1331,12 +1333,7 @@ class FTableFormBuilder {
     }
 
     createHiddenInput(fieldName, field, value) {
-        const attributes = {
-            type: 'hidden',
-            name: fieldName,
-            id: `Edit-${fieldName}`,
-            value: value
-        };
+        const attributes = { };
 
         // Apply inputAttributes
         if (field.inputAttributes) {
@@ -1344,15 +1341,17 @@ class FTableFormBuilder {
             Object.assign(attributes, parsed);
         }
 
-        return FTableDOMHelper.create('input', { attributes });
+        return FTableDOMHelper.create('input', {
+            attributes: attributes,
+            type: 'hidden',
+            name: fieldName,
+            id: `Edit-${fieldName}`,
+            value: value
+        });
     }
 
     createTextarea(fieldName, field, value) {
-        const attributes = {
-            name: fieldName,
-            id: `Edit-${fieldName}`,
-            placeholder: field.placeholder || null
-        };
+        const attributes = { };
 
         // Apply inputAttributes
         if (field.inputAttributes) {
@@ -1360,19 +1359,18 @@ class FTableFormBuilder {
             Object.assign(attributes, parsed);
         }
 
-        const textarea = FTableDOMHelper.create('textarea', {
-            className: field.inputClass || null,
+        return FTableDOMHelper.create('textarea', {
             attributes: attributes,
-            value: value
+            name: fieldName,
+            id: `Edit-${fieldName}`,
+            className: field.inputClass || null,
+            placeholder: field.placeholder || null,
+            value = value
         });
-        return textarea;
     }
 
     createSelect(fieldName, field, value) {
-        const attributes = {
-            name: fieldName,
-            id: `Edit-${fieldName}`,
-        };
+        const attributes = { };
 
         // extra check for name and multiple
         let name = fieldName;
@@ -1392,8 +1390,10 @@ class FTableFormBuilder {
         attributes.name = name;
 
         const select = FTableDOMHelper.create('select', {
-            className: field.inputClass || null,
-            attributes: attributes
+            attributes: attributes,
+            name: fieldName,
+            id: `Edit-${fieldName}`,
+            className: field.inputClass || null
         });
 
         if (field.options) {
@@ -1419,15 +1419,7 @@ class FTableFormBuilder {
                 });
 
                 const radioId = `${fieldName}_${index}`;
-                const radioAttributes = {
-                    type: 'radio',
-                    name: fieldName,
-                    id: radioId,
-                    value: option.Value || option.value || option
-                };
-
-                if (field.required && index === 0) radioAttributes.required = 'required';
-                if (field.disabled) radioAttributes.disabled = 'disabled';
+                const radioAttributes = { };
 
                 // Apply inputAttributes
                 if (field.inputAttributes) {
@@ -1435,19 +1427,24 @@ class FTableFormBuilder {
                     Object.assign(radioAttributes, parsed);
                 }
 
+                const fieldValue = option.Value !== undefined ? option.Value :
+                    option.value !== undefined ? option.value :
+                    option; // fallback for string
+
                 const radio = FTableDOMHelper.create('input', {
                     attributes: radioAttributes,
+                    type: 'radio',
+                    name: fieldName,
+                    id: radioId,
+                    value: fieldValue,
                     className: field.inputClass || null,
+                    checked: fieldValue == value,
                     parent: radioWrapper
                 });
 
-                if (radioAttributes.value === value) {
-                    radio.checked = true;
-                }
-
                 const label = FTableDOMHelper.create('label', {
                     attributes: { for: radioId },
-                    text: option.DisplayText || option.text || option,
+                    textContent: option.DisplayText || option.text || option,
                     parent: radioWrapper
                 });
             });
@@ -1475,12 +1472,10 @@ class FTableFormBuilder {
         // Create the checkbox
         const checkbox = FTableDOMHelper.create('input', {
             className: ['ftable-yesno-check-input', field.inputClass || ''].filter(Boolean).join(' '),
-            attributes: {
-                type: 'checkbox',
-                name: fieldName,
-                id: `Edit-${fieldName}`,
-                value: '1'
-            },
+            type: 'checkbox',
+            name: fieldName,
+            id: `Edit-${fieldName}`,
+            value: '1',
             parent: wrapper
         });
         checkbox.checked = isChecked;
@@ -1492,7 +1487,7 @@ class FTableFormBuilder {
                 attributes: {
                     for: `Edit-${fieldName}`,
                 },
-                text: field.label,
+                textContent: field.label,
                 parent: wrapper
             });
         } else {
@@ -1519,8 +1514,9 @@ class FTableFormBuilder {
                     option.value !== undefined ? option.value :
                     option; // fallback for string
                 const optionElement = FTableDOMHelper.create('option', {
-                    attributes: { value: value },
-                    text: option.DisplayText || option.text || option,
+                    value: value,
+                    textContent: option.DisplayText || option.text || option,
+                    selected: value == selectedValue,
                     parent: select
                 });
 
@@ -1530,30 +1526,21 @@ class FTableFormBuilder {
                     });
                 }
 
-                if (optionElement.value == selectedValue) {
-                    optionElement.selected = true;
-                }
             });
         } else if (typeof options === 'object') {
             Object.entries(options).forEach(([key, text]) => {
                 const optionElement = FTableDOMHelper.create('option', {
-                    attributes: { value: key },
-                    text: text,
+                    value: key,
+                    textContent: text,
+                    selected: key == selectedValue,
                     parent: select
                 });
-
-                if (key == selectedValue) {
-                    optionElement.selected = true;
-                }
             });
         }
     }
 
     createFileInput(fieldName, field, value) {
-        const attributes = {
-            type: 'file',
-            id: `Edit-${fieldName}`,
-        };
+        const attributes = { };
  
         // extra check for name and multiple
         let name = fieldName;
@@ -1569,9 +1556,11 @@ class FTableFormBuilder {
                 name = `${fieldName}[]`;
             }
         }
-        attributes.name = name;
 
         return FTableDOMHelper.create('input', {
+            type: 'file',
+            id: `Edit-${fieldName}`,
+            name: name,
             className: field.inputClass || null,
             attributes: attributes
         });
@@ -1897,7 +1886,7 @@ class FTable extends FTableEventEmitter {
         });
 
         FTableDOMHelper.create('span', {
-            text: this.options.messages.pageSizeChangeLabel,
+            textContent: this.options.messages.pageSizeChangeLabel,
             parent: container
         });
 
@@ -1910,7 +1899,7 @@ class FTable extends FTableEventEmitter {
         pageSizes.forEach(size => {
             const option = FTableDOMHelper.create('option', {
                 attributes: { value: size },
-                text: size.toString(),
+                textContent: size.toString(),
                 parent: select
             });
 
@@ -2021,7 +2010,7 @@ class FTable extends FTableEventEmitter {
 
             FTableDOMHelper.create('div', {
                 className: 'ftable-title-text',
-                html: this.options.title,
+                innerHTML: this.options.title,
                 parent: this.elements.titleDiv
             });
         }
@@ -2107,7 +2096,7 @@ class FTable extends FTableEventEmitter {
 
             const textHeader = FTableDOMHelper.create('span', {
                 className: 'ftable-column-header-text',
-                html: field.title || fieldName,
+                innerHTML: field.title || fieldName,
                 parent: container
             });
 
@@ -2216,21 +2205,19 @@ class FTable extends FTableEventEmitter {
                             // Create hidden input
                             const hiddenInput = FTableDOMHelper.create('input', {
                                 className: 'ftable-toolbarsearch-extra',
+                                type: 'hidden',
+                                id: 'ftable-toolbarsearch-extra-' + fieldName,
                                 attributes: {
-                                    type: 'hidden',
                                     'data-field-name': fieldName,
-                                    id: 'ftable-toolbarsearch-extra-' + fieldName,
                                 }
                             });
                             // Create visible input
                             const visibleInput = FTableDOMHelper.create('input', {
                                 className: 'ftable-toolbarsearch',
-                                attributes: {
-                                    id: 'ftable-toolbarsearch-' + fieldName,
-                                    type: 'text',
-                                    placeholder: field.searchPlaceholder || field.placeholder || '',
-                                    readOnly: true
-                                }
+                                id: 'ftable-toolbarsearch-' + fieldName,
+                                type: 'text',
+                                placeholder: field.searchPlaceholder || field.placeholder || '',
+                                readOnly: true
                             });
                             // Append both inputs
                             containerDiv.appendChild(hiddenInput);
@@ -2245,7 +2232,8 @@ class FTable extends FTableEventEmitter {
                                         const picker = new FDatepicker(visibleInput, {
                                             format: dateFormat,
                                             altField: 'ftable-toolbarsearch-extra-' + fieldName,
-                                            altFormat: 'Y-m-d'
+                                            altFormat: 'Y-m-d',
+                                            autoClose: true
                                         });
                                     }, 0);
                                     break;
@@ -2266,10 +2254,10 @@ class FTable extends FTableEventEmitter {
                         } else {
                             input = FTableDOMHelper.create('input', {
                                 className: 'ftable-toolbarsearch',
+                                type: searchType,
+                                id: fieldSearchName,
                                 attributes: {
-                                    type: 'date',
                                     'data-field-name': fieldName,
-                                    id: fieldSearchName,
                                 }
                             });
                         }
@@ -2288,30 +2276,37 @@ class FTable extends FTableEventEmitter {
                         } else {
                             input = FTableDOMHelper.create('input', {
                                 className: 'ftable-toolbarsearch',
+                                type: 'text',
+                                id: fieldSearchName,
+                                placeholder: field.searchPlaceholder || field.placeholder || 'Search...',
                                 attributes: {
-                                    type: 'text',
-                                    'data-field-name': fieldName,
-                                    id: fieldSearchName,
-                                    placeholder: field.searchPlaceholder || field.placeholder || 'Search...'
+                                    'data-field-name': fieldName
                                 }
                             });
                         }
                         break;
 
+                    case 'datalist':
+                        input = await this.createDatalistForSearch(fieldName, field);
+                        break;
+
                     default:
                         input = FTableDOMHelper.create('input', {
                             className: 'ftable-toolbarsearch',
+                            type: 'text',
+                            id: fieldSearchName,
+                            placeholder: field.searchPlaceholder || field.placeholder || 'Search...',
                             attributes: {
-                                type: 'text',
-                                'data-field-name': fieldName,
-                                id: fieldSearchName,
-                                placeholder: field.searchPlaceholder || field.placeholder || 'Search...'
+                                'data-field-name': fieldName
                             }
                         });
                 }
 
                 if (input) {
                     container.appendChild(input);
+                    if (input.datalistElement && input.datalistElement instanceof Node) {
+                        container.appendChild(input.datalistElement);
+                    }
 
                     if (input.tagName === 'SELECT') {
                         input.addEventListener('change', (e) => {
@@ -2350,7 +2345,7 @@ class FTable extends FTableEventEmitter {
 
             const resetButton = FTableDOMHelper.create('button', {
                 className: 'ftable-toolbarsearch-reset-button',
-                text: this.options.messages.resetSearch,
+                textContent: this.options.messages.resetSearch,
                 attributes : {
                     id: 'ftable-toolbarsearch-reset-button'
                 },
@@ -2363,7 +2358,6 @@ class FTable extends FTableEventEmitter {
     async createSelectForSearch(fieldName, field, isCheckboxValues) {
         const fieldSearchName = 'ftable-toolbarsearch-' + fieldName;
         const attributes = {
-            id: fieldSearchName,
         };
 
         // extra check for name and multiple
@@ -2386,6 +2380,7 @@ class FTable extends FTableEventEmitter {
 
         const select = FTableDOMHelper.create('select', {
             attributes: attributes,
+            id: fieldSearchName,
             className: 'ftable-toolbarsearch'
         });
 
@@ -2408,8 +2403,8 @@ class FTable extends FTableEventEmitter {
 
         if (!hasEmptyFirst) {
             FTableDOMHelper.create('option', {
-                attributes: { value: '' },
-                text: '',
+                value: '',
+                innerHTML: '&nbsp;',
                 parent: select
             });
         }
@@ -2417,18 +2412,16 @@ class FTable extends FTableEventEmitter {
         if (optionsSource && Array.isArray(optionsSource)) {
             optionsSource.forEach(option => {
                 const optionElement = FTableDOMHelper.create('option', {
-                    attributes: {
-                        value: option.Value !== undefined ? option.Value : option.value !== undefined ? option.value : option
-                    },
-                    text: option.DisplayText || option.text || option,
+                    value: option.Value !== undefined ? option.Value : option.value !== undefined ? option.value : option,
+                    textContent: option.DisplayText || option.text || option,
                     parent: select
                 });
             });
         } else if (optionsSource && typeof optionsSource === 'object') {
             Object.entries(optionsSource).forEach(([key, text]) => {
                 FTableDOMHelper.create('option', {
-                    attributes: { value: key },
-                    text: text,
+                    value: key,
+                    textContent: text,
                     parent: select
                 });
             });
@@ -2437,6 +2430,48 @@ class FTable extends FTableEventEmitter {
         return select;
     }
 
+    async createDatalistForSearch(fieldName, field) {
+        const fieldSearchName = 'ftable-toolbarsearch-' + fieldName;
+
+        // Create the datalist element first
+        const datalistId = `${fieldSearchName}-datalist`;
+        const datalist = FTableDOMHelper.create('datalist', {
+            attributes: { id: datalistId }
+        });
+
+        // Create the input that uses the datalist
+        const input = FTableDOMHelper.create('input', {
+            className: 'ftable-toolbarsearch',
+            type: 'search',
+            id: fieldSearchName,
+            placeholder: field.searchPlaceholder || field.placeholder || 'Type or select...',
+            attributes: {
+                'data-field-name': fieldName,
+                list: datalistId
+            }
+        });
+
+        // Store reference to datalist on the input element
+        input.datalistElement = datalist;
+
+        // Load options for the datalist
+        let optionsSource;
+
+        // Use search-specific options if available
+        if (field.searchOptions) {
+            optionsSource = field.searchOptions;
+        } else if (field.options) {
+            optionsSource = await this.formBuilder.getFieldOptions(fieldName, 'table');
+        }
+
+        // Populate datalist with options
+        if (optionsSource) {
+            this.formBuilder.populateDatalistOptions(datalist, optionsSource);
+        }
+
+        return input;
+    }
+
     handleSearchInputChange(event) {
         const input = event.target;
         const fieldName = input.getAttribute('data-field-name');
@@ -2688,7 +2723,7 @@ class FTable extends FTableEventEmitter {
         const colCount = this.elements.table.querySelector('thead tr').children.length;
         FTableDOMHelper.create('td', {
             attributes: { colspan: colCount },
-            text: this.options.messages.noDataAvailable,
+            textContent: this.options.messages.noDataAvailable,
             parent: row
         });
     }
@@ -2983,7 +3018,7 @@ class FTable extends FTableEventEmitter {
             }
 
             const labelText = FTableDOMHelper.create('span', {
-                text: field.title || fieldName,
+                textContent: field.title || fieldName,
                 style: isSeparator ? 'font-weight: bold;' : null,
                 parent: label
             });
@@ -2992,7 +3027,7 @@ class FTable extends FTableEventEmitter {
             if (isSorted) {
                 const sortIndicator = FTableDOMHelper.create('span', {
                     className: 'ftable-sort-indicator',
-                    text: ' (sorted)',
+                    textContent: ' (sorted)',
                     parent: labelText
                 });
                 sortIndicator.style.fontSize = '0.8em';
@@ -3078,25 +3113,61 @@ class FTable extends FTableEventEmitter {
     }
 
     addToolbarButton(options) {
-        const button = FTableDOMHelper.create('span', {
+        const button = FTableDOMHelper.create('button', {
             className: `ftable-toolbar-item ${options.className || ''}`,
+            id: options.id || null,
+            title: options.title || null,
+            textContent: options.text || null,
+            type: 'button',  // Prevent accidental form submission
             parent: this.elements.toolbarDiv
         });
+
         if (options.addIconSpan) {
             // just the span, the rest is CSS here
-            const buttonText = FTableDOMHelper.create('span', {
+            const iconSpan = FTableDOMHelper.create('span', {
                 className: `ftable-toolbar-item-icon ${options.className || ''}`,
                 parent: button
             });
+            // If we want icon before text, we need to insert it
+            // Since textContent replaces everything, we need to append text node
+            if (options.text) {
+                // Remove the textContent we set earlier
+                button.textContent = '';
+                button.append(iconSpan, options.text || '');
+            }
+        }
+
+        // Add icon if provided
+        if (options.icon) {
+            const img = FTableDOMHelper.create('img', {
+                attributes: {
+                    src: options.icon,
+                    alt: '',
+                    width: 16,
+                    height: 16,
+                    style: 'margin-right: 6px; vertical-align: middle;'
+                },
+                parent: button
+            });
+            // If we want icon before text, we need to insert it
+            // Since textContent replaces everything, we need to append text node
+            if (options.text) {
+                // Remove the textContent we set earlier
+                button.textContent = '';
+                button.append(img, options.text || '');
+            }
         }
-        const buttonText = FTableDOMHelper.create('span', {
-            className: `ftable-toolbar-item-text ${options.className || ''}`,
-            text: options.text,
-            parent: button
-        });
 
         if (options.onClick) {
-            button.addEventListener('click', options.onClick);
+            button.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    options.onClick(e);
+            });
+        }
+
+        if (options.disabled) {
+            button.disabled = true;
         }
 
         return button;
@@ -3105,48 +3176,15 @@ class FTable extends FTableEventEmitter {
     createCustomToolbarItems() {
         if (!this.options.toolbar || !this.options.toolbar.items) return;
 
-        this.options.toolbar.items.forEach(item => {
-            const button = FTableDOMHelper.create('span', {
-                className: `ftable-toolbar-item ftable-toolbar-item-custom ${item.buttonClass || ''}`,
-                parent: this.elements.toolbarDiv
+        this.options.toolbar.items.forEach((item, index) => {
+            this.addToolbarButton({
+                text: item.text || '',
+                className: `ftable-toolbar-item-custom ${item.buttonClass || ''}`,
+                id: item.buttonId || `ftable-toolbar-item-custom-id-${index}`,
+                title: item.tooltip || '',
+                icon: item.icon || null,
+                onClick: typeof item.click === 'function' ? item.click : null
             });
-
-            // Add title/tooltip if provided
-            if (item.tooltip) {
-                button.setAttribute('title', item.tooltip);
-            }
-
-            // Add icon if provided
-            if (item.icon) {
-                const img = FTableDOMHelper.create('img', {
-                    attributes: {
-                        src: item.icon,
-                        alt: '',
-                        width: 16,
-                        height: 16,
-                        style: 'margin-right: 6px; vertical-align: middle;'
-                    },
-                    parent: button
-                });
-            }
-
-            // Add text
-            if (item.text) {
-                FTableDOMHelper.create('span', {
-                    text: item.text,
-                    className: `ftable-toolbar-item-text ftable-toolbar-item-custom-text ${item.buttonTextClass || ''}`,
-                    parent: button
-                });
-            }
-
-            // Attach click handler
-            if (typeof item.click === 'function') {
-                button.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    item.click(e);
-                });
-            }
         });
     }
 
@@ -3400,7 +3438,7 @@ class FTable extends FTableEventEmitter {
         
         const cell = FTableDOMHelper.create('td', {
             className: `${field.listClass || ''} ${field.listClassEntry || ''}`,
-            html: field.listEscapeHTML ? FTableDOMHelper.escapeHtml(value) : value,
+            innerHTML: field.listEscapeHTML ? FTableDOMHelper.escapeHtml(value) : value,
             attributes: { 'data-field-name': fieldName },
             parent: row
         });
@@ -3421,7 +3459,7 @@ class FTable extends FTableEventEmitter {
         const button = FTableDOMHelper.create('button', {
             className: 'ftable-command-button ftable-edit-command-button',
             attributes: { title: this.options.messages.editRecord },
-            html: `<span>${this.options.messages.editRecord}</span>`,
+            innerHTML: `<span>${this.options.messages.editRecord}</span>`,
             parent: cell
         });
 
@@ -3440,7 +3478,7 @@ class FTable extends FTableEventEmitter {
         const button = FTableDOMHelper.create('button', {
             className: 'ftable-command-button ftable-clone-command-button',
             attributes: { title: this.options.messages.cloneRecord || 'Clone' },
-            html: `<span>${this.options.messages.cloneRecord || 'Clone'}</span>`,
+            innerHTML: `<span>${this.options.messages.cloneRecord || 'Clone'}</span>`,
             parent: cell
         });
         button.addEventListener('click', (e) => {
@@ -3459,7 +3497,7 @@ class FTable extends FTableEventEmitter {
         const button = FTableDOMHelper.create('button', {
             className: 'ftable-command-button ftable-delete-command-button',
             attributes: { title: this.options.messages.deleteText },
-            html: `<span>${this.options.messages.deleteText}</span>`,
+            innerHTML: `<span>${this.options.messages.deleteText}</span>`,
             parent: cell
         });
 
@@ -4127,7 +4165,7 @@ class FTable extends FTableEventEmitter {
                 if (pageNum - lastNumber > 1) {
                     FTableDOMHelper.create('span', {
                         className: 'ftable-page-number-space',
-                        text: '...',
+                        textContent: '...',
                         parent: this.elements.pagingListArea
                     });
                 }
@@ -4167,7 +4205,7 @@ class FTable extends FTableEventEmitter {
 
         // Label
         const label = FTableDOMHelper.create('span', {
-            text: this.options.messages.gotoPageLabel + ': ',
+            textContent: this.options.messages.gotoPageLabel + ': ',
             parent: this.elements.pagingGotoArea
         });
 
@@ -4184,7 +4222,7 @@ class FTable extends FTableEventEmitter {
             for (let i = 1; i <= totalPages; i++) {
                 FTableDOMHelper.create('option', {
                     attributes: { value: i },
-                    text: i,
+                    textContent: i,
                     parent: this.elements.gotoPageSelect
                 });
             }
@@ -4228,7 +4266,7 @@ class FTable extends FTableEventEmitter {
     createPageButton(text, pageNumber, disabled, className) {
         const button = FTableDOMHelper.create('span', {
             className: className + (disabled ? ' ftable-page-number-disabled' : ''),
-            html: text,
+            innerHTML: text,
             parent: this.elements.pagingListArea
         });