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();
};