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

enum

DetailsGridMode

public enum DetailsGridMode

How a DetailsGrid arranges each label against its value.

Namespace: Tesserae

Values

Name	Description
Rows	Label and value side by side, one row each, the labels sharing a column of a fixed width (see `LabelWidth`) so the values line up.
Stacked	The label above its value: a small, semibold, uppercase header in the secondary color with the value under it - the shape a sheet of dates and references takes when the labels are longer than a column would like and the values are short.

Value

DetailsGridMode.Rows

Rows

Label and value side by side, one row each, the labels sharing a column of a fixed width (see LabelWidth) so the values line up.

Value

DetailsGridMode.Stacked

Stacked

The label above its value: a small, semibold, uppercase header in the secondary color with the value under it - the shape a sheet of dates and references takes when the labels are longer than a column would like and the values are short.

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. Stacked turns that around: each label becomes a small semibold header over its value, which - with Columns - is the two- or three-up sheet of dates and references a record's header block is made of.

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

Constructors

Name	Description
DetailsGrid	Initializes a new instance of this class, with no rows in it yet, laid out in the given number of columns - one by default, which is the "one row each" block. Two or three suit a grid of short values that would otherwise leave most of its width empty.

Constructor

DetailsGrid

public DetailsGrid(int columns = 1)

Initializes a new instance of this class, with no rows in it yet, laid out in the given number of columns - one by default, which is the "one row each" block. Two or three suit a grid of short values that would otherwise leave most of its width empty.

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.
Mode	Chooses how each label sits against its value: `Rows` (the default) puts them side by side, `Stacked` puts the label above its value as a small semibold header in the secondary color.
Stacked	Puts each label above its value as a small, semibold, uppercase header in the secondary color - the sheet of dates and references a record's header block is made of. Pair it with `Columns` to read two or three of them across.
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.Mode

public DetailsGrid Mode(DetailsGridMode mode)

Chooses how each label sits against its value: Rows (the default) puts them side by side, Stacked puts the label above its value as a small semibold header in the secondary color.

Method

DetailsGrid.Stacked

public DetailsGrid Stacked(bool value = true)

Puts each label above its value as a small, semibold, uppercase header in the secondary color - the sheet of dates and references a record's header block is made of. Pair it with Columns to read two or three of them across.

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

Values

DetailsGridMode.Rows

DetailsGridMode.Stacked

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.Mode

DetailsGrid.Stacked

DetailsGrid.Compact

DetailsGrid.NoBorder

See also