feat(spa): honour list_display_links in the changelist (#666)

The changelist wire emits list_display_links; the Table/RecordCardList
primitives now link exactly the columns flagged isLink (set by ListPage from
the wire) instead of hard-pinning the first column — and link none / make the
row inert when the admin sets list_display_links = None. A pre-1.6.0 backend
(field absent) keeps the legacy first-column behaviour. Table tests cover the
explicit-link, no-link, and legacy-fallback paths.

Note: ListPage also gains virtualizeRows on the Table for #670 (committed next).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: martin-castro-laminr-ai

frontend/apps/web/src/pages/ListPage.tsx

@@ -423,6 +423,19 @@ export function ListPage() {
   // live here was retired in v1.3.0 along with the HTML5-DnD modal
   // it served (#586).
 
+  // list_display_links (#666): the ModelAdmin chooses which column(s) link
+  // to the change page. The backend emits the resolved set (defaulting to
+  // the first column); an empty array means `list_display_links = None` —
+  // no column links and the rows are not clickable. When the field is
+  // ABSENT (a pre-1.6.0 backend), fall back to the legacy behaviour of
+  // linking the first non-pk column, so older deployments are unaffected.
+  const displayLinks = data.list_display_links;
+  const firstNonPkName = orderedDescriptors.find((c) => !isPkCol(c.name))?.name;
+  const isLinkColumn = (name: string): boolean => {
+    if (displayLinks === undefined) return name === firstNonPkName; // legacy fallback
+    return displayLinks.includes(name);
+  };
+
   const columns = orderedDescriptors
     // The pk column is never hidden, even if a stale preference lists it.
     .filter((c) => isPkCol(c.name) || !hiddenCols.has(c.name))
@@ -431,6 +444,7 @@ export function ListPage() {
       header: c.label,
       sortable: c.sortable,
       noTruncate: isPkCol(c.name),
+      isLink: isLinkColumn(c.name),
       // Frozen / sticky columns (#586): pk is implicitly always
       // locked + sticky; the user-locked set adds more. The Table
       // primitive measures pixel offsets after layout and writes
@@ -804,6 +818,10 @@ export function ListPage() {
             loading={loading}
             columnWidths={colWidths}
             onColumnResize={resizeColumn}
+            // Native row windowing on the "Show all N" path (#670): up to
+            // list_max_show_all (200) rows render at once; off-screen rows
+            // skip layout/paint via content-visibility.
+            virtualizeRows={showAll}
           />
         </Card>
       )}

frontend/packages/ui/src/RecordCardList.tsx

@@ -60,6 +60,17 @@ export function RecordCardList<Row>({
   // First column = identity → title; the rest become the label/value body.
   const [titleCol, ...detailCols] = columns;
 
+  // list_display_links (#666): when the caller explicitly links NO column
+  // (`list_display_links = None` → every column carries `isLink: false`),
+  // the title is plain text and the card is not tappable — matching the
+  // desktop `<Table>`. Otherwise behaviour is unchanged: the card is
+  // tappable when `onRowClick` is set, and the title is an anchor when
+  // `rowHref` is set (the legacy default of "first column = identity link").
+  const anyExplicitLink = columns.some((c) => c.isLink !== undefined);
+  const linksDisabled = anyExplicitLink && !columns.some((c) => c.isLink);
+  const titleLinks = !linksDisabled;
+  const cardNav = linksDisabled ? undefined : onRowClick;
+
   if (loading) {
     return (
       <ul className="space-y-2" aria-busy="true">
@@ -87,23 +98,23 @@ export function RecordCardList<Row>({
           <li
             key={key}
             onClick={
-              onRowClick
+              cardNav
                 ? (e) => {
                     // A modified click (Cmd/Ctrl/Shift/Alt) is the browser's
                     // open-in-new-tab gesture — let the title anchor handle
                     // it; don't also navigate in-app.
                     if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
-                    onRowClick(row);
+                    cardNav(row);
                   }
                 : undefined
             }
             className={`rounded-lg border bg-white p-4 ${
               isSelected ? 'border-primary' : 'border-gray-300'
-            } ${onRowClick ? 'cursor-pointer hover:bg-gray-50' : ''}`}
+            } ${cardNav ? 'cursor-pointer hover:bg-gray-50' : ''}`}
           >
             <div className="flex items-start justify-between gap-3">
               <div className="min-w-0 flex-1 font-medium text-gray-900">
-                {rowHref && titleCol ? (
+                {titleLinks && titleCol && rowHref ? (
                   // Real anchor so native open-in-new-tab works; a plain
                   // left-click is intercepted for in-app nav (#253).
                   <a
@@ -113,7 +124,7 @@ export function RecordCardList<Row>({
                       if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
                       e.preventDefault();
                       e.stopPropagation();
-                      onRowClick?.(row);
+                      cardNav?.(row);
                     }}
                   >
                     {title}

frontend/packages/ui/src/Table.test.tsx

@@ -139,4 +139,56 @@ describe('Table', () => {
     expect(th.getAttribute('tabindex')).toBeNull();
     expect(th.getAttribute('aria-sort')).toBeNull();
   });
+
+  describe('list_display_links (#666)', () => {
+    const linkRows: Row[] = [{ id: 1, name: 'Alice' }];
+
+    it('links the column(s) flagged isLink, not the first column, when isLink is set explicitly', () => {
+      const cols: TableColumn<Row>[] = [
+        { key: 'id', header: 'ID', isLink: false, render: (r) => `#${r.id}` },
+        { key: 'name', header: 'Name', isLink: true, render: (r) => r.name },
+      ];
+      render(
+        <Table columns={cols} rows={linkRows} rowKey={(r) => r.id} rowHref={(r) => `/x/${r.id}`} />,
+      );
+      // The `name` cell is the link; the `id` cell is plain text.
+      const nameLink = screen.getByText('Alice').closest('a');
+      expect(nameLink).not.toBeNull();
+      expect(nameLink?.getAttribute('href')).toBe('/x/1');
+      expect(screen.getByText('#1').closest('a')).toBeNull();
+    });
+
+    it('renders NO cell links and an inert row when no column is a link (list_display_links = None)', () => {
+      const onRowClick = vi.fn();
+      const cols: TableColumn<Row>[] = [
+        { key: 'id', header: 'ID', isLink: false, render: (r) => `#${r.id}` },
+        { key: 'name', header: 'Name', isLink: false, render: (r) => r.name },
+      ];
+      const { container } = render(
+        <Table
+          columns={cols}
+          rows={linkRows}
+          rowKey={(r) => r.id}
+          rowHref={(r) => `/x/${r.id}`}
+          onRowClick={onRowClick}
+        />,
+      );
+      expect(container.querySelector('tbody a')).toBeNull();
+      // Row is not clickable when nothing links.
+      fireEvent.click(screen.getByText('Alice'));
+      expect(onRowClick).not.toHaveBeenCalled();
+      expect((container.querySelector('tbody tr') as HTMLElement).className).not.toContain(
+        'cursor-pointer',
+      );
+    });
+
+    it('falls back to linking the first column when no column declares isLink (legacy / pre-1.6.0)', () => {
+      render(
+        <Table columns={columns} rows={linkRows} rowKey={(r) => r.id} rowHref={(r) => `/x/${r.id}`} />,
+      );
+      // `columns` here is [id, name] with no isLink → first column links.
+      expect(screen.getByText('1').closest('a')).not.toBeNull();
+      expect(screen.getByText('Alice').closest('a')).toBeNull();
+    });
+  });
 });

frontend/packages/ui/src/Table.tsx

@@ -41,6 +41,17 @@ export interface TableColumn<Row> {
    * scrolling content (#586 — column-lock / frozen-cols feature).
    */
   sticky?: boolean;
+  /**
+   * Render this column's cell as a link to the row's detail/change page
+   * (the `rowHref` target). Mirrors Django's `list_display_links` (#666):
+   * the ModelAdmin chooses which column(s) link, not the SPA. When NO
+   * column sets this, the table renders no cell links and rows are not
+   * clickable (matching `list_display_links = None`). Falls back to a
+   * sensible default (the first non-selection column) only when the caller
+   * leaves every column's `isLink` unset AND `rowHref` is provided — see
+   * the Table body for the back-compat path.
+   */
+  isLink?: boolean;
 }
 
 export interface TableProps<Row> {
@@ -97,8 +108,27 @@ export interface TableProps<Row> {
    * table keeps roughly its prior height.
    */
   skeletonRows?: number;
+  /**
+   * Row virtualization for very long lists (#670 — the `?all` "Show all N"
+   * path renders up to `list_max_show_all`, 200 by default, rows at once).
+   * When set, each body row gets `content-visibility: auto` +
+   * `contain-intrinsic-size`, so the browser skips layout/paint for
+   * off-screen rows (native windowing) while keeping them in the DOM for
+   * Ctrl-F / a11y / native scroll. Cheaper and far less fragile than a
+   * JS windowing library given the sticky-column offset measurement this
+   * primitive already does. Off (undefined) for normal paginated lists,
+   * which are short enough that the optimisation isn't worth the
+   * intrinsic-size estimate.
+   */
+  virtualizeRows?: boolean;
 }
 
+// Estimated row height for `contain-intrinsic-size` when virtualizing
+// (#670). Only an estimate — it sets the placeholder size for an
+// off-screen, not-yet-laid-out row so the scrollbar stays proportional;
+// the real height is used once the row scrolls into view.
+const ESTIMATED_ROW_HEIGHT_PX = 41;
+
 const ALIGN_CLASSES = {
   left: 'text-left',
   right: 'text-right',
@@ -123,6 +153,7 @@ export function Table<Row>({
   skeletonRows,
   columnWidths,
   onColumnResize,
+  virtualizeRows = false,
 }: TableProps<Row>) {
   // Hooks must run unconditionally and in stable order on every
   // render — the empty-state early-return below has to come AFTER
@@ -189,6 +220,26 @@ export function Table<Row>({
   const hasWidths = columnWidths != null && Object.keys(columnWidths).length > 0;
   const resizable = onColumnResize != null;
 
+  // list_display_links (#666): which columns render their cell as a link to
+  // `rowHref(row)`. The caller (ListPage) sets `isLink` per the wire's
+  // `list_display_links`. Back-compat: when NO column declares `isLink` at
+  // all, fall back to linking the first column (the historic behaviour) so
+  // existing callers that don't pass the flag keep their links. When the
+  // caller DOES set `isLink` on some column(s), we honour exactly those —
+  // and when it explicitly sets none-to-true (e.g. `list_display_links =
+  // None`), no cell links and the rows are not clickable.
+  const anyExplicitLink = columns.some((c) => c.isLink !== undefined);
+  const isLinkCol = (col: TableColumn<Row>, index: number): boolean => {
+    if (!rowHref) return false;
+    if (anyExplicitLink) return col.isLink === true;
+    return index === 0; // legacy default
+  };
+  // When the caller explicitly links NO column (`list_display_links = None`
+  // → every column carries `isLink: false`), the rows are inert. Otherwise
+  // behaviour is unchanged: the row is clickable when `onRowClick` is set.
+  const linksDisabled = anyExplicitLink && !columns.some((c) => c.isLink === true);
+  const rowClickActive = linksDisabled ? undefined : onRowClick;
+
   // Helpers to build the sticky `<th>` / `<td>` style + className.
   // `style.left` is set so the browser knows where to pin during
   // horizontal scroll; the cell needs a background colour so content
@@ -371,13 +422,24 @@ export function Table<Row>({
                 return (
                   <tr
                     key={key}
-                    onClick={onRowClick ? () => onRowClick(row) : undefined}
+                    onClick={rowClickActive ? () => rowClickActive(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' : ''}
+                    // Native row windowing on the show-all path (#670): skip
+                    // layout/paint for off-screen rows, keeping them in the
+                    // DOM for find-in-page / a11y / native scroll.
+                    style={
+                      virtualizeRows
+                        ? {
+                            contentVisibility: 'auto',
+                            containIntrinsicSize: `auto ${ESTIMATED_ROW_HEIGHT_PX}px`,
+                          }
+                        : undefined
+                    }
+                    className={rowClickActive ? 'cursor-pointer hover:bg-gray-50' : ''}
                   >
                     {selectable && (
                       <td
@@ -414,10 +476,12 @@ export function Table<Row>({
                                 : 'max-w-[16rem] truncate'
                           }
                         >
-                          {ci === 0 && rowHref ? (
-                            // Real anchor on the first cell so the browser's
-                            // native open-in-new-tab works (#253); a plain
-                            // left-click is intercepted for in-app nav.
+                          {isLinkCol(col, ci) && rowHref ? (
+                            // Real anchor on each list_display_links column so
+                            // the browser's native open-in-new-tab works
+                            // (#253); a plain left-click is intercepted for
+                            // in-app nav. Which column(s) link is the
+                            // ModelAdmin's choice (#666).
                             <a
                               href={rowHref(row)}
                               className="text-inherit no-underline hover:underline"