Skip to content
CanopyX
Get started

Script-free table

Script-free tables from the same view definition, with inline styles that survive mail clients, print and Word.

CanopyStaticHtmlScript-free HTML for mail, print and WordDocumentation for the script-free table

8 demos

Weekly changes Open this demo full screen

Script-free tables from the same view definition, with inline styles that survive mail clients, print and Word.

Build one like it

The smallest complete version, in each language CanopyX supports for this view. The demo above is the same API with more data.

using CanopyX;
using CanopyX.Rendering;

var shares = new CanopyTreeView("shares", "File shares over quota");
shares.Columns.Add(new CanopyColumn("name", "Share"));
shares.Columns.Add(new CanopyColumn("used", "Used") {
    Kind = CanopyColumnKind.Number
});
shares.Columns.Add(new CanopyColumn("owner", "Owner"));
foreach (var (server, items) in new[] {
    ("fs01", new[] {
        ("finance", 412, "anna.kowalska"),
        ("people", 388, "dana.levi")
    }),
    ("fs02", new[] {
        ("projects", 951, "ben.okafor"),
        ("archive", 1_204, "chen.wei")
    })
}) {
    var node = new CanopyNode(server, @"\\" + server) { Expanded = true };
    foreach (var (name, gb, owner) in items) {
        var share = new CanopyNode(server + "-" + name, name);
        share.Cells["used"] = new CanopyCell(gb) {
            Text = $"{gb} GB",
            Tone = gb > 1_000 ? CanopyTone.Danger : CanopyTone.Warning
        };
        share.Cells["owner"] = owner;
        node.Children.Add(share);
    }
    shares.Roots.Add(node);
}

string html = CanopyStaticHtml.Render(shares, new CanopyStaticHtmlOptions {
    MaxRows = 20,
    FullReportUrl = "https://canopyx.dev/live/files/index.html"
});

Run this snippet (script-free table, C#)Its output, generated with the site.

Try this in the demo

  1. No script

    Switch the site theme in the header.

    The outline follows it through the page's --cx-* properties. In a mail client its literal colours apply.

  2. Row limits

    Look for the counts after a cut branch.

    MaxRows and MaxDepth cut the outline, and each cut branch shows how many rows it hides.

  3. Print

    Print this page or save it as PDF.

    The table is plain HTML with inline styles, so it prints and pastes into Word as it looks here.