A details list (DetailsList) is a robust way to display an information-rich collection of items, and allow people to sort, group, and filter the content. Use a details list when information density is critical.
A details list (DetailsList) is a robust way to display an information-rich collection of items, and allow people to sort, group, and filter the content. Use a details list when information density is critical.
<Stack Style="height:100%;">
<Stack Horizontal="true" Tokens="new StackTokens { ChildrenGap = new double[] { 10.0 } }">
<Toggle Label="IsVirtualizing" OnText="true" OffText="false" @bind-Checked="isVirtualizing" />
<Toggle Label="IsCompact" OnText="true" OffText="false" @bind-Checked="isCompact" />
<Dropdown ItemsSource=@selectionModeOptions
@bind-SelectedOption=selectedModeOption
Style="max-width:300px;">
</Dropdown>
</Stack>
<TextField Label="Filter Description"
Value=@filter
OnInput=@(val => { filter = val; descriptionColumn!.FilterPredicate = prop => (prop as string)!.Contains(filter); }) />
<div data-is-scrollable="true" style="height:100%;overflow-y:auto;">
<DetailsListAuto ItemsSource="dataSource"
@ref="detailsList"
Columns="columnsSource"
Compact="@isCompact"
GetKey=@(x=>x.Key)
TItem="DataItem"
IsVirtualizing="@isVirtualizing"
GroupBy=@(new System.Collections.Generic.List<Func<DataItem,object>>
{
x=>x.GroupName!,
x=>x.KeyNumber % 2 == 0 ? "even" :"odd"
})
LayoutMode="DetailsListLayoutMode.Justified"
SelectionMode=@((SelectionMode)Enum.Parse(typeof(SelectionMode), selectedModeOption!.Key!))>
</DetailsListAuto>
</div>
</Stack>