MudTable: Scroll to row & focus cell

[Anu6is]

Description

Adds two new public APIs to MudTable

• ScrollToItemAsync: Scrolls to a specific item within the table into view
• FocusCellAsync: Focuses a specific cell by first scrolling to bring the item into view, performing a click and then a select

Resolves #5445

How Has This Been Tested?

Visually and unit test

Type of Changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation (fix or improvement to the website or code docs)

table.demo.mp4

Checklist

• The PR is submitted to the correct branch (dev).
• My code follows the code style of this project.
• I've added relevant tests.

[codecov]

Codecov Report

❌ Patch coverage is 88.88889% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 91.32%. Comparing base (1b5ac83) to head (045c858).

Files with missing lines	Patch %	Lines
src/MudBlazor/Services/Scroll/ScrollManager.cs	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##              dev   #11569   +/-   ##
=======================================
  Coverage   91.31%   91.32%           
=======================================
  Files         466      466           
  Lines       14725    14728    +3     
  Branches     2870     2871    +1     
=======================================
+ Hits        13446    13450    +4     
- Misses        636      637    +1     
+ Partials      643      641    -2     

☔ View full report in Codecov by Sentry.
📢 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.

[Copilot]

Pull Request Overview

Adds two new public APIs, ScrollToItemAsync and FocusCellAsync, to allow programmatic scrolling and cell focusing in MudTable. Key changes include:

• New JavaScript helpers in mudTableCell.js and expanded mudScrollManager.js for scrolling and cell focus/select.
• Extended C# scroll services (IScrollManager & ScrollManager) and injected them into MudTable, plus new methods in MudTable.razor.cs.
• Added RowId support in MudTr, wired up row IDs in MudTable.razor, updated unit tests, mocks, and documentation with an example.

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/MudBlazor/TScripts/mudTableCell.js	New JS class for focusing and selecting table cells
src/MudBlazor/TScripts/mudScrollManager.js	Added scrollToVirtualizedItem helper
src/MudBlazor/Services/Scroll/IScrollManager.cs	Declared ScrollToVirtualizedItemAsync
src/MudBlazor/Services/Scroll/ScrollManager.cs	Implemented ScrollToVirtualizedItemAsync
src/MudBlazor/Components/Table/MudTr.razor.cs and MudTr.razor	Added RowId parameter and applied id attribute
src/MudBlazor/Components/Table/MudTable.razor.cs and .razor	Introduced ScrollToItemAsync & FocusCellAsync, row-ID generation
src/MudBlazor.UnitTests/Components/TableTests.cs	New tests for scrolling and focus behavior
src/MudBlazor.UnitTests.Shared/Mocks/MockScrollServices.cs	Extended mock with ScrollToVirtualizedItemAsync
src/MudBlazor.Docs/Pages/Components/Table/TablePage.razor	Added docs section for programmatic scroll & focus
src/MudBlazor.Docs/.../Examples/TableScrollFocusExample.razor	Added example demonstrating new APIs

Comments suppressed due to low confidence (3)

src/MudBlazor/Components/Table/MudTable.razor.cs:98

• [nitpick] Calling FilteredItems.ToList() for each row can be expensive on large tables. Consider materializing FilteredItems.ToList() once outside the loop and reusing it to avoid repeated allocations.

                return true;

src/MudBlazor.UnitTests/Components/TableTests.cs:2746

• The FocusCellAsync implementation also calls mudTableCell.selectCell, but the test only verifies focusCell. Add a verification for the selectCell invocation to fully cover the behavior.

            jsRuntimeMock.Verify(x => x.InvokeAsync<IJSVoidResult>("mudTableCell.focusCell", It.IsAny<object[]>()), Times.Once);

src/MudBlazor/Components/Table/MudTable.razor.cs:821

• The selector uses an extra "$" inside the interpolated string, resulting in an invalid CSS selector like tbody > tr:nth-child($6). Change it to var selector = $"tbody > tr:nth-child({itemIndex + 1})";.

                    var selector = $"tbody > tr:nth-child(${itemIndex + 1})";

[versile2]

Looks good, I made a comment or two but they are semantics. The Docs I would definitely change to match our other patterns. I was a little curious on the calling focus and select both and separately but I'm sure you had your reasons.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[ScarletKuro]

looks good, just requires few indents fixes

[ScarletKuro]

indent

[ScarletKuro]

indent

[ScarletKuro]

indent

[zarkin-dev]

Any chance on this moving forward? I need this exact feature.