fix(spa): frozen columns track row hover/selection background (#613) (#616)

Sticky body cells need an explicit background-color (so scrolling
content doesn't bleed through), but the fixed colour was OVERRIDING
the row's :hover and selection highlight — the frozen prefix stayed
white/dark while the rest of the row lit up, leaving the columns
visually disconnected.

Drive the cell bg from a `--dar-row-bg` custom property declared on
the <tr>, flipped on :hover and `data-selected="true"`, and consumed
by sticky cells via the new `dar-sticky-cell` class. One declaration
per state, one rule per cell — easy to extend if more row states
(striping, etc.) are added.

Header cells stay `bg-gray-50` — <thead> has no hover and selection
doesn't propagate up to it, so the existing flow is correct there.

Also: add the Django Packages badge to the README, bump 1.4.9 → 1.4.10.

Co-authored-by: Martin Castro Laminrs <mcastro@laminr.ai>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 3 people

README.md

@@ -1,5 +1,7 @@
 # django-admin-react
 
+[![Latest on Django Packages](https://img.shields.io/badge/PyPI-django--admin--react-tags-8c3c26.svg)](https://djangopackages.org/packages/p/django-admin-react/)
+
 A drop-in **React single-page admin** for any Django 5+ project. Same
 `pip install`, same `INSTALLED_APPS`, same `urls.py include()` — and
 your `ModelAdmin` classes drive everything. No React code on your side.

frontend/apps/web/src/index.css

@@ -98,6 +98,38 @@ body,
 .dark .hover\:text-gray-100:hover {
   color: #fff !important;
 }
+
+/* Frozen-column row-state propagation (#613). Sticky body cells need
+   an explicit background-color so scrolling content doesn't bleed
+   through — but that fixed colour then OVERRIDES the row's :hover /
+   selected highlight, leaving the frozen prefix visually disconnected
+   from the rest of the row. Fix: drive the cell bg from a CSS custom
+   property declared on the <tr>, and flip the property on :hover /
+   data-selected. One declaration per state, one rule per cell —
+   easy to extend if more row states are added (striping etc.). */
+.dar-table tbody tr {
+  --dar-row-bg: #fff;
+}
+.dar-table tbody tr:hover {
+  --dar-row-bg: #f9fafb; /* matches Tailwind hover:bg-gray-50 */
+}
+.dar-table tbody tr[data-selected='true'] {
+  --dar-row-bg: #eff6ff; /* light blue-50 — selection */
+
+  background-color: var(--dar-row-bg);
+}
+.dar-sticky-cell {
+  background-color: var(--dar-row-bg);
+}
+.dark .dar-table tbody tr {
+  --dar-row-bg: #111827; /* same as the bg-white .dark remap */
+}
+.dark .dar-table tbody tr:hover {
+  --dar-row-bg: #1f2937; /* same as hover:bg-gray-50 .dark remap */
+}
+.dark .dar-table tbody tr[data-selected='true'] {
+  --dar-row-bg: #1e3a8a;
+}
 /* Form controls have no explicit bg utility (the @dar/ui Input + the
    filter selects render on the browser-default white), so the bg-white
    remap above misses them — they'd stay white in dark mode. Style them

frontend/packages/ui/src/Table.tsx

@@ -204,6 +204,16 @@ export function Table<Row>({
       ? ''
       : `${base} z-10 ${key === lastStickyKey ? 'shadow-[2px_0_0_-1px_rgba(0,0,0,0.06)]' : ''}`;
   }
+  // Body-cell sticky background tracks the row's :hover / selection
+  // state via the `--dar-row-bg` custom property (apps/web/src/index.css
+  // #613). Header cells stay `bg-gray-50` — header has no hover and
+  // selection doesn't propagate up to <thead>, so the simpler
+  // `stickyClass` flow is fine there.
+  function stickyBodyClass(key: string): string {
+    return stickyLefts[key] === undefined
+      ? ''
+      : `dar-sticky-cell z-10 ${key === lastStickyKey ? 'shadow-[2px_0_0_-1px_rgba(0,0,0,0.06)]' : ''}`;
+  }
 
   const startResize = (key: string, e: ReactMouseEvent): void => {
     e.preventDefault();
@@ -227,7 +237,7 @@ export function Table<Row>({
 
   return (
     <div className="overflow-x-auto" aria-busy={loading || undefined}>
-      <table className={`min-w-full text-sm ${hasWidths ? 'table-fixed' : ''}`}>
+      <table className={`dar-table min-w-full text-sm ${hasWidths ? 'table-fixed' : ''}`}>
         {hasWidths && (
           <colgroup>
             {selectable && <col style={{ width: '2.5rem' }} />}
@@ -338,7 +348,7 @@ export function Table<Row>({
                 <tr key={`dar-skeleton-${i}`}>
                   {selectable && (
                     <td
-                      className={`w-10 px-4 py-2 ${stickyClass('__select', 'bg-white')}`}
+                      className={`w-10 px-4 py-2 ${stickyBodyClass('__select')}`}
                       style={stickyStyle('__select')}
                     >
                       <Skeleton className="h-4 w-4" />
@@ -347,7 +357,7 @@ export function Table<Row>({
                   {columns.map((col) => (
                     <td
                       key={col.key}
-                      className={`px-4 py-2 ${ALIGN_CLASSES[col.align ?? 'left']} ${col.sticky ? stickyClass(col.key, 'bg-white') : ''}`}
+                      className={`px-4 py-2 ${ALIGN_CLASSES[col.align ?? 'left']} ${col.sticky ? stickyBodyClass(col.key) : ''}`}
                       style={col.sticky ? stickyStyle(col.key) : undefined}
                     >
                       <Skeleton className="h-4 w-full max-w-[12rem]" />
@@ -357,15 +367,21 @@ export function Table<Row>({
               ))
             : rows.map((row) => {
                 const key = rowKey(row);
+                const isSelected = selectable && selected.has(key);
                 return (
                   <tr
                     key={key}
                     onClick={onRowClick ? () => onRowClick(row) : undefined}
+                    // `data-selected` propagates the checkbox state to
+                    // both the row's bg AND the frozen-cells' bg via
+                    // the `--dar-row-bg` custom property (apps/web/
+                    // src/index.css #613).
+                    data-selected={isSelected ? 'true' : undefined}
                     className={onRowClick ? 'cursor-pointer hover:bg-gray-50' : ''}
                   >
                     {selectable && (
                       <td
-                        className={`w-10 px-4 py-2 ${stickyClass('__select', 'bg-white')}`}
+                        className={`w-10 px-4 py-2 ${stickyBodyClass('__select')}`}
                         style={stickyStyle('__select')}
                         onClick={(e) => e.stopPropagation()}
                       >
@@ -379,7 +395,7 @@ export function Table<Row>({
                     {columns.map((col, ci) => (
                       <td
                         key={col.key}
-                        className={`px-4 py-2 ${ALIGN_CLASSES[col.align ?? 'left']} ${col.sticky ? stickyClass(col.key, 'bg-white') : ''}`}
+                        className={`px-4 py-2 ${ALIGN_CLASSES[col.align ?? 'left']} ${col.sticky ? stickyBodyClass(col.key) : ''}`}
                         style={col.sticky ? stickyStyle(col.key) : undefined}
                       >
                         {/* Cap very wide cells and truncate with an

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "django-admin-react"
-version = "1.4.9"
+version = "1.4.10"
 description = "A drop-in React single-page admin for Django, driven entirely by ModelAdmin."
 authors = ["django-admin-react contributors"]
 license = "MIT"