Tesserae - Details Grid

Details Grid

Description

A bordered table of label/value rows

DetailsGrid is the "Owner / Size / Modified / Pages" block a preview shows beside (or under) whatever it is previewing. Rows read as one column of labels in the secondary colour followed by one column of values.

Add rows with Row(label, value). A string value still gets its row when it is empty, drawn as an em dash, so a grid of the same fields reads the same whether every one of them is known or not; pass skipIfEmpty: true to leave the row out instead. A component value (InlineLabel, Badge, Avatar, a button with an href) leaves the row out when it is null, so a caller can build it conditionally without branching around the call.

LabelWidth sets how wide the label column is (120px by default, enough for the one or two words a field name usually is), and the width is the same for every row so the values line up. Columns(n) lays the rows out in several columns rather than one under the other, for short values that would otherwise leave most of the width empty. Compact() tightens the rows, and NoBorder() drops the frame for a grid that already sits inside something bordered.

A row whose only value was a self-removing InlineLabel is taken out with it, and stops being counted by Count.

Samples

File metadata

details-grid-basic-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = DetailsGrid()
               .Row("Owner",    "Marie Lang")
               .Row("Size",     "2.4 MB")
               .Row("Modified", "Apr 11, 2024")
               .Row("Pages",    "18")
               .Row("Status",   Badge("In review").Warning());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component.WS().Padding(16.px()));
        }
    }
}

Two columns, compact, without a border

details-grid-columns-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = DetailsGrid()
               .Columns(2)
               .Compact()
               .NoBorder()
               .LabelWidth(90.px())
               .Row("Type",     "Spreadsheet")
               .Row("Source",   "Drive")
               .Row("Created",  "Jan 3, 2024")
               .Row("Modified", "Apr 11, 2024")
               .Row("Language", "English")
               .Row("Region",   "EMEA");

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component.WS().Padding(16.px()));
        }
    }
}

API reference

class

DetailsGrid

public sealed class DetailsGrid : ComponentBase<DetailsGrid, HTMLElement>

A bordered table of label/value rows - the "Owner / Size / Modified / Pages" block a preview shows beside (or under) whatever it is previewing. Rows are added with Row or Row, and read as one column of labels in the secondary color followed by one column of values. Values can be plain text or a component of the host's own - a Link, a Badge, an Avatar - so a grid of metadata never forces the host to spell its values out as strings.

Namespace: Tesserae
Inheritance: ComponentBase<DetailsGrid, HTMLElement> → DetailsGrid

Constructors

Name	Description
DetailsGrid	Initializes a new instance of this class, with no rows in it yet.

Constructor

DetailsGrid

public DetailsGrid()

Initializes a new instance of this class, with no rows in it yet.

Properties

Name	Description
Count	The number of rows the grid is showing. A row a self-removing value took with it (see `InlineLabel`) is no longer counted.

Property

DetailsGrid.Count

public int Count

The number of rows the grid is showing. A row a self-removing value took with it (see InlineLabel) is no longer counted.

Methods

Name	Description
Render	Renders the component's root HTML element.
Row	Adds a row showing the given label and its value as plain text. A null or empty value still gets its row, drawn as an em dash, so a grid of the same fields reads the same whether every one of them is known or not - pass `skipIfEmpty` to leave the row out instead.
Clear	Takes every row away again.
LabelWidth	Sets how wide the label column is - 120px by default, which is enough for the one or two words a field name usually is. The width is the same for every row, so the values line up.
Columns	Lays the rows out in the given number of columns rather than one under the other - two or three of them, for a grid of short values that would otherwise leave most of its width empty.
Compact	Tightens the rows, for a grid that has to sit inside something small.
NoBorder	Drops the border around the grid and the rules between its rows, leaving the labels and values alone - for a grid that already sits inside something bordered.

Method

DetailsGrid.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Method

DetailsGrid.Row

Overload
Row(string, string, bool)	Adds a row showing the given label and its value as plain text. A null or empty value still gets its row, drawn as an em dash, so a grid of the same fields reads the same whether every one of them is known or not - pass `skipIfEmpty` to leave the row out instead.
Row(string, IComponent)	Adds a row showing the given label and a component of the host's own as its value. A null value leaves the row out, so a caller can build the component conditionally without branching around the call.

Row(string, string, bool)

public DetailsGrid Row(string label, string value, bool skipIfEmpty = false)

Adds a row showing the given label and its value as plain text. A null or empty value still gets its row, drawn as an em dash, so a grid of the same fields reads the same whether every one of them is known or not - pass skipIfEmpty to leave the row out instead.

Parameters

label string
value string
skipIfEmpty bool

Row(string, IComponent)

public DetailsGrid Row(string label, IComponent value)

Adds a row showing the given label and a component of the host's own as its value. A null value leaves the row out, so a caller can build the component conditionally without branching around the call.

Parameters

label string
value IComponent

Method

DetailsGrid.Clear

public DetailsGrid Clear()

Takes every row away again.

Method

DetailsGrid.LabelWidth

public DetailsGrid LabelWidth(UnitSize width)

Sets how wide the label column is - 120px by default, which is enough for the one or two words a field name usually is. The width is the same for every row, so the values line up.

Method

DetailsGrid.Columns

public DetailsGrid Columns(int columns)

Lays the rows out in the given number of columns rather than one under the other - two or three of them, for a grid of short values that would otherwise leave most of its width empty.

Method

DetailsGrid.Compact

public DetailsGrid Compact(bool value = true)

Tightens the rows, for a grid that has to sit inside something small.

Method

DetailsGrid.NoBorder

public DetailsGrid NoBorder(bool value = true)

Drops the border around the grid and the rules between its rows, leaving the labels and values alone - for a grid that already sits inside something bordered.

Details Grid

Description

Samples

File metadata

Two columns, compact, without a border

API reference

Constructors

DetailsGrid

Properties

DetailsGrid.Count

Methods

DetailsGrid.Render

DetailsGrid.Row

Row(string, string, bool)

Parameters

Row(string, IComponent)

Parameters

DetailsGrid.Clear

DetailsGrid.LabelWidth

DetailsGrid.Columns

DetailsGrid.Compact

DetailsGrid.NoBorder

See also