DetailsListAuto

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

DetailsListAuto with many options
				<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>
			
            
DetailsListAuto with Fixed Columns
				<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>
			
            
DetailsListAuto with MarqueeSelection
				<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>
			
            
Custom grid with sort
>
				<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>>