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>
<DefaultButton OnClick=@(arg => selection1.SelectedItems = (new System.Collections.Generic.List<DataItem> { dataSource[2], dataSource[3] }) ) Text="Set #3 & #4 selected" />
</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:400px;overflow-y:auto;">
<DetailsListAuto ItemsSource="dataSource"
IsVirtualizing=@isVirtualizing
TItem="DataItem"
Compact=@isCompact
Columns="columnsSource"
GetKey=@(x=>x.Key)
LayoutMode="DetailsListLayoutMode.Justified"
Selection="selection1"
SelectionMode=@((SelectionMode)Enum.Parse(typeof(SelectionMode), selectedModeOption?.Key!)) />
</div>
<div data-is-scrollable="true" style="height:400px;overflow-y:auto;">
<DetailsListAuto ItemsSource="dataSource"
IsVirtualizing="true"
Compact="true"
Columns="fixedColumnsSource"
GetKey=@(x=>x.Key)
LayoutMode="DetailsListLayoutMode.FixedColumns"
Selection="selection2"
SelectionMode=@((SelectionMode)Enum.Parse(typeof(SelectionMode), selectedModeOption?.Key!)) />
</div>
<div data-is-scrollable="true" style="height:400px;overflow-y:auto;">
<MarqueeSelection Selection=@selection3>
<DetailsListAuto ItemsSource="dataSource"
IsVirtualizing="true"
Compact="true"
Columns="columnsSource"
GetKey=@(x=>x.Key)
LayoutMode="DetailsListLayoutMode.Justified"
Selection="selection3"
SelectionMode="SelectionMode.Multiple" />
</MarqueeSelection>
</div>
<div data-is-scrollable="true" style="overflow-y:auto;margin-bottom:50px">
<DetailsListAuto ItemsSource="itemSource" Columns="table"
IsVirtualizing="true" Compact="true"
TItem="CustomGrid"
GetKey=@(x=>x.id)
LayoutMode="BlazorFluentUI.Lists.DetailsListLayoutMode.Justified"
Selection="tableSelection"
SelectionMode="SelectionMode.Multiple" />
</div>>