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 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>
<div data-is-scrollable="true" style="height:400px; overflow-y:auto;">
<DetailsList ItemsSource="ReadonlyList"
@ref="detailsList"
Columns="ReadonlyColumns"
GetKey="(item)=>item.Key"
TItem="GroupedDataItem"
Compact="@isCompact"
IsVirtualizing="@isVirtualizing"
SubGroupSelector=@(item=> item.ObservableData)
GroupTitleSelector=@(item=>item.DisplayName)
LayoutMode="DetailsListLayoutMode.Justified"
Selection="selection"
SelectionMode=@((SelectionMode)Enum.Parse(typeof(SelectionMode), selectedModeOption?.Key!))>
</DetailsList>
</div>