@yuneta/gobj-ui 7.11.1 → 7.13.0

package/README.md

@@ -1031,6 +1031,23 @@ from the view's `EV_LANGUAGE_CHANGED` action.
 table that is not built yet or is already gone. Clear the selection after
 acting on it: the rows it names are no longer there.
 
+**In the treedb topic table** (`C_YUI_TREEDB_TOPIC_WITH_FORM`, and through it
+`C_YUI_TREEDB_TOPICS`) the bar is **opt-in**: pass `with_selection_bar: true`.
+It is off by default because the bar takes its words from the HOST's i18n, and
+a host that has not defined `"{{n}} selected"` and `"clear selection"` renders
+the keys. It shows only while the table is in **edition mode** — outside it the
+checkbox column is hidden, and a count of rows nobody can see or untick is a
+count you cannot act on. The bar carries no action there: the table's own
+toolbar already has Delete and Copy, and they act on the selection.
+
+`yui_selection_column({visible: false})` is for a table that reveals the column
+only in an edit mode — `C_YUI_TREEDB_TOPIC_WITH_FORM` shows it with
+`showColumn("_check_box_state_")`, and takes its `selectableRows` and every
+read of its selection from here too. A **radio** column (pick ONE row) is not
+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.
+
 ## Conventions
 
 ### i18n: a string must be able to CHANGE language, not just be translated once

package/dist/gobj-ui.cjs.js

@@ -14496,6 +14496,7 @@ var attrs_table$6 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "treedb_name", 0, null, "Remote TreeDB service name"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "descs", 0, null, "Description of topics"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_remote_paging", 0, false, "Each topic table pulls its rows a PAGE at a time (`nodes` from/limit) instead of loading the topic whole. Safe against a backend that cannot page: it answers the whole list, which the table reads as one page"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_selection_bar", 0, false, "Each topic table shows the shared selection bar (\"N selected\" + a way out) above it while in edition mode. OFF by default: the bar takes its words from the HOST's i18n, so a host that turns it on must define \"{{n}} selected\" and \"clear selection\""),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "system", 0, false, "Manage system topics (true) or user topics (false)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "tabs_style", 0, "is-toggle is-fullwidth", "Bulma tab styling"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_cards_landing", 0, false, "Land on a grid of topic cards (list->detail): a card opens its table, with the tabs bar + a back-to-grid button. Off = tabs only (legacy)."),
@@ -15310,7 +15311,8 @@ function process_treedb_descs$1(gobj) {
 			treedb_name,
 			topic_name: key,
 			desc,
-			with_remote_paging: (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_remote_paging")
+			with_remote_paging: (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_remote_paging"),
+			with_selection_bar: (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_selection_bar")
 		};
 		let id = `${(0, _yuneta_gobj_js.gobj_name)(gobj)}?${desc.topic_name}`;
 		let gobj_topic_form = (0, _yuneta_gobj_js.gobj_create_service)(id, "C_YUI_TREEDB_TOPIC_WITH_FORM", kw_topic_form, gobj);
@@ -16317,6 +16319,206 @@ function yui_tabulator_relocalize(table, t) {
 	}
 }
 //#endregion
+//#region src/yui_table_select.js
+/***********************************************************************
+*          yui_table_select.js
+*
+*          SELECT ROWS IN A TABLE, and act on the lot.
+*
+*          Deleting twenty rows one confirmation at a time is not a
+*          workflow, it is a punishment, and every table that lets you
+*          remove a row will eventually be asked to remove twenty. This
+*          is that facility, once: the checkbox column, the settings
+*          that make selection behave, and the bar that appears while
+*          something is selected and carries what can be done to it.
+*
+*          Two decisions are baked in, both learned in the treedb
+*          topic table:
+*
+*          - Selection is driven ONLY by the checkbox, never by
+*            clicking the row (`selectableRows: "highlight"`). A table
+*            row is full of things to click -- an editor, an icon, a
+*            nested table -- and click-to-select ticks a row every time
+*            you reach for one of them.
+*
+*          - The header checkbox covers the ACTIVE rows, the ones the
+*            filters leave on screen. "Select all" over rows nobody can
+*            see is how a filtered delete takes the whole topic with
+*            it.
+*
+*          The bar takes its words from the HOST's `t`: this library
+*          translates through the app's i18next, and the app owns the
+*          keys. It needs "{{n}} selected" and "clear selection"; each
+*          action brings its own key.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/***************************************************************
+*      The checkbox column. Put it FIRST in the column list.
+*
+*      opts:
+*          field    the (virtual) field name, default "_select"
+*          width    default 44
+*          visible  default true; `false` for a table that reveals
+*                   the column only in an edit mode (the treedb topic
+*                   table shows it with `showColumn(field)`)
+*
+*      This is the SELECT-MANY widget. A table that lets you pick ONE
+*      row uses a radio column of its own (`formatter: "rowSelection"`
+*      with no `titleFormatter`, `selectableRows: 1`): the header
+*      checkbox, the count and the bar all mean nothing there.
+***************************************************************/
+function yui_selection_column(opts) {
+	let o = opts || {};
+	return {
+		title: "",
+		field: o.field || "_select",
+		width: o.width || 44,
+		minWidth: o.width || 44,
+		visible: o.visible !== false,
+		hozAlign: "center",
+		headerHozAlign: "center",
+		headerSort: false,
+		resizable: false,
+		formatter: "rowSelection",
+		titleFormatter: "rowSelection",
+		titleFormatterParams: { rowRange: "active" },
+		cssClass: "TABLE_SELECT_CELL"
+	};
+}
+/***************************************************************
+*      What the Tabulator settings need for the column above.
+*      Spread it into the settings object.
+***************************************************************/
+function yui_selection_settings() {
+	return { selectableRows: "highlight" };
+}
+/***************************************************************
+*      The rows selected right now (never null).
+***************************************************************/
+function yui_selected_rows(tabulator) {
+	if (!tabulator || typeof tabulator.getSelectedData !== "function") return [];
+	try {
+		return tabulator.getSelectedData() || [];
+	} catch (e) {
+		return [];
+	}
+}
+/***************************************************************
+*      Drop the selection (after acting on it, or after a
+*      reload that leaves the ticked rows behind).
+***************************************************************/
+function yui_clear_selection(tabulator) {
+	if (!tabulator || typeof tabulator.deselectRow !== "function") return;
+	try {
+		tabulator.deselectRow();
+	} catch (e) {}
+}
+/***************************************************************
+*      The bar that appears while rows are selected.
+*
+*      t           the HOST's translator
+*      opts:
+*          actions   [{label, icon, class, on_click}] -- `label` is an
+*                    i18n KEY, `class` extra Bulma classes for the
+*                    button (e.g. "is-danger"), `on_click` the DOM
+*                    handler, whose job is to send an event
+*          on_clear  called by the "clear selection" button
+*          name      logical-class prefix, default "TABLE"
+*
+*      -> {$el, set_count(n), refresh()}
+*
+*      `refresh()` redraws it in the current language: the count is
+*      composed at render time, so it cannot re-translate itself
+*      through `refresh_language()`. Call it on EV_LANGUAGE_CHANGED.
+***************************************************************/
+function yui_selection_bar(t, opts) {
+	let o = opts || {};
+	let actions = Array.isArray(o.actions) ? o.actions : [];
+	let name = o.name || "TABLE";
+	let count = 0;
+	let $count = (0, _yuneta_gobj_js.createElement2)([
+		"span",
+		{ class: `${name}_SELECTION_COUNT has-text-weight-semibold` },
+		""
+	]);
+	let $buttons = [];
+	for (let action of actions) {
+		let $b = (0, _yuneta_gobj_js.createElement2)([
+			"button",
+			{
+				class: `${name}_SELECTION_ACTION button ${action.class || ""}`,
+				type: "button"
+			},
+			[[
+				"span",
+				{ class: "icon" },
+				[["i", { class: action.icon || "yi-check" }]]
+			], [
+				"span",
+				{},
+				""
+			]],
+			{ click: action.on_click }
+		]);
+		$b._yui_label = action.label || "";
+		$buttons.push($b);
+	}
+	let $clear = (0, _yuneta_gobj_js.createElement2)([
+		"button",
+		{
+			class: `${name}_SELECTION_CLEAR button is-ghost`,
+			type: "button"
+		},
+		[[
+			"span",
+			{ class: "icon" },
+			[["i", { class: "yi-xmark" }]]
+		], [
+			"span",
+			{},
+			""
+		]],
+		{ click: function(e) {
+			if (typeof o.on_clear === "function") o.on_clear(e);
+		} }
+	]);
+	$clear._yui_label = "clear selection";
+	let $el = (0, _yuneta_gobj_js.createElement2)([
+		"div",
+		{
+			class: `${name}_SELECTION_BAR is-align-items-center is-flex-wrap-wrap mb-2 is-hidden`,
+			style: "display:flex; gap:0.5rem;"
+		},
+		[$count].concat($buttons, [$clear])
+	]);
+	function label_of($b) {
+		return $b.querySelector("span.icon ~ span");
+	}
+	function refresh() {
+		$count.textContent = t("{{n}} selected", { n: count });
+		for (let $b of $buttons.concat([$clear])) {
+			let $label = label_of($b);
+			let key = $b._yui_label;
+			if ($label && key) $label.textContent = t(key);
+			$b.title = key ? t(key) : "";
+			$b.setAttribute("aria-label", $b.title);
+		}
+		$el.classList.toggle("is-hidden", count <= 0);
+	}
+	function set_count(n) {
+		count = n > 0 ? n : 0;
+		refresh();
+	}
+	refresh();
+	return {
+		$el,
+		set_count,
+		refresh
+	};
+}
+//#endregion
 //#region src/treedb_write_plan.js
 /***********************************************************************
 *          treedb_write_plan.js
@@ -16484,6 +16686,7 @@ var attrs_table$5 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "editable", 0, false, "Edit state"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_checkbox", 0, true, "Auxiliary first column to select rows"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_radio", 0, false, "Auxiliary first column to select one row"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_selection_bar", 0, false, "Show the shared selection bar (\"N selected\" + a way out) above the table while in edition mode. OFF by default: the bar takes its words from the HOST's i18n, and a host that has not defined \"{{n}} selected\" and \"clear selection\" would render the keys"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "broadcast_select_rows_event", 0, false, "Broadcast select rows event"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "broadcast_unselect_rows_event", 0, false, "Broadcast unselect rows event"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "tabulator_settings", 0, {
@@ -16502,6 +16705,7 @@ var attrs_table$5 = [
 	}, "Default settings for Tabulator"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "HTML container for UI"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "tabulator", 0, null, "Tabulator instance"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "selection_bar", 0, null, "The selection bar (yui_table_select.js), when with_selection_bar"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "table_id", 0, null, "Table div ID"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "toolbar_id", 0, null, "Toolbar ID"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "popup_id", 0, null, "Edit form popup ID"),
@@ -16918,6 +17122,15 @@ function build_ui$5(gobj) {
 			style: "margin-top:0px !important;"
 		}]]
 	]);
+	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_checkbox") && (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_selection_bar")) {
+		let bar = yui_selection_bar(i18next.t, {
+			name: "TREEDB_TABLE",
+			actions: [],
+			on_clear: () => (0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CLEAR_SELECTION", {}, gobj)
+		});
+		(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "selection_bar", bar);
+		$container.insertBefore(bar.$el, $container.querySelector(`#${table_id}`));
+	}
 	let $toolbar_slot = $container.querySelector(".toolbar_tabulator_table");
 	if ($table_toolbar instanceof Element) $toolbar_slot.appendChild($table_toolbar);
 	else $toolbar_slot.appendChild((0, _yuneta_gobj_js.createElement2)(["div", {}]));
@@ -16926,6 +17139,24 @@ function build_ui$5(gobj) {
 	(0, _yuneta_gobj_js.refresh_language)($container, i18next.t);
 }
 /************************************************************
+*   How many rows are ticked, on the bar.
+*
+*   Only while the table is EDITABLE: outside edition its checkbox
+*   column is hidden (`hideColumn`), and a count of rows nobody can
+*   see or untick is a count you cannot act on. The selection itself
+*   is left alone -- coming back to edition finds it, and the bar
+*   recounts from the table.
+************************************************************/
+function render_selection_bar(gobj) {
+	let bar = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "selection_bar");
+	if (!bar) return;
+	if (!(0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "editable")) {
+		bar.set_count(0);
+		return;
+	}
+	bar.set_count(yui_selected_rows((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator")).length);
+}
+/************************************************************
 *   Destroy UI
 ************************************************************/
 function destroy_ui$2(gobj) {
@@ -16996,16 +17227,11 @@ function create_tabulator(gobj) {
 	let columns = [];
 	let with_checkbox = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_checkbox");
 	let with_radio = (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_radio");
-	if (with_checkbox) columns.push({
-		formatter: "rowSelection",
-		titleFormatter: "rowSelection",
+	if (with_checkbox) columns.push(yui_selection_column({
 		field: "_check_box_state_",
-		hozAlign: "center",
-		headerHozAlign: "center",
 		width: 40,
-		visible: false,
-		headerSort: false
-	});
+		visible: false
+	}));
 	else if (with_radio) columns.push({
 		formatter: "rowSelection",
 		field: "_check_box_state_",
@@ -17234,7 +17460,9 @@ function create_tabulator(gobj) {
 		}
 	});
 	let pkey = desc.pkey || "id";
-	let selectable = with_checkbox ? "highlight" : with_radio ? 1 : false;
+	let selectable = false;
+	if (with_checkbox) selectable = yui_selection_settings().selectableRows;
+	else if (with_radio) selectable = 1;
 	let tabulator_settings = (0, _yuneta_gobj_js.json_deep_copy)((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator_settings"));
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "with_remote_paging")) {
 		let page_size = (0, _yuneta_gobj_js.gobj_read_integer_attr)(gobj, "page_size") || 200;
@@ -18118,6 +18346,8 @@ function refuse_if_readonly$2(gobj, event) {
 *  dict. Re-apply it in the new language.
 ***************************************************************/
 function ac_language_changed$2(gobj, event, kw, src) {
+	let bar = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "selection_bar");
+	if (bar) bar.refresh();
 	let tabulator = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator");
 	if (!tabulator) return 0;
 	yui_tabulator_relocalize(tabulator, i18next.t);
@@ -18216,7 +18446,7 @@ function ac_edition_mode(gobj, event, kw, src) {
 		tabulator.showColumn("_check_box_state_");
 		$button_new_record.removeAttribute("disabled");
 		$button_paste_record.removeAttribute("disabled");
-		if (tabulator.getSelectedData().length) {
+		if (yui_selected_rows(tabulator).length) {
 			$button_delete_record.removeAttribute("disabled");
 			$button_copy_record.removeAttribute("disabled");
 		}
@@ -18231,6 +18461,7 @@ function ac_edition_mode(gobj, event, kw, src) {
 		$button_copy_record.setAttribute("disabled", true);
 		$button_paste_record.setAttribute("disabled", true);
 	}
+	render_selection_bar(gobj);
 	return 0;
 }
 /************************************************************
@@ -18274,7 +18505,7 @@ function ac_delete_rows(gobj, event, kw, src) {
 	if (refuse_if_readonly$2(gobj, event)) return -1;
 	let tabulator = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator");
 	if ((0, _yuneta_gobj_js.json_size)(kw) === 0) {
-		let rows = tabulator.getSelectedData();
+		let rows = yui_selected_rows(tabulator);
 		if (!rows.length) {
 			yui_shell_confirm_ok(yui_shell_of(gobj), "please select some row", {
 				t: i18next.t,
@@ -18310,7 +18541,7 @@ function ac_delete_rows(gobj, event, kw, src) {
 *  From internal
 ************************************************************/
 function ac_copy_rows(gobj, event, kw, src) {
-	let rows = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator").getSelectedData();
+	let rows = yui_selected_rows((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator"));
 	if (!rows.length) {
 		yui_shell_confirm_ok(yui_shell_of(gobj), "please select some row", {
 			t: i18next.t,
@@ -18368,7 +18599,7 @@ function ac_select_rows(gobj, event, kw, src) {
 	let $button_delete_record = $container.querySelector(`.button-delete-record`);
 	let $button_copy_record = $container.querySelector(`.button-copy-record`);
 	if ($button_delete_record) {
-		if (tabulator.getSelectedData().length && (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "editable")) {
+		if (yui_selected_rows(tabulator).length && (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "editable")) {
 			$button_delete_record.removeAttribute("disabled");
 			$button_copy_record.removeAttribute("disabled");
 		} else {
@@ -18376,6 +18607,7 @@ function ac_select_rows(gobj, event, kw, src) {
 			$button_copy_record.setAttribute("disabled", true);
 		}
 	}
+	render_selection_bar(gobj);
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "broadcast_select_rows_event")) (0, _yuneta_gobj_js.gobj_publish_event)(gobj, event, kw);
 	return 0;
 }
@@ -18388,7 +18620,7 @@ function ac_unselect_rows(gobj, event, kw, src) {
 	let $button_delete_record = $container.querySelector(`.button-delete-record`);
 	let $button_copy_record = $container.querySelector(`.button-copy-record`);
 	if ($button_delete_record) {
-		if (tabulator.getSelectedData().length && (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "editable")) {
+		if (yui_selected_rows(tabulator).length && (0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "editable")) {
 			$button_delete_record.removeAttribute("disabled");
 			$button_copy_record.removeAttribute("disabled");
 		} else {
@@ -18396,10 +18628,19 @@ function ac_unselect_rows(gobj, event, kw, src) {
 			$button_copy_record.setAttribute("disabled", true);
 		}
 	}
+	render_selection_bar(gobj);
 	if ((0, _yuneta_gobj_js.gobj_read_bool_attr)(gobj, "broadcast_select_rows_event")) (0, _yuneta_gobj_js.gobj_publish_event)(gobj, event, kw);
 	return 0;
 }
 /************************************************************
+*  The way out of a selection (the bar's clear button).
+************************************************************/
+function ac_clear_selection(gobj, event, kw, src) {
+	yui_clear_selection((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "tabulator"));
+	render_selection_bar(gobj);
+	return 0;
+}
+/************************************************************
 *  { locale: "es" }
 ************************************************************/
 function ac_change_locale(gobj, event, kw, src) {
@@ -18876,6 +19117,11 @@ function create_gclass$5(gclass_name) {
 			ac_select_rows,
 			null
 		],
+		[
+			"EV_CLEAR_SELECTION",
+			ac_clear_selection,
+			null
+		],
 		[
 			"EV_UNSELECT_ROWS",
 			ac_unselect_rows,
@@ -18984,6 +19230,7 @@ function create_gclass$5(gclass_name) {
 		["EV_DELETE_ROWS", 0],
 		["EV_COPY_ROWS", 0],
 		["EV_PASTE_ROWS", 0],
+		["EV_CLEAR_SELECTION", 0],
 		["EV_SELECT_ROWS", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_UNSELECT_ROWS", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_SHOW_HOOK_DATA", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],

package/dist/gobj-ui.es.js

@@ -14491,6 +14491,7 @@ var attrs_table$6 = [
 	SDATA(data_type_t.DTP_STRING, "treedb_name", 0, null, "Remote TreeDB service name"),
 	SDATA(data_type_t.DTP_JSON, "descs", 0, null, "Description of topics"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_remote_paging", 0, false, "Each topic table pulls its rows a PAGE at a time (`nodes` from/limit) instead of loading the topic whole. Safe against a backend that cannot page: it answers the whole list, which the table reads as one page"),
+	SDATA(data_type_t.DTP_BOOLEAN, "with_selection_bar", 0, false, "Each topic table shows the shared selection bar (\"N selected\" + a way out) above it while in edition mode. OFF by default: the bar takes its words from the HOST's i18n, so a host that turns it on must define \"{{n}} selected\" and \"clear selection\""),
 	SDATA(data_type_t.DTP_BOOLEAN, "system", 0, false, "Manage system topics (true) or user topics (false)"),
 	SDATA(data_type_t.DTP_STRING, "tabs_style", 0, "is-toggle is-fullwidth", "Bulma tab styling"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_cards_landing", 0, false, "Land on a grid of topic cards (list->detail): a card opens its table, with the tabs bar + a back-to-grid button. Off = tabs only (legacy)."),
@@ -15305,7 +15306,8 @@ function process_treedb_descs$1(gobj) {
 			treedb_name,
 			topic_name: key,
 			desc,
-			with_remote_paging: gobj_read_bool_attr(gobj, "with_remote_paging")
+			with_remote_paging: gobj_read_bool_attr(gobj, "with_remote_paging"),
+			with_selection_bar: gobj_read_bool_attr(gobj, "with_selection_bar")
 		};
 		let id = `${gobj_name(gobj)}?${desc.topic_name}`;
 		let gobj_topic_form = gobj_create_service(id, "C_YUI_TREEDB_TOPIC_WITH_FORM", kw_topic_form, gobj);
@@ -16312,6 +16314,206 @@ function yui_tabulator_relocalize(table, t) {
 	}
 }
 //#endregion
+//#region src/yui_table_select.js
+/***********************************************************************
+*          yui_table_select.js
+*
+*          SELECT ROWS IN A TABLE, and act on the lot.
+*
+*          Deleting twenty rows one confirmation at a time is not a
+*          workflow, it is a punishment, and every table that lets you
+*          remove a row will eventually be asked to remove twenty. This
+*          is that facility, once: the checkbox column, the settings
+*          that make selection behave, and the bar that appears while
+*          something is selected and carries what can be done to it.
+*
+*          Two decisions are baked in, both learned in the treedb
+*          topic table:
+*
+*          - Selection is driven ONLY by the checkbox, never by
+*            clicking the row (`selectableRows: "highlight"`). A table
+*            row is full of things to click -- an editor, an icon, a
+*            nested table -- and click-to-select ticks a row every time
+*            you reach for one of them.
+*
+*          - The header checkbox covers the ACTIVE rows, the ones the
+*            filters leave on screen. "Select all" over rows nobody can
+*            see is how a filtered delete takes the whole topic with
+*            it.
+*
+*          The bar takes its words from the HOST's `t`: this library
+*          translates through the app's i18next, and the app owns the
+*          keys. It needs "{{n}} selected" and "clear selection"; each
+*          action brings its own key.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/***************************************************************
+*      The checkbox column. Put it FIRST in the column list.
+*
+*      opts:
+*          field    the (virtual) field name, default "_select"
+*          width    default 44
+*          visible  default true; `false` for a table that reveals
+*                   the column only in an edit mode (the treedb topic
+*                   table shows it with `showColumn(field)`)
+*
+*      This is the SELECT-MANY widget. A table that lets you pick ONE
+*      row uses a radio column of its own (`formatter: "rowSelection"`
+*      with no `titleFormatter`, `selectableRows: 1`): the header
+*      checkbox, the count and the bar all mean nothing there.
+***************************************************************/
+function yui_selection_column(opts) {
+	let o = opts || {};
+	return {
+		title: "",
+		field: o.field || "_select",
+		width: o.width || 44,
+		minWidth: o.width || 44,
+		visible: o.visible !== false,
+		hozAlign: "center",
+		headerHozAlign: "center",
+		headerSort: false,
+		resizable: false,
+		formatter: "rowSelection",
+		titleFormatter: "rowSelection",
+		titleFormatterParams: { rowRange: "active" },
+		cssClass: "TABLE_SELECT_CELL"
+	};
+}
+/***************************************************************
+*      What the Tabulator settings need for the column above.
+*      Spread it into the settings object.
+***************************************************************/
+function yui_selection_settings() {
+	return { selectableRows: "highlight" };
+}
+/***************************************************************
+*      The rows selected right now (never null).
+***************************************************************/
+function yui_selected_rows(tabulator) {
+	if (!tabulator || typeof tabulator.getSelectedData !== "function") return [];
+	try {
+		return tabulator.getSelectedData() || [];
+	} catch (e) {
+		return [];
+	}
+}
+/***************************************************************
+*      Drop the selection (after acting on it, or after a
+*      reload that leaves the ticked rows behind).
+***************************************************************/
+function yui_clear_selection(tabulator) {
+	if (!tabulator || typeof tabulator.deselectRow !== "function") return;
+	try {
+		tabulator.deselectRow();
+	} catch (e) {}
+}
+/***************************************************************
+*      The bar that appears while rows are selected.
+*
+*      t           the HOST's translator
+*      opts:
+*          actions   [{label, icon, class, on_click}] -- `label` is an
+*                    i18n KEY, `class` extra Bulma classes for the
+*                    button (e.g. "is-danger"), `on_click` the DOM
+*                    handler, whose job is to send an event
+*          on_clear  called by the "clear selection" button
+*          name      logical-class prefix, default "TABLE"
+*
+*      -> {$el, set_count(n), refresh()}
+*
+*      `refresh()` redraws it in the current language: the count is
+*      composed at render time, so it cannot re-translate itself
+*      through `refresh_language()`. Call it on EV_LANGUAGE_CHANGED.
+***************************************************************/
+function yui_selection_bar(t, opts) {
+	let o = opts || {};
+	let actions = Array.isArray(o.actions) ? o.actions : [];
+	let name = o.name || "TABLE";
+	let count = 0;
+	let $count = createElement2([
+		"span",
+		{ class: `${name}_SELECTION_COUNT has-text-weight-semibold` },
+		""
+	]);
+	let $buttons = [];
+	for (let action of actions) {
+		let $b = createElement2([
+			"button",
+			{
+				class: `${name}_SELECTION_ACTION button ${action.class || ""}`,
+				type: "button"
+			},
+			[[
+				"span",
+				{ class: "icon" },
+				[["i", { class: action.icon || "yi-check" }]]
+			], [
+				"span",
+				{},
+				""
+			]],
+			{ click: action.on_click }
+		]);
+		$b._yui_label = action.label || "";
+		$buttons.push($b);
+	}
+	let $clear = createElement2([
+		"button",
+		{
+			class: `${name}_SELECTION_CLEAR button is-ghost`,
+			type: "button"
+		},
+		[[
+			"span",
+			{ class: "icon" },
+			[["i", { class: "yi-xmark" }]]
+		], [
+			"span",
+			{},
+			""
+		]],
+		{ click: function(e) {
+			if (typeof o.on_clear === "function") o.on_clear(e);
+		} }
+	]);
+	$clear._yui_label = "clear selection";
+	let $el = createElement2([
+		"div",
+		{
+			class: `${name}_SELECTION_BAR is-align-items-center is-flex-wrap-wrap mb-2 is-hidden`,
+			style: "display:flex; gap:0.5rem;"
+		},
+		[$count].concat($buttons, [$clear])
+	]);
+	function label_of($b) {
+		return $b.querySelector("span.icon ~ span");
+	}
+	function refresh() {
+		$count.textContent = t("{{n}} selected", { n: count });
+		for (let $b of $buttons.concat([$clear])) {
+			let $label = label_of($b);
+			let key = $b._yui_label;
+			if ($label && key) $label.textContent = t(key);
+			$b.title = key ? t(key) : "";
+			$b.setAttribute("aria-label", $b.title);
+		}
+		$el.classList.toggle("is-hidden", count <= 0);
+	}
+	function set_count(n) {
+		count = n > 0 ? n : 0;
+		refresh();
+	}
+	refresh();
+	return {
+		$el,
+		set_count,
+		refresh
+	};
+}
+//#endregion
 //#region src/treedb_write_plan.js
 /***********************************************************************
 *          treedb_write_plan.js
@@ -16479,6 +16681,7 @@ var attrs_table$5 = [
 	SDATA(data_type_t.DTP_BOOLEAN, "editable", 0, false, "Edit state"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_checkbox", 0, true, "Auxiliary first column to select rows"),
 	SDATA(data_type_t.DTP_BOOLEAN, "with_radio", 0, false, "Auxiliary first column to select one row"),
+	SDATA(data_type_t.DTP_BOOLEAN, "with_selection_bar", 0, false, "Show the shared selection bar (\"N selected\" + a way out) above the table while in edition mode. OFF by default: the bar takes its words from the HOST's i18n, and a host that has not defined \"{{n}} selected\" and \"clear selection\" would render the keys"),
 	SDATA(data_type_t.DTP_BOOLEAN, "broadcast_select_rows_event", 0, false, "Broadcast select rows event"),
 	SDATA(data_type_t.DTP_BOOLEAN, "broadcast_unselect_rows_event", 0, false, "Broadcast unselect rows event"),
 	SDATA(data_type_t.DTP_JSON, "tabulator_settings", 0, {
@@ -16497,6 +16700,7 @@ var attrs_table$5 = [
 	}, "Default settings for Tabulator"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "HTML container for UI"),
 	SDATA(data_type_t.DTP_POINTER, "tabulator", 0, null, "Tabulator instance"),
+	SDATA(data_type_t.DTP_POINTER, "selection_bar", 0, null, "The selection bar (yui_table_select.js), when with_selection_bar"),
 	SDATA(data_type_t.DTP_STRING, "table_id", 0, null, "Table div ID"),
 	SDATA(data_type_t.DTP_STRING, "toolbar_id", 0, null, "Toolbar ID"),
 	SDATA(data_type_t.DTP_STRING, "popup_id", 0, null, "Edit form popup ID"),
@@ -16913,6 +17117,15 @@ function build_ui$5(gobj) {
 			style: "margin-top:0px !important;"
 		}]]
 	]);
+	if (gobj_read_bool_attr(gobj, "with_checkbox") && gobj_read_bool_attr(gobj, "with_selection_bar")) {
+		let bar = yui_selection_bar(t, {
+			name: "TREEDB_TABLE",
+			actions: [],
+			on_clear: () => gobj_send_event(gobj, "EV_CLEAR_SELECTION", {}, gobj)
+		});
+		gobj_write_attr(gobj, "selection_bar", bar);
+		$container.insertBefore(bar.$el, $container.querySelector(`#${table_id}`));
+	}
 	let $toolbar_slot = $container.querySelector(".toolbar_tabulator_table");
 	if ($table_toolbar instanceof Element) $toolbar_slot.appendChild($table_toolbar);
 	else $toolbar_slot.appendChild(createElement2(["div", {}]));
@@ -16921,6 +17134,24 @@ function build_ui$5(gobj) {
 	refresh_language($container, t);
 }
 /************************************************************
+*   How many rows are ticked, on the bar.
+*
+*   Only while the table is EDITABLE: outside edition its checkbox
+*   column is hidden (`hideColumn`), and a count of rows nobody can
+*   see or untick is a count you cannot act on. The selection itself
+*   is left alone -- coming back to edition finds it, and the bar
+*   recounts from the table.
+************************************************************/
+function render_selection_bar(gobj) {
+	let bar = gobj_read_attr(gobj, "selection_bar");
+	if (!bar) return;
+	if (!gobj_read_bool_attr(gobj, "editable")) {
+		bar.set_count(0);
+		return;
+	}
+	bar.set_count(yui_selected_rows(gobj_read_attr(gobj, "tabulator")).length);
+}
+/************************************************************
 *   Destroy UI
 ************************************************************/
 function destroy_ui$2(gobj) {
@@ -16991,16 +17222,11 @@ function create_tabulator(gobj) {
 	let columns = [];
 	let with_checkbox = gobj_read_bool_attr(gobj, "with_checkbox");
 	let with_radio = gobj_read_bool_attr(gobj, "with_radio");
-	if (with_checkbox) columns.push({
-		formatter: "rowSelection",
-		titleFormatter: "rowSelection",
+	if (with_checkbox) columns.push(yui_selection_column({
 		field: "_check_box_state_",
-		hozAlign: "center",
-		headerHozAlign: "center",
 		width: 40,
-		visible: false,
-		headerSort: false
-	});
+		visible: false
+	}));
 	else if (with_radio) columns.push({
 		formatter: "rowSelection",
 		field: "_check_box_state_",
@@ -17229,7 +17455,9 @@ function create_tabulator(gobj) {
 		}
 	});
 	let pkey = desc.pkey || "id";
-	let selectable = with_checkbox ? "highlight" : with_radio ? 1 : false;
+	let selectable = false;
+	if (with_checkbox) selectable = yui_selection_settings().selectableRows;
+	else if (with_radio) selectable = 1;
 	let tabulator_settings = json_deep_copy(gobj_read_attr(gobj, "tabulator_settings"));
 	if (gobj_read_bool_attr(gobj, "with_remote_paging")) {
 		let page_size = gobj_read_integer_attr(gobj, "page_size") || 200;
@@ -18113,6 +18341,8 @@ function refuse_if_readonly$2(gobj, event) {
 *  dict. Re-apply it in the new language.
 ***************************************************************/
 function ac_language_changed$2(gobj, event, kw, src) {
+	let bar = gobj_read_attr(gobj, "selection_bar");
+	if (bar) bar.refresh();
 	let tabulator = gobj_read_attr(gobj, "tabulator");
 	if (!tabulator) return 0;
 	yui_tabulator_relocalize(tabulator, t);
@@ -18211,7 +18441,7 @@ function ac_edition_mode(gobj, event, kw, src) {
 		tabulator.showColumn("_check_box_state_");
 		$button_new_record.removeAttribute("disabled");
 		$button_paste_record.removeAttribute("disabled");
-		if (tabulator.getSelectedData().length) {
+		if (yui_selected_rows(tabulator).length) {
 			$button_delete_record.removeAttribute("disabled");
 			$button_copy_record.removeAttribute("disabled");
 		}
@@ -18226,6 +18456,7 @@ function ac_edition_mode(gobj, event, kw, src) {
 		$button_copy_record.setAttribute("disabled", true);
 		$button_paste_record.setAttribute("disabled", true);
 	}
+	render_selection_bar(gobj);
 	return 0;
 }
 /************************************************************
@@ -18269,7 +18500,7 @@ function ac_delete_rows(gobj, event, kw, src) {
 	if (refuse_if_readonly$2(gobj, event)) return -1;
 	let tabulator = gobj_read_attr(gobj, "tabulator");
 	if (json_size(kw) === 0) {
-		let rows = tabulator.getSelectedData();
+		let rows = yui_selected_rows(tabulator);
 		if (!rows.length) {
 			yui_shell_confirm_ok(yui_shell_of(gobj), "please select some row", {
 				t,
@@ -18305,7 +18536,7 @@ function ac_delete_rows(gobj, event, kw, src) {
 *  From internal
 ************************************************************/
 function ac_copy_rows(gobj, event, kw, src) {
-	let rows = gobj_read_attr(gobj, "tabulator").getSelectedData();
+	let rows = yui_selected_rows(gobj_read_attr(gobj, "tabulator"));
 	if (!rows.length) {
 		yui_shell_confirm_ok(yui_shell_of(gobj), "please select some row", {
 			t,
@@ -18363,7 +18594,7 @@ function ac_select_rows(gobj, event, kw, src) {
 	let $button_delete_record = $container.querySelector(`.button-delete-record`);
 	let $button_copy_record = $container.querySelector(`.button-copy-record`);
 	if ($button_delete_record) {
-		if (tabulator.getSelectedData().length && gobj_read_bool_attr(gobj, "editable")) {
+		if (yui_selected_rows(tabulator).length && gobj_read_bool_attr(gobj, "editable")) {
 			$button_delete_record.removeAttribute("disabled");
 			$button_copy_record.removeAttribute("disabled");
 		} else {
@@ -18371,6 +18602,7 @@ function ac_select_rows(gobj, event, kw, src) {
 			$button_copy_record.setAttribute("disabled", true);
 		}
 	}
+	render_selection_bar(gobj);
 	if (gobj_read_bool_attr(gobj, "broadcast_select_rows_event")) gobj_publish_event(gobj, event, kw);
 	return 0;
 }
@@ -18383,7 +18615,7 @@ function ac_unselect_rows(gobj, event, kw, src) {
 	let $button_delete_record = $container.querySelector(`.button-delete-record`);
 	let $button_copy_record = $container.querySelector(`.button-copy-record`);
 	if ($button_delete_record) {
-		if (tabulator.getSelectedData().length && gobj_read_bool_attr(gobj, "editable")) {
+		if (yui_selected_rows(tabulator).length && gobj_read_bool_attr(gobj, "editable")) {
 			$button_delete_record.removeAttribute("disabled");
 			$button_copy_record.removeAttribute("disabled");
 		} else {
@@ -18391,10 +18623,19 @@ function ac_unselect_rows(gobj, event, kw, src) {
 			$button_copy_record.setAttribute("disabled", true);
 		}
 	}
+	render_selection_bar(gobj);
 	if (gobj_read_bool_attr(gobj, "broadcast_select_rows_event")) gobj_publish_event(gobj, event, kw);
 	return 0;
 }
 /************************************************************
+*  The way out of a selection (the bar's clear button).
+************************************************************/
+function ac_clear_selection(gobj, event, kw, src) {
+	yui_clear_selection(gobj_read_attr(gobj, "tabulator"));
+	render_selection_bar(gobj);
+	return 0;
+}
+/************************************************************
 *  { locale: "es" }
 ************************************************************/
 function ac_change_locale(gobj, event, kw, src) {
@@ -18871,6 +19112,11 @@ function create_gclass$5(gclass_name) {
 			ac_select_rows,
 			null
 		],
+		[
+			"EV_CLEAR_SELECTION",
+			ac_clear_selection,
+			null
+		],
 		[
 			"EV_UNSELECT_ROWS",
 			ac_unselect_rows,
@@ -18979,6 +19225,7 @@ function create_gclass$5(gclass_name) {
 		["EV_DELETE_ROWS", 0],
 		["EV_COPY_ROWS", 0],
 		["EV_PASTE_ROWS", 0],
+		["EV_CLEAR_SELECTION", 0],
 		["EV_SELECT_ROWS", event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_UNSELECT_ROWS", event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_SHOW_HOOK_DATA", event_flag_t.EVF_OUTPUT_EVENT],

package/package.json

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

package/src/c_yui_treedb_topic_with_form.js

@@ -75,6 +75,14 @@ import {attach_clear} from "./yui_inputs.js";
 
 import {yui_tabulator_lang, yui_tabulator_relocalize} from "./yui_tabulator_i18n.js";
 
+import {
+    yui_selection_column,
+    yui_selection_settings,
+    yui_selection_bar,
+    yui_selected_rows,
+    yui_clear_selection,
+} from "./yui_table_select.js";
+
 import {t} from "i18next";
 
 import {plan_treedb_writes} from "./treedb_write_plan.js";
@@ -123,6 +131,7 @@ SDATA(data_type_t.DTP_BOOLEAN,  "editable",             0,  false,  "Edit state"
 /*---------------- Selection Mode ----------------*/
 SDATA(data_type_t.DTP_BOOLEAN,  "with_checkbox",        0,  true,   "Auxiliary first column to select rows"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_radio",           0,  false,  "Auxiliary first column to select one row"),
+SDATA(data_type_t.DTP_BOOLEAN,  "with_selection_bar",   0,  false,  "Show the shared selection bar (\"N selected\" + a way out) above the table while in edition mode. OFF by default: the bar takes its words from the HOST's i18n, and a host that has not defined \"{{n}} selected\" and \"clear selection\" would render the keys"),
 SDATA(data_type_t.DTP_BOOLEAN,  "broadcast_select_rows_event",   0,  false, "Broadcast select rows event"),
 SDATA(data_type_t.DTP_BOOLEAN,  "broadcast_unselect_rows_event", 0,  false, "Broadcast unselect rows event"),
 
@@ -142,6 +151,7 @@ SDATA(data_type_t.DTP_JSON,     "tabulator_settings",   0,  {
 /*---------------- Internal Attributes ----------------*/
 SDATA(data_type_t.DTP_POINTER,  "$container",           0,  null,   "HTML container for UI"),
 SDATA(data_type_t.DTP_POINTER,  "tabulator",            0,  null,   "Tabulator instance"),
+SDATA(data_type_t.DTP_POINTER,  "selection_bar",        0,  null,   "The selection bar (yui_table_select.js), when with_selection_bar"),
 SDATA(data_type_t.DTP_STRING,   "table_id",             0,  null,   "Table div ID"),
 SDATA(data_type_t.DTP_STRING,   "toolbar_id",           0,  null,   "Toolbar ID"),
 SDATA(data_type_t.DTP_STRING,   "popup_id",             0,  null,   "Edit form popup ID"),
@@ -642,6 +652,21 @@ function build_ui(gobj)
             ]
         ]]
     );
+    /*  The shared selection bar, between the toolbar and the table. It is
+     *  the only thing that says HOW MANY rows are ticked: with 200 rows to a
+     *  page, the checkboxes that answer that question are not all on screen.
+     *  Opt-in, because it takes its words from the host's i18n.  */
+    if(gobj_read_bool_attr(gobj, "with_checkbox") &&
+            gobj_read_bool_attr(gobj, "with_selection_bar")) {
+        let bar = yui_selection_bar(t, {
+            name:     "TREEDB_TABLE",
+            actions:  [],   /*  the toolbar above already carries them  */
+            on_clear: () => gobj_send_event(gobj, "EV_CLEAR_SELECTION", {}, gobj)
+        });
+        gobj_write_attr(gobj, "selection_bar", bar);
+        $container.insertBefore(bar.$el, $container.querySelector(`#${table_id}`));
+    }
+
     let $toolbar_slot = $container.querySelector('.toolbar_tabulator_table');
     if($table_toolbar instanceof Element) {
         $toolbar_slot.appendChild($table_toolbar);
@@ -654,6 +679,28 @@ function build_ui(gobj)
     refresh_language($container, t);
 }
 
+/************************************************************
+ *   How many rows are ticked, on the bar.
+ *
+ *   Only while the table is EDITABLE: outside edition its checkbox
+ *   column is hidden (`hideColumn`), and a count of rows nobody can
+ *   see or untick is a count you cannot act on. The selection itself
+ *   is left alone -- coming back to edition finds it, and the bar
+ *   recounts from the table.
+ ************************************************************/
+function render_selection_bar(gobj)
+{
+    let bar = gobj_read_attr(gobj, "selection_bar");
+    if(!bar) {
+        return;
+    }
+    if(!gobj_read_bool_attr(gobj, "editable")) {
+        bar.set_count(0);
+        return;
+    }
+    bar.set_count(yui_selected_rows(gobj_read_attr(gobj, "tabulator")).length);
+}
+
 /************************************************************
  *   Destroy UI
  ************************************************************/
@@ -748,16 +795,20 @@ function create_tabulator(gobj)
     let with_checkbox = gobj_read_bool_attr(gobj, "with_checkbox");
     let with_radio = gobj_read_bool_attr(gobj, "with_radio");
     if(with_checkbox) {
-        columns.push({
-            formatter: "rowSelection",
-            titleFormatter: "rowSelection",
-            field: "_check_box_state_",  // WARNING _check_box_state_ widely used
-            hozAlign: "center",
-            headerHozAlign: "center",
-            width: 40,
-            visible: false,
-            headerSort: false
-        });
+        /*  The SHARED column (yui_table_select.js), not a copy of it: this
+         *  table is where its two decisions were learned, and it was the one
+         *  table not applying the second. Its header checkbox took
+         *  `selectRow(undefined)` -- Tabulator's "every row LOADED", the ones
+         *  the header filters hide included -- and the button beside it
+         *  DELETES. It now ticks the active rows, the ones on screen.
+         *
+         *  Still `visible: false` and still 40px wide: this table reveals the
+         *  column in edit mode (`showColumn`), and the geometry is its own.  */
+        columns.push(yui_selection_column({
+            field:   "_check_box_state_",  // WARNING _check_box_state_ widely used
+            width:   40,
+            visible: false
+        }));
     } else if(with_radio) {
         columns.push({
             formatter: "rowSelection",
@@ -1098,7 +1149,12 @@ function create_tabulator(gobj)
      *  (it calls toggleSelect() directly) while disabling click-to-select,
      *  so opening the edit (yi-pen) form no longer implicitly ticks the
      *  row. Radio keeps single click-select (its own widget).  */
-    let selectable = with_checkbox ? "highlight" : (with_radio ? 1 : false);
+    let selectable = false;
+    if(with_checkbox) {
+        selectable = yui_selection_settings().selectableRows;
+    } else if(with_radio) {
+        selectable = 1;     /*  pick ONE: the radio's own widget  */
+    }
 
     let tabulator_settings = json_deep_copy(gobj_read_attr(gobj, "tabulator_settings"));
 
@@ -2420,6 +2476,10 @@ function refuse_if_readonly(gobj, event)
  ***************************************************************/
 function ac_language_changed(gobj, event, kw, src)
 {
+    let bar = gobj_read_attr(gobj, "selection_bar");
+    if(bar) {
+        bar.refresh();      /*  a count composed at render time  */
+    }
     let tabulator = gobj_read_attr(gobj, "tabulator");
     if(!tabulator) {
         return 0;
@@ -2623,7 +2683,7 @@ function ac_edition_mode(gobj, event, kw, src)
         $button_new_record.removeAttribute("disabled");
         $button_paste_record.removeAttribute("disabled");
 
-        let rows = tabulator.getSelectedData();
+        let rows = yui_selected_rows(tabulator);
         if (rows.length) {
             $button_delete_record.removeAttribute("disabled");
             $button_copy_record.removeAttribute("disabled");
@@ -2646,6 +2706,8 @@ function ac_edition_mode(gobj, event, kw, src)
         $button_paste_record.setAttribute("disabled", true);
     }
 
+    render_selection_bar(gobj);
+
     return 0;
 }
 
@@ -2715,7 +2777,7 @@ function ac_delete_rows(gobj, event, kw, src)
         /*----------------------------*
          *  Delete selected rows
          *----------------------------*/
-        let rows = tabulator.getSelectedData();
+        let rows = yui_selected_rows(tabulator);
         if (!rows.length) {
             yui_shell_confirm_ok(
                 yui_shell_of(gobj), 'please select some row',
@@ -2778,7 +2840,7 @@ function ac_copy_rows(gobj, event, kw, src)
     /*----------------------------*
      *  Copy selected rows
      *----------------------------*/
-    let rows = tabulator.getSelectedData();
+    let rows = yui_selected_rows(tabulator);
     if (!rows.length) {
         yui_shell_confirm_ok(
             yui_shell_of(gobj), 'please select some row',
@@ -2875,7 +2937,7 @@ function ac_select_rows(gobj, event, kw, src)
     let $button_delete_record = $container.querySelector(`.button-delete-record`);
     let $button_copy_record = $container.querySelector(`.button-copy-record`);
     if($button_delete_record) {
-        let selectedRows = tabulator.getSelectedData();
+        let selectedRows = yui_selected_rows(tabulator);
         if (selectedRows.length && gobj_read_bool_attr(gobj, "editable")) {
             $button_delete_record.removeAttribute("disabled");
             $button_copy_record.removeAttribute("disabled");
@@ -2885,6 +2947,8 @@ function ac_select_rows(gobj, event, kw, src)
         }
     }
 
+    render_selection_bar(gobj);
+
     if(gobj_read_bool_attr(gobj, "broadcast_select_rows_event")) {
         gobj_publish_event(gobj, event, kw);
     }
@@ -2906,7 +2970,7 @@ function ac_unselect_rows(gobj, event, kw, src)
     let $button_delete_record = $container.querySelector(`.button-delete-record`);
     let $button_copy_record = $container.querySelector(`.button-copy-record`);
     if($button_delete_record) {
-        let selectedRows = tabulator.getSelectedData();
+        let selectedRows = yui_selected_rows(tabulator);
         if (selectedRows.length && gobj_read_bool_attr(gobj, "editable")) {
             $button_delete_record.removeAttribute("disabled");
             $button_copy_record.removeAttribute("disabled");
@@ -2916,7 +2980,10 @@ function ac_unselect_rows(gobj, event, kw, src)
         }
     }
 
+    render_selection_bar(gobj);
+
     // WARNING with radio, there is no unselect event.
+
     if(gobj_read_bool_attr(gobj, "broadcast_select_rows_event")) {
         gobj_publish_event(gobj, event, kw);
     }
@@ -2924,6 +2991,16 @@ function ac_unselect_rows(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  The way out of a selection (the bar's clear button).
+ ************************************************************/
+function ac_clear_selection(gobj, event, kw, src)
+{
+    yui_clear_selection(gobj_read_attr(gobj, "tabulator"));
+    render_selection_bar(gobj);
+    return 0;
+}
+
 /************************************************************
  *  { locale: "es" }
  ************************************************************/
@@ -3432,6 +3509,7 @@ function create_gclass(gclass_name)
             ["EV_NEW_ROW",              ac_new_row,            null],
             ["EV_DELETE_ROWS",          ac_delete_rows,        null],
             ["EV_SELECT_ROWS",          ac_select_rows,        null],
+            ["EV_CLEAR_SELECTION",      ac_clear_selection,    null],
             ["EV_UNSELECT_ROWS",        ac_unselect_rows,      null],
             ["EV_COPY_ROWS",            ac_copy_rows,          null],
             ["EV_PASTE_ROWS",           ac_paste_rows,         null],
@@ -3470,6 +3548,7 @@ function create_gclass(gclass_name)
         ["EV_DELETE_ROWS",          0],
         ["EV_COPY_ROWS",            0],
         ["EV_PASTE_ROWS",           0],
+        ["EV_CLEAR_SELECTION",      0],
         ["EV_SELECT_ROWS",          event_flag_t.EVF_OUTPUT_EVENT],
         ["EV_UNSELECT_ROWS",        event_flag_t.EVF_OUTPUT_EVENT],
         ["EV_SHOW_HOOK_DATA",       event_flag_t.EVF_OUTPUT_EVENT],

package/src/c_yui_treedb_topics.js

@@ -76,6 +76,7 @@ SDATA(data_type_t.DTP_POINTER,  "gobj_remote_yuno", 0,  null,   "Remote yuno for
 SDATA(data_type_t.DTP_STRING,   "treedb_name",      0,  null,   "Remote TreeDB service name"),
 SDATA(data_type_t.DTP_JSON,     "descs",            0,  null,   "Description of topics"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_remote_paging",   0,  false,  "Each topic table pulls its rows a PAGE at a time (`nodes` from/limit) instead of loading the topic whole. Safe against a backend that cannot page: it answers the whole list, which the table reads as one page"),
+SDATA(data_type_t.DTP_BOOLEAN,  "with_selection_bar",   0,  false,  "Each topic table shows the shared selection bar (\"N selected\" + a way out) above it while in edition mode. OFF by default: the bar takes its words from the HOST's i18n, so a host that turns it on must define \"{{n}} selected\" and \"clear selection\""),
 SDATA(data_type_t.DTP_BOOLEAN,  "system",           0,  false,  "Manage system topics (true) or user topics (false)"),
 SDATA(data_type_t.DTP_STRING,   "tabs_style",       0,  "is-toggle is-fullwidth", "Bulma tab styling"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_cards_landing",0, false,  "Land on a grid of topic cards (list->detail): a card opens its table, with the tabs bar + a back-to-grid button. Off = tabs only (legacy)."),
@@ -1039,7 +1040,8 @@ function process_treedb_descs(gobj)
             treedb_name: treedb_name,
             topic_name: key,
             desc: desc,
-            with_remote_paging: gobj_read_bool_attr(gobj, "with_remote_paging")
+            with_remote_paging: gobj_read_bool_attr(gobj, "with_remote_paging"),
+            with_selection_bar: gobj_read_bool_attr(gobj, "with_selection_bar")
         };
 
         let id = `${gobj_name(gobj)}?${desc.topic_name}`;

package/src/tabulator.css

@@ -220,9 +220,7 @@
  */
 [data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing input,
 [data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing select,
-[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing textarea,
-[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter input,
-[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter select {
+[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing textarea {
     background-color: var(--bulma-grey-darker, #2b2f38);
     color: var(--bulma-text-strong, #f5f6f7) !important;
     caret-color: var(--bulma-text-strong, #f5f6f7);
@@ -234,6 +232,44 @@
     color: var(--bulma-text-weak, #8a8f98);
 }
 
+/* ====================================================================
+ *  The HEADER FILTER box is FURNITURE, not an open editor.
+ *
+ *  Both are inputs inside the table, so they shared these rules -- but an
+ *  editor is a MODE: one cell, while you type into it, and deliberately the
+ *  brightest thing on screen. A filter box is permanent and there is one per
+ *  column, so wearing the editor's border a header of eight columns drew
+ *  eight hard boxes across the top of every table, link-BLUE in dark theme.
+ *
+ *  Discreet at rest -- a hairline in the theme's weakest border colour, no
+ *  wash of its own -- and only the FOCUSED one stands out, which is the one
+ *  you are typing in.
+ * ==================================================================== */
+.tabulator .tabulator-header .tabulator-header-filter input,
+.tabulator .tabulator-header .tabulator-header-filter select {
+    border: 1px solid var(--bulma-border-weak, #e8eaee);
+    border-radius: 3px;
+    background-color: transparent;
+}
+
+.tabulator .tabulator-header .tabulator-header-filter input:focus,
+.tabulator .tabulator-header .tabulator-header-filter select:focus {
+    border-color: var(--bulma-link, #4a9eff);
+    outline: none;
+}
+
+[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter input,
+[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter select {
+    border-color: var(--bulma-border, #3a3f4a);
+    color: var(--bulma-text-strong, #f5f6f7);
+    caret-color: var(--bulma-text-strong, #f5f6f7);
+}
+
+[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter input:focus,
+[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter select:focus {
+    border-color: var(--bulma-link, #4a9eff);
+}
+
 [data-theme=dark] .tabulator-row.tabulator-selected {
     background-color: var(--bulma-link) !important;
     color: var(--bulma-link-invert) !important;
@@ -313,9 +349,7 @@
     /*  same editor fix as [data-theme=dark] above  */
     [data-theme=system] .tabulator-row .tabulator-cell.tabulator-editing input,
     [data-theme=system] .tabulator-row .tabulator-cell.tabulator-editing select,
-    [data-theme=system] .tabulator-row .tabulator-cell.tabulator-editing textarea,
-    [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter input,
-    [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter select {
+    [data-theme=system] .tabulator-row .tabulator-cell.tabulator-editing textarea {
         background-color: var(--bulma-grey-darker, #2b2f38);
         color: var(--bulma-text-strong, #f5f6f7) !important;
         caret-color: var(--bulma-text-strong, #f5f6f7);
@@ -325,6 +359,17 @@
     [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter input::placeholder {
         color: var(--bulma-text-weak, #8a8f98);
     }
+    /*  same furniture-not-editor rule as [data-theme=dark] above  */
+    [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter input,
+    [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter select {
+        border-color: var(--bulma-border, #3a3f4a);
+        color: var(--bulma-text-strong, #f5f6f7);
+        caret-color: var(--bulma-text-strong, #f5f6f7);
+    }
+    [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter input:focus,
+    [data-theme=system] .tabulator .tabulator-header .tabulator-header-filter select:focus {
+        border-color: var(--bulma-link, #4a9eff);
+    }
     [data-theme=system] .tabulator-row.tabulator-selected {
         background-color: var(--bulma-link) !important;
         color: var(--bulma-link-invert) !important;

package/src/yui_table_select.js

@@ -38,8 +38,16 @@ import {createElement2, log_error} from "@yuneta/gobj-js";
  *      The checkbox column. Put it FIRST in the column list.
  *
  *      opts:
- *          field   the (virtual) field name, default "_select"
- *          width   default 44
+ *          field    the (virtual) field name, default "_select"
+ *          width    default 44
+ *          visible  default true; `false` for a table that reveals
+ *                   the column only in an edit mode (the treedb topic
+ *                   table shows it with `showColumn(field)`)
+ *
+ *      This is the SELECT-MANY widget. A table that lets you pick ONE
+ *      row uses a radio column of its own (`formatter: "rowSelection"`
+ *      with no `titleFormatter`, `selectableRows: 1`): the header
+ *      checkbox, the count and the bar all mean nothing there.
  ***************************************************************/
 function yui_selection_column(opts)
 {
@@ -49,6 +57,7 @@ function yui_selection_column(opts)
         field:                o.field || "_select",
         width:                o.width || 44,
         minWidth:             o.width || 44,
+        visible:              o.visible !== false,
         hozAlign:             "center",
         headerHozAlign:       "center",
         headerSort:           false,