@context.NameEventCallbacks
-
+
@@ -98,7 +98,7 @@
{
@context.NameMethods
-
+
@foreach (var param in @context.Parameters)
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
index aad50f47d..e1407fac8 100644
--- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
+++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -1183,6 +1183,11 @@
This is rendered automatically if
+
+ Gets or sets the index (1-based) of the column
+
+
Gets or sets the an optional CSS class name.
@@ -1858,6 +1863,14 @@
is small or if you are using pagination.
+
+
+ This is applicable only when using
+
This is applicable only when using
+
+
+ Gets or sets the size of each row in the grid based on the
+
+
+
+ Gets or sets a value indicating whether the grid should allow multiple lines of text in cells.
+
+
Gets or sets a value indicating whether the grid should save its paging state in the URL.
@@ -2013,6 +2036,11 @@
Only relevant when
+
+
+ Gets or sets a value indicating whether the grids' first cell should be focused.
+
+
Constructs an instance of
-
+
Gets or sets the owning
@@ -2178,6 +2206,11 @@
Gets a reference to the column that this cell belongs to.
+
+
+ Gets a reference to the enclosing
+
@@ -2207,11 +2240,16 @@
Gets or sets the content to be rendered inside the component.
-
+
Gets or sets the owning
+
+
+ Gets a reference to the enclosing
+
@@ -13430,6 +13468,32 @@
Resize datagrid columns by exact pixel values
+
+
+ The height of each
+
+
+
+ Small row height (default)
+
+
+
+
+ Medium row height
+
+
+
+
+ Smaller row height
+
+
+
+
+ Large row height
+
+
The type of
- Example of using the
diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridAutoFit.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridAutoFit.razor
index c3bf9a049..2ff7d08f3 100644
--- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridAutoFit.razor
+++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridAutoFit.razor
@@ -3,7 +3,7 @@
+
-
- None
- Discrete
- Exact
-
-
+ None
+ Discrete
+ Exact
+
+
-
-
- .svg)
-
-
-
-
-
- @*
-
-
diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridMultilineText.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridMultilineText.razor
index 89dcc9285..bf68608e0 100644
--- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridMultilineText.razor
+++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridMultilineText.razor
@@ -1,7 +1,7 @@
-
+
@code {
@@ -13,4 +13,4 @@
new Person(10944, "António Langa", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
new Person(11203, "Julie Smith","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
}.AsQueryable();
-}
\ No newline at end of file
+}
diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridNotVirtualizedLoadingAndEmpty.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridNotVirtualizedLoadingAndEmpty.razor
index 0af35295a..ffe355d69 100644
--- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridNotVirtualizedLoadingAndEmpty.razor
+++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridNotVirtualizedLoadingAndEmpty.razor
@@ -1,5 +1,5 @@
+
).svg)
@@ -28,4 +28,4 @@
void Bonus(Person p) => message = $"You want to give {p.FirstName} {p.LastName} a regular bonus";
void DoubleBonus(Person p) => message = $"You want to give {p.FirstName} {p.LastName} a double bonus";
-}
\ No newline at end of file
+}
diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns2.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns2.razor
index f9b8bcce8..bdc517129 100644
--- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns2.razor
+++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns2.razor
@@ -1,5 +1,11 @@
-
+
@@ -14,7 +20,7 @@
{
public string Name { get; set; }
public int Age { get; set; }
-
+
public SampleGridData(string name, int age)
{
Name = name;
@@ -30,12 +36,12 @@
new SampleGridData("Bob", 20 )
};
- private void HandleRowFocus(FluentDataGridRow row)
+ private void HandleRowClick(FluentDataGridRow row)
{
DemoLogger.WriteLine($"Row focused: {row.RowIndex}");
}
- private void HandleCellFocus(FluentDataGridCell cell)
+ private void HandleCellClick(FluentDataGridCell cell)
{
DemoLogger.WriteLine($"Cell focused: {cell.GridColumn}");
}
diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor
index 43fd95f81..41394e209 100644
--- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor
+++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor
@@ -1,55 +1,54 @@
-
-@inject DataSource Data
+@inject DataSource Data
-
-
-
-
-
-
-
-
-
-
-
-
-
+ rowClass = x => x.Name.StartsWith("A") ? "highlighted-row" : null;
+ Func rowClass = x => x.Name.StartsWith("A") ? "highlighted" : null;
Func rowStyle = x => x.Name.StartsWith("Au") ? "background-color: var(--highlight-bg)" : null;
//IQueryable? FilteredItems => items?.Where(x => x.Name.Contains(nameFilter, StringComparison.CurrentCultureIgnoreCase));
diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor.css b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor.css
index 2aa0928d6..49724e23d 100644
--- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor.css
+++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor.css
@@ -1,7 +1,7 @@
/* Ensure all the flags are the same size, and centered */
.flag {
height: 1rem;
- margin: auto;
+ margin-top: 7px;
border: 1px solid var(--neutral-layer-3);
}
.search-box {
diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridVirtualize.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridVirtualize.razor
index 6277b5307..4e2b26ba8 100644
--- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridVirtualize.razor
+++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridVirtualize.razor
@@ -1,10 +1,10 @@
-
@context.NameClass parameter to style parts of the grid. Note that the class used in the example (multiline-text) has been added to the FluentDataGridCell css.
+ Set the grid parameter MultiLine to true when you have cells in your data that will take up more than a single line.
With auto-fit
-
-
-
-
+
+ @(context.Name)
+
+ *@
+
+
+
+
+
+
+
+
+
+ @*
+
+
-
- @(context.Name)
-
- *@
-
-
+
+
+
+
+
+
-
+
diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns.razor
index 5496035fe..c1e5d93a7 100644
--- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns.razor
+++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns.razor
@@ -1,6 +1,6 @@
@inject DataSource Data
-
-
+
@@ -28,4 +28,4 @@
void Bonus(Person p) => message = $"You want to give {p.FirstName} {p.LastName} a regular bonus";
void DoubleBonus(Person p) => message = $"You want to give {p.FirstName} {p.LastName} a double bonus";
-}
\ No newline at end of file
+}
diff --git a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns2.razor b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns2.razor
index f9b8bcce8..bdc517129 100644
--- a/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns2.razor
+++ b/examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTemplateColumns2.razor
@@ -1,5 +1,11 @@
-To test set ResizeType on the DataGrid to either DataGridResizeType.Discrete or DataGridResizeType.Exact
Remove the parameter completely to get the original behavior
-
-
-
-
-
- 0
- 50
- 100
- 150
-
-
-
- 0
- 50
- 100
- 150
-
-
- -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0
+ 50
+ 100
+ 150
+
+
+
+ 0
+ 50
+ 100
+ 150
+
+
+ +
-
+
-
+
+
+
@if (EmptyContent is null)
{
@("No data to show!")
@@ -214,18 +214,18 @@
{
@EmptyContent
}
-
-
+
+
}
private void RenderLoadingContent(RenderTreeBuilder __builder)
{
-
-
+
+
@if (LoadingContent is null)
{
-
+
}
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
index d795f73b1..8d6942183 100644
--- a/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
+++ b/src/Core/Components/DataGrid/FluentDataGrid.razor.cs
@@ -2,16 +2,16 @@
// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
// ------------------------------------------------------------------------
+using System.Diagnostics.CodeAnalysis;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web.Virtualization;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure;
using Microsoft.FluentUI.AspNetCore.Components.Extensions;
using Microsoft.FluentUI.AspNetCore.Components.Infrastructure;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
using Microsoft.JSInterop;
-using System.Diagnostics.CodeAnalysis;
-
namespace Microsoft.FluentUI.AspNetCore.Components;
///
@@ -80,6 +80,15 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve
[Parameter]
public bool Virtualize { get; set; }
+ ///
+ /// This is applicable only when using
+ [Parameter]
+ public int OverscanCount { get; set; } = 3;
+
///
/// This is applicable only when using : FluentComponentBase, IHandleEve
[Parameter]
public bool AutoFit { get; set; }
+ ///
+ /// Gets or sets the size of each row in the grid based on the
+ [Parameter]
+ public DataGridRowSize RowSize { get; set; } = DataGridRowSize.Small;
+
+ ///
+ /// Gets or sets a value indicating whether the grid should allow multiple lines of text in cells.
+ ///
+ [Parameter]
+ public bool MultiLine { get; set; } = false;
+
///
/// Gets or sets a value indicating whether the grid should save its paging state in the URL.
///
@@ -261,6 +282,12 @@ public partial class FluentDataGrid : FluentComponentBase, IHandleEve
[Parameter]
public string? SaveStatePrefix { get; set; }
+ ///
+ /// Gets or sets a value indicating whether the grids' first cell should be focused.
+ ///
+ [Parameter]
+ public bool AutoFocus{ get; set; } = false;
+
private ElementReference? _gridReference;
private Virtualize<(int, TGridItem)>? _virtualizeComponent;
@@ -347,11 +374,7 @@ protected override void OnInitialized()
/// ("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
try
{
- _jsEventDisposable = await Module.InvokeAsync("init", _gridReference);
+ _jsEventDisposable = await Module.InvokeAsync("init", _gridReference, AutoFocus);
}
catch (JSException ex)
{
Console.WriteLine("[FluentDataGrid] " + ex.Message);
}
-
- if (AutoFit && _gridReference is not null)
- {
- _ = Module?.InvokeVoidAsync("autoFitGridColumns", _gridReference, _columns.Count).AsTask();
- }
}
if (_checkColumnOptionsPosition && _displayOptionsForColumn is not null)
@@ -418,6 +436,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
_checkColumnResizePosition = false;
_ = Module?.InvokeVoidAsync("checkColumnPopupPosition", _gridReference, ".col-resize").AsTask();
}
+
+ if (AutoFit && _gridReference is not null)
+ {
+ _ = Module?.InvokeVoidAsync("autoFitGridColumns", _gridReference, _columns.Count).AsTask();
+ }
}
// Invoked by descendant columns at a special time during rendering
@@ -425,6 +448,7 @@ internal void AddColumn(ColumnBase column, SortDirection? initialSort
{
if (_collectingColumns)
{
+ column.Index = _columns.Count + 1;
_columns.Add(column);
if (isDefaultSortColumn && _sortByColumn is null && initialSortDirection.HasValue)
@@ -452,9 +476,18 @@ private void FinishCollectingColumns()
throw new Exception("You can use either the 'GridTemplateColumns' parameter on the grid or the 'Width' property at the column level, not both.");
}
- if (string.IsNullOrWhiteSpace(_internalGridTemplateColumns) && _columns.Any(x => !string.IsNullOrWhiteSpace(x.Width)))
+ if (string.IsNullOrWhiteSpace(_internalGridTemplateColumns))
{
- _internalGridTemplateColumns = string.Join(" ", _columns.Select(x => x.Width ?? "1fr"));
+ if (!AutoFit)
+ {
+ _internalGridTemplateColumns = string.Join(" ", Enumerable.Repeat("1fr", _columns.Count));
+ }
+
+ if (_columns.Any(x => !string.IsNullOrWhiteSpace(x.Width)))
+ {
+ _internalGridTemplateColumns = string.Join(" ", _columns.Select(x => x.Width ?? "auto"));
+ }
+
}
if (ResizableColumns)
@@ -520,10 +553,11 @@ public Task RemoveSortByColumnAsync(ColumnBase column)
{
_sortByColumn = _internalGridContext.DefaultSortColumn.Column ?? null;
_sortByAscending = _internalGridContext.DefaultSortColumn.Direction != SortDirection.Descending;
- }
- StateHasChanged(); // We want to see the updated sort order in the header, even before the data query is completed
- return RefreshDataCoreAsync();
+ StateHasChanged(); // We want to see the updated sort order in the header, even before the data query is completed
+ return RefreshDataCoreAsync();
+ }
+ return Task.CompletedTask;
}
///
@@ -751,30 +785,38 @@ private string AriaSortValue(ColumnBase column)
? (_sortByAscending ? "ascending" : "descending")
: "none";
+ private string? StyleValue => new StyleBuilder(Style)
+ .AddStyle("grid-template-columns", _internalGridTemplateColumns, !string.IsNullOrWhiteSpace(_internalGridTemplateColumns))
+ .AddStyle("grid-template-rows", "auto 1fr", _internalGridContext.Items.Count == 0 || Items is null)
+ .AddStyle("height", $"calc(100% - {(int)RowSize}px)", _internalGridContext.TotalItemCount == 0 || Loading)
+ .Build();
+
private string? ColumnHeaderClass(ColumnBase column)
- => _sortByColumn == column
- ? $"{ColumnClass(column)} {(_sortByAscending ? "col-sort-asc" : "col-sort-desc")}"
- : ColumnClass(column);
+ {
+ return new CssBuilder(Class)
+ .AddClass(ColumnJustifyClass(column))
+ .AddClass("col-sort-asc", _sortByAscending)
+ .AddClass("col-sort-desc", !_sortByAscending)
+ .Build();
+ }
private string? GridClass()
{
- var value = $"{Class} {(_pendingDataLoadCancellationTokenSource is null ? null : "loading")}".Trim();
-
- if (AutoFit)
- {
- value += " auto-fit";
- }
-
- return string.IsNullOrEmpty(value) ? null : value;
+ return new CssBuilder("fluent-data-grid")
+ .AddClass(Class)
+ .AddClass("auto-fit", AutoFit)
+ .AddClass("loading", _pendingDataLoadCancellationTokenSource is not null)
+ .Build();
}
- private static string? ColumnClass(ColumnBase column) => column.Align switch
+ private static string? ColumnJustifyClass(ColumnBase column)
{
- Align.Start => $"col-justify-start {column.Class}",
- Align.Center => $"col-justify-center {column.Class}",
- Align.End => $"col-justify-end {column.Class}",
- _ => column.Class,
- };
+ return new CssBuilder(column.Class)
+ .AddClass("col-justify-start", column.Align == Align.Start)
+ .AddClass("col-justify-center", column.Align == Align.Center)
+ .AddClass("col-justify-end", column.Align == Align.End)
+ .Build();
+ }
///
- @ChildContent
-
+
+@if (CellType == DataGridCellType.Default)
+{
+
+ @ChildContent
+
+}
+else
+{
+
+ @ChildContent
+
+}
diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
index c81423a88..327a9339c 100644
--- a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
+++ b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
@@ -23,7 +23,7 @@ public partial class FluentDataGridCell : FluentComponentBase
/// Gets or sets the cell type. See
[Parameter]
- public DataGridCellType? CellType { get; set; } = DataGridCellType.Default;
+ public DataGridCellType CellType { get; set; }
///
/// Gets or sets the column index of the cell.
@@ -48,17 +48,38 @@ public partial class FluentDataGridCell : FluentComponentBase
/// Gets or sets the owning
[CascadingParameter]
- private InternalGridContext GridContext { get; set; } = default!;
+ internal InternalGridContext InternalGridContext { get; set; } = default!;
///
/// Gets a reference to the column that this cell belongs to.
///
- private ColumnBase? Column => Owner.Owner.Grid._columns.ElementAtOrDefault(GridColumn - 1);
+ private ColumnBase? Column => Grid._columns.ElementAtOrDefault(GridColumn - 1);
+
+ ///
+ /// Gets a reference to the enclosing
+ protected FluentDataGrid Grid => InternalGridContext.Grid;
+
+ protected string? ClassValue => new CssBuilder(Class)
+ .AddClass("column-header", when: CellType == DataGridCellType.ColumnHeader)
+ .AddClass("select-all", when: CellType == DataGridCellType.ColumnHeader && Column is SelectColumn)
+ .AddClass("multiline-text", when: Grid.MultiLine)
+ .AddClass(Owner.Class)
+ .Build();
protected string? StyleValue => new StyleBuilder(Style)
- .AddStyle("height", $"{GridContext.Grid.ItemSize:0}px", () => !GridContext.Grid.Loading && GridContext.Grid.Virtualize && Owner.RowType == DataGridRowType.Default)
- .AddStyle("align-content", "center", () => !GridContext.Grid.Loading && GridContext.Grid.Virtualize && Owner.RowType == DataGridRowType.Default && string.IsNullOrEmpty(Style))
- .Build();
+ .AddStyle("grid-column", GridColumn.ToString(), () => (!Grid.Loading && Grid.Items is not null) || Grid.Virtualize)
+ .AddStyle("text-align", "center", Column is SelectColumn)
+ .AddStyle("align-content", "center", Column is SelectColumn)
+ .AddStyle("padding-inline-start", "calc(((var(--design-unit)* 3) + var(--focus-stroke-width) - var(--stroke-width))* 1px)", Column is SelectColumn && Owner.RowType == DataGridRowType.Default)
+ .AddStyle("padding-top", "calc(var(--design-unit) * 2.5px)", Column is SelectColumn && (Grid.RowSize == DataGridRowSize.Medium || Owner.RowType == DataGridRowType.Header))
+ .AddStyle("padding-top", "calc(var(--design-unit) * 1.5px)", Column is SelectColumn && Grid.RowSize == DataGridRowSize.Small && Owner.RowType == DataGridRowType.Default)
+ .AddStyle("height", $"{Grid.ItemSize:0}px", () => !Grid.Loading && Grid.Virtualize && Owner.RowType == DataGridRowType.Default)
+ .AddStyle("height", $"{(int)Grid.RowSize}px", () => !Grid.Loading && !Grid.Virtualize && Grid.Items is not null && !Grid.MultiLine)
+ .AddStyle("height", "100%", InternalGridContext.TotalItemCount == 0 || (Grid.Loading && Grid.Items is null) || Grid.MultiLine)
+ .AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default)
+ .AddStyle(Owner.Style)
+ .Build();
protected override void OnInitialized()
{
@@ -68,9 +89,9 @@ protected override void OnInitialized()
///
-
+
@ChildContent
-
+
diff --git a/src/Core/Components/DataGrid/FluentDataGridRow.razor.cs b/src/Core/Components/DataGrid/FluentDataGridRow.razor.cs
index c17580ed5..10fb0db41 100644
--- a/src/Core/Components/DataGrid/FluentDataGridRow.razor.cs
+++ b/src/Core/Components/DataGrid/FluentDataGridRow.razor.cs
@@ -56,30 +56,34 @@ public partial class FluentDataGridRow : FluentComponentBase, IHandle
/// Gets or sets the owning
[CascadingParameter]
- internal InternalGridContext Owner { get; set; } = default!;
+ internal InternalGridContext InternalGridContext { get; set; } = default!;
+
+ ///
+ /// Gets a reference to the enclosing
+ protected FluentDataGrid Grid => InternalGridContext.Grid;
protected string? ClassValue => new CssBuilder(Class)
- .AddClass("hover", when: Owner.Grid.ShowHover)
+ .AddClass("hover", when: Grid.ShowHover)
.Build();
protected string? StyleValue => new StyleBuilder(Style)
- .AddStyle("height", $"{Owner.Grid.ItemSize:0}px", () => Owner.Grid.Virtualize && RowType == DataGridRowType.Default)
- .AddStyle("height", "100%", () => (!Owner.Grid.Virtualize || Owner.Rows.Count == 0) && Owner.Grid.Loading && RowType == DataGridRowType.Default)
- .AddStyle("align-items", "center", () => Owner.Grid.Virtualize && RowType == DataGridRowType.Default && string.IsNullOrEmpty(Style))
+ //.AddStyle("height", $"{Grid.ItemSize:0}px", () => Grid.Virtualize && RowType == DataGridRowType.Default)
+ //.AddStyle("height", "100%", () => (!Grid.Virtualize || InternalGridContext.Rows.Count == 0) && Grid.Loading && RowType == DataGridRowType.Default)
.Build();
protected override void OnInitialized()
{
- RowId = $"r{Owner.GetNextRowId()}";
- Owner.Register(this);
+ RowId = $"r{InternalGridContext.GetNextRowId()}";
+ InternalGridContext.Register(this);
}
- public void Dispose() => Owner.Unregister(this);
+ public void Dispose() => InternalGridContext.Unregister(this);
internal void Register(FluentDataGridCell cell)
{
- cell.CellId = $"c{Owner.GetNextCellId()}";
+ cell.CellId = $"c{InternalGridContext.GetNextCellId()}";
cells.Add(cell.CellId, cell);
}
@@ -95,7 +99,7 @@ private async Task HandleOnCellFocusAsync(DataGridCellFocusEventArgs args)
{
if (cell != null && cell.CellType == DataGridCellType.Default)
{
- await Owner.Grid.OnCellFocus.InvokeAsync(cell);
+ await Grid.OnCellFocus.InvokeAsync(cell);
}
}
}
@@ -105,14 +109,14 @@ internal async Task HandleOnRowClickAsync(string rowId)
{
var row = GetRow(rowId);
- if (row != null && Owner.Grid.OnRowClick.HasDelegate)
+ if (row != null && Grid.OnRowClick.HasDelegate)
{
- await Owner.Grid.OnRowClick.InvokeAsync(row);
+ await Grid.OnRowClick.InvokeAsync(row);
}
if (row != null && row.RowType == DataGridRowType.Default)
{
- foreach (var column in Owner.Grid._columns)
+ foreach (var column in Grid._columns)
{
await column.OnRowClickAsync(row);
}
@@ -123,9 +127,9 @@ internal async Task HandleOnRowClickAsync(string rowId)
internal async Task HandleOnRowDoubleClickAsync(string rowId)
{
var row = GetRow(rowId);
- if (row != null && Owner.Grid.OnRowDoubleClick.HasDelegate)
+ if (row != null && Grid.OnRowDoubleClick.HasDelegate)
{
- await Owner.Grid.OnRowDoubleClick.InvokeAsync(row);
+ await Grid.OnRowDoubleClick.InvokeAsync(row);
}
}
@@ -139,14 +143,14 @@ internal async Task HandleOnRowKeyDownAsync(string rowId, KeyboardEventArgs e)
var row = GetRow(rowId);
- if (row != null && Owner.Grid.OnRowClick.HasDelegate)
+ if (row != null && Grid.OnRowClick.HasDelegate)
{
- await Owner.Grid.OnRowClick.InvokeAsync(row);
+ await Grid.OnRowClick.InvokeAsync(row);
}
if (row != null && row.RowType == DataGridRowType.Default)
{
- foreach (var column in Owner.Grid._columns)
+ foreach (var column in Grid._columns)
{
await column.OnRowKeyDownAsync(row, e);
}
@@ -155,7 +159,7 @@ internal async Task HandleOnRowKeyDownAsync(string rowId, KeyboardEventArgs e)
private FluentDataGridRow? GetRow(string rowId, Func, bool>? where = null)
{
- if (!string.IsNullOrEmpty(rowId) && Owner.Rows.TryGetValue(rowId, out var row))
+ if (!string.IsNullOrEmpty(rowId) && InternalGridContext.Rows.TryGetValue(rowId, out var row))
{
return where == null
? row
diff --git a/src/Core/Components/DataGrid/FluentDataGridRow.razor.css b/src/Core/Components/DataGrid/FluentDataGridRow.razor.css
index e206f8b60..071d1c6a0 100644
--- a/src/Core/Components/DataGrid/FluentDataGridRow.razor.css
+++ b/src/Core/Components/DataGrid/FluentDataGridRow.razor.css
@@ -1,13 +1,10 @@
-.header {
- padding: 0;
- z-index: 3;
-}
-
.sticky-header {
z-index: 3;
}
-.hover:not([row-type='header'],[row-type='sticky-header'],.loading-content-row):hover {
+.hover:not([row-type='header'],[row-type='sticky-header'],.loading-content-row):hover ::deep td {
cursor: pointer;
background-color: var(--datagrid-hover-color, var(--neutral-fill-stealth-hover));
}
+
+
diff --git a/src/Core/Components/Icons/CoreIcons.cs b/src/Core/Components/Icons/CoreIcons.cs
index 1c577f3f3..96c19ec91 100644
--- a/src/Core/Components/Icons/CoreIcons.cs
+++ b/src/Core/Components/Icons/CoreIcons.cs
@@ -80,10 +80,14 @@ internal static partial class Regular
[global::System.Diagnostics.CodeAnalysis.ExcludeFromCodeCoverage]
internal static partial class Size16
{
+ public class ArrowSortDown : Icon { public ArrowSortDown() : base("ArrowSortDown", IconVariant.Regular, IconSize.Size16, "
+/// The height of each
+public enum DataGridRowSize
+{
+ ///
+ /// Small row height (default)
+ ///
+ Small = 32,
+
+ ///
+ /// Medium row height
+ ///
+ Medium = 44,
+
+
+ ///
+ /// Smaller row height
+ ///
+ Smaller = 24,
+
+ ///
+ /// Large row height
+ ///
+ Large = 58,
+
+ /////
+ ///// Dynamic row height
+ /////
+ //Dynamic
+}
diff --git a/src/Core/Events/EventHandlers.cs b/src/Core/Events/EventHandlers.cs
index de4a14a15..a499690ae 100644
--- a/src/Core/Events/EventHandlers.cs
+++ b/src/Core/Events/EventHandlers.cs
@@ -14,8 +14,6 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
[EventHandler("onmenuchange", typeof(MenuChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
[EventHandler("onscrollstart", typeof(HorizontalScrollEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
[EventHandler("onscrollend", typeof(HorizontalScrollEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
-[EventHandler("oncellfocus", typeof(DataGridCellFocusEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
-[EventHandler("onrowfocus", typeof(DataGridRowFocusEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
[EventHandler("onclosecolumnoptions", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)]
[EventHandler("onclosecolumnresize", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)]
[EventHandler("ontooltipdismiss", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)]
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html
index 54e3b7df6..668b64c43 100644
--- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html
+++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Ascending.verified.razor.html
@@ -1,31 +1,35 @@
-
-
-
-
-
-
-
-
- A
- D
-
-
- B
- C
-
-
- C
- B
-
-
- D
- A
-
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html
index 7c988e149..59121cb25 100644
--- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html
+++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnIndex_Descending.verified.razor.html
@@ -1,31 +1,35 @@
-
-
-
-
-
-
-
-
- D
- A
-
-
- C
- B
-
-
- B
- C
-
-
- A
- D
-
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html
index 07643b861..668b64c43 100644
--- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html
+++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Ascending.verified.razor.html
@@ -1,31 +1,35 @@
-
-
-
-
-
-
-
-
- A
- D
-
-
- B
- C
-
-
- C
- B
-
-
- D
- A
-
-
+
+
+
\ No newline at end of file
diff --git a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html
index 7c988e149..59121cb25 100644
--- a/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html
+++ b/tests/Core/DataGrid/DataGridSortByTests.DataGridSortByTests_SortByColumnTitle_Descending.verified.razor.html
@@ -1,31 +1,35 @@
-
-
-
-
-
-
-
-
- D
- A
-
-
- C
- B
-
-
- B
- C
-
-
- A
- D
-
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html
index 7179d1af2..6bd3fb6c6 100644
--- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html
+++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Customized_Rendering.verified.razor.html
@@ -1,26 +1,30 @@
-
-
-
-
-
-
-
-
-
-
- Jean Martin
-
-
- ✅
- Kenji Sato
-
-
- ✅
- Julie Smith
-
-
\ No newline at end of file
+
+
+
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html
index 87edd83d2..45c4837ee 100644
--- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html
+++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_MultiSelect_Rendering.verified.razor.html
@@ -1,44 +1,48 @@
-
-
-
-
-
-
-
-
-
-
-
-
- Jean Martin
-
-
-
-
-
- Kenji Sato
-
-
-
-
-
- Julie Smith
-
-
\ No newline at end of file
+
+
+
diff --git a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html
index a2b8b67e5..d59aed370 100644
--- a/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html
+++ b/tests/Core/DataGrid/FluentDataGridColumSelectTests.FluentDataGrid_ColumSelect_SingleSelect_Rendering.verified.razor.html
@@ -1,38 +1,42 @@
-
-
-
-
-
-
-
-
-
- Jean Martin
-
-
-
-
-
- Kenji Sato
-
-
-
-
-
- Julie Smith
-
-
+
+
+
+
-
Add and select
+
@code
{
List Items = new List(DataSource.AllMonths);
diff --git a/examples/Demo/Shared/SampleData/DataSource.cs b/examples/Demo/Shared/SampleData/DataSource.cs
index 078c6a973..741c3850e 100644
--- a/examples/Demo/Shared/SampleData/DataSource.cs
+++ b/examples/Demo/Shared/SampleData/DataSource.cs
@@ -295,7 +295,7 @@ private static string GetMonthName(int index)
new Country("tr", "Turkey", new Medals { Gold = 0, Silver = 3, Bronze = 5}),
new Country("ug", "Uganda", new Medals { Gold = 1, Silver = 1, Bronze = 0}),
new Country("ua", "Ukraine", new Medals { Gold = 3, Silver = 5, Bronze = 4}),
- new Country("us", "United States", new Medals { Gold = 40, Silver = 44, Bronze = 42}),
+ new Country("us", "United States of America", new Medals { Gold = 40, Silver = 44, Bronze = 42}),
new Country("uz", "Uzbekistan", new Medals { Gold = 8, Silver = 2, Bronze = 3}),
new Country("zm", "Zambia", new Medals { Gold = 0, Silver = 0, Bronze = 1})
diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css
index 15feed298..3655ed8a5 100644
--- a/examples/Demo/Shared/wwwroot/css/site.css
+++ b/examples/Demo/Shared/wwwroot/css/site.css
@@ -203,11 +203,11 @@ code {
padding: 5px;
}
-.highlighted-row {
+.highlighted {
background-color: var(--accent-stroke-control-active);
}
- .highlighted-row > fluent-data-grid-cell {
+ .highlighted > td {
color: var(--neutral-fill-inverse-rest);
}
diff --git a/src/Core.Assets/src/index.ts b/src/Core.Assets/src/index.ts
index 4db995bda..b53833164 100644
--- a/src/Core.Assets/src/index.ts
+++ b/src/Core.Assets/src/index.ts
@@ -268,24 +268,6 @@ export function afterStarted(blazor: Blazor, mode: string) {
}
});
- blazor.registerCustomEventType('cellfocus', {
- browserEventName: 'cell-focused',
- createEventArgs: event => {
- return {
- cellId: event.detail.attributes['cell-id'].value
- };
- }
- });
-
- blazor.registerCustomEventType('rowfocus', {
- browserEventName: 'row-focused',
- createEventArgs: event => {
- return {
- rowId: event.detail.attributes['row-id'].value
- };
- }
- });
-
blazor.registerCustomEventType('splitterresized', {
browserEventName: 'splitterresized',
createEventArgs: event => {
diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor b/src/Core/Components/DataGrid/Columns/ColumnBase.razor
index a9e18748b..469d4f218 100644
--- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor
+++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor
@@ -17,149 +17,129 @@
{
string? tooltip = Tooltip ? (HeaderTooltip ?? Title) : null;
-
-
-
+
+
+ @if (AnyColumnActionEnabled)
+ {
+
-
- @if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault())
- {
-
- @GetSortOptionText()
-
- }
- @if (Grid.ResizeType is not null && Grid.ResizableColumns)
- {
- @Grid.ColumnResizeLabels.ResizeMenu
- }
- @if (ColumnOptions is not null)
- {
- @Grid.ColumnOptionsLabels.OptionsMenu
- }
-
-
+ }
+ else
+ {
+
+ @if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault())
+ {
+
+ @GetSortOptionText()
+
+ }
+ @if (Grid.ResizeType is not null && Grid.ResizableColumns)
+ {
+ @Grid.ColumnResizeLabels.ResizeMenu
+ }
+ @if (ColumnOptions is not null)
+ {
+ @Grid.ColumnOptionsLabels.OptionsMenu
+ }
+
}
else
{
string? tooltip = Tooltip ? (HeaderTooltip ?? Title) : null;
+ string? wdelta = "20px";
+
+ if (Grid.ResizeType is not null || ColumnOptions is not null)
+ {
+ wdelta = "56px";
+ }
@if (Align == Align.Start || Align == Align.Center)
{
@if (Grid.ResizeType is not null)
{
-
-
+ @OptionsButton()
}
else
{
@if (ColumnOptions is not null)
{
-
- @if (Filtered.GetValueOrDefault())
- {
-
+ @FilterButton()
}
}
}
- if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault())
+ @if (Sortable.HasValue ? Sortable.Value : IsSortableByDefault())
{
-
-
-
+
+
-
}
else
{
-
diff --git a/src/Core/Components/DataGrid/Columns/SelectColumn.cs b/src/Core/Components/DataGrid/Columns/SelectColumn.cs
index 5eaa739eb..f8cc70cfd 100644
--- a/src/Core/Components/DataGrid/Columns/SelectColumn.cs
+++ b/src/Core/Components/DataGrid/Columns/SelectColumn.cs
@@ -426,8 +426,7 @@ private RenderFragment GetHeaderContent()
builder.AddAttribute(3, "OnClick", EventCallback.Factory.Create(this, OnClickAllAsync));
builder.AddAttribute(4, "onkeydown", EventCallback.Factory.Create(this, OnKeyAllAsync));
}
- builder.AddAttribute(5, "Style", "margin-left: 12px;");
- builder.AddAttribute(6, "Title", iconAllChecked == IconIndeterminate
+ builder.AddAttribute(5, "Title", iconAllChecked == IconIndeterminate
? TitleAllIndeterminate
: (iconAllChecked == GetIcon(true) ? TitleAllChecked : TitleAllUnchecked));
builder.CloseComponent();
diff --git a/src/Core/Components/DataGrid/FluentDataGrid.razor b/src/Core/Components/DataGrid/FluentDataGrid.razor
index 074484ca4..84f90548f 100644
--- a/src/Core/Components/DataGrid/FluentDataGrid.razor
+++ b/src/Core/Components/DataGrid/FluentDataGrid.razor
@@ -17,60 +17,62 @@
}
+
@if (GenerateHeader != GenerateHeaderOption.None)
{
DataGridRowType headerType = DataGridRowType.Header;
if (GenerateHeader == GenerateHeaderOption.Sticky)
+ {
headerType = DataGridRowType.StickyHeader;
-
@@ -96,14 +98,15 @@
{
var rowClass = RowClass?.Invoke(item) ?? null;
var rowStyle = RowStyle?.Invoke(item) ?? null;
-
+
+
@for (var colIndex = 0; colIndex < _columns.Count; colIndex++)
{
var col = _columns[colIndex];
string? tooltip = col.Tooltip ? @col.RawCellContent(item) : null;
-
+
@((RenderFragment)(__builder => col.CellContent(__builder, item)))
}
@@ -114,12 +117,12 @@
{
string? _rowsDataSize = $"height: {ItemSize}px";
-
- @for (var colIndex = 0; colIndex < _columns.Count; colIndex++)
+
+ @for (var i = 0; i < _columns.Count; i++)
{
- var col = _columns[colIndex];
+ var col = _columns[i];
-
+
@((RenderFragment)(__builder => col.RenderPlaceholderContent(__builder, placeholderContext)))
}
@@ -128,25 +131,23 @@
private void RenderColumnHeaders(RenderTreeBuilder __builder)
{
- @for (var colIndex = 0; colIndex < _columns.Count; colIndex++)
+ @for (var i = 0; i < _columns.Count; i++)
{
- var col = _columns[colIndex];
- var oneBasedIndex = colIndex + 1;
- string CellId = Identifier.NewId();
+ var col = _columns[i];
+
if (_sortByColumn == col)
- col.ShowSortIcon = true;
+ col.IsActiveSortColumn = true;
else
- col.ShowSortIcon = false;
+ col.IsActiveSortColumn = false;
-
+ aria-sort="@AriaSortValue(col)">
@col.HeaderContent
-
@if (HeaderCellAsButtonWithMenu)
{
@if (col == _displayOptionsForColumn)
@@ -161,7 +162,7 @@
@if (ResizeType is not null)
{
-
@@ -173,25 +174,24 @@
{
}
}
+
@if (ResizableColumns)
{
- @Title
- @if (Grid.SortByAscending.HasValue && ShowSortIcon)
+ @if (Grid.SortByAscending.HasValue && IsActiveSortColumn)
{
if (Grid.SortByAscending == true)
{
-
+
+ }
+ @Title
+ @Title
- @if (Grid.SortByAscending.HasValue && ShowSortIcon)
+ @if (Grid.SortByAscending.HasValue && IsActiveSortColumn)
{
if (Grid.SortByAscending == true)
{
-
+
-
+ @OptionsButton()
}
else
{
@if (ColumnOptions is not null)
{
-
- @if (Filtered.GetValueOrDefault())
- {
-
+ @FilterButton()
}
}
}
+
}
}
@@ -171,4 +151,28 @@
@PlaceholderTemplate(placeholderContext)
}
}
+
+ private RenderFragment OptionsButton()
+ {
+ return
+ @
+ ;
+ }
+
+ private RenderFragment FilterButton()
+ {
+ return
+ @
+ @if (Filtered.GetValueOrDefault())
+ {
+ ;
+ }
}
diff --git a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs
index def61a9c7..d0a3a3299 100644
--- a/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs
+++ b/src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs
@@ -14,7 +14,7 @@ public abstract partial class ColumnBase
{
private bool _isMenuOpen;
private static readonly string[] KEYBOARD_MENU_SELECT_KEYS = ["Enter", "NumpadEnter"];
- private readonly string _columnId = $"column-header{Identifier.NewId()}";
+ private readonly string _columnId = Identifier.NewId();
[CascadingParameter]
internal InternalGridContext InternalGridContext { get; set; } = default!;
@@ -26,6 +26,13 @@ public abstract partial class ColumnBase
[Parameter]
public string? Title { get; set; }
+
+ ///
+ /// Gets or sets the index (1-based) of the column
+ ///
+ [Parameter]
+ public int Index { get; set; }
+
///
/// Gets or sets the an optional CSS class name.
/// If specified, this is included in the class attribute of header and grid cells
@@ -140,6 +147,14 @@ public abstract partial class ColumnBase
protected bool AnyColumnActionEnabled => Sortable is true || IsDefaultSortColumn || ColumnOptions != null || Grid.ResizableColumns;
+ protected override void OnInitialized()
+ {
+ if (GetType() == typeof(SelectColumn))
+ {
+ Align = Align.Center;
+ }
+ }
+
///
/// Event callback for when the row is clicked.
///
@@ -221,7 +236,7 @@ protected void HandleKeyDown(FluentKeyCodeEventArgs e)
}
}
- public bool ShowSortIcon;
+ public bool IsActiveSortColumn;
///
/// Constructs an instance of
@Title
- @if (Grid.ResizeType is not null && ColumnOptions is not null)
- {
- @if (Filtered.GetValueOrDefault())
- {
- Loading...
-
- Item1
-
-
- Item2
- |
+
+
+ Item1
+ |
+
+
+
+ Item2
+ |
+
|---|---|
| A | +D | +
| B | +C | +
| C | +B | +
| D | +A | +
-
- Item1
-
-
- Item2
- |
+
+
+ Item1
+ |
+
+
+
+ Item2
+ |
+
|---|---|
| D | +A | +
| C | +B | +
| B | +C | +
| A | +D | +
-
- Item1
-
-
- Item2
- |
+
+
+ Item1
+ |
+
+
+
+ Item2
+ |
+
|---|---|
| A | +D | +
| B | +C | +
| C | +B | +
| D | +A | +
-
- Item1
-
-
- Item2
- |
+
+
+ Item1
+ |
+
+
+
+ Item2
+ |
+
|---|---|
| D | +A | +
| C | +B | +
| B | +C | +
| A | +D | +
➖
-
-
- Name
- |
+ ➖
+ |
+
+
+
+ Name
+ |
+
|---|---|
| + | +Jean Martin | +
| ✅ | +Kenji Sato | +
| ✅ | +Julie Smith | +
-
- Name
- | + + | +
+
+
+ Name
+ |
+
|---|---|
| + + | +Jean Martin | +
| + + | +Kenji Sato | +
| + + | +Julie Smith | +
-
- Name
- | + |
+
+
+ Name
+ |
+
|---|---|
| + + | +Jean Martin | +
| + + | +Kenji Sato | +
| + + | +Julie Smith | +