mdc.dataTable.MDCDataTable.prototype.addRow = function()

in sources/src/main/resources/META-INF/resources/view.js [16:133]


mdc.dataTable.MDCDataTable.prototype.addRow = function(id, columns, showCheckbox=true) {
    console.assert(columns);

    const tr = $(`<tr data-row-id="${id}" class="mdc-data-table__row"></tr>`);
    $(this.content).append(tr);

    if (showCheckbox) {
        const checkboxTd = $(`<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
                <div class="mdc-checkbox mdc-data-table__row-checkbox">
                    <input type="checkbox" class="mdc-checkbox__native-control"/>
                    <div class="mdc-checkbox__background">
                    <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                        <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                    </svg>
                    <div class="mdc-checkbox__mixedmark"></div>
                </div>
                <div class="mdc-checkbox__ripple"></div>
                </div>
            </td>`);
        tr.append(checkboxTd);
    }

    let first = true;
    columns.forEach((value) => {
        let td;
        if (first) {
            td = $(`<th class="mdc-data-table__cell" scope="row" id="${id}"></th>`);
            first = false;
        }
        else {
            td = $(`<td class="mdc-data-table__cell"></td>`);
        }

        if (value.menu) {
            // Drop-down menu.
            const menuAnchor = $('<span class="jit-material-icons jit-dropdown">more_vert</span>');
            const menuFlyout = $(`<div class="mdc-menu mdc-menu-surface"></div>`);
            const list = $(`
              <ul class="mdc-deprecated-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
              </ul>`);

            menuFlyout.append(list);
            td.append(menuAnchor);
            td.append(menuFlyout);

            value.menu.forEach(item => {
                if (item.text) {
                    const span = $(`<span class="mdc-deprecated-list-item__text"></span>`);
                    span.text(item.text);

                    const a = $(`<a class="jit-dropdown-item"></a>`);
                    a.prop('href', item.href);

                    const li = $(`<li class="mdc-deprecated-list-item" role="menuitem"></li>`);
                    li.append(a);

                    a.append(`<span class="mdc-deprecated-list-item__ripple"></span>`)
                    a.append(span);
                    list.append(li);
                }
                else {
                    list.append($(`<li class="mdc-deprecated-list-divider" role="separator"></li>`));
                }
            })

            const menu = new mdc.menu.MDCMenu(menuFlyout.get(0));

            menuAnchor.get(0).addEventListener('click', () => {
                const menuAnchorRect = menuAnchor.get(0).getBoundingClientRect();
                const tableRect = menuAnchor.get(0).closest('table').getBoundingClientRect();

                menu.setAbsolutePosition(
                    menuAnchorRect.left - tableRect.left + 100,
                    menuAnchorRect.bottom - tableRect.top + 5);
                
                menu.open = !menu.open;
            });
        }
        else {
            // Text cell.
            const div = $("<div></div>");
            if (value.text && value.maxLength && value.text.length > value.maxLength) {
                div.prop('title', value.text);
                div.text(value.text.substring(0, value.maxLength) + '...');
            }
            else {
                div.text(value.text);
            }

            if (value.class) {
                div.attr("class", value.class);
            }

            if (value.icon) {
                const icon = $("<span class='material-symbols-outlined'></span>");
                icon.text(value.icon);
                div.prepend(icon);
            }

            if (value.href) {
                const a = $("<a></a>");
                a.prop('href', value.href);
                a.append(div);
                td.append(a);
            }
            else {
                td.append(div);
            }
        }
        
        tr.append(td);
    });

    //
    // Update internal bindings.
    //
    this.layout();
};