Tesserae - Details List

DetailsList

Description

DetailsList is a robust component for displaying an information-rich collection of items. It extends the basic List capabilities by supporting features such as sorting, grouping, multiple selection, and pagination. This component is ideal for scenarios where a dense presentation of metadata is required, such as file explorers or order listings. It is part of the Collections group in Tesserae.

Usage

Instantiate a DetailsList using the static helper method from Tesserae.UI. You must provide one or more column definitions (using helpers like IconColumn and DetailsListColumn) and supply list items that implement the IDetailsListItem interface.

Below is a minimal example of how to create a DetailsList displaying file items:

details-list-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var fileItems = GetDetailsListItems(); // your method for obtaining the list items

            var detailsList = DetailsList<DetailsListSampleFileItem>(
                IconColumn(Icon(UIcons.File), width: 32.px(), enableColumnSorting: true, sortingKey: "FileIcon"),
                DetailsListColumn(title: "File Name",     width: 350.px(), enableColumnSorting: true, sortingKey: "FileName", isRowHeader: true),
                DetailsListColumn(title: "Date Modified", width: 170.px(), enableColumnSorting: true, sortingKey: "DateModified"),
                DetailsListColumn(title: "Modified By",   width: 150.px(), enableColumnSorting: true, sortingKey: "ModifiedBy"),
                DetailsListColumn(title: "File Size",     width: 120.px(), enableColumnSorting: true, sortingKey: "FileSize")
            )
            .Height(500.px())
            .WithListItems(fileItems.ToArray())
            .SortedBy("FileName");

            // Render the DetailsList component
            document.body.appendChild(detailsList.Render());
            document.body.style.overflow = "hidden";
            MountCenteredToBody(detailsList);
        }

        private static DetailsListSampleFileItem[] GetDetailsListItems(int start = 1, int count = 100)
        {
            return Enumerable.Range(start, count).Select(n => new DetailsListSampleFileItem(UIcons.FileWord, $"Document_{n}.docx", DateTime.Today.AddDays(-n), "System", n * 1.5)).ToArray();
        }
    }

    public class DetailsListSampleFileItem : IDetailsListItem<DetailsListSampleFileItem>
    {
        public DetailsListSampleFileItem(UIcons icon, string name, DateTime modified, string by, double size) { FileIcon = icon; FileName = name; DateModified = modified; ModifiedBy = by; FileSize = size; }
        public UIcons FileIcon { get; }
        public string FileName { get; }
        public DateTime DateModified { get; }
        public string ModifiedBy { get; }
        public double FileSize { get; }
        public bool EnableOnListItemClickEvent => true;
        public void OnListItemClick(int index) => Toast().Information($"Clicked: {FileName}");
        public int CompareTo(DetailsListSampleFileItem other, string key)
        {
            switch (key)
            {
                case "FileName":     return string.Compare(FileName, other.FileName, StringComparison.OrdinalIgnoreCase);
                case "DateModified": return DateModified.CompareTo(other.DateModified);
                case "ModifiedBy":   return string.Compare(ModifiedBy, other.ModifiedBy, StringComparison.OrdinalIgnoreCase);
                case "FileSize":     return FileSize.CompareTo(other.FileSize);
                default:             return 0;
            }
        }
        public IEnumerable<IComponent> Render(IList<IDetailsListColumn> columns, Func<IDetailsListColumn, Func<IComponent>, IComponent> cell)
        {
            yield return cell(columns[0], () => Icon(FileIcon));
            yield return cell(columns[1], () => TextBlock(FileName));
            yield return cell(columns[2], () => TextBlock(DateModified.ToShortDateString()));
            yield return cell(columns[3], () => TextBlock(ModifiedBy));
            yield return cell(columns[4], () => TextBlock(FileSize.ToString("N1") + " KB"));
        }
    }
}

API reference

class

DetailsList<TDetailsListItem>

public class DetailsList<TDetailsListItem> : IComponent, ISpecialCaseStyling where TDetailsListItem : class, IDetailsListItem<TDetailsListItem>

A virtualised, sortable, multi-column table for displaying large lists of typed items, similar to Fluent UI's DetailsList.

Constructors

Constructor

DetailsList

public DetailsList(params IDetailsListColumn[] columns)

Initializes a new instance of this class.

Properties

Property

DetailsList.StylingContainer

public HTMLElement StylingContainer

Gets or sets the styling container.

Property

DetailsList.PropagateToStackItemParent

public bool PropagateToStackItemParent

Gets or sets the propagate to stack item parent.

Property

DetailsList.IsCompact

public bool IsCompact { get ; set ; }

Gets or sets a value indicating whether the component is rendered in compact form.

Methods

Method

DetailsList.Compact

public DetailsList<TDetailsListItem> Compact()

Renders the component in a compact form.

Method

DetailsList.WithEmptyMessage

public DetailsList<TDetailsListItem> WithEmptyMessage(Func<IComponent> emptyListMessageGenerator)

Returns the component configured with the given empty message.

Method

DetailsList.WithPaginatedItems

public DetailsList<TDetailsListItem> WithPaginatedItems(Func<Task<TDetailsListItem[]>> getNextItemPage)

Returns the component configured with the given paginated items.

Method

DetailsList.WithListItems

public DetailsList<TDetailsListItem> WithListItems(params TDetailsListItem[] listItems)

Returns the component configured with the given list items.

Method

DetailsList.SortedBy

public DetailsList<TDetailsListItem> SortedBy(string columnSortingKey)

Configures the sorted by on the component.

Method

DetailsList.Render

public HTMLElement Render()

Renders the component's root HTML element.

class

DetailsListColumn

public class DetailsListColumn : IDetailsListColumn

A typed column definition used to declare how a property of is rendered inside a .

Constructors

Constructor

DetailsListColumn

public DetailsListColumn(string title, UnitSize width, UnitSize maxWidth, bool isRowHeader = false, bool enableColumnSorting = false, string sortingKey = null, Action onColumnClick = null)

Initializes a new instance of this class.

Properties

Property

DetailsListColumn.SortingKey

public string SortingKey { get; }

Gets or sets the sorting key.

Property

DetailsListColumn.Title

public string Title { get; }

Gets or sets the title of the component.

Property

DetailsListColumn.Width

public UnitSize Width { get; }

Gets or sets the CSS width of the component.

Property

DetailsListColumn.MaxWidth

public UnitSize MaxWidth { get; }

Gets or sets the CSS max-width of the component.

Property

DetailsListColumn.IsRowHeader

public bool IsRowHeader { get; }

Returns a value indicating whether the component is row header.

Property

DetailsListColumn.EnableColumnSorting

public bool EnableColumnSorting { get; }

Enables the column sorting on the component.

Property

DetailsListColumn.EnableOnColumnClickEvent

public bool EnableOnColumnClickEvent { get; }

Enables the on column click event on the component.

Methods

Method

DetailsListColumn.OnColumnClick

public void OnColumnClick()

Registers a callback invoked when the column click event fires.

Method

DetailsListColumn.Render

public HTMLElement Render()

Renders the component's root HTML element.

class

DetailsListIconColumn

public class DetailsListIconColumn : IDetailsListColumn

A specialized column that renders a single icon per row.

Constructors

Constructor

DetailsListIconColumn

public DetailsListIconColumn(Icon icon, UnitSize width, UnitSize maxWidth, bool enableColumnSorting = false, string sortingKey = null, Action onColumnClick = null)

Initializes a new instance of this class.

Properties

Property

DetailsListIconColumn.SortingKey

public string SortingKey { get; }

Gets or sets the sorting key.

Property

DetailsListIconColumn.Icon

public Icon Icon { get; }

Gets or sets the icon shown by the component.

Property

DetailsListIconColumn.Width

public UnitSize Width { get; }

Gets or sets the CSS width of the component.

Property

DetailsListIconColumn.MaxWidth

public UnitSize MaxWidth { get; }

Gets or sets the CSS max-width of the component.

Property

DetailsListIconColumn.IsRowHeader

public bool IsRowHeader

Returns a value indicating whether the component is row header.

Property

DetailsListIconColumn.EnableColumnSorting

public bool EnableColumnSorting { get; }

Enables the column sorting on the component.

Property

DetailsListIconColumn.EnableOnColumnClickEvent

public bool EnableOnColumnClickEvent { get; }

Enables the on column click event on the component.

Methods

Method

DetailsListIconColumn.OnColumnClick

public void OnColumnClick()

Registers a callback invoked when the column click event fires.

Method

DetailsListIconColumn.Render

public HTMLElement Render()

Renders the component's root HTML element.

Samples

Sortable DetailsList with 50 Items

This sample populates the list with 50 generated rows so sorting and scrolling are meaningful. Click any column header to re-sort, or click a row to fire its OnListItemClick event (shown via a toast).

details-list-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    public class FileRow : IDetailsListItem<FileRow>
    {
        public FileRow(string name, DateTime modified, string by, double sizeKb)
        {
            FileName = name; DateModified = modified; ModifiedBy = by; FileSize = sizeKb;
        }
        public string   FileName     { get; }
        public DateTime DateModified { get; }
        public string   ModifiedBy   { get; }
        public double   FileSize     { get; }

        public bool EnableOnListItemClickEvent => true;
        public void OnListItemClick(int index) => Toast().Information($"Clicked: {FileName}");

        public int CompareTo(FileRow other, string key)
        {
            switch (key)
            {
                case "FileName":     return string.Compare(FileName, other.FileName, StringComparison.OrdinalIgnoreCase);
                case "DateModified": return DateModified.CompareTo(other.DateModified);
                case "ModifiedBy":   return string.Compare(ModifiedBy, other.ModifiedBy, StringComparison.OrdinalIgnoreCase);
                case "FileSize":     return FileSize.CompareTo(other.FileSize);
                default:             return 0;
            }
        }

        public IEnumerable<IComponent> Render(IList<IDetailsListColumn> columns,
            Func<IDetailsListColumn, Func<IComponent>, IComponent> cell)
        {
            yield return cell(columns[0], () => Icon(UIcons.FileWord));
            yield return cell(columns[1], () => TextBlock(FileName));
            yield return cell(columns[2], () => TextBlock(DateModified.ToShortDateString()));
            yield return cell(columns[3], () => TextBlock(ModifiedBy));
            yield return cell(columns[4], () => TextBlock(FileSize.ToString("N1") + " KB"));
        }
    }

    internal static class App
    {
        private static FileRow[] Build(int count)
        {
            var owners = new[] { "Alice", "Bob", "Carol", "Dan", "Eve" };
            return Enumerable.Range(1, count).Select(n =>
                new FileRow($"Document_{n:D2}.docx",
                            DateTime.Today.AddDays(-n),
                            owners[n % owners.Length],
                            n * 13.7)).ToArray();
        }

        private static void Main()
        {
            var list = DetailsList<FileRow>(
                    IconColumn(Icon(UIcons.File), width: 32.px()),
                    DetailsListColumn(title: "File Name",     width: 280.px(), enableColumnSorting: true, sortingKey: "FileName", isRowHeader: true),
                    DetailsListColumn(title: "Date Modified", width: 160.px(), enableColumnSorting: true, sortingKey: "DateModified"),
                    DetailsListColumn(title: "Modified By",   width: 140.px(), enableColumnSorting: true, sortingKey: "ModifiedBy"),
                    DetailsListColumn(title: "File Size",     width: 120.px(), enableColumnSorting: true, sortingKey: "FileSize"))
                .Height(400.px())
                .WithListItems(Build(50))
                .SortedBy("FileName");

            document.body.style.overflow = "hidden";
            MountCenteredToBody(list);
        }
    }
}

DetailsList with Live Pagination

Combine WithPaginatedItems with a real async producer. Each scroll to the bottom appends another 10 rows, simulating remote loading with Task.Delay. A Toast reports each batch so the loading behavior is visible.

details-list-3-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    public class FileItem : IDetailsListItem<FileItem>
    {
        public FileItem(string name, double sizeKb) { FileName = name; FileSize = sizeKb; }
        public string FileName { get; }
        public double FileSize { get; }

        public bool EnableOnListItemClickEvent => false;
        public void OnListItemClick(int listItemIndex) { }

        public int CompareTo(FileItem other, string key)
            => key == "FileSize"
                ? FileSize.CompareTo(other.FileSize)
                : string.Compare(FileName, other.FileName, StringComparison.OrdinalIgnoreCase);

        public IEnumerable<IComponent> Render(IList<IDetailsListColumn> columns,
            Func<IDetailsListColumn, Func<IComponent>, IComponent> cell)
        {
            yield return cell(columns[0], () => Icon(UIcons.File));
            yield return cell(columns[1], () => TextBlock(FileName));
            yield return cell(columns[2], () => TextBlock(FileSize.ToString("N1") + " KB"));
        }
    }

    internal static class App
    {
        private static int _page = 1;

        private static void Main()
        {
            var list = DetailsList<FileItem>(
                    IconColumn(Icon(UIcons.File), width: 32.px()),
                    DetailsListColumn(title: "File Name", width: 320.px(), enableColumnSorting: true, sortingKey: "FileName", isRowHeader: true),
                    DetailsListColumn(title: "File Size", width: 140.px(), enableColumnSorting: true, sortingKey: "FileSize"))
                .Height(360.px())
                .WithListItems(BuildPage())
                .WithPaginatedItems(async () =>
                {
                    await Task.Delay(700);
                    Toast().Information($"Loaded page {_page + 1}");
                    return BuildPage();
                })
                .SortedBy("FileName");

            document.body.style.overflow = "hidden";
            MountCenteredToBody(list);
        }

        private static FileItem[] BuildPage()
        {
            var p = _page++;
            return Enumerable.Range(1, 10).Select(n =>
                new FileItem($"page{p:D2}-item{n:D2}.txt", n * 4.5 + p)).ToArray();
        }
    }
}

DetailsList with Empty Message

Use WithEmptyMessage to render a placeholder when no items are available. The delegate is only invoked when the list is empty, so it can be as elaborate as needed.

details-list-4-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    public class EmptyRow : IDetailsListItem<EmptyRow>
    {
        public bool EnableOnListItemClickEvent => false;
        public void OnListItemClick(int index) { }
        public int CompareTo(EmptyRow other, string key) => 0;
        public IEnumerable<IComponent> Render(IList<IDetailsListColumn> columns,
            Func<IDetailsListColumn, Func<IComponent>, IComponent> cell)
        {
            yield break;
        }
    }

    internal static class App
    {
        private static void Main()
        {
            var list = DetailsList<EmptyRow>(
                    IconColumn(Icon(UIcons.File), width: 32.px()),
                    DetailsListColumn(title: "File Name", width: 320.px(), isRowHeader: true),
                    DetailsListColumn(title: "File Size", width: 140.px()))
                .WithEmptyMessage(() =>
                    BackgroundArea(VStack().AlignItemsCenter().JustifyContentCenter().Children(
                        Icon(UIcons.InboxEmpty).XXLarge(),
                        TextBlock("No files in this folder").SemiBold().Padding(8.px()),
                        Button("Upload a file").Primary().SetIcon(UIcons.Upload)
                            .OnClick((s, e) => Toast().Information("Upload triggered"))
                    ).Padding(24.px())).WS().HS())
                .Height(280.px())
                .WithListItems(new EmptyRow[0]);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(list);
        }
    }
}

DetailsList

Description

Usage

API reference

Constructors

DetailsList

Properties

DetailsList.StylingContainer

DetailsList.PropagateToStackItemParent

DetailsList.IsCompact

Methods

DetailsList.Compact

DetailsList.WithEmptyMessage

DetailsList.WithPaginatedItems

DetailsList.WithListItems

DetailsList.SortedBy

DetailsList.Render

Constructors

DetailsListColumn

Properties

DetailsListColumn.SortingKey

DetailsListColumn.Title

DetailsListColumn.Width

DetailsListColumn.MaxWidth

DetailsListColumn.IsRowHeader

DetailsListColumn.EnableColumnSorting

DetailsListColumn.EnableOnColumnClickEvent

Methods

DetailsListColumn.OnColumnClick

DetailsListColumn.Render

Constructors

DetailsListIconColumn

Properties

DetailsListIconColumn.SortingKey

DetailsListIconColumn.Icon

DetailsListIconColumn.Width

DetailsListIconColumn.MaxWidth

DetailsListIconColumn.IsRowHeader

DetailsListIconColumn.EnableColumnSorting

DetailsListIconColumn.EnableOnColumnClickEvent

Methods

DetailsListIconColumn.OnColumnClick

DetailsListIconColumn.Render

Samples

Sortable DetailsList with 50 Items

DetailsList with Live Pagination

DetailsList with Empty Message

See also