DetailsListAuto-Grouped

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 Auto - Grouped Data
            <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>