How to internationalize the header of editableList

Developing Nodes
1

I am using the editableList plugin to create an editable list and I want to internationalize the "Name" field. However, I have tried several methods but none of them seem to work.

Current Code

$("ol.list").editableList({
    header: $("<div>").append($.parseHTML("<div style='width:40%; display: inline-grid'>Name</div>")),
});

Attempt 1

I first tried adding a data-i18n attribute for internationalization:

$("ol.list").editableList({
    header: $("<div>").append($.parseHTML("<div style='width:40%; display: inline-grid' data-i18n='xxxxxx' ">Name</div>")),
});

Attempt 2

I also tried using a template literal with a translation function:

$("ol.list").editableList({
    header: $("<div>").append($.parseHTML(`<div style='width:40%; display: inline-grid">${RED._("xxxxxx")}</div>`)),
});

Both attempts did not work as expected. Can someone help me understand what I might be doing wrong or suggest a better approach to achieve this?

2

Hi and Welcome,

Try with:

$("ol.list").editableList({
    header: $("<div>").append($.parseHTML("<div style='width:40%; display: inline-grid'><span data-i18n='node-red:common.label.name'></span></div>")),
});