@yuneta/gobj-ui 7.23.48 → 7.23.50

package/README.md

@@ -1780,6 +1780,51 @@ this facility: it is `formatter: "rowSelection"` with no `titleFormatter` and
 `selectableRows: 1`, and the header checkbox, the count and the bar all mean
 nothing there.
 
+### Clearing a header filter — `yui_table_filter_clear.js`
+
+A column filter is set by typing and undone by deleting what you typed, letter
+by letter, and nothing in the header says it can be dropped at all. With
+several columns filtered, getting back to the whole table is an exercise in
+remembering which ones you touched. One call, on a table that is already built:
+
+```js
+import {yui_table_filter_clear} from "@yuneta/gobj-ui/src/yui_table_filter_clear.js";
+
+table.on("tableBuilt", () => {
+    yui_table_filter_clear(table);
+});
+```
+
+The app must define the i18n key **`"clear"`**. Three decisions are baked in:
+
+- **The ✕ is visible whenever the filter has content, focus or not** — the
+  opposite of the ✕ in a form (`yui_inputs.js`), which shows only on the field
+  being edited so a form full of filled fields does not light up an ✕ on every
+  one. Here the filter is already set, the focus is elsewhere, and the whole
+  point is to see it and drop it; hidden behind focus it would take two clicks.
+- **It clears through `setHeaderFilterValue()`**, not by synthesising a
+  keystroke on the input — what a header filter listens to depends on that
+  column's filter editor.
+- **It decorates the header by walking it**, because a table's columns are
+  often built from data (a treedb schema) and the header rebuilds itself when
+  they change. The walk is idempotent and gated by a single `querySelector`, so
+  repeating it on every render costs nothing.
+
+### Searching a row that is not flat — `yui_row_search.js`
+
+`row_matches(row, term)` is what the treedb topic table's search box uses, and
+it exists because **a treedb row is not flat**: with `list_dict` an fkey
+arrives as a list of objects — `[{id, topic_name, hook_name}]` — and
+`String(val)` of that is `"[object Object]"`. A search written the obvious way
+therefore never finds the place a node is linked to, while the cell plainly
+renders that id: what you see and what is searched are not the same thing.
+
+It walks into lists and objects, and reads only the **`id`** of an fkey:
+`topic_name` and `hook_name` are the same two words on every row, so matching
+them turns any such term into a wildcard over the whole topic. Keys starting
+with `_` are never searched, at any level — scaffolding (`_operation`) and
+metadata (`__md_treedb__`).
+
 ## Conventions
 
 ### i18n: a string must be able to CHANGE language, not just be translated once

package/dist/gobj-ui.cjs.js

@@ -22558,6 +22558,172 @@ function yui_selection_bar(t, opts) {
 	};
 }
 //#endregion
+//#region src/yui_table_filter_clear.js
+/***********************************************************************
+*          yui_table_filter_clear.js
+*
+*      LA ✕ DE LOS FILTROS DE CABECERA DE UNA TABULATOR.
+*
+*      Un filtro de columna se pone escribiendo y se quita BORRANDO lo
+*      escrito, letra a letra, y no hay nada en la cabecera que diga
+*      que se puede quitar.  Con varias columnas filtradas, volver a
+*      ver la tabla entera es un ejercicio de memoria: cuáles toqué.
+*      La ✕ lo dice y lo hace.
+*
+*      TRES DECISIONES QUE NO SON OBVIAS:
+*
+*      - **Se ve mientras el filtro tenga contenido, con foco o sin
+*        él.**  Es al revés que la ✕ de un formulario
+*        (`yui_inputs.js`), que sólo aparece en el campo que se está
+*        editando para no encender un aspa en cada campo relleno.  Aquí
+*        el caso de uso es justo el contrario: el filtro ya está puesto,
+*        el foco está en otra parte, y lo que se quiere es verlo y
+*        quitarlo.  Escondida tras el foco harían falta dos clics.
+*
+*      - **Se borra con la API, no simulando teclas.**
+*        `setHeaderFilterValue(field, "")` es lo que Tabulator ofrece, y
+*        deja el valor y el filtro consistentes.  Sintetizar un `input`
+*        sobre el `<input>` depende de a qué escuche el editor de ese
+*        filtro, que cambia con el tipo de columna.
+*
+*      - **Se recorre la cabecera, no se envuelve el editor.**  Las
+*        columnas se construyen del esquema del topic, así que no hay un
+*        sitio único donde envolver el editor; y la cabecera se rehace
+*        sola cuando cambian las columnas.  El recorrido es idempotente
+*        -- marca lo que ya tiene aspa -- y se dispara con un
+*        `querySelector` de una sola pasada, así que repetirlo en cada
+*        render no cuesta nada.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var MARK = "data-yui-filter-clear";
+/***************************************************************
+*  Pon (o repón) la ✕ de cada filtro de cabecera de `table`.
+*
+*  Idempotente: los que ya la tienen se saltan.
+***************************************************************/
+function decorate(table) {
+	if (!table || !table.element) return;
+	if (!table.element.querySelector(`.tabulator-header-filter:not([${MARK}])`)) return;
+	let list = table.element.querySelectorAll(`.tabulator-header-filter:not([${MARK}])`);
+	for (const $filter of list) {
+		$filter.setAttribute(MARK, "1");
+		let $input = $filter.querySelector("input");
+		if (!$input) continue;
+		let $col = $filter.closest(".tabulator-col");
+		let field = $col ? $col.getAttribute("tabulator-field") : "";
+		if (!field) continue;
+		$filter.classList.add("yui-filter-has-clear");
+		let $btn = (0, _yuneta_gobj_js.createElement2)(["button", {
+			type: "button",
+			class: "delete is-small yui-filter-clear",
+			tabindex: "-1",
+			title: i18next.default.t("clear"),
+			"aria-label": i18next.default.t("clear"),
+			"data-i18n-title": "clear",
+			"data-i18n-aria-label": "clear"
+		}]);
+		const sync = () => {
+			$btn.classList.toggle("is-visible", !!$input.value);
+		};
+		$input.addEventListener("input", sync);
+		$input.addEventListener("change", sync);
+		$btn.addEventListener("click", (event) => {
+			event.stopPropagation();
+			table.setHeaderFilterValue(field, "");
+			sync();
+		});
+		$filter.appendChild($btn);
+		sync();
+	}
+}
+/***************************************************************
+*  Engancha la ✕ a una tabla ya creada.
+*
+*  Se llama una vez, con la tabla construida.  Los enganches
+*  cubren los dos momentos en que la cabecera aparece o se
+*  rehace: cuando se construye y cuando cambian las columnas.
+***************************************************************/
+function yui_table_filter_clear(table) {
+	if (!table) return;
+	decorate(table);
+	table.on("renderComplete", () => {
+		decorate(table);
+	});
+	table.on("columnVisibilityChanged", () => {
+		decorate(table);
+	});
+}
+//#endregion
+//#region src/yui_row_search.js
+/***********************************************************************
+*          yui_row_search.js
+*
+*      ¿ESTÁ ESTE TÉRMINO EN ESTA FILA?
+*
+*      La caja de búsqueda de una tabla de treedb miraba los valores de
+*      la fila con `String(val)`, y una fila de treedb no es plana: un
+*      fkey llega como una LISTA DE OBJETOS
+*      `[{id, topic_name, hook_name}]`, y `String()` de eso es
+*      `"[object Object]"`.  O sea que buscar el taller de un equipo --
+*      que es donde vive el dato que un operador tiene en la cabeza --
+*      no encontraba nunca nada, y la caja no daba ninguna pista de que
+*      había mirado en otro sitio.
+*
+*      DOS REGLAS, Y LA SEGUNDA ES LA QUE HACE QUE SIRVA:
+*
+*      - Se baja por listas y objetos hasta una profundidad corta: un
+*        fkey está a dos niveles y nada de lo que se busca está más
+*        hondo.
+*      - **De un fkey se mira sólo el `id`.**  `topic_name` y
+*        `hook_name` son las MISMAS dos palabras en todas las filas, así
+*        que mirarlas convierte el término en un comodín: buscar
+*        "devices" traería el topic entero.  El `id` es lo único que
+*        nombra la cosa enlazada.
+*
+*      Las claves que empiezan por `_` no se miran en ningún nivel: son
+*      del armazón (`_check_box_state_`, `_operation`) o metadatos
+*      (`__md_treedb__`), y nadie busca por ellas.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var MAX_DEPTH = 4;
+/***************************************************************
+*  Un fkey, tal y como `nodes` lo contesta con `list_dict`.
+***************************************************************/
+function is_fkey_ref(value) {
+	return !!value && typeof value === "object" && !Array.isArray(value) && "id" in value && "topic_name" in value && "hook_name" in value;
+}
+/***************************************************************
+*  ¿Contiene `value` el término? El término viene YA en
+*  minúsculas: quien busca lo baja una vez y no una por celda.
+***************************************************************/
+function value_matches(value, term, depth) {
+	if (value === null || value === void 0) return false;
+	if (depth > MAX_DEPTH) return false;
+	if (Array.isArray(value)) return value.some((v) => value_matches(v, term, depth + 1));
+	if (typeof value === "object") {
+		if (is_fkey_ref(value)) return value_matches(value.id, term, depth + 1);
+		return Object.entries(value).some(([key, v]) => {
+			if (key.startsWith("_")) return false;
+			return value_matches(v, term, depth + 1);
+		});
+	}
+	return String(value).toLowerCase().includes(term);
+}
+/***************************************************************
+*  ¿Está el término en alguna parte de esta fila?
+***************************************************************/
+function row_matches(row, term) {
+	if (!row || typeof row !== "object" || !term) return false;
+	return Object.entries(row).some(([key, value]) => {
+		if (key.startsWith("_")) return false;
+		return value_matches(value, term, 0);
+	});
+}
+//#endregion
 //#region src/treedb_write_plan.js
 /***********************************************************************
 *          treedb_write_plan.js
@@ -23631,7 +23797,8 @@ function create_tabulator(gobj) {
 				50,
 				100,
 				200,
-				500
+				500,
+				true
 			],
 			ajaxURL: "nodes",
 			ajaxRequestFunc: function(url, config, params) {
@@ -23674,17 +23841,32 @@ function create_tabulator(gobj) {
 				single_page = max === false || max <= 1;
 			} else {
 				let size = tabulator.getPageSize();
-				single_page = !size || n <= size;
+				single_page = size === true || !size || n <= size;
 			}
 		} catch (e) {
 			single_page = true;
 		}
+		let total_rows;
+		if (paged) total_rows = total;
+		else try {
+			total_rows = tabulator.getDataCount();
+		} catch (e) {
+			total_rows = n;
+		}
+		let min_size = 0;
+		let sizes = tabulator.options ? tabulator.options.paginationSizeSelector : null;
+		if (Array.isArray(sizes)) sizes.forEach(function(size) {
+			if (typeof size === "number" && (!min_size || size < min_size)) min_size = size;
+		});
+		let no_paginator = single_page && (!min_size || typeof total_rows !== "number" || total_rows <= min_size);
 		tabulator.element.classList.toggle("yui-single-page", single_page);
+		tabulator.element.classList.toggle("yui-no-paginator", no_paginator);
 	}
 	tabulator._ready = false;
 	tabulator.on("tableBuilt", function() {
 		tabulator._ready = true;
 		update_rowcount();
+		yui_table_filter_clear(tabulator);
 		if (tabulator._pendingData !== void 0) {
 			tabulator.setData(tabulator._pendingData);
 			delete tabulator._pendingData;
@@ -24999,11 +25181,12 @@ function request_page(gobj, page, size) {
 			reject,
 			timer
 		};
+		const all = size === true;
 		(0, _yuneta_gobj_js.gobj_publish_event)(gobj, "EV_REQUEST_PAGE", {
 			topic_name: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "topic_name"),
 			req_id,
-			from: (page - 1) * size + 1,
-			limit: size
+			from: all ? 1 : (page - 1) * size + 1,
+			limit: all ? 0 : size
 		});
 	});
 }
@@ -25085,11 +25268,7 @@ function ac_search(gobj, event, kw, src) {
 		return 0;
 	}
 	tabulator.setFilter(function(data) {
-		return Object.entries(data).some(([key, val]) => {
-			if (key.startsWith("_")) return false;
-			if (val === null || val === void 0) return false;
-			return String(val).toLowerCase().includes(term);
-		});
+		return row_matches(data, term);
 	});
 	return 0;
 }

package/dist/gobj-ui.es.js

@@ -22553,6 +22553,172 @@ function yui_selection_bar(t, opts) {
 	};
 }
 //#endregion
+//#region src/yui_table_filter_clear.js
+/***********************************************************************
+*          yui_table_filter_clear.js
+*
+*      LA ✕ DE LOS FILTROS DE CABECERA DE UNA TABULATOR.
+*
+*      Un filtro de columna se pone escribiendo y se quita BORRANDO lo
+*      escrito, letra a letra, y no hay nada en la cabecera que diga
+*      que se puede quitar.  Con varias columnas filtradas, volver a
+*      ver la tabla entera es un ejercicio de memoria: cuáles toqué.
+*      La ✕ lo dice y lo hace.
+*
+*      TRES DECISIONES QUE NO SON OBVIAS:
+*
+*      - **Se ve mientras el filtro tenga contenido, con foco o sin
+*        él.**  Es al revés que la ✕ de un formulario
+*        (`yui_inputs.js`), que sólo aparece en el campo que se está
+*        editando para no encender un aspa en cada campo relleno.  Aquí
+*        el caso de uso es justo el contrario: el filtro ya está puesto,
+*        el foco está en otra parte, y lo que se quiere es verlo y
+*        quitarlo.  Escondida tras el foco harían falta dos clics.
+*
+*      - **Se borra con la API, no simulando teclas.**
+*        `setHeaderFilterValue(field, "")` es lo que Tabulator ofrece, y
+*        deja el valor y el filtro consistentes.  Sintetizar un `input`
+*        sobre el `<input>` depende de a qué escuche el editor de ese
+*        filtro, que cambia con el tipo de columna.
+*
+*      - **Se recorre la cabecera, no se envuelve el editor.**  Las
+*        columnas se construyen del esquema del topic, así que no hay un
+*        sitio único donde envolver el editor; y la cabecera se rehace
+*        sola cuando cambian las columnas.  El recorrido es idempotente
+*        -- marca lo que ya tiene aspa -- y se dispara con un
+*        `querySelector` de una sola pasada, así que repetirlo en cada
+*        render no cuesta nada.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var MARK = "data-yui-filter-clear";
+/***************************************************************
+*  Pon (o repón) la ✕ de cada filtro de cabecera de `table`.
+*
+*  Idempotente: los que ya la tienen se saltan.
+***************************************************************/
+function decorate(table) {
+	if (!table || !table.element) return;
+	if (!table.element.querySelector(`.tabulator-header-filter:not([${MARK}])`)) return;
+	let list = table.element.querySelectorAll(`.tabulator-header-filter:not([${MARK}])`);
+	for (const $filter of list) {
+		$filter.setAttribute(MARK, "1");
+		let $input = $filter.querySelector("input");
+		if (!$input) continue;
+		let $col = $filter.closest(".tabulator-col");
+		let field = $col ? $col.getAttribute("tabulator-field") : "";
+		if (!field) continue;
+		$filter.classList.add("yui-filter-has-clear");
+		let $btn = createElement2(["button", {
+			type: "button",
+			class: "delete is-small yui-filter-clear",
+			tabindex: "-1",
+			title: i18next.t("clear"),
+			"aria-label": i18next.t("clear"),
+			"data-i18n-title": "clear",
+			"data-i18n-aria-label": "clear"
+		}]);
+		const sync = () => {
+			$btn.classList.toggle("is-visible", !!$input.value);
+		};
+		$input.addEventListener("input", sync);
+		$input.addEventListener("change", sync);
+		$btn.addEventListener("click", (event) => {
+			event.stopPropagation();
+			table.setHeaderFilterValue(field, "");
+			sync();
+		});
+		$filter.appendChild($btn);
+		sync();
+	}
+}
+/***************************************************************
+*  Engancha la ✕ a una tabla ya creada.
+*
+*  Se llama una vez, con la tabla construida.  Los enganches
+*  cubren los dos momentos en que la cabecera aparece o se
+*  rehace: cuando se construye y cuando cambian las columnas.
+***************************************************************/
+function yui_table_filter_clear(table) {
+	if (!table) return;
+	decorate(table);
+	table.on("renderComplete", () => {
+		decorate(table);
+	});
+	table.on("columnVisibilityChanged", () => {
+		decorate(table);
+	});
+}
+//#endregion
+//#region src/yui_row_search.js
+/***********************************************************************
+*          yui_row_search.js
+*
+*      ¿ESTÁ ESTE TÉRMINO EN ESTA FILA?
+*
+*      La caja de búsqueda de una tabla de treedb miraba los valores de
+*      la fila con `String(val)`, y una fila de treedb no es plana: un
+*      fkey llega como una LISTA DE OBJETOS
+*      `[{id, topic_name, hook_name}]`, y `String()` de eso es
+*      `"[object Object]"`.  O sea que buscar el taller de un equipo --
+*      que es donde vive el dato que un operador tiene en la cabeza --
+*      no encontraba nunca nada, y la caja no daba ninguna pista de que
+*      había mirado en otro sitio.
+*
+*      DOS REGLAS, Y LA SEGUNDA ES LA QUE HACE QUE SIRVA:
+*
+*      - Se baja por listas y objetos hasta una profundidad corta: un
+*        fkey está a dos niveles y nada de lo que se busca está más
+*        hondo.
+*      - **De un fkey se mira sólo el `id`.**  `topic_name` y
+*        `hook_name` son las MISMAS dos palabras en todas las filas, así
+*        que mirarlas convierte el término en un comodín: buscar
+*        "devices" traería el topic entero.  El `id` es lo único que
+*        nombra la cosa enlazada.
+*
+*      Las claves que empiezan por `_` no se miran en ningún nivel: son
+*      del armazón (`_check_box_state_`, `_operation`) o metadatos
+*      (`__md_treedb__`), y nadie busca por ellas.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var MAX_DEPTH = 4;
+/***************************************************************
+*  Un fkey, tal y como `nodes` lo contesta con `list_dict`.
+***************************************************************/
+function is_fkey_ref(value) {
+	return !!value && typeof value === "object" && !Array.isArray(value) && "id" in value && "topic_name" in value && "hook_name" in value;
+}
+/***************************************************************
+*  ¿Contiene `value` el término? El término viene YA en
+*  minúsculas: quien busca lo baja una vez y no una por celda.
+***************************************************************/
+function value_matches(value, term, depth) {
+	if (value === null || value === void 0) return false;
+	if (depth > MAX_DEPTH) return false;
+	if (Array.isArray(value)) return value.some((v) => value_matches(v, term, depth + 1));
+	if (typeof value === "object") {
+		if (is_fkey_ref(value)) return value_matches(value.id, term, depth + 1);
+		return Object.entries(value).some(([key, v]) => {
+			if (key.startsWith("_")) return false;
+			return value_matches(v, term, depth + 1);
+		});
+	}
+	return String(value).toLowerCase().includes(term);
+}
+/***************************************************************
+*  ¿Está el término en alguna parte de esta fila?
+***************************************************************/
+function row_matches(row, term) {
+	if (!row || typeof row !== "object" || !term) return false;
+	return Object.entries(row).some(([key, value]) => {
+		if (key.startsWith("_")) return false;
+		return value_matches(value, term, 0);
+	});
+}
+//#endregion
 //#region src/treedb_write_plan.js
 /***********************************************************************
 *          treedb_write_plan.js
@@ -23626,7 +23792,8 @@ function create_tabulator(gobj) {
 				50,
 				100,
 				200,
-				500
+				500,
+				true
 			],
 			ajaxURL: "nodes",
 			ajaxRequestFunc: function(url, config, params) {
@@ -23669,17 +23836,32 @@ function create_tabulator(gobj) {
 				single_page = max === false || max <= 1;
 			} else {
 				let size = tabulator.getPageSize();
-				single_page = !size || n <= size;
+				single_page = size === true || !size || n <= size;
 			}
 		} catch (e) {
 			single_page = true;
 		}
+		let total_rows;
+		if (paged) total_rows = total;
+		else try {
+			total_rows = tabulator.getDataCount();
+		} catch (e) {
+			total_rows = n;
+		}
+		let min_size = 0;
+		let sizes = tabulator.options ? tabulator.options.paginationSizeSelector : null;
+		if (Array.isArray(sizes)) sizes.forEach(function(size) {
+			if (typeof size === "number" && (!min_size || size < min_size)) min_size = size;
+		});
+		let no_paginator = single_page && (!min_size || typeof total_rows !== "number" || total_rows <= min_size);
 		tabulator.element.classList.toggle("yui-single-page", single_page);
+		tabulator.element.classList.toggle("yui-no-paginator", no_paginator);
 	}
 	tabulator._ready = false;
 	tabulator.on("tableBuilt", function() {
 		tabulator._ready = true;
 		update_rowcount();
+		yui_table_filter_clear(tabulator);
 		if (tabulator._pendingData !== void 0) {
 			tabulator.setData(tabulator._pendingData);
 			delete tabulator._pendingData;
@@ -24994,11 +25176,12 @@ function request_page(gobj, page, size) {
 			reject,
 			timer
 		};
+		const all = size === true;
 		gobj_publish_event(gobj, "EV_REQUEST_PAGE", {
 			topic_name: gobj_read_str_attr(gobj, "topic_name"),
 			req_id,
-			from: (page - 1) * size + 1,
-			limit: size
+			from: all ? 1 : (page - 1) * size + 1,
+			limit: all ? 0 : size
 		});
 	});
 }
@@ -25080,11 +25263,7 @@ function ac_search(gobj, event, kw, src) {
 		return 0;
 	}
 	tabulator.setFilter(function(data) {
-		return Object.entries(data).some(([key, val]) => {
-			if (key.startsWith("_")) return false;
-			if (val === null || val === void 0) return false;
-			return String(val).toLowerCase().includes(term);
-		});
+		return row_matches(data, term);
 	});
 	return 0;
 }

package/package.json

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

package/src/c_yui_treedb_topic_with_form.css

@@ -23,10 +23,20 @@
     line-height: 1.5;
 }
 
-/*  All rows fit in one page: the page-size selector and the
- *  First/Prev/1/Next/Last strip are pure noise (worst on mobile) —
- *  update_rowcount() toggles the class on every data change.  */
-.tabulator.yui-single-page .tabulator-footer .tabulator-paginator {
+/*  All rows fit in one page: the First/Prev/1/Next/Last strip is pure
+ *  noise (worst on mobile) — update_rowcount() toggles the class on every
+ *  data change. The page-size SELECTOR stays: it is what made the table
+ *  one page in the first place ("All" on a topic of 300 rows), so hiding
+ *  it together with the buttons left the reader no way back to 50.  */
+.tabulator.yui-single-page .tabulator-footer .tabulator-paginator .tabulator-page,
+.tabulator.yui-single-page .tabulator-footer .tabulator-paginator .tabulator-pages {
+    display: none;
+}
+
+/*  No choice in the selector would change anything either — the topic is
+ *  smaller than the smallest page size it offers — so the whole strip,
+ *  label and select included, is noise.  */
+.tabulator.yui-no-paginator .tabulator-footer .tabulator-paginator {
     display: none;
 }
 

package/src/c_yui_treedb_topic_with_form.js

@@ -85,6 +85,9 @@ import {
     yui_clear_selection,
 } from "./yui_table_select.js";
 
+import {yui_table_filter_clear} from "./yui_table_filter_clear.js";
+import {row_matches} from "./yui_row_search.js";
+
 import {t} from "i18next";
 
 import {plan_treedb_writes} from "./treedb_write_plan.js";
@@ -1346,7 +1349,13 @@ function create_tabulator(gobj)
             paginationMode:         "remote",
             filterMode:             "local",
             paginationSize:         page_size,
-            paginationSizeSelector: [50, 100, 200, 500],
+            /*  `true` is Tabulator's "All", and here it is not a courtesy:
+             *  `filterMode: "local"` means the header filters and the search
+             *  box only see the page that is loaded, so on a topic that does
+             *  not fit, searching for something on page 17 finds nothing.
+             *  "All" is the way out, and the backend has it -- `nodes` takes
+             *  `limit: 0` for "every one", answering the plain list. */
+            paginationSizeSelector: [50, 100, 200, 500, true],
             ajaxURL:                "nodes",   /*  dummy: only fires the func  */
             ajaxRequestFunc: function(url, config, params) {
                 /*  Widget plumbing, not an action: Tabulator wants a PROMISE
@@ -1453,20 +1462,60 @@ function create_tabulator(gobj)
                 single_page = (max === false) || max <= 1;
             } else {
                 /*  Derived from the count and the page size rather than read
-                 *  from getPageMax(), which is stale in the filter path. */
+                 *  from getPageMax(), which is stale in the filter path.
+                 *  `true` is Tabulator's "All" and it is the SIZE itself, so
+                 *  it has to be read as a word: compared as a number it is 1,
+                 *  and a table showing every one of its 300 rows in a single
+                 *  page answered that it needed 300 pages.  */
                 let size = tabulator.getPageSize();
-                single_page = !size || n <= size;
+                single_page = (size === true) || !size || n <= size;
             }
         } catch(e) {
             single_page = true;
         }
+        /*  The page-size selector lives INSIDE the paginator, so hiding the
+         *  whole strip when everything fits took away the very control that
+         *  got the reader there: pick "All" on a topic of 300 rows and the
+         *  table becomes one page, the paginator goes, and 50 is
+         *  unreachable. The selector is noise only when no choice in it
+         *  would change anything -- when the topic is smaller than the
+         *  smallest size it offers. Measure that on the WHOLE topic, never
+         *  on the filtered count, or typing a filter that leaves 3 rows
+         *  takes the selector away too.  */
+        let total_rows;
+        if(paged) {
+            total_rows = total;
+        } else {
+            try {
+                total_rows = tabulator.getDataCount();
+            } catch(e) {
+                total_rows = n;
+            }
+        }
+        let min_size = 0;
+        let sizes = tabulator.options? tabulator.options.paginationSizeSelector : null;
+        if(Array.isArray(sizes)) {
+            sizes.forEach(function(size) {
+                if(typeof size === "number" && (!min_size || size < min_size)) {
+                    min_size = size;
+                }
+            });
+        }
+        let no_paginator = single_page &&
+            (!min_size || typeof total_rows !== "number" || total_rows <= min_size);
+
         tabulator.element.classList.toggle("yui-single-page", single_page);
+        tabulator.element.classList.toggle("yui-no-paginator", no_paginator);
     }
 
     tabulator._ready = false;
     tabulator.on("tableBuilt", function() {
         tabulator._ready = true;
         update_rowcount();
+        /*  La ✕ de cada filtro de cabecera. Un filtro se quita borrando lo
+         *  escrito, y con varias columnas filtradas volver a la tabla entera
+         *  era acordarse de cuáles se tocaron. */
+        yui_table_filter_clear(tabulator);
         if(tabulator._pendingData !== undefined) {
             tabulator.setData(tabulator._pendingData);
             delete tabulator._pendingData;
@@ -3370,14 +3419,21 @@ function request_page(gobj, page, size)
 
         priv._pending_pages[req_id] = {resolve: resolve, reject: reject, timer: timer};
 
+        /*  "All" (Tabulator sends the size as `true`): `nodes` says every
+         *  one with `limit: 0`, and then it answers the plain list -- which
+         *  nodes_answer() reads as a single page, so the paginator hides and
+         *  every filter sees every row. Arithmetic on `true` would send
+         *  `limit: true` to a backend that wants an integer. */
+        const all = (size === true);
+
         gobj_publish_event(
             gobj,
             "EV_REQUEST_PAGE",
             {
                 topic_name: gobj_read_str_attr(gobj, "topic_name"),
                 req_id:     req_id,
-                from:       (page - 1) * size + 1,   /*  `nodes` counts from 1  */
-                limit:      size
+                from:       all? 1: (page - 1) * size + 1,  /*  `nodes` counts from 1  */
+                limit:      all? 0: size
             }
         );
     });
@@ -3482,16 +3538,13 @@ function ac_search(gobj, event, kw, src)
         return 0;
     }
 
+    /*  A treedb row is not flat: an fkey arrives as a list of objects, and
+     *  `String()` of that is "[object Object]" -- so searching for the
+     *  workshop of a meter, which is where the value a person has in mind
+     *  lives, never found anything. `row_matches()` walks into them, and
+     *  reads only the `id` of an fkey. See yui_row_search.js.  */
     tabulator.setFilter(function(data) {
-        return Object.entries(data).some(([key, val]) => {
-            if(key.startsWith('_')) {
-                return false;
-            }
-            if(val === null || val === undefined) {
-                return false;
-            }
-            return String(val).toLowerCase().includes(term);
-        });
+        return row_matches(data, term);
     });
 
     return 0;

package/src/yui_row_search.js

@@ -0,0 +1,96 @@
+/***********************************************************************
+ *          yui_row_search.js
+ *
+ *      ¿ESTÁ ESTE TÉRMINO EN ESTA FILA?
+ *
+ *      La caja de búsqueda de una tabla de treedb miraba los valores de
+ *      la fila con `String(val)`, y una fila de treedb no es plana: un
+ *      fkey llega como una LISTA DE OBJETOS
+ *      `[{id, topic_name, hook_name}]`, y `String()` de eso es
+ *      `"[object Object]"`.  O sea que buscar el taller de un equipo --
+ *      que es donde vive el dato que un operador tiene en la cabeza --
+ *      no encontraba nunca nada, y la caja no daba ninguna pista de que
+ *      había mirado en otro sitio.
+ *
+ *      DOS REGLAS, Y LA SEGUNDA ES LA QUE HACE QUE SIRVA:
+ *
+ *      - Se baja por listas y objetos hasta una profundidad corta: un
+ *        fkey está a dos niveles y nada de lo que se busca está más
+ *        hondo.
+ *      - **De un fkey se mira sólo el `id`.**  `topic_name` y
+ *        `hook_name` son las MISMAS dos palabras en todas las filas, así
+ *        que mirarlas convierte el término en un comodín: buscar
+ *        "devices" traería el topic entero.  El `id` es lo único que
+ *        nombra la cosa enlazada.
+ *
+ *      Las claves que empiezan por `_` no se miran en ningún nivel: son
+ *      del armazón (`_check_box_state_`, `_operation`) o metadatos
+ *      (`__md_treedb__`), y nadie busca por ellas.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+const MAX_DEPTH = 4;
+
+
+/***************************************************************
+ *  Un fkey, tal y como `nodes` lo contesta con `list_dict`.
+ ***************************************************************/
+function is_fkey_ref(value)
+{
+    return !!value
+        && typeof value === "object"
+        && !Array.isArray(value)
+        && ("id" in value)
+        && ("topic_name" in value)
+        && ("hook_name" in value);
+}
+
+/***************************************************************
+ *  ¿Contiene `value` el término? El término viene YA en
+ *  minúsculas: quien busca lo baja una vez y no una por celda.
+ ***************************************************************/
+function value_matches(value, term, depth)
+{
+    if(value === null || value === undefined) {
+        return false;
+    }
+    if(depth > MAX_DEPTH) {
+        return false;
+    }
+    if(Array.isArray(value)) {
+        return value.some((v) => value_matches(v, term, depth + 1));
+    }
+    if(typeof value === "object") {
+        if(is_fkey_ref(value)) {
+            return value_matches(value.id, term, depth + 1);
+        }
+        return Object.entries(value).some(([key, v]) => {
+            if(key.startsWith("_")) {
+                return false;
+            }
+            return value_matches(v, term, depth + 1);
+        });
+    }
+    return String(value).toLowerCase().includes(term);
+}
+
+/***************************************************************
+ *  ¿Está el término en alguna parte de esta fila?
+ ***************************************************************/
+function row_matches(row, term)
+{
+    if(!row || typeof row !== "object" || !term) {
+        return false;
+    }
+    return Object.entries(row).some(([key, value]) => {
+        if(key.startsWith("_")) {
+            return false;
+        }
+        return value_matches(value, term, 0);
+    });
+}
+
+
+export {row_matches, value_matches, is_fkey_ref};

package/src/yui_row_search.test.js

@@ -0,0 +1,62 @@
+import {describe, it, expect} from "vitest";
+
+import {row_matches, is_fkey_ref} from "./yui_row_search.js";
+
+describe("row_matches", () => {
+    const row = {
+        id: "E22003089",
+        name: "",
+        place: [
+            {
+                id: "es.madrid.bm-madrid-fuencarral-m-av.local-13-torno",
+                topic_name: "places",
+                hook_name: "devices"
+            }
+        ],
+        tension: 400,
+        enabled: true,
+        _operation: "hidden",
+        __md_treedb__: {topic_name: "devices"}
+    };
+
+    it("finds a plain field", () => {
+        expect(row_matches(row, "e22003089")).toBe(true);
+    });
+
+    it("finds a number", () => {
+        expect(row_matches(row, "400")).toBe(true);
+    });
+
+    it("finds a value INSIDE an fkey, which is the whole point", () => {
+        expect(row_matches(row, "local-13-torno")).toBe(true);
+    });
+
+    it("does NOT match the structural halves of an fkey", () => {
+        /*  `topic_name`/`hook_name` are the same two words on every row:
+         *  matching them turns the term into a wildcard.  */
+        expect(row_matches(row, "places")).toBe(false);
+        expect(row_matches(row, "hook")).toBe(false);
+    });
+
+    it("ignores keys of the scaffolding", () => {
+        expect(row_matches(row, "hidden")).toBe(false);
+    });
+
+    it("says no when nothing matches", () => {
+        expect(row_matches(row, "zzz")).toBe(false);
+    });
+
+    it("says no for an empty term or a missing row", () => {
+        expect(row_matches(row, "")).toBe(false);
+        expect(row_matches(null, "a")).toBe(false);
+    });
+});
+
+describe("is_fkey_ref", () => {
+    it("wants the three keys", () => {
+        expect(is_fkey_ref({id: "a", topic_name: "t", hook_name: "h"})).toBe(true);
+        expect(is_fkey_ref({id: "a"})).toBe(false);
+        expect(is_fkey_ref(["a"])).toBe(false);
+        expect(is_fkey_ref(null)).toBe(false);
+    });
+});

package/src/yui_table_filter_clear.css

@@ -0,0 +1,37 @@
+/***********************************************************************
+ *          yui_table_filter_clear.css
+ *
+ *      La ✕ de un filtro de cabecera (yui_table_filter_clear.js).
+ *
+ *      Al reves que la ✕ de un formulario (yui_inputs.css), esta se ve
+ *      SIN foco: el filtro ya esta puesto, el foco esta en otra parte,
+ *      y lo que se quiere es verlo y quitarlo.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+.tabulator-header-filter.yui-filter-has-clear {
+    position: relative;
+}
+
+/*  Sitio para el aspa dentro del propio input, para que no se coma
+ *  ancho de columna.  */
+.tabulator-header-filter.yui-filter-has-clear input {
+    padding-right: 1.6em;
+}
+
+/*  Dos clases sobre el elemento para ganarle a las reglas propias de
+ *  Bulma para `.delete` (position:relative; display:inline-block) sin
+ *  depender de que hoja carga la ultima.  */
+.tabulator-header-filter .yui-filter-clear {
+    position: absolute;
+    top: 50%;
+    right: 0.25em;
+    transform: translateY(-50%);
+    display: none;
+    z-index: 4;
+}
+
+.tabulator-header-filter .yui-filter-clear.is-visible {
+    display: inline-block;
+}

package/src/yui_table_filter_clear.js

@@ -0,0 +1,151 @@
+/***********************************************************************
+ *          yui_table_filter_clear.js
+ *
+ *      LA ✕ DE LOS FILTROS DE CABECERA DE UNA TABULATOR.
+ *
+ *      Un filtro de columna se pone escribiendo y se quita BORRANDO lo
+ *      escrito, letra a letra, y no hay nada en la cabecera que diga
+ *      que se puede quitar.  Con varias columnas filtradas, volver a
+ *      ver la tabla entera es un ejercicio de memoria: cuáles toqué.
+ *      La ✕ lo dice y lo hace.
+ *
+ *      TRES DECISIONES QUE NO SON OBVIAS:
+ *
+ *      - **Se ve mientras el filtro tenga contenido, con foco o sin
+ *        él.**  Es al revés que la ✕ de un formulario
+ *        (`yui_inputs.js`), que sólo aparece en el campo que se está
+ *        editando para no encender un aspa en cada campo relleno.  Aquí
+ *        el caso de uso es justo el contrario: el filtro ya está puesto,
+ *        el foco está en otra parte, y lo que se quiere es verlo y
+ *        quitarlo.  Escondida tras el foco harían falta dos clics.
+ *
+ *      - **Se borra con la API, no simulando teclas.**
+ *        `setHeaderFilterValue(field, "")` es lo que Tabulator ofrece, y
+ *        deja el valor y el filtro consistentes.  Sintetizar un `input`
+ *        sobre el `<input>` depende de a qué escuche el editor de ese
+ *        filtro, que cambia con el tipo de columna.
+ *
+ *      - **Se recorre la cabecera, no se envuelve el editor.**  Las
+ *        columnas se construyen del esquema del topic, así que no hay un
+ *        sitio único donde envolver el editor; y la cabecera se rehace
+ *        sola cuando cambian las columnas.  El recorrido es idempotente
+ *        -- marca lo que ya tiene aspa -- y se dispara con un
+ *        `querySelector` de una sola pasada, así que repetirlo en cada
+ *        render no cuesta nada.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import i18next from "i18next";
+
+import {createElement2} from "@yuneta/gobj-js";
+
+import "./yui_table_filter_clear.css";
+
+
+const MARK = "data-yui-filter-clear";
+
+
+/***************************************************************
+ *  Pon (o repón) la ✕ de cada filtro de cabecera de `table`.
+ *
+ *  Idempotente: los que ya la tienen se saltan.
+ ***************************************************************/
+function decorate(table)
+{
+    if(!table || !table.element) {
+        return;
+    }
+    let $pending = table.element.querySelector(`.tabulator-header-filter:not([${MARK}])`);
+    if(!$pending) {
+        return;     /*  nada nuevo en la cabecera  */
+    }
+
+    let list = table.element.querySelectorAll(`.tabulator-header-filter:not([${MARK}])`);
+    for(const $filter of list) {
+        $filter.setAttribute(MARK, "1");
+
+        let $input = $filter.querySelector("input");
+        if(!$input) {
+            continue;   /*  un filtro que no se escribe: un select, un rango  */
+        }
+
+        /*  El campo se lee del `.tabulator-col` que lo contiene, que es
+         *  quien lo lleva; el `<input>` no sabe de qué columna es.  */
+        let $col = $filter.closest(".tabulator-col");
+        let field = $col? $col.getAttribute("tabulator-field"): "";
+        if(!field) {
+            continue;   /*  sin campo no hay a quién decirle que se limpie  */
+        }
+
+        $filter.classList.add("yui-filter-has-clear");
+
+        /*  La clave viaja con el botón: un `title` puesto con t() al
+         *  construir es invisible para refresh_language(), y se queda en
+         *  el idioma de aquel momento para siempre.  */
+        let $btn = createElement2(["button", {
+            type:                   "button",
+            class:                  "delete is-small yui-filter-clear",
+            tabindex:               "-1",
+            title:                  i18next.t("clear"),
+            "aria-label":           i18next.t("clear"),
+            "data-i18n-title":      "clear",
+            "data-i18n-aria-label": "clear"
+        }]);
+
+        const sync = () => {
+            $btn.classList.toggle("is-visible", !!$input.value);
+        };
+
+        $input.addEventListener("input", sync);
+        $input.addEventListener("change", sync);
+        $btn.addEventListener("click", (event) => {
+            event.stopPropagation();    /*  no ordenar la columna al pulsar  */
+            table.setHeaderFilterValue(field, "");
+            sync();
+        });
+
+        $filter.appendChild($btn);
+        sync();
+    }
+}
+
+/***************************************************************
+ *  Engancha la ✕ a una tabla ya creada.
+ *
+ *  Se llama una vez, con la tabla construida.  Los enganches
+ *  cubren los dos momentos en que la cabecera aparece o se
+ *  rehace: cuando se construye y cuando cambian las columnas.
+ ***************************************************************/
+export function yui_table_filter_clear(table)
+{
+    if(!table) {
+        return;
+    }
+    decorate(table);
+    table.on("renderComplete", () => {
+        decorate(table);
+    });
+    table.on("columnVisibilityChanged", () => {
+        decorate(table);
+    });
+}
+
+/***************************************************************
+ *  Repasa el estado de las ✕ tras un cambio que no vino del
+ *  teclado -- limpiar todos los filtros, cargar una vista
+ *  guardada -- porque eso no dispara `input`.
+ ***************************************************************/
+export function yui_table_filter_clear_refresh(table)
+{
+    if(!table || !table.element) {
+        return;
+    }
+    for(const $filter of table.element.querySelectorAll(".yui-filter-has-clear")) {
+        let $input = $filter.querySelector("input");
+        let $btn = $filter.querySelector(".yui-filter-clear");
+        if($input && $btn) {
+            $btn.classList.toggle("is-visible", !!$input.value);
+        }
+    }
+}