Tesserae - DataTable

DataTable

Description

DataTable lays out a short scorecard: a header band over rows whose cells are components. Use it for KPI panels and dashboard sections of about a dozen rows, where a cell holds a label, a Sparkline, a TrendBadge or a TargetBar.

Declare every column first with Column, then add one row per record with Row, passing one component per column. A row can carry an accent, any CSS color, drawn on its leading edge to flag its state.

DataTable has no sorting, selection or paging. Use DetailsList when rows come from item objects and need those. Below its minimum width of 640px the table scrolls sideways.

Samples

Columns and rows

data-table-basic-sample.cs

using System;
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 = DataTable()
                .Column("Service", 3.fr())
                .Column("Region", 2.fr())
                .Column("Requests", 1.fr(), DataTableAlign.End)
                .Row(TextBlock("Search API").Small(), TextBlock("eu-west").Small(), TextBlock("1,204,330").Small())
                .Row(TextBlock("Ingestion").Small(), TextBlock("us-east").Small(), TextBlock("884,120").Small())
                .Row(TextBlock("Exports").Small(), TextBlock("eu-west").Small(), TextBlock("32,914").Small())
                .W(560);

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

Column takes a title, an optional width and an optional alignment (DataTableAlign.Start, Center or End). A column with no width shares the remaining space. Row expects one component per column.

Row accents and compact padding

data-table-accent-sample.cs

using System;
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 = DataTable()
                .Column("Queue", 3.fr())
                .Column("Depth", 1.fr(), DataTableAlign.End)
                .Column("Status", 1.fr(), DataTableAlign.Center)
                .Row(Theme.Colors.Green600, TextBlock("Indexing").Small(), TextBlock("12").Small(), TextBlock("Healthy").Small())
                .Row(Theme.Colors.Orange600, TextBlock("Embedding").Small(), TextBlock("418").Small(), TextBlock("Backlog").Small())
                .Row(Theme.Colors.Red600, TextBlock("Notifications").Small(), TextBlock("9,950").Small(), TextBlock("Stalled").Small())
                .Compact()
                .W(560);

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

The first argument of the Row overload with an accent is any CSS color. Compact() tightens the padding of the header and rows.

A KPI scorecard

data-table-kpi-sample.cs

using System;
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 = DataTable()
                .Column("Metric", 3.fr())
                .Column("Trend (12wk)", 2.fr(), DataTableAlign.Center)
                .Column("This week", 1.fr(), DataTableAlign.End)
                .Column("WoW", 1.fr(), DataTableAlign.Center)
                .Column("vs target", 2.fr())
                .Row(Theme.Colors.Green600,
                    TextBlock("Resolved tickets").Small(),
                    Sparkline(new double[] { 40, 42, 41, 45, 47, 46, 50, 52, 55, 54, 58, 61 }, 160, 32, Theme.Colors.Green600).WS(),
                    TextBlock("61").SemiBold(),
                    TrendBadge.For(5.4, "5.4%"),
                    TargetBar(112).Success().Label("On track").ValueText("112%"))
                .Row(Theme.Colors.Red600,
                    TextBlock("Median response time").Small(),
                    Sparkline(new double[] { 22, 21, 23, 24, 26, 25, 28, 30, 31, 33, 34, 36 }, 160, 32, Theme.Colors.Red600).WS(),
                    TextBlock("36 min").SemiBold(),
                    TrendBadge.For(2, "2 min", higherIsBetter: false),
                    TargetBar(64).Danger().Label("Behind").ValueText("64%"))
                .Row(
                    TextBlock("Open conversations").Small(),
                    Sparkline(new double[] { 90, 88, 91, 87, 92, 90, 89, 93, 91, 90, 92, 91 }, 160, 32).WS(),
                    TextBlock("91").SemiBold(),
                    TrendBadge("1", TrendDirection.Up).Neutral(),
                    TargetBar(0).NoValue("Context"))
                .W(760);

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

Each cell is a component, so sizing helpers such as .WS() apply to cells like any other component. The Sparkline cells use .WS() to fill their column.

API reference

enum

DataTableAlign

public enum DataTableAlign

How the content of a DataTable column sits in its cells.

Namespace: Tesserae

class

DataTable

public sealed class DataTable : ComponentBase<DataTable, HTMLElement>

A table whose cells are components: a header band over rows that hold whatever the columns call for - a label, a Sparkline, a TrendBadge, a TargetBar. A row can carry a colored accent on its leading edge, to flag its state at a glance.

Remarks

Unlike DetailsList{T}, which is driven by item objects, the rows here are just the components you hand it; there is no sorting, selection or paging. It is the right size for a dashboard panel of a dozen rows.

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

Constructors

Name	Description
DataTable	Initializes a new instance of this class.

Constructor

DataTable

public DataTable()

Initializes a new instance of this class.

Methods

Name	Description
Column	Adds a column. Call it for every column before adding rows.
Row	Adds a row, one component per column.
Clear	Removes every row, keeping the columns.
Compact	Tightens the padding of the header and the rows.
Render	Renders the component's root HTML element.

Method

DataTable.Column

public DataTable Column(string title, UnitSize width = null, DataTableAlign align = DataTableAlign.Start)

Adds a column. Call it for every column before adding rows.

Parameters

title: The heading of the column, drawn in small capitals in the header band.
width: The width of the column. Columns without one share what is left equally.
align: How the heading and the cells of the column are aligned.

Method

DataTable.Row

Overload
Row(IComponent[])	Adds a row, one component per column.
Row(string, IComponent[])	Adds a row with a colored accent on its leading edge, one component per column.

Row(IComponent[])

public DataTable Row(params IComponent[] cells)

Adds a row, one component per column.

Parameters

cells IComponent[]

Row(string, IComponent[])

public DataTable Row(string accent, params IComponent[] cells)

Adds a row with a colored accent on its leading edge, one component per column.

Parameters

accent string: Any CSS color, or a theme variable; null leaves the edge bare.
cells IComponent[]

Method

DataTable.Clear

public DataTable Clear()

Removes every row, keeping the columns.

Method

DataTable.Compact

public DataTable Compact(bool value = true)

Tightens the padding of the header and the rows.

Method

DataTable.Render

public override HTMLElement Render()

Renders the component's root HTML element.

DataTable

Description

Samples

Columns and rows

Row accents and compact padding

A KPI scorecard

API reference

Constructors

DataTable

Methods

DataTable.Column

Parameters

DataTable.Row

Row(IComponent[])

Parameters

Row(string, IComponent[])

Parameters

DataTable.Clear

DataTable.Compact

DataTable.Render

See also