twico-ui 1.20.1 → 1.21.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+# [1.21.0](https://github.com/EncryptionL/twico-ui/compare/v1.20.2...v1.21.0) (2026-07-28)
+
+
+### Features
+
+* **datatable:** add toolbarActions slot for custom toolbar controls ([c1c3142](https://github.com/EncryptionL/twico-ui/commit/c1c3142787cb2a21811b16d6774f0e1f2c6045b9)), closes [#286](https://github.com/EncryptionL/twico-ui/issues/286)
+
+## [1.20.2](https://github.com/EncryptionL/twico-ui/compare/v1.20.1...v1.20.2) (2026-07-24)
+
+
+### Bug Fixes
+
+* **datatable:** restore persisted column order with new columns at their code position ([c1095eb](https://github.com/EncryptionL/twico-ui/commit/c1095eb238239914491ea004a3c297d33c98d69b)), closes [#259](https://github.com/EncryptionL/twico-ui/issues/259) [#284](https://github.com/EncryptionL/twico-ui/issues/284)
+
 ## [1.20.1](https://github.com/EncryptionL/twico-ui/compare/v1.20.0...v1.20.1) (2026-07-23)
 
 

package/dist/index.cjs

@@ -8128,6 +8128,8 @@ var DT_CSS = `
 /* Toolbar */
 .twc-dt__toolbar { position: relative; z-index: 10; display: flex; align-items: center; gap: 6px; padding: 8px 10px;
   border-bottom: var(--border-thin) solid var(--color-divider); flex-wrap: wrap; }
+/* #286: host-supplied leading toolbar slot \u2014 a flex cluster so multiple buttons align with the built-ins. */
+.twc-dt__toolbar-actions { display: inline-flex; align-items: center; gap: 6px; }
 /* z-index above the scroll area's sticky header (z:3) so a toolbar button's
    hover tooltip (a ::after that hangs below the bar) paints over the table
    instead of being covered by the header/first rows. */
@@ -8647,6 +8649,37 @@ var filterTypeOf = (col) => {
   if (ft === "number" || ft === "string") return ft;
   return col && col.type === "number" ? "number" : "string";
 };
+function mergeColOrder(saved, propFields) {
+  const known = new Set(propFields);
+  const result = saved.filter((f) => known.has(f));
+  const placed = new Set(result);
+  for (let i = 0; i < propFields.length; i++) {
+    const f = propFields[i];
+    if (!f || placed.has(f)) continue;
+    let at = 0;
+    for (let j = i - 1; j >= 0; j--) {
+      const idx = result.indexOf(propFields[j]);
+      if (idx !== -1) {
+        at = idx + 1;
+        break;
+      }
+    }
+    if (at === 0) {
+      let before = result.length;
+      for (let j = i + 1; j < propFields.length; j++) {
+        const idx = result.indexOf(propFields[j]);
+        if (idx !== -1) {
+          before = idx;
+          break;
+        }
+      }
+      at = before;
+    }
+    result.splice(at, 0, f);
+    placed.add(f);
+  }
+  return result;
+}
 var getColVal = (col, row) => col && col.valueGetter ? col.valueGetter(row) : row == null ? void 0 : row[col && col.field];
 var diffValueNode = (col, v, row) => col.renderCell ? col.renderCell(v, row) : col.valueFormatter ? col.valueFormatter(v, row) : v == null ? "" : v;
 function renderDiffCell(col, val, row) {
@@ -9051,6 +9084,7 @@ function Datatable({
   searchable = true,
   quickFilter,
   onQuickFilterChange,
+  toolbarActions,
   rowPinning = false,
   rowReorder = false,
   rowResize = false,
@@ -9222,9 +9256,7 @@ function Datatable({
     if (typeof s.page === "number" && !pageControlled) setInternalPage(Math.max(0, Math.floor(s.page)));
     if (typeof s.pageSize === "number" && !pageSizeControlled) setInternalRpp(s.pageSize > 0 ? s.pageSize : 10);
     if (Array.isArray(s.columnOrder)) {
-      const savedOrder = s.columnOrder.filter((f) => known.has(f));
-      const missing = cols.map((c) => c.field).filter((f) => f && !savedOrder.includes(f));
-      setOrder([...savedOrder, ...missing]);
+      setOrder(mergeColOrder(s.columnOrder, cols.map((c) => c.field).filter(Boolean)));
     }
     if (s.columnWidths && typeof s.columnWidths === "object") setWidths(Object.fromEntries(Object.entries(s.columnWidths).filter(([f, w]) => known.has(f) && typeof w === "number")));
     if (s.columnVisibility && typeof s.columnVisibility === "object") setHidden(new Set(Object.keys(s.columnVisibility).filter((f) => known.has(f) && s.columnVisibility[f] === false)));
@@ -9336,12 +9368,7 @@ function Datatable({
   }));
   const pivotActive = pivotOn && pivotConfig.rows.length > 0 && pivotConfig.values.length > 0;
   React51__namespace.default.useEffect(() => {
-    setOrder((prev) => {
-      const fields = columns.map((c) => c.field);
-      const kept = prev.filter((f) => fields.includes(f));
-      const added = fields.filter((f) => !kept.includes(f));
-      return [...kept, ...added];
-    });
+    setOrder((prev) => mergeColOrder(prev, columns.map((c) => c.field).filter(Boolean)));
   }, [columns]);
   const densitySyncedRef = React51__namespace.default.useRef(false);
   React51__namespace.default.useEffect(() => {
@@ -10640,6 +10667,7 @@ function Datatable({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-dt ${className}`, ref: rootRef, "data-density": density, "data-resizing": resizing || void 0, ...rest, children: [
     __twcStyles,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__toolbar", "data-compact": compact || void 0, children: [
+      toolbarActions != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dt__toolbar-actions", children: toolbarActions }) : null,
       (batchActions.length || hasBatchEditor) && selected.size > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dt__batch", children: [
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dt__batch-x", onClick: clearSelection, "aria-label": "Clear selection", children: /* @__PURE__ */ jsxRuntime.jsx(Svg, { d: I.x }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "twc-dt__batch-count", children: [