diff --git a/BlazorFluentUI/Components/Pages/Components/CompoDataGrid.razor b/BlazorFluentUI/Components/Pages/Components/CompoDataGrid.razor
index 813aa80..8c8d2aa 100644
--- a/BlazorFluentUI/Components/Pages/Components/CompoDataGrid.razor
+++ b/BlazorFluentUI/Components/Pages/Components/CompoDataGrid.razor
@@ -95,22 +95,102 @@
Typical Usage
-
- @* *@
-
-
- )
-
+
+
+ @* *@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @* *@
+ @* *@
+
+
+
+ Loading...
+
+
+
+
+
+ Simulate Data Loding
+
+
+Template columns
+
+ Message: @templateMessage?.ToString()
+
+
+
+
+
+
+
+ @($"{context.FirstName}, {context.LastName}")
+
+
Template columns 2
+
+
+
+
+
+
+
+
+
+
+
+Dynamic columns
+
+
+ Show:
+ Name
+ Birth Date
+
+
+
+ @if (showName)
+ {
+
+ }
+ @if (showBirth)
+ {
+
+ }
+
+
+
+Multiline text columns
+
+
+
+
+
+
+
+
@code {
record Person(int PersonId, string Name, DateOnly BirthDate)
{
@@ -140,10 +220,68 @@
SelectedItems = people.Where(p => p.Selected);
}
+ FluentDataGrid employeeGrid;
PaginationState pagination = new PaginationState() { ItemsPerPage = 10 };
IQueryable employees;
+ string? nameFilter;
protected override async Task OnInitializedAsync()
{
employees = (await EmployeeService.GetEmployeeDataAsync(100)).AsQueryable();
}
+
+ IQueryable? FilteredEmployee
+ => string.IsNullOrWhiteSpace(nameFilter) ? employees : employees?.Where(e => $"{e.FirstName}, {e.LastName}".Contains(nameFilter, StringComparison.OrdinalIgnoreCase));
+
+ void HandleNameFilter(ChangeEventArgs args)
+ {
+ if (args.Value is string value)
+ nameFilter = value;
+ }
+
+ void HandleClear()
+ {
+ if (string.IsNullOrWhiteSpace(nameFilter))
+ nameFilter = string.Empty;
+ }
+
+ async void SimulateEmployeeLoading()
+ {
+ employees = null;
+ employeeGrid?.SetLoadingState(true);
+
+ await Task.Delay(2000);
+
+ employees = (await EmployeeService.GetEmployeeDataAsync(100)).AsQueryable();
+
+ employeeGrid?.SetLoadingState(false);
+
+ await InvokeAsync(StateHasChanged);
+ }
+
+ string? templateMessage;
+
+ bool showName = true;
+ bool showBirth = true;
+
+ public class SampleGridData
+ {
+ public string Name { get; set; }
+ public int Age { get; set; }
+
+ public string Description
+ => "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.";
+
+ public SampleGridData(string name, int age)
+ {
+ Name = name;
+ Age = age;
+ }
+ }
+
+ List sampleGridData = new List
+ {
+ new SampleGridData("Tob", 15),
+ new SampleGridData("Rob", 25),
+ new SampleGridData("Taylor", 35),
+ };
}