Skip to content
CanopyX

Render tables for email and print

Turn tree and grid views into script-free HTML tables with row limits, a link to the full report, a dark palette or colours that follow the host page.

CanopyStaticHtml renders a view as a plain HTML table with inline styles and no script. It survives mail clients, print and Word, and it is also the fallback a page can show before its runtime loads. Render takes a tree view and RenderGrid a data grid.

Cut an outline to fit a message

A message has room for the top of a tree. MaxRows and MaxDepth cut the outline, every cut branch shows how many rows it hides, and the overflow note links to the interactive report. shares below is the file shares view the demos use.

Mail.csC#
using CanopyX.Rendering;

var options = new CanopyStaticHtmlOptions {
    MaxRows = 12,
    MaxDepth = 3,
    FullReportUrl = "https://canopyx.dev/live/files/index.html"
};
string html = CanopyStaticHtml.Render(shares, options);
OutputhtmlScript-free HTML, 9.1 KB
File shares
NameSizeModifiedOwnerState
\\files\share-a3 changed (+54)1.7 GB
Finance383.2 MB
Budget (+16)150.9 MB
Roadmap (+17)114.2 MB
Contracts (+9)118.0 MB
Engineering1 changed403.8 MB
Roadmap (+16)114.7 MB
Contracts (+10)73.6 MB
Campaign1 changed (+15)215.5 MB
Legal1 changed (+18)498.4 MB
Contracts1 changed (+13)199.7 MB
Campaign (+16)156.1 MB
Showing 12 of 540 rows. Open the full report
The returned HTML on white, as a mail client shows it. The note under the table counts the rows left out and links to the full report.

OnlyExpanded shows only the branches marked Expanded, so the outline matches the tree's first state. Counts in the note and the row markers use Culture, and OverflowNote or the view's Labels translate the note.

Use the dark palette

CanopyStaticTheme.Dark() writes dark literals for a document with a dark background. You can also set the colours your own design tokens resolve to on a CanopyStaticTheme.

Mail.csC#
using CanopyX.Rendering;

var options = new CanopyStaticHtmlOptions {
    MaxRows = 8,
    MaxDepth = 2,
    Theme = CanopyStaticTheme.Dark()
};
string html = CanopyStaticHtml.Render(shares, options);
OutputhtmlDark literals, 7.0 KB
File shares
NameSizeModifiedOwnerState
\\files\share-a3 changed1.7 GB
Finance (+45)383.2 MB
Engineering1 changed (+44)403.8 MB
Legal1 changed (+49)498.4 MB
Marketing1 changed (+53)477.5 MB
\\files\share-b4 changed (+83)1.7 GB
Finance (+53)446.2 MB
Engineering1 changed (+37)387.6 MB
Showing 8 of 540 rows.
The same outline with the dark palette written as literal colours.

Follow the page theme

UseThemeVariables writes every colour twice: the literal, then the --cx-* custom property the browser runtime uses. On a page that defines those properties the table follows its theme without script; in email and Word the literals apply.

Page.csC#
using CanopyX.Rendering;

var options = new CanopyStaticHtmlOptions { MaxRows = 6, UseThemeVariables = true };
string html = CanopyStaticHtml.RenderGrid(devices, options: options);
OutputhtmlFollows this page's theme
Devices
DeviceSitePatch levelEncrypted
WS-WAW-0001Warsaw96%✓
WS-WAW-0002Warsaw71%✓
SRV-WAW-0003Warsaw58%—
WS-WAW-0004Warsaw88%✓
WS-LON-0005London100%✓
WS-LON-0006London64%✓
Showing 6 of 12 rows.
The device grid from Reporting grids, following this site's theme. Switch the theme in the header to see it change.

Presenters become text in static output: a boolean becomes a check mark, a status strip a count of each state, and a sparkline its values. RenderGridWithResult also returns the rendered rows and the total, for a print or export pipeline that needs them.