@yuneta/gobj-ui 7.26.40 → 7.26.41

package/README.md

@@ -3422,6 +3422,15 @@ true. A record that lacks a defaulted field opens changed and closes without
 a question; until 7.26.39 it asked on every close, about nothing the reader
 would lose.
 
+What the reader does to a TABLE of the form -- edits a cell, adds a row,
+deletes one, in a nested table too -- is `edited` like anything typed, whatever
+the record the form opened with. Each table hears it from the moment it is
+built (a nested one is built by its row, whenever the row is drawn); the rows
+the form loads itself say nothing. In 7.26.39 and 7.26.40 a form that opened
+changed did not hear its tables at all, so closing it lost a table edit without
+a question. And the titles of those tables change language with the shell's
+`EV_LANGUAGE_CHANGED` (7.26.41+), like the rest of the form.
+
 ```js
 const kw = {abort_close: false};
 gobj_send_event(form, "EV_WINDOW_TO_CLOSE", kw, gobj);
@@ -3917,14 +3926,24 @@ loading/error notices) and it never went through i18n. Use:
 ```js
 new Tabulator($el, {...settings, ...yui_tabulator_lang(t)});   // at build
 yui_tabulator_relocalize(table, t);                            // on the event
+yui_tabulator_relocalize(table, t, {device_id: t("device id")});  // and the titles
 ```
 
 Every key falls back to the English string Tabulator used to render
 (`defaultValue`), so an app that defines none of them sees no change. Two traps
 the implementation already handles: `setLocale()` with the locale name already
 in force is a **no-op** (hence a fresh name per switch), and re-applying a locale
-makes Tabulator re-run a title formatter on the EXISTING header cell, which
-**appends** to it — rebuild the columns from their definitions.
+makes Tabulator run every title formatter again on the EXISTING header cell, and
+**append** what one returns when it is a Node. `text_title_formatter` empties
+the cell first (7.26.41; until then each change of language added one more copy
+of every title, *"Id dispositivoId dispositivo"*); a title formatter of your own
+that returns a Node must do the same (`cell.getElement().textContent = ""`).
+
+The column TITLES change language through the locale too: hand them, already
+translated, by field (the third argument). Tabulator binds each title to its
+locale, so they are drawn again and no column is rebuilt -- `updateDefinition()`
+re-renders every row, and a row formatter that builds something in its row (a
+nested table) builds it again, empty.
 
 **A missing key is invisible:** i18next answers an unknown key **with the key
 itself**, so it renders (lower-case English) and simply never changes language.

package/dist/gobj-ui.cjs.js

@@ -505,8 +505,16 @@ function text_node(value) {
 *  Tabulator puts a STRING title in with innerHTML, so a title taken
 *  from a schema (`header`, which the schema editor writes) is markup
 *  unless the column carries a formatter that returns a Node.
+*
+*  And it APPENDS that Node to the title's holder, which it never
+*  empties -- while it runs the formatter again on every setLocale()
+*  (yui_tabulator_relocalize()). Until 7.26.40 each change of language
+*  added one more copy of every title ("Id dispositivoId dispositivo").
+*  The holder (the mock cell's element) is emptied first.
 ************************************************************/
 function text_title_formatter(cell) {
+	const $holder = typeof cell.getElement === "function" ? cell.getElement() : null;
+	if ($holder) $holder.textContent = "";
 	return text_node(cell.getValue());
 }
 /************************************************************
@@ -7106,6 +7114,12 @@ function register_c_yui_wizard() {
 *          new Tabulator($el, {..., ...yui_tabulator_lang(t)});
 *          yui_tabulator_relocalize(table, t);   // on a language change
 *
+*      A view whose COLUMN TITLES change language hands them too, in the
+*      new language, by field -- Tabulator binds each column's title to its
+*      locale, so they change with it and no column is rebuilt:
+*
+*          yui_tabulator_relocalize(table, t, {device_id: t("device id")});
+*
 *      Every key carries an English `defaultValue`, so an app that does not
 *      define it renders exactly what Tabulator rendered before — the
 *      keys are an OPPORTUNITY to translate, never a requirement.
@@ -7264,11 +7278,23 @@ function yui_tabulator_name_editor(column_def, name_of) {
 		return Object.assign({}, params, { elementAttributes: attrs });
 	};
 }
-function yui_tabulator_relocalize(table, t) {
+/***************************************************************
+*  yui_tabulator_relocalize() -- see "Put an EXISTING table in the
+*  current language" above.
+*
+*  `titles`, optional: {field: title}, the titles of the columns in
+*  the new language, already translated. They go in the locale
+*  (`columns`), where Tabulator binds each column's title: setLocale()
+*  draws them again without rebuilding a column -- updateDefinition()
+*  re-renders every row, and a row whose formatter builds something (a
+*  nested table) builds it anew. A field left out keeps its title.
+***************************************************************/
+function yui_tabulator_relocalize(table, t, titles) {
 	if (!table) return;
 	try {
 		let name = next_lang_name();
 		let strings = tabulator_strings(t);
+		if (titles && typeof titles === "object") strings.columns = Object.assign({}, titles);
 		table.options.langs = table.options.langs || {};
 		table.options.langs[name] = strings;
 		let localize = table.modules && table.modules.localize;
@@ -9487,7 +9513,7 @@ var attrs_table$17 = [
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
 var PRIVATE_DATA$17 = {
-	rearm_timer: null,
+	loading_rows: 0,
 	tables: null,
 	table_seq: 0,
 	json_names_posted: false,
@@ -9543,18 +9569,12 @@ function mt_stop$17(gobj) {
 *      Local Methods
 ***************************/
 /************************************************************
-*
-************************************************************/
-function isEventSet(table, event) {
-	let eventListeners = table.externalEvents.events;
-	return eventListeners && eventListeners[event] && eventListeners[event].length > 0;
-}
-/************************************************************
-*
+*  `changes` and the save/undo buttons. What the tables say is
+*  not switched here: they always say it (create_tabulator).
 ************************************************************/
 function set_changed_stated(gobj, changed) {
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
-	let $form = $container.querySelector("form");
+	$container.querySelector("form");
 	const enable = ($btn, on, color) => {
 		if (!$btn) return;
 		if (on) $btn.removeAttribute("disabled");
@@ -9569,35 +9589,11 @@ function set_changed_stated(gobj, changed) {
 		(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "changes", true);
 		enable($button_save, true, "MediumSeaGreen");
 		enable($button_undo, true, "Magenta");
-		$form.querySelectorAll(".yui-tabulator-table").forEach(($table) => {
-			if ($table.tabulator && isEventSet($table.tabulator, "dataChanged")) $table.tabulator.off("dataChanged");
-			$table.querySelectorAll(".yui-tabulator-table-nested").forEach(($table_nested) => {
-				if ($table_nested.tabulator && isEventSet($table_nested.tabulator, "dataChanged")) $table_nested.tabulator.off("dataChanged");
-			});
-		});
 	} else {
 		(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "changes", false);
 		(0, _yuneta_gobj_js.gobj_write_bool_attr)(gobj, "edited", false);
 		enable($button_save, false, OFF_COLOR);
 		enable($button_undo, false, OFF_COLOR);
-		if (gobj.priv.rearm_timer) clearTimeout(gobj.priv.rearm_timer);
-		gobj.priv.rearm_timer = setTimeout(function() {
-			gobj.priv.rearm_timer = null;
-			if ((0, _yuneta_gobj_js.gobj_is_destroying)(gobj)) return;
-			const rearm = (tabulator) => {
-				if (!tabulator) return;
-				if (isEventSet(tabulator, "dataChanged")) tabulator.off("dataChanged");
-				tabulator.on("dataChanged", function(data) {
-					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_RECORD_CHANGED", {}, gobj);
-				});
-			};
-			$form.querySelectorAll(".yui-tabulator-table").forEach(($table) => {
-				rearm($table.tabulator);
-				$table.querySelectorAll(".yui-tabulator-table-nested").forEach(($table_nested) => {
-					rearm($table_nested.tabulator);
-				});
-			});
-		}, 200);
 	}
 }
 /************************************************************
@@ -9834,10 +9830,6 @@ function build_ui$15(gobj) {
 *   Destroy UI
 ************************************************************/
 function destroy_ui$10(gobj) {
-	if (gobj.priv && gobj.priv.rearm_timer) {
-		clearTimeout(gobj.priv.rearm_timer);
-		gobj.priv.rearm_timer = null;
-	}
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
 	if ($container) {
 		destroy_widgets(gobj, $container);
@@ -11231,6 +11223,10 @@ function create_tabulator$1(gobj, $extend, name, template) {
 		hozAlign: "center"
 	};
 	let tabulator = new tabulator_tables.TabulatorFull($extend, tabulator_settings);
+	tabulator.on("dataChanged", function() {
+		if (gobj.priv.loading_rows > 0) return;
+		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_RECORD_CHANGED", {}, gobj);
+	});
 	tabulator.on("renderComplete", function() {
 		yui_tabulator_name_row_selects(tabulator, i18next.t);
 	});
@@ -11248,6 +11244,24 @@ function create_tabulator$1(gobj, $extend, name, template) {
 	return tabulator;
 }
 /******************************************************************
+*  The title of a table's column: the schema's header, or the
+*  field's name, translated.
+******************************************************************/
+function column_title(field_desc) {
+	return (0, i18next.t)(field_desc.header || field_desc.name);
+}
+/******************************************************************
+*  {field: title} of a table's template, in the current language.
+******************************************************************/
+function table_column_titles(template) {
+	let titles = {};
+	Object.entries(template || {}).forEach(([key, value]) => {
+		const field_desc = (0, _yuneta_gobj_js.template_get_field_desc)(key, value);
+		titles[field_desc.name] = column_title(field_desc);
+	});
+	return titles;
+}
+/******************************************************************
 *  Convert a template's items in tabulator columns
 ******************************************************************/
 function template2columns(gobj, columns, template, sub_elements) {
@@ -11260,7 +11274,7 @@ function template2columns(gobj, columns, template, sub_elements) {
 		let validator = [];
 		let column = {
 			field: field_desc.name,
-			title: (0, i18next.t)(field_desc.header || field_desc.name),
+			title: column_title(field_desc),
 			titleFormatter: text_title_formatter,
 			editable: get_editable_state,
 			editor: false,
@@ -12115,7 +12129,14 @@ function ac_add_table_row(gobj, event, kw, src) {
 	}
 	let record = kw.record;
 	let loading = kw.loading;
-	tabulator.addRow(record).then(function(row) {
+	let added;
+	if (loading) gobj.priv.loading_rows++;
+	try {
+		added = tabulator.addRow(record);
+	} finally {
+		if (loading) gobj.priv.loading_rows--;
+	}
+	added.then(function(row) {
 		if (loading) {
 			let template = $table.template;
 			Object.entries(template).forEach(([key, template_value]) => {
@@ -12222,6 +12243,10 @@ function ac_language_changed$10(gobj, event, kw, src) {
 		let editor = $editor.jsoneditor;
 		if (editor && typeof editor.updateProps === "function") editor.updateProps({ onRenderMenu: json_editor_render_menu(gobj) });
 	}
+	for (let $table of $container.querySelectorAll(".yui-tabulator-table, .yui-tabulator-table-nested")) {
+		let tabulator = $table.tabulator;
+		if (tabulator && tabulator.initialized && $table.template) yui_tabulator_relocalize(tabulator, i18next.t, table_column_titles($table.template));
+	}
 	return 0;
 }
 /***************************

package/dist/gobj-ui.es.js

@@ -500,8 +500,16 @@ function text_node(value) {
 *  Tabulator puts a STRING title in with innerHTML, so a title taken
 *  from a schema (`header`, which the schema editor writes) is markup
 *  unless the column carries a formatter that returns a Node.
+*
+*  And it APPENDS that Node to the title's holder, which it never
+*  empties -- while it runs the formatter again on every setLocale()
+*  (yui_tabulator_relocalize()). Until 7.26.40 each change of language
+*  added one more copy of every title ("Id dispositivoId dispositivo").
+*  The holder (the mock cell's element) is emptied first.
 ************************************************************/
 function text_title_formatter(cell) {
+	const $holder = typeof cell.getElement === "function" ? cell.getElement() : null;
+	if ($holder) $holder.textContent = "";
 	return text_node(cell.getValue());
 }
 /************************************************************
@@ -7101,6 +7109,12 @@ function register_c_yui_wizard() {
 *          new Tabulator($el, {..., ...yui_tabulator_lang(t)});
 *          yui_tabulator_relocalize(table, t);   // on a language change
 *
+*      A view whose COLUMN TITLES change language hands them too, in the
+*      new language, by field -- Tabulator binds each column's title to its
+*      locale, so they change with it and no column is rebuilt:
+*
+*          yui_tabulator_relocalize(table, t, {device_id: t("device id")});
+*
 *      Every key carries an English `defaultValue`, so an app that does not
 *      define it renders exactly what Tabulator rendered before — the
 *      keys are an OPPORTUNITY to translate, never a requirement.
@@ -7259,11 +7273,23 @@ function yui_tabulator_name_editor(column_def, name_of) {
 		return Object.assign({}, params, { elementAttributes: attrs });
 	};
 }
-function yui_tabulator_relocalize(table, t) {
+/***************************************************************
+*  yui_tabulator_relocalize() -- see "Put an EXISTING table in the
+*  current language" above.
+*
+*  `titles`, optional: {field: title}, the titles of the columns in
+*  the new language, already translated. They go in the locale
+*  (`columns`), where Tabulator binds each column's title: setLocale()
+*  draws them again without rebuilding a column -- updateDefinition()
+*  re-renders every row, and a row whose formatter builds something (a
+*  nested table) builds it anew. A field left out keeps its title.
+***************************************************************/
+function yui_tabulator_relocalize(table, t, titles) {
 	if (!table) return;
 	try {
 		let name = next_lang_name();
 		let strings = tabulator_strings(t);
+		if (titles && typeof titles === "object") strings.columns = Object.assign({}, titles);
 		table.options.langs = table.options.langs || {};
 		table.options.langs[name] = strings;
 		let localize = table.modules && table.modules.localize;
@@ -9482,7 +9508,7 @@ var attrs_table$17 = [
 	SDATA_END()
 ];
 var PRIVATE_DATA$17 = {
-	rearm_timer: null,
+	loading_rows: 0,
 	tables: null,
 	table_seq: 0,
 	json_names_posted: false,
@@ -9538,18 +9564,12 @@ function mt_stop$17(gobj) {
 *      Local Methods
 ***************************/
 /************************************************************
-*
-************************************************************/
-function isEventSet(table, event) {
-	let eventListeners = table.externalEvents.events;
-	return eventListeners && eventListeners[event] && eventListeners[event].length > 0;
-}
-/************************************************************
-*
+*  `changes` and the save/undo buttons. What the tables say is
+*  not switched here: they always say it (create_tabulator).
 ************************************************************/
 function set_changed_stated(gobj, changed) {
 	let $container = gobj_read_attr(gobj, "$container");
-	let $form = $container.querySelector("form");
+	$container.querySelector("form");
 	const enable = ($btn, on, color) => {
 		if (!$btn) return;
 		if (on) $btn.removeAttribute("disabled");
@@ -9564,35 +9584,11 @@ function set_changed_stated(gobj, changed) {
 		gobj_write_bool_attr(gobj, "changes", true);
 		enable($button_save, true, "MediumSeaGreen");
 		enable($button_undo, true, "Magenta");
-		$form.querySelectorAll(".yui-tabulator-table").forEach(($table) => {
-			if ($table.tabulator && isEventSet($table.tabulator, "dataChanged")) $table.tabulator.off("dataChanged");
-			$table.querySelectorAll(".yui-tabulator-table-nested").forEach(($table_nested) => {
-				if ($table_nested.tabulator && isEventSet($table_nested.tabulator, "dataChanged")) $table_nested.tabulator.off("dataChanged");
-			});
-		});
 	} else {
 		gobj_write_bool_attr(gobj, "changes", false);
 		gobj_write_bool_attr(gobj, "edited", false);
 		enable($button_save, false, OFF_COLOR);
 		enable($button_undo, false, OFF_COLOR);
-		if (gobj.priv.rearm_timer) clearTimeout(gobj.priv.rearm_timer);
-		gobj.priv.rearm_timer = setTimeout(function() {
-			gobj.priv.rearm_timer = null;
-			if (gobj_is_destroying(gobj)) return;
-			const rearm = (tabulator) => {
-				if (!tabulator) return;
-				if (isEventSet(tabulator, "dataChanged")) tabulator.off("dataChanged");
-				tabulator.on("dataChanged", function(data) {
-					gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
-				});
-			};
-			$form.querySelectorAll(".yui-tabulator-table").forEach(($table) => {
-				rearm($table.tabulator);
-				$table.querySelectorAll(".yui-tabulator-table-nested").forEach(($table_nested) => {
-					rearm($table_nested.tabulator);
-				});
-			});
-		}, 200);
 	}
 }
 /************************************************************
@@ -9829,10 +9825,6 @@ function build_ui$15(gobj) {
 *   Destroy UI
 ************************************************************/
 function destroy_ui$10(gobj) {
-	if (gobj.priv && gobj.priv.rearm_timer) {
-		clearTimeout(gobj.priv.rearm_timer);
-		gobj.priv.rearm_timer = null;
-	}
 	let $container = gobj_read_attr(gobj, "$container");
 	if ($container) {
 		destroy_widgets(gobj, $container);
@@ -11226,6 +11218,10 @@ function create_tabulator$1(gobj, $extend, name, template) {
 		hozAlign: "center"
 	};
 	let tabulator = new TabulatorFull($extend, tabulator_settings);
+	tabulator.on("dataChanged", function() {
+		if (gobj.priv.loading_rows > 0) return;
+		gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
+	});
 	tabulator.on("renderComplete", function() {
 		yui_tabulator_name_row_selects(tabulator, t);
 	});
@@ -11243,6 +11239,24 @@ function create_tabulator$1(gobj, $extend, name, template) {
 	return tabulator;
 }
 /******************************************************************
+*  The title of a table's column: the schema's header, or the
+*  field's name, translated.
+******************************************************************/
+function column_title(field_desc) {
+	return t(field_desc.header || field_desc.name);
+}
+/******************************************************************
+*  {field: title} of a table's template, in the current language.
+******************************************************************/
+function table_column_titles(template) {
+	let titles = {};
+	Object.entries(template || {}).forEach(([key, value]) => {
+		const field_desc = template_get_field_desc(key, value);
+		titles[field_desc.name] = column_title(field_desc);
+	});
+	return titles;
+}
+/******************************************************************
 *  Convert a template's items in tabulator columns
 ******************************************************************/
 function template2columns(gobj, columns, template, sub_elements) {
@@ -11255,7 +11269,7 @@ function template2columns(gobj, columns, template, sub_elements) {
 		let validator = [];
 		let column = {
 			field: field_desc.name,
-			title: t(field_desc.header || field_desc.name),
+			title: column_title(field_desc),
 			titleFormatter: text_title_formatter,
 			editable: get_editable_state,
 			editor: false,
@@ -12110,7 +12124,14 @@ function ac_add_table_row(gobj, event, kw, src) {
 	}
 	let record = kw.record;
 	let loading = kw.loading;
-	tabulator.addRow(record).then(function(row) {
+	let added;
+	if (loading) gobj.priv.loading_rows++;
+	try {
+		added = tabulator.addRow(record);
+	} finally {
+		if (loading) gobj.priv.loading_rows--;
+	}
+	added.then(function(row) {
 		if (loading) {
 			let template = $table.template;
 			Object.entries(template).forEach(([key, template_value]) => {
@@ -12217,6 +12238,10 @@ function ac_language_changed$10(gobj, event, kw, src) {
 		let editor = $editor.jsoneditor;
 		if (editor && typeof editor.updateProps === "function") editor.updateProps({ onRenderMenu: json_editor_render_menu(gobj) });
 	}
+	for (let $table of $container.querySelectorAll(".yui-tabulator-table, .yui-tabulator-table-nested")) {
+		let tabulator = $table.tabulator;
+		if (tabulator && tabulator.initialized && $table.template) yui_tabulator_relocalize(tabulator, t, table_column_titles($table.template));
+	}
 	return 0;
 }
 /***************************

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.26.40",
+  "version": "7.26.41",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_form.js

@@ -55,7 +55,11 @@ import {
 
 import {t} from "i18next";
 
-import {yui_tabulator_name_row_selects, yui_tabulator_name_editor} from "./yui_tabulator_i18n.js";
+import {
+    yui_tabulator_name_row_selects,
+    yui_tabulator_name_editor,
+    yui_tabulator_relocalize
+} from "./yui_tabulator_i18n.js";
 import "tom-select/dist/css/tom-select.css"; // Import Tom-Select CSS
 import TomSelect from "tom-select"; // Import Tom-Select JS
 
@@ -172,9 +176,10 @@ SDATA_END()
 ];
 
 let PRIVATE_DATA = {
-    /*  The deferred re-wiring of the tables' dataChanged after a
-     *  save/undo (see set_changed_stated): cancelled in destroy_ui. */
-    rearm_timer: null,
+    /*  > 0 while the FORM adds rows (a record loaded, a nested table
+     *  filled): what a table says then is no change of the reader's
+     *  (see create_tabulator's dataChanged).  */
+    loading_rows: 0,
     /*  table_id -> WeakRef of its element: EV_ADD_TABLE_ROW names a
      *  table by id (a kw is plain json), see table_identity().  */
     tables: null,
@@ -281,17 +286,8 @@ function mt_stop(gobj)
 
 
 /************************************************************
- *
- ************************************************************/
-function isEventSet(table, event)
-{
-    // Access the event listeners directly from the Tabulator instance
-    let eventListeners = table.externalEvents.events;
-    return eventListeners && eventListeners[event] && eventListeners[event].length > 0;
-}
-
-/************************************************************
- *
+ *  `changes` and the save/undo buttons. What the tables say is
+ *  not switched here: they always say it (create_tabulator).
  ************************************************************/
 function set_changed_stated(gobj, changed)
 {
@@ -333,18 +329,6 @@ function set_changed_stated(gobj, changed)
         enable($button_save, true, "MediumSeaGreen");
         enable($button_undo, true, "Magenta");
 
-        $form.querySelectorAll('.yui-tabulator-table').forEach($table => {
-            if($table.tabulator && isEventSet($table.tabulator, "dataChanged")) {
-                $table.tabulator.off("dataChanged");
-            }
-
-            $table.querySelectorAll('.yui-tabulator-table-nested').forEach($table_nested => {
-                if($table_nested.tabulator && isEventSet($table_nested.tabulator, "dataChanged")) {
-                    $table_nested.tabulator.off("dataChanged");
-                }
-            });
-        });
-
     } else {
         /*
          *  Data not changed, disable buttons to save/undo
@@ -354,41 +338,6 @@ function set_changed_stated(gobj, changed)
 
         enable($button_save, false, OFF_COLOR);
         enable($button_undo, false, OFF_COLOR);
-
-        /*
-         *  TODO improve. The tables are re-wired a moment later, once the
-         *  data just loaded has settled. The timer is kept so that
-         *  destroy_ui() cancels it: a form closed right after a save (what
-         *  a dialog does) destroyed its widgets first, and the timer then
-         *  called .on() on a null tabulator -- an uncaught TypeError.
-         */
-        if(gobj.priv.rearm_timer) {
-            clearTimeout(gobj.priv.rearm_timer);
-        }
-        gobj.priv.rearm_timer = setTimeout(function() {
-            gobj.priv.rearm_timer = null;
-            if(gobj_is_destroying(gobj)) {
-                return;     // destroy_ui() cancels it; this is the belt
-            }
-            const rearm = (tabulator) => {
-                if(!tabulator) {
-                    return;     // destroyed with its form
-                }
-                if(isEventSet(tabulator, "dataChanged")) {
-                    tabulator.off("dataChanged");
-                }
-                tabulator.on("dataChanged", function(data) {
-                    //data - the updated table data
-                    gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
-                });
-            };
-            $form.querySelectorAll('.yui-tabulator-table').forEach($table => {
-                rearm($table.tabulator);
-                $table.querySelectorAll('.yui-tabulator-table-nested').forEach($table_nested => {
-                    rearm($table_nested.tabulator);
-                });
-            });
-        }, 200);
     }
 }
 
@@ -562,10 +511,6 @@ function build_ui(gobj)
  ************************************************************/
 function destroy_ui(gobj)
 {
-    if(gobj.priv && gobj.priv.rearm_timer) {
-        clearTimeout(gobj.priv.rearm_timer);
-        gobj.priv.rearm_timer = null;
-    }
     let $container = gobj_read_attr(gobj, "$container");
     if($container) {
         destroy_widgets(gobj, $container);
@@ -2332,6 +2277,22 @@ function create_tabulator(gobj, $extend, name, template)
         $extend,
         tabulator_settings
     );
+    /*  What the READER does to a table -- edits a cell, adds or deletes a
+     *  row -- reaches the form only through `dataChanged`. Wired here, on
+     *  every table, nested ones included (a row's formatter builds them
+     *  whenever the row is drawn), and never switched off: until 7.26.40
+     *  it was unwired whenever the form was CHANGED and re-wired only by a
+     *  save, an undo or a load of what is stored, so a form that opened
+     *  changed (a field its record lacks, filled with its default) never
+     *  heard its tables -- an edit there was not `edited`, and closing lost
+     *  it without a question. The rows the form adds itself say nothing
+     *  (`loading_rows`, ac_add_table_row).  */
+    tabulator.on("dataChanged", function() {
+        if(gobj.priv.loading_rows > 0) {
+            return;
+        }
+        gobj_send_event(gobj, "EV_RECORD_CHANGED", {}, gobj);
+    });
     /*  Tabulator hard-codes `aria-label="Select Row"` on the box its
      *  rowSelection formatter draws, and it draws a fresh one on EVERY
      *  render -- so this hangs off `renderComplete`, not `tableBuilt`:
@@ -2369,6 +2330,28 @@ function create_tabulator(gobj, $extend, name, template)
     return tabulator;
 }
 
+/******************************************************************
+ *  The title of a table's column: the schema's header, or the
+ *  field's name, translated.
+ ******************************************************************/
+function column_title(field_desc)
+{
+    return t(/* i18n: data */ field_desc.header || field_desc.name);    // the host's schema
+}
+
+/******************************************************************
+ *  {field: title} of a table's template, in the current language.
+ ******************************************************************/
+function table_column_titles(template)
+{
+    let titles = {};
+    Object.entries(template || {}).forEach(([key, value]) => {
+        const field_desc = template_get_field_desc(key, value);
+        titles[field_desc.name] = column_title(field_desc);
+    });
+    return titles;
+}
+
 /******************************************************************
  *  Convert a template's items in tabulator columns
  ******************************************************************/
@@ -2388,7 +2371,7 @@ function template2columns(gobj, columns, template, sub_elements)
         let validator = [];
         let column = {
             field: field_desc.name,
-            title: t(/* i18n: data */ field_desc.header || field_desc.name),    // the host's schema
+            title: column_title(field_desc),
             titleFormatter: text_title_formatter,
             editable: get_editable_state,
             editor: false,
@@ -3793,7 +3776,23 @@ function ac_add_table_row(gobj, event, kw, src)
     let record = kw.record;
     let loading = kw.loading;
 
-    tabulator.addRow(record)
+    /*  Tabulator says `dataChanged` INSIDE addRow(), synchronously: a row
+     *  loaded from the record is muted there, whenever it lands -- also
+     *  from a `tableBuilt` that comes after the load returned, which is
+     *  why no timer can tell the two apart.  */
+    let added;
+    if(loading) {
+        gobj.priv.loading_rows++;
+    }
+    try {
+        added = tabulator.addRow(record);
+    } finally {
+        if(loading) {
+            gobj.priv.loading_rows--;
+        }
+    }
+
+    added
         .then(function(row) {
             if(loading) {
                 /*
@@ -3955,6 +3954,19 @@ function ac_language_changed(gobj, event, kw, src)
             editor.updateProps({onRenderMenu: json_editor_render_menu(gobj)});
         }
     }
+
+    /*  The titles of the columns of every table, nested ones included:
+     *  Tabulator draws them at build, so they stayed in the language the
+     *  form was built in. Through the table's LOCALE, never by
+     *  updateDefinition(): rebuilding a column re-renders every row, and
+     *  a row's formatter builds its nested tables anew -- empty. A table
+     *  not built yet is drawn in the current language when it is.  */
+    for(let $table of $container.querySelectorAll(".yui-tabulator-table, .yui-tabulator-table-nested")) {
+        let tabulator = $table.tabulator;
+        if(tabulator && tabulator.initialized && $table.template) {
+            yui_tabulator_relocalize(tabulator, t, table_column_titles($table.template));
+        }
+    }
     return 0;
 }
 

package/src/form_table_edits_ask.wiring.test.js

@@ -0,0 +1,398 @@
+/***********************************************************************
+ *          form_table_edits_ask.wiring.test.js
+ *
+ *      What the reader does to the TABLES of a C_YUI_FORM is `edited`,
+ *      whatever the record the form opened with -- so closing asks.
+ *
+ *      A form opens CHANGED when its record lacks a field the template
+ *      fills with its default. Until 7.26.40 that also unwired the
+ *      tables' `dataChanged` (and only a save, an undo or a load of what
+ *      is stored wired it again), so adding a row, editing a cell,
+ *      deleting a row or editing a nested table marked nothing: since
+ *      7.26.39 the close asks only for `edited`, and it closed without a
+ *      question -- the edit lost. In estadodelaire that is the settings of
+ *      every device without its alarm colours, whose alarms are tables.
+ *
+ *      And the column titles of those tables change language: they were
+ *      drawn at build and never again.
+ *
+ *      Driven through the real gclass on a document double, with a
+ *      Tabulator double that, like Tabulator, draws a row (its formatter
+ *      runs) and says `dataChanged` INSIDE addRow(), synchronously.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, test, expect, beforeAll, beforeEach, vi} from "vitest";
+import {install_dom_double} from "../test/dom_double.js";
+
+install_dom_double();
+
+if(typeof globalThis.ResizeObserver === "undefined") {
+    globalThis.ResizeObserver = class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+    };
+}
+
+const tables = vi.hoisted(() => []);
+vi.mock("tabulator-tables", () => {
+    class FakeTabulator {
+        constructor($el, settings) {
+            this.element = $el;
+            this.settings = settings;
+            this.options = {};
+            this.handlers = {};
+            this.initialized = true;
+            this.rows = [];
+            this.installed = {};
+            this.locale = null;
+            this.modules = {
+                localize: {
+                    installLang: (name, strings) => {
+                        this.installed[name] = strings;
+                    }
+                }
+            };
+            tables.push(this);
+            return new Proxy(this, {
+                get(target, prop) {
+                    if(prop in target) {
+                        return target[prop];
+                    }
+                    return () => [];
+                }
+            });
+        }
+        on(ev, fn) {
+            (this.handlers[ev] = this.handlers[ev] || []).push(fn);
+        }
+        off(ev) {
+            delete this.handlers[ev];
+        }
+        emit(ev) {
+            for(const fn of (this.handlers[ev] || [])) {
+                fn([]);
+            }
+        }
+        addRow(record) {
+            /*  The row's element lives in the table's, as in Tabulator:
+             *  a nested table drawn in it is inside the form.  */
+            const $row = document.createElement("div");
+            this.element.appendChild($row);
+            const row = {getElement: () => $row, getData: () => record};
+            if(this.settings && typeof this.settings.rowFormatter === "function") {
+                this.settings.rowFormatter(row);
+            }
+            this.rows.push(row);
+            this.emit("dataChanged");
+            return Promise.resolve(row);
+        }
+        /*  What the trash of a row ends in (row.delete()).  */
+        delete_row() {
+            const row = this.rows.pop();
+            row.getElement().remove();
+            this.emit("dataChanged");
+        }
+        /*  What an edited cell says.  */
+        edit_cell() {
+            this.emit("dataChanged");
+        }
+        validate() {
+            return true;
+        }
+        clearData() {
+            for(const row of this.rows) {
+                row.getElement().remove();
+            }
+            this.rows = [];
+        }
+        setLocale(name) {
+            this.locale = name;
+        }
+        destroy() {
+        }
+    }
+    return {TabulatorFull: FakeTabulator, Tabulator: FakeTabulator};
+});
+
+const {
+    SDATA_END, gclass_create,
+    gobj_start_up, gobj_create_yuno, gobj_create_pure_child,
+    gobj_start, gobj_send_event, gobj_read_attr,
+    set_log_callback,
+} = await import("@yuneta/gobj-js");
+const {register_c_yui_form} = await import("./c_yui_form.js");
+const i18next = (await import("i18next")).default;
+
+const logged = [];
+let yuno = null;
+
+/*  A device's settings, cut down: a defaulted field, and the alarms as
+ *  a table whose rows carry a nested table of triggers.  */
+const TEMPLATE = {
+    template_version: {
+        type: "integer",
+        default: 7,
+        flag: ["hidden", "persistent"]
+    },
+    level: {
+        type: "integer",
+        default: 3,
+        flag: ["writable", "persistent"]
+    },
+    alarms: {
+        type: "array",
+        flag: ["writable", "persistent", "table"],
+        table: {
+            name: {
+                type: "string",
+                header: "alarm name",
+                flag: ["writable", "persistent"]
+            },
+            triggers: {
+                type: "array",
+                flag: ["writable", "persistent", "table"],
+                table: {
+                    measure: {
+                        type: "string",
+                        header: "measure",
+                        flag: ["writable", "persistent"]
+                    }
+                }
+            }
+        }
+    }
+};
+
+/*  `level` missing: the form opens changed.  */
+const LACKING = {
+    template_version: 7,
+    alarms: [{name: "hot", triggers: [{measure: "temperature"}]}]
+};
+
+const COMPLETE = {
+    template_version: 7,
+    level: 3,
+    alarms: [{name: "hot", triggers: [{measure: "temperature"}]}]
+};
+
+beforeAll(async () => {
+    await i18next.init({
+        lng: "en",
+        resources: {
+            en: {translation: {"alarm name": "Alarm name", "measure": "Measure"}},
+            es: {translation: {"alarm name": "Nombre de la alarma", "measure": "Medida"}}
+        }
+    });
+    gobj_start_up(null, null, null, null, null, null, null);
+    set_log_callback((level, msg) => {
+        logged.push({level: String(level), msg: String(msg)});
+    });
+    gclass_create("C_TEST_TE_HOST", [], [["ST_IDLE", []]], {}, 0, [SDATA_END()], {}, 0, 0, 0, 0);
+    gclass_create(
+        "C_TEST_TE_APP",
+        [["EV_SAVE_RECORD", 0]],
+        [["ST_IDLE", [
+            ["EV_SAVE_RECORD", () => 0, null],
+        ]]],
+        {}, 0, [SDATA_END()], {}, 0, 0, 0, 0
+    );
+    register_c_yui_form();
+    yuno = gobj_create_yuno("form_table_edits_yuno", "C_TEST_TE_HOST", {});
+    gobj_start(yuno);
+});
+
+beforeEach(async () => {
+    logged.length = 0;
+    await i18next.changeLanguage("en");
+});
+
+let seq = 0;
+
+function build(record)
+{
+    const first = tables.length;
+    const app = gobj_create_pure_child(`teapp${++seq}`, "C_TEST_TE_APP", {}, yuno);
+    gobj_start(app);
+    const form = gobj_create_pure_child(`teform${seq}`, "C_YUI_FORM", {
+        template: TEMPLATE,
+        record: record,
+        editable: true,
+    }, app);
+    gobj_start(form);
+    return {form, first};
+}
+
+/*  The tables the form built since `first`: the alarms table first,
+ *  then a triggers table per alarm row drawn.  */
+function built(first)
+{
+    return tables.slice(first);
+}
+
+/*  The microtasks of addRow().then(): the nested rows load there.  */
+async function settle()
+{
+    await new Promise(resolve => setTimeout(resolve, 0));
+}
+
+function close_asks(form)
+{
+    const kw = {abort_close: false};
+    gobj_send_event(form, "EV_WINDOW_TO_CLOSE", kw, form);
+    return kw.abort_close ? (kw.warning || "(no warning)") : "";
+}
+
+function errors()
+{
+    return logged.filter(l => /error/i.test(l.level) || /ERROR/.test(l.msg));
+}
+
+describe("a form that opens changed hears what the reader does to its tables", () => {
+    test("it opens changed, not edited, and closes without asking", async () => {
+        const {form, first} = build(LACKING);
+        await settle();
+        expect(gobj_read_attr(form, "changes")).toBe(true);
+        expect(gobj_read_attr(form, "edited")).toBe(false);
+        expect(built(first).length).toBe(2);     // the alarms, and the triggers of its row
+        expect(close_asks(form)).toBe("");
+        expect(errors()).toEqual([]);
+    });
+
+    test("an edited cell makes it ask", async () => {
+        const {form, first} = build(LACKING);
+        await settle();
+        built(first)[0].edit_cell();
+        expect(gobj_read_attr(form, "edited")).toBe(true);
+        expect(close_asks(form)).toBe("all changes will be lost");
+        expect(errors()).toEqual([]);
+    });
+
+    test("a deleted row makes it ask", async () => {
+        const {form, first} = build(LACKING);
+        await settle();
+        built(first)[0].delete_row();
+        expect(close_asks(form)).toBe("all changes will be lost");
+    });
+
+    test("a row the reader adds makes it ask; the rows the form loads do not", async () => {
+        const {form, first} = build(LACKING);
+        await settle();
+        const alarms = built(first)[0];
+        expect(alarms.rows.length).toBe(1);     // loaded: no question
+        expect(close_asks(form)).toBe("");
+
+        /*  What the table's add button sends: the reader's row.  */
+        const tables_before = tables.length;
+        gobj_send_event(form, "EV_ADD_TABLE_ROW", {
+            table_id: alarms.element.yui_table_id,
+            record: {},
+            loading: false
+        }, form);
+        expect(alarms.rows.length).toBe(2);
+        expect(tables.length).toBe(tables_before + 1);  // the new row's triggers table
+        expect(gobj_read_attr(form, "edited")).toBe(true);
+        expect(close_asks(form)).toBe("all changes will be lost");
+        expect(errors()).toEqual([]);
+    });
+
+    test("an edit of a NESTED table makes it ask, also one drawn after the load", async () => {
+        const loaded = build(LACKING);
+        await settle();
+        const triggers = built(loaded.first)[1];
+        expect(triggers.rows.length).toBe(1);     // loaded in its row: no question
+        expect(close_asks(loaded.form)).toBe("");
+        triggers.edit_cell();
+        expect(close_asks(loaded.form)).toBe("all changes will be lost");
+
+        /*  An undo draws the rows again, and each row builds its triggers
+         *  table then: a table that did not exist when the form loaded.  */
+        const before_undo = tables.length;
+        gobj_send_event(loaded.form, "EV_UNDO_RECORD", {}, loaded.form);
+        await settle();
+        expect(close_asks(loaded.form)).toBe("");
+        const redrawn = tables.slice(before_undo);
+        expect(redrawn.length).toBe(1);
+        expect(redrawn[0].rows.length).toBe(1);
+        redrawn[0].edit_cell();
+        expect(close_asks(loaded.form)).toBe("all changes will be lost");
+        expect(errors()).toEqual([]);
+    });
+
+    test("a record loaded LATER that lacks a field (a reload, a refused save) still hears them", async () => {
+        const {form, first} = build(COMPLETE);
+        await settle();
+        expect(gobj_read_attr(form, "changes")).toBe(false);
+        gobj_send_event(form, "EV_LOAD_RECORD", LACKING, form);
+        await settle();
+        expect(gobj_read_attr(form, "changes")).toBe(true);
+        expect(gobj_read_attr(form, "edited")).toBe(false);
+        expect(close_asks(form)).toBe("");
+        built(first)[0].edit_cell();
+        expect(close_asks(form)).toBe("all changes will be lost");
+        expect(errors()).toEqual([]);
+    });
+
+    test("a table built after the load (tableBuilt) takes its rows without a question", async () => {
+        const {form, first} = build(COMPLETE);
+        await settle();
+        const alarms = built(first)[0];
+        /*  A table not built yet: no rows, and the ones it is given wait
+         *  for its `tableBuilt`.  */
+        alarms.clearData();
+        alarms.initialized = false;
+        gobj_send_event(form, "EV_LOAD_RECORD", LACKING, form);
+        await settle();
+        expect(alarms.rows.length).toBe(0);
+        /*  Tabulator builds the table now, long after the load returned.  */
+        alarms.initialized = true;
+        alarms.emit("tableBuilt");
+        await settle();
+        expect(alarms.rows.length).toBe(1);
+        expect(gobj_read_attr(form, "edited")).toBe(false);
+        expect(close_asks(form)).toBe("");
+        expect(errors()).toEqual([]);
+    });
+
+    test("with a complete record it asks as before", async () => {
+        /*  The waits are the 200 ms after which 7.26.40 wired the tables
+         *  again: with them this case passes on the code before too.  */
+        const wait = () => new Promise(resolve => setTimeout(resolve, 260));
+        const {form, first} = build(COMPLETE);
+        await wait();
+        expect(gobj_read_attr(form, "changes")).toBe(false);
+        built(first)[1].edit_cell();
+        expect(close_asks(form)).toBe("all changes will be lost");
+        gobj_send_event(form, "EV_SAVE_RECORD", {}, form);
+        expect(close_asks(form)).toBe("");
+        await wait();
+        built(first)[0].edit_cell();
+        expect(close_asks(form)).toBe("all changes will be lost");
+        expect(errors()).toEqual([]);
+    });
+});
+
+describe("the column titles of the tables change language", () => {
+    test("each table, nested ones too, is given its titles in the new language", async () => {
+        const {form, first} = build(COMPLETE);
+        await settle();
+        const [alarms, triggers] = built(first);
+
+        await i18next.changeLanguage("es");
+        gobj_send_event(form, "EV_LANGUAGE_CHANGED", {}, form);
+
+        expect(alarms.locale).toBeTruthy();
+        expect(alarms.installed[alarms.locale].columns).toEqual({
+            name: "Nombre de la alarma",
+            triggers: "triggers"
+        });
+        expect(triggers.installed[triggers.locale].columns).toEqual({measure: "Medida"});
+        /*  No column was rebuilt to get there: the rows (and the nested
+         *  table) are the ones loaded.  */
+        expect(alarms.rows.length).toBe(1);
+        expect(triggers.rows.length).toBe(1);
+        expect(errors()).toEqual([]);
+    });
+});

package/src/form_table_rearm.wiring.test.js

@@ -5,11 +5,13 @@
  *      a save or an undo -- which is what a dialog does: it closes the
  *      moment the record is saved.
  *
- *      set_changed_stated(false) re-wires the tables' `dataChanged` from
- *      a 200 ms timer. Since 7.26.7 destroy_ui() destroys the widgets and
- *      nulls `$table.tabulator`, and the timer, left running, called
- *      `.on()` on that null: an uncaught TypeError. The timer is kept and
- *      cancelled now, and it skips a table that is gone.
+ *      set_changed_stated(false) used to re-wire the tables' `dataChanged`
+ *      from a 200 ms timer. Since 7.26.7 destroy_ui() destroys the widgets
+ *      and nulls `$table.tabulator`, and the timer, left running, called
+ *      `.on()` on that null: an uncaught TypeError. Since 7.26.41 there is
+ *      no timer: each table is wired once, when it is built, and stays
+ *      wired (form_table_edits_ask.wiring.test.js says why). These cases
+ *      keep guarding the destroy right after a save or an undo.
  *
  *          Copyright (c) 2026, ArtGins.
  *          All Rights Reserved.
@@ -117,7 +119,7 @@ function build(rows)
 }
 
 describe("a form with a table, destroyed right after", () => {
-    test("an undo: the deferred re-wiring does not throw", async () => {
+    test("an undo, then the destroy: nothing left behind throws", async () => {
         const {form} = build();
         expect(tables.length).toBeGreaterThan(0);
         const errors = [];
@@ -135,7 +137,7 @@ describe("a form with a table, destroyed right after", () => {
         expect(errors).toEqual([]);
     });
 
-    test("a live form is still re-wired", async () => {
+    test("a live form's table stays wired, once", async () => {
         const {form} = build();
         const table = tables[tables.length - 1];
         gobj_send_event(form, "EV_UNDO_RECORD", {}, form);

package/src/yui_tabulator_i18n.js

@@ -14,6 +14,12 @@
  *          new Tabulator($el, {..., ...yui_tabulator_lang(t)});
  *          yui_tabulator_relocalize(table, t);   // on a language change
  *
+ *      A view whose COLUMN TITLES change language hands them too, in the
+ *      new language, by field -- Tabulator binds each column's title to its
+ *      locale, so they change with it and no column is rebuilt:
+ *
+ *          yui_tabulator_relocalize(table, t, {device_id: t("device id")});
+ *
  *      Every key carries an English `defaultValue`, so an app that does not
  *      define it renders exactly what Tabulator rendered before — the
  *      keys are an OPPORTUNITY to translate, never a requirement.
@@ -236,7 +242,18 @@ function yui_tabulator_name_editor(column_def, name_of)
     };
 }
 
-function yui_tabulator_relocalize(table, t)
+/***************************************************************
+ *  yui_tabulator_relocalize() -- see "Put an EXISTING table in the
+ *  current language" above.
+ *
+ *  `titles`, optional: {field: title}, the titles of the columns in
+ *  the new language, already translated. They go in the locale
+ *  (`columns`), where Tabulator binds each column's title: setLocale()
+ *  draws them again without rebuilding a column -- updateDefinition()
+ *  re-renders every row, and a row whose formatter builds something (a
+ *  nested table) builds it anew. A field left out keeps its title.
+ ***************************************************************/
+function yui_tabulator_relocalize(table, t, titles)
 {
     if(!table) {
         return;
@@ -244,6 +261,9 @@ function yui_tabulator_relocalize(table, t)
     try {
         let name = next_lang_name();
         let strings = tabulator_strings(t);
+        if(titles && typeof titles === "object") {
+            strings.columns = Object.assign({}, titles);
+        }
 
         /*  Tabulator DEEP-CLONES options.langs into its localize module when
          *  the table is built, and never looks at the option again: writing a

package/src/yui_tabulator_i18n.test.js

@@ -15,6 +15,7 @@ import {
     yui_tabulator_name_filters,
     yui_tabulator_name_row_selects,
     yui_tabulator_name_editor,
+    yui_tabulator_relocalize,
 } from "./yui_tabulator_i18n.js";
 
 /*  An element double: attributes, and the one child a selector finds.  */
@@ -125,3 +126,41 @@ describe("yui_tabulator_name_editor", () => {
         expect(def.editorParams({})).toEqual({a: 1});
     });
 });
+
+describe("yui_tabulator_relocalize", () => {
+    /*  A table double: what the localize module is given, and the
+     *  locale it is set to.  */
+    function table()
+    {
+        const installed = {};
+        const tb = {
+            options: {},
+            installed,
+            locale: null,
+            modules: {localize: {installLang: (name, strings) => {
+                installed[name] = strings;
+            }}},
+            setLocale: (name) => {
+                tb.locale = name;
+            },
+            getColumns: () => [],
+            element: element(null),
+        };
+        return tb;
+    }
+
+    it("hands the column titles to the locale, where Tabulator binds them", () => {
+        const tb = table();
+        yui_tabulator_relocalize(tb, t, {device_id: "Id dispositivo", value: "Valor"});
+        expect(tb.locale).toBeTruthy();
+        expect(tb.installed[tb.locale].columns).toEqual(
+            {device_id: "Id dispositivo", value: "Valor"});
+        expect(tb.installed[tb.locale].pagination).toBeTruthy();
+    });
+
+    it("without titles, the locale carries none, as before", () => {
+        const tb = table();
+        yui_tabulator_relocalize(tb, t);
+        expect(tb.installed[tb.locale].columns).toBe(undefined);
+    });
+});

package/src/yui_text.js

@@ -36,9 +36,19 @@ export function text_node(value)
  *  Tabulator puts a STRING title in with innerHTML, so a title taken
  *  from a schema (`header`, which the schema editor writes) is markup
  *  unless the column carries a formatter that returns a Node.
+ *
+ *  And it APPENDS that Node to the title's holder, which it never
+ *  empties -- while it runs the formatter again on every setLocale()
+ *  (yui_tabulator_relocalize()). Until 7.26.40 each change of language
+ *  added one more copy of every title ("Id dispositivoId dispositivo").
+ *  The holder (the mock cell's element) is emptied first.
  ************************************************************/
 export function text_title_formatter(cell)
 {
+    const $holder = (typeof cell.getElement === "function")? cell.getElement() : null;
+    if($holder) {
+        $holder.textContent = "";
+    }
     return text_node(cell.getValue());
 }
 

package/src/yui_text.test.js

@@ -48,6 +48,19 @@ describe("text_node()", () => {
         expect($title.textContent).toBe(EVIL);
     });
 
+    test("a title formatted again (every setLocale) is not appended to the old one", () => {
+        /*  What Tabulator does: it appends the Node into the title's
+         *  holder, and on a change of locale runs the formatter again
+         *  on the same holder.  */
+        const $holder = document.createElement("div");
+        const cell = (title) => ({getValue: () => title, getElement: () => $holder});
+        $holder.appendChild(text_title_formatter(cell("Id dispositivo")));
+        $holder.appendChild(text_title_formatter(cell("Device id")));
+        $holder.appendChild(text_title_formatter(cell("Id dispositivo")));
+        expect($holder.textContent).toBe("Id dispositivo");
+        expect($holder.childNodes.length).toBe(1);
+    });
+
     test("the accordion nav shows a section named by a backend as text", async () => {
         const i18next = (await import("i18next")).default;
         await i18next.init({lng: "en", resources: {}});