loon-bulma-react 2026.0.58 → 2026.0.59

package/dist/components/DataTable/DataTable.d.ts

@@ -138,8 +138,10 @@ type DataTableProps<T extends unknown = unknown> = {
      * - function: een function die een `string` returned om te gebruiken als `key` voor de row.
      */
     rowIdentifier: keyof T | ((item: T) => string);
-    /** extra content boven de tabel, links van het zoekveld. Deze content wordt automatisch gewrapped met een `<td>...</td>` */
-    headerContent?: React.ReactNode;
+    /** extra content boven de tabel, links van het zoekveld. Deze content wordt automatisch gewrapped met een `<td>...</td>`.
+     * __BEHALVE als de headerContent__ de tekst `searchbar` is. In dat geval gebruikt de zoek-bar de hele breedte van de tabel. (Tenzij `searchHiden` is true, dan wordt de zoekbar niet getoond)
+     */
+    headerContent?: 'searchbar' | React.ReactNode | undefined;
     /** extra content onder de tabel. Een ReactNode.
      * Deze content **MOET** een `<tr><td>...</td></tr>` bevatten!
      */

package/dist/index.js

@@ -13599,6 +13599,7 @@ function S_({ data: e = [], columns: n = [], defaultSortColNum: r = void 0, comp
 				cols: M,
 				size: p,
 				searchValue: P,
+				searchBarIsWholeWidth: d === "searchbar",
 				filterCount: te.length,
 				dataCount: e.length,
 				hideSearch: u,
@@ -13608,7 +13609,7 @@ function S_({ data: e = [], columns: n = [], defaultSortColNum: r = void 0, comp
 				sortColNum: L,
 				onSortIndexChanged: R,
 				tableID: N,
-				children: d
+				children: d === "searchbar" ? void 0 : d
 			}),
 			/* @__PURE__ */ b(C_, {
 				searchTerm: I,
@@ -13699,34 +13700,34 @@ function T_({ rowClass: e, rowKey: n, columns: r, item: i, onRowSelected: a, onR
 		})
 	});
 }
-function E_({ children: e = void 0, searchValue: t, filterCount: n, dataCount: r, searchPlaceholder: i, cols: a, size: o, sortColNum: s, hideSearch: c, sticky: l, tableID: u, onSortIndexChanged: d, onSearchValueChanged: f, infoMessage: p }) {
-	let m = c ? a.length : Math.ceil(a.filter((e) => !e.hidden).length / 2), h = c ? 0 : a.length - m;
-	function g(e, t) {
-		let n = t + 1, r = a[t];
-		r && r.sort && (Math.abs(s) === n ? d(s * -1) : s !== n && d(n));
+function E_({ children: e = void 0, searchValue: t, filterCount: n, dataCount: r, searchPlaceholder: i, searchBarIsWholeWidth: a, cols: o, size: s, sortColNum: c, hideSearch: l, sticky: u, tableID: d, onSortIndexChanged: f, onSearchValueChanged: p, infoMessage: m }) {
+	let h = l ? o.length : Math.ceil(o.filter((e) => !e.hidden).length / 2), g = l ? 0 : a ? o.length : o.length - h;
+	function _(e, t) {
+		let n = t + 1, r = o[t];
+		r && r.sort && (Math.abs(c) === n ? f(c * -1) : c !== n && f(n));
 	}
 	return /* @__PURE__ */ x("thead", {
-		className: l === "all" ? "is-sticky-head" : void 0,
+		className: u === "all" ? "is-sticky-head" : void 0,
 		children: [/* @__PURE__ */ x("tr", {
 			role: "header-row",
-			children: [/* @__PURE__ */ b("th", {
-				colSpan: m,
-				children: e
-			}), !c && /* @__PURE__ */ b("th", {
+			children: [e && /* @__PURE__ */ b("th", {
 				colSpan: h,
+				children: e
+			}), !l && /* @__PURE__ */ b("th", {
+				colSpan: g,
 				children: /* @__PURE__ */ x("div", {
 					title: i,
 					className: "control has-icons-left",
 					children: [/* @__PURE__ */ b(Ah, {
-						size: o,
+						size: s,
 						type: "text",
-						name: `lbr-datatable-search-${u}`,
-						id: `lbr-datatable-search-${u}`,
-						optionListId: `lbr-datatable-datalist-${u}`,
+						name: `lbr-datatable-search-${d}`,
+						id: `lbr-datatable-search-${d}`,
+						optionListId: `lbr-datatable-datalist-${d}`,
 						placeholder: i,
 						value: t,
-						onValueChanged: f,
-						infoMessage: p(n, r, t)
+						onValueChanged: p,
+						infoMessage: m(n, r, t)
 					}), /* @__PURE__ */ b("span", {
 						className: "icon is-small is-left",
 						children: /* @__PURE__ */ b(Io, { icon: Uo })
@@ -13735,17 +13736,17 @@ function E_({ children: e = void 0, searchValue: t, filterCount: n, dataCount: r
 			})]
 		}), /* @__PURE__ */ b("tr", {
 			role: "header-row",
-			className: l === "header" ? "is-sticky-row" : void 0,
-			children: a.map((e, t) => {
+			className: u === "header" ? "is-sticky-row" : void 0,
+			children: o.map((e, t) => {
 				if (e.hidden) return null;
-				let n = e.sort !== void 0, r = Math.abs(s) - 1 === t, i;
+				let n = e.sort !== void 0, r = Math.abs(c) - 1 === t, i;
 				i = e.header || e.header === "" ? e.header : typeof e.value == "string" ? e.value : e.value.toString();
 				let a = `${cf(e.alignment ?? "l")} mx-0 px-1`, o = _s;
-				return r && s > 0 ? o = qo : r && s < 0 && (o = Us), /* @__PURE__ */ x("th", {
+				return r && c > 0 ? o = qo : r && c < 0 && (o = Us), /* @__PURE__ */ x("th", {
 					role: "sort-col",
 					style: { cursor: n ? "pointer" : void 0 },
 					className: a,
-					onClick: (e) => g(e, t),
+					onClick: (e) => _(e, t),
 					children: [n && /* @__PURE__ */ x("span", {
 						className: "icon-text mx-0 px-0",
 						role: "icon-with-text",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "loon-bulma-react",
   "private": false,
-  "version": "2026.0.58",
+  "version": "2026.0.59",
   "description": "Bulma & React componenten voor Loon Salarissoftware",
   "type": "module",
   "license": "MIT",