DetailsList Basic

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

Basic Details List
<div data-is-scrollable="true" style="height:400px;overflow-y:auto;">
    <DetailsList ItemsSource="InputList"
 Columns="Columns"
 GetKey=@(item=>item.Key)
 LayoutMode="DetailsListLayoutMode.Justified"
 TItem="DataItem"
 OnItemInvoked="OnClick"
 Selection="selection"
 SelectionMode="SelectionMode.Multiple">
    </DetailsList>
</div>
            
            
Details List with custom cells
<div data-is-scrollable="true" style="height:400px;overflow-y:auto;">
    <DetailsList ItemsSource="InputList"
 Columns="CustomColumns"
 GetKey=@(item=>item.Key)
 LayoutMode="DetailsListLayoutMode.Justified"
 TItem="DataItem"
 OnItemInvoked="OnClick"
 Selection="selection"
 SelectionMode="SelectionMode.Multiple">
    </DetailsList>
</div>