nodered_cfg/node_modules/@flowfuse/node-red-dashboard/nodes/widgets/ui_table.html

<style>
    #node-input-column-container-div {
        min-height: 36px;
    }
    .node-input-column-container-row {
        flex-grow: 1;
    }
    .node-input-column-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }
    .node-input-column-row .node-input-column-handle {
        color: var(--red-ui-form-text-color, #eee);
        cursor: move;
        margin-right: 3px;
    }
    .node-input-column-options {
        flex-grow: 1;
    }
    .node-input-column-row-property {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        flex-grow: 1;
    }
    .node-input-column-row-property label {
        min-width: 50px;
        width: auto !important;
    }
    .node-input-column-row-property:not(:first-child) {
        margin-top: 3px;
    }
    #node-input-column-container .node-input-column-row-property input,
    #node-input-column-container .node-input-column-row-property select {
        flex-grow: 1;
        width: 50%;
    }
    .flex-grow {
        flex-grow: 1;
    }
</style>

<script type="text/javascript">
    (function () {
        const COLUMN_TYPES = [
            { value: 'text', label: 'Text' },
            { value: 'html', label: 'HTML' },
            { value: 'link', label: 'Link (https://...)' },
            { value: 'color', label: 'Color (#RRGGBB)' },
            { value: 'tickcross', label: 'Tick/Cross (Boolean)' },
            { value: 'progress', label: 'Progress (1-100)' },
            { value: 'sparkline-trend', label: 'Sparkline - Trend (Array)' },
            { value: 'sparkline-bar', label: 'Sparkline - Bar (Array)' },
            { value: 'button', label: 'Button' },
            { value: 'row', label: 'Row Number' }
        ]
        RED.nodes.registerType('ui-table', {
            category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
            color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.medium'),
            defaults: {
                group: { type: 'ui-group', required: true },
                name: { value: '' },
                label: { value: 'text' },
                order: { value: 0 },
                width: {
                    value: 0,
                    validate: function (v) {
                        const width = v || 0
                        const currentGroup = $('#node-input-group').val() || this.group
                        const groupNode = RED.nodes.node(currentGroup)
                        const valid = !groupNode || +width <= +groupNode.width
                        $('#node-input-size').toggleClass('input-error', !valid)
                        return valid
                    }
                },
                height: { value: 0 },
                maxrows: { value: 0, validate: RED.validators.number() },
                passthru: { value: false },
                autocols: { value: true },
                showSearch: { value: true },
                selectionType: { value: 'none' },
                columns: {
                    value: null
                },
                mobileBreakpoint: { value: 'sm' },
                mobileBreakpointType: { value: 'defaults' }
            },
            inputs: 1,
            outputs: 1,
            outputLabels: function () { return this.mode },
            icon: 'font-awesome/fa-table',
            paletteLabel: 'table',
            label: function () {
                return this.name || 'table'
            },
            oneditprepare: function () {
                // handle backward compatibility
                const validSelectionTypes = ['none', 'checkbox', 'click']
                if (!validSelectionTypes.includes(this.selectionType)) {
                    $('#node-input-selectionType').val('none')
                }
                // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
                // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
                if (RED.nodes.subflow(this.z)) {
                    // change inputs from hidden to text & display them
                    $('#node-input-width').attr('type', 'text')
                    $('#node-input-height').attr('type', 'text')
                    $('div.form-row.nr-db-ui-element-sizer-row').hide()
                    $('div.form-row.nr-db-ui-manual-size-row').show()
                } else {
                    // not in a subflow, use the elementSizer
                    $('div.form-row.nr-db-ui-element-sizer-row').show()
                    $('div.form-row.nr-db-ui-manual-size-row').hide()
                    $('#node-input-size').elementSizer({
                        width: '#node-input-width',
                        height: '#node-input-height',
                        group: '#node-input-group'
                    })
                }

                // setup mobile breakpoint TypedInput
                $('#node-input-mobileBreakpoint').typedInput({
                    typeField: '#node-input-mobileBreakpointType',
                    types: [{
                        value: 'defaults',
                        label: 'defaults:',
                        options: [
                            { value: 'sm', label: 'Mobile (< 576px)' },
                            { value: 'md', label: 'Tablet (< 768px)' },
                            { value: 'lg', label: 'Desktop (< 1024px)' }
                        ]
                    }, {
                        value: 'px',
                        label: 'px:',
                        validate: RED.validators.number()
                    }, {
                        value: 'none',
                        label: 'None',
                        hasValue: false
                    }]
                })

                const autocols = $('#node-input-autocols')
                $(autocols).change(() => {
                    const val = autocols.is(':checked')
                    const customColsDiv = $('#node-input-columns-container')
                    if (val) {
                        customColsDiv.hide()
                    } else {
                        customColsDiv.show()
                    }
                })

                // Columns Editor
                function generateColumn (i, col) {
                    const container = $('<li/>', { style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px; border-bottom: 1px solid var(--red-ui-form-input-border-color, #ccc);' })
                    const row = $('<div/>', {
                        class: 'node-input-column-row'
                    }).appendTo(container)
                    $('<div/>', { style: 'padding-top:5px; padding-left:175px;' }).appendTo(container)
                    $('<div/>', { style: 'padding-top:5px; padding-left:120px;' }).appendTo(container)

                    // sorting handle
                    $('<i class="node-input-column-handle fa fa-bars"></i>').appendTo(row)

                    const options = $('<div/>', {
                        class: 'node-input-column-options'
                    }).appendTo(row)

                    // key
                    const keyRow = $('<div />', { class: 'node-input-column-row-property' }).appendTo(options)
                    $('<label/>', {
                        text: `${RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.key')}:`
                    }).appendTo(keyRow)
                    $('<input/>', {
                        class: 'node-input-column-key',
                        type: 'text',
                        placeholder: RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.key'),
                        value: col.key
                    }).appendTo(keyRow)
    
                    // label
                    const labelRow = $('<div />', { class: 'node-input-column-row-property' }).appendTo(options)
                    $('<label/>', {
                        text: `${RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.label')}:`
                    }).appendTo(labelRow)
                    $('<input/>', {
                        class: 'node-input-column-label',
                        type: 'text',
                        placeholder: RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.label'),
                        value: col.title
                    }).appendTo(labelRow)

                    // style
                    const styleRow = $('<div />', { class: 'node-input-column-row-property' }).appendTo(options)
                    // style - width
                    const widthRow = $('<div />', { class: 'node-input-column-row-property' }).appendTo(styleRow)
                    $('<label/>', {
                        text: `${RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.width')}:`
                    }).appendTo(widthRow)
                    $('<input/>', {
                        type: 'text',
                        class: 'node-input-column-width',
                        placeholder: RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.width'),
                        value: col.width
                    }).appendTo(widthRow)
                    // style - align
                    const alignRow = $('<div />', { class: 'node-input-column-row-property' }).appendTo(styleRow)
                    $('<label/>', {
                        text: `${RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.align')}:`
                    }).appendTo(alignRow)
                    const alignOptions = $('<select>', {
                        class: 'node-input-column-align'
                    }).appendTo(alignRow)
                    alignOptions.append($('<option>').attr('value', 'start').text(RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.alignLeft')))
                    alignOptions.append($('<option>').attr('value', 'center').text(RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.alignCenter')))
                    alignOptions.append($('<option>').attr('value', 'end').text(RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.alignRight')))
                    alignOptions.val(col.align).change()

                    // type
                    const typeRow = $('<div />', { class: 'node-input-column-row-property' }).appendTo(options)
                    $('<label/>', {
                        text: `${RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.type')}:`
                    }).appendTo(typeRow)
                    const typeOptions = $('<select>', {
                        class: 'node-input-column-type'
                    }).appendTo(typeRow)

                    // add options for each supported column type
                    $(COLUMN_TYPES).each(function () {
                        typeOptions.append($('<option>').attr('value', this.value).text(this.label))
                    })

                    typeOptions.val(col.type).change()

                    const finalSpan = $('<span/>', { style: 'float:right; margin-right:8px;' }).appendTo(row)
                    const deleteButton = $('<a/>', { href: '#', class: 'editor-button editor-button-small', style: 'margin-top:7px; margin-left:5px;' }).appendTo(finalSpan)
                    $('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton)

                    deleteButton.click(function () {
                        container.css({ background: 'var(--red-ui-secondary-background-inactive, #fee)' })
                        container.fadeOut(300, function () {
                            $(this).remove()
                        })
                    })

                    $('#node-input-column-container').append(container)
                }

                $('#node-input-add-column').click(function () {
                    const defaultColumn = {
                        type: 'text',
                        align: 'start'
                    }
                    generateColumn($('#node-input-column-container').children().length + 1, defaultColumn)
                    $('#node-input-column-container-div').scrollTop($('#node-input-column-container-div').get(0).scrollHeight)
                })

                for (let i = 0; i < this.columns?.length; i++) {
                    const col = this.columns[i]
                    generateColumn(i + 1, col)
                }

                $('#node-input-column-container').sortable({
                    axis: 'y',
                    handle: '.node-input-column-handle',
                    cursor: 'move'
                })
            },
            oneditsave: function () {
                const columns = $('#node-input-column-container').children()
                const node = this
                node.columns = []
                columns.each(function (i) {
                    const column = $(this)
                    const o = {
                        title: column.find('.node-input-column-label').val(),
                        key: column.find('.node-input-column-key').val(),
                        type: column.find('.node-input-column-type').find(':selected').val(),
                        width: column.find('.node-input-column-width').val(),
                        align: column.find('.node-input-column-align').find(':selected').val()
                    }
                    node.columns.push(o)
                })
            }
        })
    })()
</script>

<script type="text/html" data-template-name="ui-table">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>
    <div class="form-row">
        <label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui-table.label.group"></label>
        <input type="text" id="node-input-group">
    </div>
    <div class="form-row nr-db-ui-element-sizer-row">
        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-table.label.size">Size</label>
        <button class="editor-button" id="node-input-size"></button>
    </div>
    <div class="form-row nr-db-ui-manual-size-row">
        <label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-table.label.width">Width</label>
        <input type="hidden" id="node-input-width">
    </div>
    <div class="form-row nr-db-ui-manual-size-row">
        <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-table.label.height">Height</label>
        <input type="hidden" id="node-input-height">
    </div>
    <div class="form-row">
        <label for="node-input-maxrows"><i class="fa fa-tag"></i> <span data-i18n="ui-table.label.maxRows"></label>
        <input type="number" id="node-input-maxrows">
    </div>
    <div class="form-row">
        <label for="node-input-mobileBreakpoint"><i class="fa fa-mobile"></i> <span data-i18n="ui-table.label.mobileBreakpoint"></label>
        <input type="text" id="node-input-mobileBreakpoint">
        <input type="hidden" id="node-input-mobileBreakpointType">
    </div>
    <div class="form-row">
        <label for="node-input-selectionType"><i class="fa fa-crosshairs"></i> <span data-i18n="ui-table.label.selection"></span></label>
        <select id="node-input-selectionType">
            <option value="none" data-i18n="ui-table.selection.none"></option>
            <option value="click" data-i18n="ui-table.selection.click"></option>
            <option value="checkbox" data-i18n="ui-table.selection.checkbox"></option>
        </select>
    </div>
    <div class="form-row form-row-flex">
        <label for="node-input-showSearch"><i class="fa fa-search"></i> <span data-i18n="ui-table.label.search"></label>
        <div style="margin-bottom: 0px; width:calc(70% + 15px);">
            <input type="checkbox" id="node-input-showSearch" style="display: inline-block; width: auto;">
            <label  for="node-input-showSearch" data-i18n="ui-table.label.showSearch"></label>
        </div>
    </div>
    <div class="form-row" style="display:flex; margin-bottom: 3px;">
        <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> <span data-i18n="ui-table.label.columns"></label>
        <div>
            <input type="checkbox" checked id="node-input-autocols" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
            <label style="width:auto" for="node-input-autocols" data-i18n="ui-table.label.autoCalculateColumns"></label>
        </div>
    </div>
    <div class="form-row">
        <div class="form-row node-input-column-container-row">
            <div id="node-input-columns-container">
                <div id="node-input-column-container-div" style="box-sizing:border-box; border-radius:5px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 100%;">
                    <ol id="node-input-column-container" style="list-style-type:none; margin:0;"></ol>
                </div>
                <a href="#" class="editor-button editor-button-small" id="node-input-add-column" style="margin-top:4px;"><i class="fa fa-plus"></i> <span data-i18n="ui-table.label.columns"></span></a>
            </div>
        </div>
    </div>
</script>