Skip to content

[DataGrid] Fix issue when scrolling horizontally and Virtualize="true" #3117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vnbaaij merged 13 commits into from
Jan 2, 2025
Merged

[DataGrid] Fix issue when scrolling horizontally and Virtualize="true" #3117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5500892
[DataGrid]
vnbaaij Dec 27, 2024
004ccdc
Add IssueTeste with current issue example
vnbaaij Dec 27, 2024
e94143e
Fix tests
vnbaaij Dec 27, 2024
5db5527
Merge branch 'dev' into users/vnbaaij/datagrid-issue
vnbaaij Dec 31, 2024
3291da8
Add specific block to issue page for this issue
vnbaaij Dec 31, 2024
c1e5154
Merge branch 'users/vnbaaij/datagrid-issue' of https://github.com/mic…
vnbaaij Dec 31, 2024
39b299f
Add DataGrid Rendermode
vnbaaij Jan 2, 2025
a3f3d67
Merge branch 'dev' into users/vnbaaij/datagrid-issue
vnbaaij Jan 2, 2025
a672064
Fix tests
vnbaaij Jan 2, 2025
ccfac21
Rename Rendermode to DisplayMode
vnbaaij Jan 2, 2025
a73966d
Merge branch 'dev' into users/vnbaaij/datagrid-issue
dvoituron Jan 2, 2025
c763c13
Merge branch 'dev' into users/vnbaaij/datagrid-issue
vnbaaij Jan 2, 2025
d53cb59
Fix tests
vnbaaij Jan 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1956,6 +1956,7 @@
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.OnRowFocus">
<summary>
Gets or sets a callback when a row is focused.
As of 4.11 a row is a tr element with a 'display: contents'. Browsers can not focus such elements currently, but work is underway to fix that.
</summary>
</member>
<member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1.OnCellFocus">
Expand Down Expand Up @@ -13567,6 +13568,23 @@
Cell is a row header.
</summary>
</member>
<member name="T:Microsoft.FluentUI.AspNetCore.Components.DataGridDisplayMode">
<summary>
The type of rendering to use for the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>
</summary>
</member>
<member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridDisplayMode.Grid">
<summary>
Uses display:grid with HTML table elements to render the DataGrid.
With this mode fr units canbe used to set the column widths.
</summary>
</member>
<member name="F:Microsoft.FluentUI.AspNetCore.Components.DataGridDisplayMode.Table">
<summary>
Uses HTML table elements only to render the DataGrid.
With this mode fr units cannot be used to set the column widths.
</summary>
</member>
<member name="T:Microsoft.FluentUI.AspNetCore.Components.DataGridResizeType">
<summary>
The type of <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1"/> in a <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1"/>.
Expand Down
6 changes: 1 addition & 5 deletions examples/Demo/Shared/Pages/Lab/IssueTester3102.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@

<h2>FluentDataGrid</h2>
<div style="height: 400px; width: 800px; overflow-y: scroll;">
<FluentDataGrid @ref="grid1" Items=@items Virtualize="true" RowSize="DataGridRowSize.Medium" ItemSize="44" GenerateHeader="@GenerateHeaderOption.Sticky">

<FluentDataGrid @ref="grid1" Items=@items Virtualize="true" RowSize="DataGridRowSize.Medium" ItemSize="44" GenerateHeader="@GenerateHeaderOption.Sticky" DisplayMode="DataGridDisplayMode.Table">
<PropertyColumn Property="@(c => c.Item1)" Sortable="true" />
<PropertyColumn Property="@(c => c.Item2)" />
<PropertyColumn Property="@(c => c.Item3)" Align="Align.Center" />
Expand All @@ -23,15 +22,12 @@
<PropertyColumn Property="@(c => c.Item14)" />
<PropertyColumn Property="@(c => c.Item15)" Align="Align.Center" />
<PropertyColumn Property="@(c => c.Item16)" Align="Align.End" />


</FluentDataGrid>
</div>


@code {
FluentDataGrid<SampleGridData>? grid1;
FluentSwitch? _clearToggle;

Check warning on line 30 in examples/Demo/Shared/Pages/Lab/IssueTester3102.razor

View workflow job for this annotation

GitHub Actions / Build and Deploy Demo site 

The field 'IssueTester3102._clearToggle' is never used

Check warning on line 30 in examples/Demo/Shared/Pages/Lab/IssueTester3102.razor

View workflow job for this annotation

GitHub Actions / Build and Deploy Demo site 

The field 'IssueTester3102._clearToggle' is never used

Check warning on line 30 in examples/Demo/Shared/Pages/Lab/IssueTester3102.razor

View workflow job for this annotation

GitHub Actions / Build and Deploy Demo site 

The field 'IssueTester3102._clearToggle' is never used

bool _clearItems = false;
public record SampleGridData(string Item1, string Item2, string Item3, string Item4,
Expand Down
4 changes: 4 additions & 0 deletions src/Core/Components/DataGrid/FluentDataGrid.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,9 @@ public partial class FluentDataGrid<TGridItem> : FluentComponentBase, IHandleEve
[Parameter]
public bool AutoFit { get; set; }

[Parameter]
public DataGridDisplayMode DisplayMode { get; set; } = DataGridDisplayMode.Grid;

/// <summary>
/// Gets or sets the size of each row in the grid based on the <see cref="DataGridRowSize"/> enum.
/// </summary>
Expand Down Expand Up @@ -815,6 +818,7 @@ private string AriaSortValue(ColumnBase<TGridItem> column)
{
return new CssBuilder(Class)
.AddClass("fluent-data-grid")
.AddClass("grid", DisplayMode == DataGridDisplayMode.Grid)
.AddClass("auto-fit", AutoFit)
.AddClass("loading", _pendingDataLoadCancellationTokenSource is not null)
.Build();
Expand Down
21 changes: 10 additions & 11 deletions src/Core/Components/DataGrid/FluentDataGrid.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,29 @@
.fluent-data-grid {
width: auto;
display: grid;
flex: 1;
border-collapse: collapse;
align-items: center;
height: max-content;
margin-bottom: 0px;
}

thead,
tbody
{
display:contents;
.fluent-data-grid.grid {
display: grid;
}

.grid thead,
.grid tbody {
display: contents;
}

::deep tr {
.grid ::deep tr {
display: contents;
}

.fluent-data-grid tbody tr .hover {
background: var(--neutral-fill-stealth-hover);
}


.col-options, .col-resize {
position: absolute;
min-width: 250px;
Expand All @@ -42,7 +44,7 @@ tbody
.col-justify-end .col-options,
.col-justify-right .col-options {
left: unset;
margin-right: 0.6rem;
margin-right: 0.6rem;
}

[dir=rtl] .col-justify-end .col-options,
Expand Down Expand Up @@ -88,6 +90,3 @@ tbody
background-color: var(--neutral-fill-stealth-rest);
z-index: 2;
}



5 changes: 3 additions & 2 deletions src/Core/Components/DataGrid/FluentDataGrid.razor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ export function enableColumnResizing(gridElement) {
if (!headerBeingResized) {
return;
}
gridElement.style.tableLayout = "fixed";

const horizontalScrollOffset = document.documentElement.scrollLeft;
let width;
Expand Down Expand Up @@ -212,7 +213,7 @@ export function enableColumnResizing(gridElement) {
window.removeEventListener('pointercancel', onPointerUp);
window.removeEventListener('pointerleave', onPointerUp);

headerBeingResized.classList.remove('header--being-resized');
headerBeingResized.classList.remove('header-being-resized');
headerBeingResized = null;

if (e.target.hasPointerCapture(e.pointerId)) {
Expand All @@ -222,7 +223,7 @@ export function enableColumnResizing(gridElement) {

const initResize = ({ target, pointerId }) => {
headerBeingResized = target.parentNode;
headerBeingResized.classList.add('header--being-resized');
headerBeingResized.classList.add('header-being-resized');


window.addEventListener('pointermove', onPointerMove);
Expand Down
24 changes: 24 additions & 0 deletions src/Core/Enums/DataGridDisplayMode.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
// ------------------------------------------------------------------------
// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
// ------------------------------------------------------------------------

namespace Microsoft.FluentUI.AspNetCore.Components;

/// <summary>
/// The type of rendering to use for the <see cref="FluentDataGrid{TGridItem}"/>
/// </summary>
public enum DataGridDisplayMode
{
/// <summary>
/// Uses display:grid with HTML table elements to render the DataGrid.
/// With this mode fr units canbe used to set the column widths.
/// </summary>
Grid,

/// <summary>
/// Uses HTML table elements only to render the DataGrid.
/// With this mode fr units cannot be used to set the column widths.
/// </summary>
Table,

}
28 changes: 14 additions & 14 deletions ...d/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

<table id="xxx" class="fluent-data-grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
<thead b-ppmhrkw1mj="">
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" b-upi3f9mbnn="">
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
<th col-index="1" class="column-header col-justify-start col-sort-asc" style="grid-column: 1; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" scope="col" aria-sort="ascending" b-w6qdxfylwy="">
<div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
<div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
Expand All @@ -15,21 +15,21 @@
</tr>
</thead>
<tbody b-ppmhrkw1mj="">
<tr class="fluent-data-grid-row" data-row-index="3" role="row" blazor:onkeydown="12" blazor:onclick="13" blazor:ondblclick="14" aria-rowindex="2" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="29" blazor:onclick="30" b-w6qdxfylwy="">A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="31" blazor:onclick="32" b-w6qdxfylwy="">D</td>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" blazor:onfocus="18" aria-rowindex="2" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="39" blazor:onclick="40" blazor:onfocus="41" b-w6qdxfylwy="">A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="42" blazor:onclick="43" blazor:onfocus="44" b-w6qdxfylwy="">D</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" blazor:onkeydown="9" blazor:onclick="10" blazor:ondblclick="11" aria-rowindex="3" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="25" blazor:onclick="26" b-w6qdxfylwy="">B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="27" blazor:onclick="28" b-w6qdxfylwy="">C</td>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" blazor:onkeydown="11" blazor:onclick="12" blazor:ondblclick="13" blazor:onfocus="14" aria-rowindex="3" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="33" blazor:onclick="34" blazor:onfocus="35" b-w6qdxfylwy="">B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="36" blazor:onclick="37" blazor:onfocus="38" b-w6qdxfylwy="">C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" blazor:onkeydown="18" blazor:onclick="19" blazor:ondblclick="20" aria-rowindex="4" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="37" blazor:onclick="38" b-w6qdxfylwy="">C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="39" blazor:onclick="40" b-w6qdxfylwy="">B</td>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" blazor:onkeydown="23" blazor:onclick="24" blazor:ondblclick="25" blazor:onfocus="26" aria-rowindex="4" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="51" blazor:onclick="52" blazor:onfocus="53" b-w6qdxfylwy="">C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="54" blazor:onclick="55" blazor:onfocus="56" b-w6qdxfylwy="">B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" aria-rowindex="5" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="33" blazor:onclick="34" b-w6qdxfylwy="">D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="35" blazor:onclick="36" b-w6qdxfylwy="">A</td>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" blazor:onkeydown="19" blazor:onclick="20" blazor:ondblclick="21" blazor:onfocus="22" aria-rowindex="5" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="45" blazor:onclick="46" blazor:onfocus="47" b-w6qdxfylwy="">D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="48" blazor:onclick="49" blazor:onfocus="50" b-w6qdxfylwy="">A</td>
</tr>
</tbody>
</table>
28 changes: 14 additions & 14 deletions .../DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

<table id="xxx" class="fluent-data-grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
<table id="xxx" class="fluent-data-grid grid" style="grid-template-columns: 1fr 1fr;" aria-rowcount="5" blazor:onclosecolumnoptions="1" blazor:onclosecolumnresize="2" b-ppmhrkw1mj="" blazor:elementreference="">
<thead b-ppmhrkw1mj="">
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" b-upi3f9mbnn="">
<tr class="fluent-data-grid-row" data-row-index="0" role="row" row-type="header" blazor:onkeydown="3" blazor:onclick="4" blazor:ondblclick="5" blazor:onfocus="6" b-upi3f9mbnn="">
<th col-index="1" class="column-header col-justify-start col-sort-desc" style="grid-column: 1; height: 32px; min-height: 44px; display: flex;" blazor:oncontextmenu:preventdefault="" blazor:onkeydown="21" blazor:onclick="22" scope="col" aria-sort="descending" b-w6qdxfylwy="">
<div class="col-title" style="width: calc(100% - 20px);" b-pxhtqoo8qd="">
<div class="col-title-text" b-pxhtqoo8qd="">Item1</div>
Expand All @@ -15,21 +15,21 @@
</tr>
</thead>
<tbody b-ppmhrkw1mj="">
<tr class="fluent-data-grid-row" data-row-index="4" role="row" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" aria-rowindex="2" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="33" blazor:onclick="34" b-w6qdxfylwy="">D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="35" blazor:onclick="36" b-w6qdxfylwy="">A</td>
<tr class="fluent-data-grid-row" data-row-index="4" role="row" blazor:onkeydown="19" blazor:onclick="20" blazor:ondblclick="21" blazor:onfocus="22" aria-rowindex="2" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="45" blazor:onclick="46" blazor:onfocus="47" b-w6qdxfylwy="">D</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="48" blazor:onclick="49" blazor:onfocus="50" b-w6qdxfylwy="">A</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" blazor:onkeydown="18" blazor:onclick="19" blazor:ondblclick="20" aria-rowindex="3" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="37" blazor:onclick="38" b-w6qdxfylwy="">C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="39" blazor:onclick="40" b-w6qdxfylwy="">B</td>
<tr class="fluent-data-grid-row" data-row-index="5" role="row" blazor:onkeydown="23" blazor:onclick="24" blazor:ondblclick="25" blazor:onfocus="26" aria-rowindex="3" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="51" blazor:onclick="52" blazor:onfocus="53" b-w6qdxfylwy="">C</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="54" blazor:onclick="55" blazor:onfocus="56" b-w6qdxfylwy="">B</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" blazor:onkeydown="9" blazor:onclick="10" blazor:ondblclick="11" aria-rowindex="4" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="25" blazor:onclick="26" b-w6qdxfylwy="">B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="27" blazor:onclick="28" b-w6qdxfylwy="">C</td>
<tr class="fluent-data-grid-row" data-row-index="2" role="row" blazor:onkeydown="11" blazor:onclick="12" blazor:ondblclick="13" blazor:onfocus="14" aria-rowindex="4" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="33" blazor:onclick="34" blazor:onfocus="35" b-w6qdxfylwy="">B</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="36" blazor:onclick="37" blazor:onfocus="38" b-w6qdxfylwy="">C</td>
</tr>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" blazor:onkeydown="12" blazor:onclick="13" blazor:ondblclick="14" aria-rowindex="5" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="29" blazor:onclick="30" b-w6qdxfylwy="">A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="31" blazor:onclick="32" b-w6qdxfylwy="">D</td>
<tr class="fluent-data-grid-row" data-row-index="3" role="row" blazor:onkeydown="15" blazor:onclick="16" blazor:ondblclick="17" blazor:onfocus="18" aria-rowindex="5" b-upi3f9mbnn="">
<td col-index="1" class="col-justify-start" style="grid-column: 1; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="39" blazor:onclick="40" blazor:onfocus="41" b-w6qdxfylwy="">A</td>
<td col-index="2" class="col-justify-start" style="grid-column: 2; height: 32px;" role="gridcell" tabindex="0" blazor:onkeydown="42" blazor:onclick="43" blazor:onfocus="44" b-w6qdxfylwy="">D</td>
</tr>
</tbody>
</table>
Loading
Loading