DetailsList - Grouped Data

Overview

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.

Usage

Details List Grouped
<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>