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.
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);| Name | Size | Modified | Owner | State |
|---|---|---|---|---|
| \\files\share-a3 changed (+54) | 1.7 GB | |||
| Finance | 383.2 MB | |||
| Budget (+16) | 150.9 MB | |||
| Roadmap (+17) | 114.2 MB | |||
| Contracts (+9) | 118.0 MB | |||
| Engineering1 changed | 403.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 | ||||
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.
using CanopyX.Rendering;
var options = new CanopyStaticHtmlOptions {
MaxRows = 8,
MaxDepth = 2,
Theme = CanopyStaticTheme.Dark()
};
string html = CanopyStaticHtml.Render(shares, options);| Name | Size | Modified | Owner | State |
|---|---|---|---|---|
| \\files\share-a3 changed | 1.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. | ||||
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.
using CanopyX.Rendering;
var options = new CanopyStaticHtmlOptions { MaxRows = 6, UseThemeVariables = true };
string html = CanopyStaticHtml.RenderGrid(devices, options: options);| Device | Site | Patch level | Encrypted |
|---|---|---|---|
| WS-WAW-0001 | Warsaw | 96% | ✓ |
| WS-WAW-0002 | Warsaw | 71% | ✓ |
| SRV-WAW-0003 | Warsaw | 58% | — |
| WS-WAW-0004 | Warsaw | 88% | ✓ |
| WS-LON-0005 | London | 100% | ✓ |
| WS-LON-0006 | London | 64% | ✓ |
| Showing 6 of 12 rows. | |||
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.