diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor
index 826977a..0b34a65 100644
--- a/BlazorFluentUI/Components/Layout/NavMenu.razor
+++ b/BlazorFluentUI/Components/Layout/NavMenu.razor
@@ -57,6 +57,7 @@
MenuButton
Card
+ DataGrid
diff --git a/BlazorFluentUI/Components/Pages/Components/CompoDataGrid.razor b/BlazorFluentUI/Components/Pages/Components/CompoDataGrid.razor
new file mode 100644
index 0000000..813aa80
--- /dev/null
+++ b/BlazorFluentUI/Components/Pages/Components/CompoDataGrid.razor
@@ -0,0 +1,149 @@
+@page "/compodatagrid"
+
+@inject EmployeeService EmployeeService
+
+@rendermode RenderMode.InteractiveServer
+
+DataGrid
+
+
+ The FluentDataGrid component is used to display tabular data.
+ The FluentDataGridRow and FluentDataGridCell components are typically created programmatically by the parent grid
+ but some authors may find it useful to create them manually.
+
+
+Accessibility
+
+ You can use the Arrow keys to navigate through a DataGrid.
+ When header cell is focused and the column is sortable, you can use the Tab key to select the sort button.
+ Presssing the Enter key will toggle the sorting direction.
+ Pressing Ctrl+Enter removes the column sorting and restores the default/start situation with regards to sorting.
+
+
+ When a header cell is focused and the column allows setting options,
+ you can use the Tab key to select the options button.
+ Pressing the Enter key then will toggle the options popover.
+ Pressing the Esc button to close the popover.
+
+
+ When a grid allows resizing of the columns,
+ you can use the + and - keys to resize the column the focused header belongs to.
+ Incrementing/decrementing width is done in steps of 10 pixels at a time.
+ You can reset to the original initial column widths by pressing Shift+r.
+
+
+Get started
+
+
+
+
+
+
+
+
+Multi Select
+
+
+
+
+
+
+
+
+ @if (useSelectdItems)
+ {
+
Using SelectedItems
+
+
+
+
+
+
+ }
+ else
+ {
+
Using Property and OnSelect
+
+
+
+
+
+
+
+
+ Peoples:
+ @String.Join("; ", people.Where(p => p.Selected).Select(p => p.Name))
+
+ }
+
Typical Usage
+
+
+ @* *@
+
+
+ )
+
+
+
+
+
+ @* *@
+ @* *@
+
+
+
+
+@code {
+ record Person(int PersonId, string Name, DateOnly BirthDate)
+ {
+ public bool Selected { get; set; }
+ }
+
+ static IQueryable people = new[]
+ {
+ new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)) { Selected = true },
+ new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
+ new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
+ new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
+ new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
+ new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
+ }.AsQueryable();
+
+ bool useSelectdItems = true;
+ bool selectFromEntireRow = true;
+ DataGridSelectMode mode = DataGridSelectMode.Single;
+
+ IEnumerable SelectedItems = people.Where(p => p.Selected);
+
+ void ResetSelectItems()
+ {
+ people.ToList().ForEach(i => i.Selected = false);
+ people.First().Selected = true;
+ SelectedItems = people.Where(p => p.Selected);
+ }
+
+ PaginationState pagination = new PaginationState() { ItemsPerPage = 10 };
+ IQueryable employees;
+ protected override async Task OnInitializedAsync()
+ {
+ employees = (await EmployeeService.GetEmployeeDataAsync(100)).AsQueryable();
+ }
+}
diff --git a/BlazorFluentUI/Components/Pages/FormInputs/FormInputRating.razor b/BlazorFluentUI/Components/Pages/FormInputs/FormInputRating.razor
index 1ff5147..79f33ba 100644
--- a/BlazorFluentUI/Components/Pages/FormInputs/FormInputRating.razor
+++ b/BlazorFluentUI/Components/Pages/FormInputs/FormInputRating.razor
@@ -12,9 +12,9 @@
Accessiblilty
You can use the arrow keys to
- increase (➡️/⬆️)
+ increase (➡️/⬆️)
or
- decrease (⬅️/⬇️)
+ decrease (⬅️/⬇️)
the value
diff --git a/BlazorFluentUI/Services/EmployeeService.cs b/BlazorFluentUI/Services/EmployeeService.cs
index ba61b5a..6bbcd26 100644
--- a/BlazorFluentUI/Services/EmployeeService.cs
+++ b/BlazorFluentUI/Services/EmployeeService.cs
@@ -25,6 +25,13 @@ namespace BlazorFluentUI.Services
return GenerateEmployData(count).ToList();
}
+ public async Task> GetEmployeeDataAsync(int count)
+ {
+ await Task.Delay(count * 10);
+
+ return GenerateEmployData(count).ToList();
+ }
+
public List GetFixedEmployeeData()
{
return _fixedSample;
diff --git a/BlazorFluentUI/wwwroot/app-cutom.css b/BlazorFluentUI/wwwroot/app-cutom.css
index 9c029ef..b0b21b8 100644
--- a/BlazorFluentUI/wwwroot/app-cutom.css
+++ b/BlazorFluentUI/wwwroot/app-cutom.css
@@ -1,32 +1,32 @@
.fluent-slider-w300px {
max-width: 300px;
- margin-top: 10px
+ margin-top: 10px;
}
.fluent-border-s1 {
border-style: solid;
border-color: var(--accent-fill-rest);
- border-width: 1px
+ border-width: 1px;
}
.fluent-border-s1-r10 {
border-radius: 10px;
border-style: solid;
border-color: var(--accent-fill-rest);
- border-width: 1px
+ border-width: 1px;
}
.fluent-border-s1-r5 {
border-radius: 5px;
border-style: solid;
border-color: var(--accent-fill-rest);
- border-width: 1px
+ border-width: 1px;
}
.fluent-border-d1 {
border-style: dashed;
border-color: var(--accent-fill-rest);
- border-width: 1px
+ border-width: 1px;
}
.fluent-fixed-w100 {