twico-ui 1.44.0 → 1.45.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.45.0](https://github.com/EncryptionL/twico-ui/compare/v1.44.0...v1.45.0) (2026-10-16)
+
+
+### Bug Fixes
+
+* **datatable:** lift getRowStyle's background off the <tr> instead of copying it ([e54165e](https://github.com/EncryptionL/twico-ui/commit/e54165e918dad9d8f0f819890ebb718684bdfc07)), closes [#242](https://github.com/EncryptionL/twico-ui/issues/242) [#481](https://github.com/EncryptionL/twico-ui/issues/481)
+
+
+### Features
+
+* **datatable:** getRowStyle / getRowClassName — row-level style hooks ([56a80e8](https://github.com/EncryptionL/twico-ui/commit/56a80e8c7adeb293923b5f2e490cf62234df3a3a)), closes [#345](https://github.com/EncryptionL/twico-ui/issues/345) [#242](https://github.com/EncryptionL/twico-ui/issues/242)
+
 # [1.44.0](https://github.com/EncryptionL/twico-ui/compare/v1.43.0...v1.44.0) (2026-10-16)
 
 

package/dist/index.cjs

@@ -9252,8 +9252,22 @@ var DT_CSS = `
 .twc-dt__row:hover .twc-dt__row-resizer::after { background: var(--color-border-strong); }
 .twc-dt__row-resizer:hover::after { background: var(--color-primary); }
 
+/* #481: the cell background reads --twc-dt-row-bg, which getRowStyle sets on the <tr>. It has to come
+   through a custom property rather than straight off the row, because this rule paints an OPAQUE
+   --color-surface on every cell: a background set on the <tr> would sit behind it and never show,
+   which would make the commonest use of a row-style hook silently do nothing. Cells in a pinned
+   COLUMN inherit it too, so a tinted row does not develop a hole where a sticky column scrolls over
+   it.
+   Layering: this rule is (0,1,0), the LOWEST specificity of any background in this sheet, so the
+   row tint is the bottom layer above the plain surface and every built-in state covers it - hover,
+   row selection, data-active, data-pinned-row, data-row-grabbed, the diff data-op washes, cell
+   selection/active, inline editing (each (0,3,0), (0,4,0) for the pinned-column twins, or (0,2,0)
+   for the cell-level ones) - and an inline per-cell cellStyle
+   covers them all. That is the intended rule, not an accident of ordering: a row tint is a
+   data-derived wash, and no data wash should be able to hide an interaction state. Consumers who
+   need a tint that outranks those use getRowClassName and a rule of their own. */
 .twc-dt__td { padding: 0 12px; height: var(--_rowh, 44px); border-bottom: var(--border-thin) solid var(--color-divider);
-  font-size: var(--text-sm); color: var(--color-text); background: var(--color-surface);
+  font-size: var(--text-sm); color: var(--color-text); background: var(--twc-dt-row-bg, var(--color-surface));
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
 /* Wrap-text columns: content flows onto multiple lines (the row grows down) instead of
    clipping to one line. height stays a per-row minimum, so single-line cells are unchanged. */
@@ -10020,6 +10034,8 @@ function Datatable({
   onColumnVisibilityChange,
   batchActions = [],
   onRowSelectionChange,
+  getRowStyle,
+  getRowClassName,
   showExport = false,
   showDensity = false,
   showPivot = false,
@@ -12595,7 +12611,17 @@ function Datatable({
     const rowActive = selectionMode === "row" && activeRowVal === k;
     const stickyStyle = pinSide === "top" ? { position: "sticky", top: headH, zIndex: 5 } : pinSide === "bottom" ? { position: "sticky", bottom: 0, zIndex: 5 } : void 0;
     const h = rowHeights[k];
-    const rowStyle = { ...stickyStyle || {}, ...h ? { height: h } : {} };
+    const userRowStyle = getRowStyle ? getRowStyle(row, ri) : void 0;
+    const userRowClass = getRowClassName ? getRowClassName(row, ri) : void 0;
+    const { background: _rowBgShorthand, backgroundColor: _rowBgColor, ...restRowStyle } = userRowStyle || {};
+    const usable = (v) => typeof v === "string" && v.trim() !== "" ? v : void 0;
+    const rowBg = usable(_rowBgShorthand) ?? usable(_rowBgColor);
+    const rowStyle = {
+      ...restRowStyle,
+      ...rowBg != null ? { "--twc-dt-row-bg": rowBg } : {},
+      ...stickyStyle || {},
+      ...h ? { height: h } : {}
+    };
     const reorderable = canReorderRows && !pinSide;
     const grabbed = rowGrab && rowGrab.key === k;
     const grabTarget = rowGrab && !grabbed && midIdx != null && rowGrab.index === midIdx ? rowGrab.index >= keyIndexMid.get(rowGrab.key) ? "after" : "before" : void 0;
@@ -12603,7 +12629,7 @@ function Datatable({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "tr",
         {
-          className: "twc-dt__row",
+          className: userRowClass ? `twc-dt__row ${userRowClass}` : "twc-dt__row",
           role: "row",
           "aria-rowindex": treeSeqByKey ? treeSeqByKey.get(k) + 2 : (paginated && !serverMode ? pageVal * sizeVal : 0) + ri + 2,
           "aria-selected": (checkboxSelection ? sel : rowActive) || void 0,