Skip to content

feat: keep and expand ancestor rows when filtering expandable tables#4809

Draft
ernst-dev wants to merge 2 commits into
mainfrom
feat/table-expandable-filter-highlight
Draft

feat: keep and expand ancestor rows when filtering expandable tables#4809
ernst-dev wants to merge 2 commits into
mainfrom
feat/table-expandable-filter-highlight

Conversation

@ernst-dev

Copy link
Copy Markdown
Member

Description

Adds an opt-in enhancement to Table with expandableRows: when the data is filtered, ancestor rows of matching descendants stay visible, those ancestors are auto-expanded so the matches are reachable, and the matched rows are visually highlighted.

Addresses AWSUI-61158 ("Filter highlights in expandable table"): with expandable rows + property filtering today, matches nested inside collapsed parents are not reachable and it is unclear which rows actually matched. This change makes matches immediately discoverable without breaking existing behavior.

New (optional) expandableRows sub-properties on TableProps.ExpandableRows:

  • highlightMatched?: boolean — turns the behavior on.
  • isItemMatched?: (item) => boolean — predicate identifying which items match the current filter. Used to decide which ancestors to auto-expand and which rows to highlight.

Both are optional and default to the previous behavior, so this is fully backward compatible.

Implementation notes:

  • The logic lives in useExpandableTableProps (src/table/expandable-rows/expandable-rows-utils.ts): a full-tree pass collects matched items and every ancestor on the path to a match into an auto-expand set; the visible-row traversal then treats an item as expanded when it is either consumer-expanded or auto-expanded (isEffectivelyExpanded).
  • Matched rows receive a row-match-highlight marker (and a background-only cell treatment via color-background-status-info, so no row-height shift; selection still takes precedence).
  • Auto-expanded ancestors report aria-expanded="true" and toggling one fires onExpandableItemToggle with expanded: false, keeping the consumer's expandedItems model authoritative.
  • Added findMatchedRows() to the table test-utils DOM wrapper.

Related links, issue #, if available: AWSUI-61158

How has this been tested?

  • New unit test suite src/table/__tests__/expandable-rows-filter-highlight.test.tsx (8 tests, all passing) covering auto-expansion of ancestors, single/multi-level highlighting, aria-expanded, toggle semantics, backward compatibility, no expansion of non-matching subtrees, and coexistence with manually expanded items.
  • Existing expandable-rows + group-selection suites re-run green (42 tests) — no regressions.
  • New dev page pages/table/expandable-rows-filter-highlight.page.tsx for manual/visual testing (type in the filter to see ancestors auto-expand and matches highlight; toggle the behavior off to compare).
  • eslint, stylelint, quick-build, and tsc (pages) all green.

Reviewers can run: TZ=UTC npx jest --config jest.unit.config.js src/table/__tests__/expandable-rows-filter-highlight.test.tsx and open the new dev page via npm start.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates. (interface JSDoc updated)
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md. (opt-in, default behavior unchanged)
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines. (aria-expanded verified)

Security

  • If the code handles URLs: all URLs are validated through the checkSafeUrl function. (n/a — no URLs)

Testing

  • Changes are covered with new/existing unit tests? (yes)
  • Changes are covered with new/existing integration tests? (unit + dev page; no integ added)

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@codecov

codecov Bot commented Jul 23, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.61%. Comparing base (f97729a) to head (3570d37).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #4809   +/-   ##
=======================================
  Coverage   97.61%   97.61%           
=======================================
  Files         952      952           
  Lines       30816    30845   +29     
  Branches    11318    11326    +8     
=======================================
+ Hits        30081    30110   +29     
- Misses        688      728   +40     
+ Partials       47        7   -40     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant