Page MenuHomePhabricator

Table: Add row selection
Closed, ResolvedPublic5 Estimated Story Points



User story

As a user, I want a clear way to select a table row


For this patch, a new boolean prop called useRowSelection should be added to the Table component. Another prop, selectedRows, will be bound via v-model by the parent component and will be an array of selected row indexes.

UI and interaction

In the Table component, when useRowSelection is true, a checkbox will be added to the start of each row, plus one in the table header that selects all checkboxes. When the user selected a row, the Table component will communicate which row(s) are selected to the parent component. Selected rows have special styles to indicate that they are selected.

Demos and testing

A new demo demonstrating row selection should be added. Unit/snapshot tests should be added to cover this new functionality.

Acceptance criteria

  • The Table component has two new props: useRowSelection and selectedRows
  • When useRowSelection is true, checkboxes are displayed for row selection
  • Selected rows are styled properly
  • The "select all rows" checkbox works intuitively
  • A demo is added for row selection
  • Unit tests are included

Related Objects

In ProgressSarai-WMDE

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
CCiufo-WMF triaged this task as Medium priority.Mar 14 2024, 3:01 PM
lwatson set the point value for this task to 3.Mar 18 2024, 5:44 PM

Change #1021493 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Table: Add row selection

I have a question about the desired UX for row selection.

I see that the checkbox for "select all rows" goes into the indeterminate state [-] when you select all and then un-select one or more rows individually.

However, the checkbox does not enter the indeterminate state when you just check one or two rows by themselves.

Is this the intended UX, or do we want the top-left checkbox to become indeterminate as soon as a single row is selected? The Figma mock-ups seem to imply the latter but I want to confirm.

Screenshot 2024-04-25 at 12.04.18 PM.png (748×2 px, 93 KB)

Screenshot 2024-04-25 at 12.04.07 PM.png (760×2 px, 97 KB)

We should only show the indeterminate status if the user checked the "select all rows" box, then unchecked a row. The state is only used to inform the user that an action they took (selecting all) has been changed by the interface.

Change #1021493 merged by jenkins-bot:

[design/codex@main] Table: Add row selection

Hey @AnneT and @egardner 👋🏻 I appreciate the question. This is totally my bad because the specs are pretty buried in Figma and the guidelines (See Row selection states section).

Screenshot 2024-04-26 at 11.07.25.png (1×1 px, 133 KB)

I considered both approaches, and I'm still open to suggestions, but my original conclusion was that the best solution would be to follow the standard behavior for groups of checkboxes that Eric is describing in the Table's context too (documented in the Codex documentation and MDN for reference). It sounded more consistent and transparent* to make sure that the "owning" checkbox always communicates the state of partial selection, regardless of the user flow.

(* Regarding transparency: the indeterminate state might be a useful indicator in long or paginated tables that don't feature a custom selection indicator, where selected rows might be out of sight. There's also a discoverability argument: If the heading checkbox reacts to the individual selection of rows, this might help users understand right away the relationship between the parent and sub-checkboxes.)

lwatson changed the task status from Open to In Progress.Fri, Apr 26, 11:13 PM

Change #1025849 had a related patch set uploaded (by LWatson; author: LWatson):

[mediawiki/core@master] Update Codex from v1.4.0 to v1.5.0

Change #1025849 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.4.0 to v1.5.0