---
title: Add row click and selected rows to react-table
type: task
status: completed
description: >-
  Add an on_row_click callback and controlled selected_row_ids to the shared react-table component,
  needed by the league lineups page player panel and compare mode.
base_uri: user:task/react-table/add-row-click-and-selected-rows.md
created_at: '2026-09-28T01:15:03.744Z'
entity_id: a6a1c880-96be-4824-b629-ed86fbf00ae7
finished_at: '2026-09-28T04:23:51.671Z'
observations:
  - ████████████████████████████████████████████████
owner_identity_uri: █████████████████████████
priority: Medium
public_read: true
relations:
  - subtask_of [[█████████████████████████-███████-████-███-█████-███-████████████]]
started_at: '2026-09-28T03:18:09.488Z'
tags:
  - user:tag/league-xo-football.md
updated_at: '2026-09-28T04:23:52.879Z'
visibility_analyzed_at: '2026-11-05T23:50:41.635Z'
---

# Add row click and selected rows to react-table

## Overview

- Add a row-click callback and a controlled set of selected rows to the shared `react-table` component.
- Impact: the redesigned league `/lineups` page opens a player panel when a row is clicked and uses the selected rows for compare mode. Today a cell click only copies the cell's value.
- Ordering: a child of [[█████████████████████████-███████-████-███-█████-███-████████████]]; the desktop decision table there needs this change first.

## Background

- Props are declared at `repository/active/react-table/src/table/table.js:1249-1322`.
- `row_highlights` and `local_highlights` (`src/table/table.js:158,547-554`) already carry per-row visual state through context. Selection may reuse that path.
- A cell click copies its value to the clipboard (`src/table-cell/table-cell.js:114-122`).
- The league app pins this package by commit in `repository/active/league/package.json`.

## Assumptions

- No current consumer relies on a row click doing nothing beyond the cell copy. Unchecked: grep the three league `Table` import sites before merging.
- The selected-row style can use the existing highlight rendering. Checked 2026-09-28 and false: `row_highlights` carries search-match text ranges per cell, so selection is a `row--selected` class on the row, coloured through `--rt-row-surface` like hover.

## Plan

- [x] **Add the row-click and selected-row props**
  - File: `repository/active/react-table/src/table/table.js`, `src/table-cell/table-cell.js`, row components
  - Changes: add `on_row_click(row)`, `selected_row_ids` (controlled) and `get_row_id(row)`. Clicking a row calls `on_row_click` and does not also copy the cell. Keep the clipboard copy on a modifier or a copy control only when `on_row_click` is set.
  - Verify: `yarn lint` and `yarn build` pass; the dev harness shows a click firing the callback and a selected row styled.
- [x] **Style selected rows**
  - Changes: selected rows reuse the highlight rendering path and follow the consumer's `STYLE.md` rule of one accent colour.
  - Verify: manual check in the league dev app with `yarn dev:live`.
  - Status: the league check found selected rows unpainted, because `table.styl` never imported the tokens and a consumer build injects none. Fixed in react-table 5f61f06; verified in league, where the selected row's surface now resolves to the accent tint and the pinned column carries it.
- [x] **Bump the league pin**
  - File: `repository/active/league/package.json`
  - Verify: the three existing `Table` sites (data views, plays, selected player plays) behave as before with no `on_row_click` passed.
  - Status: league 81cd78271 pins 7dd5d76. The data views and plays tables render with no clickable or selected rows and no page errors. The selected-player plays drawer uses the same component with no `on_row_click` passed.
- [x] **Document the props**
  - File: `repository/active/react-table/README.md`
  - Verify: (no verify — mechanical step)