CanopyX.Html 0.3.4

CanopyX

Interactive views of your own records, written in C#: tree grids, data grids, pivots, boards, calendars, plans, status matrices, change reviews and guided flows. Save a report that opens from disk, serve the view from your app, or render it as a script-free table for email and print.

Live demos · Documentation · Getting started · GitHub

Pick a view

<br>Tree grid<br>CanopyTreeView	<br>Data grid<br>CanopyDataGridView	<br>Pivot<br>CanopyGridPivot
<br>Board<br>CanopyBoard	<br>Calendar<br>CanopyCalendar	<br>Plan<br>CanopyPlan
<br>Resource timeline<br>CanopyCalendarResources	<br>Status matrix<br>CanopyMatrix	<br>Change review<br>CanopyChangeList, CanopyTextDiff
<br>Dataset compare<br>CanopyDatasetComparer	<br>Time slider<br>CanopyTimeSlider	<br>Guided flow<br>CanopyFlow
<br>Approval path<br>CanopyPath	<br>Layer stack<br>CanopyStack	<br>Script-free table<br>CanopyStaticHtml

Get started

dotnet add package CanopyX.Html

CanopyX.Html brings in CanopyX and the browser assets. Install CanopyX alone when you only need the model, the bundle writer or the script-free renderer.

A report that opens from disk

using CanopyX;
using CanopyX.Html;

var inventory = new CanopyDataGridView("inventory", "Inventory");
inventory.Columns.Add(new CanopyColumn("name", "Name") { Sortable = true });
inventory.Columns.Add(new CanopyColumn("size", "Size") { Kind = CanopyColumnKind.Number, Sortable = true });

foreach (var (name, bytes) in new[] { ("Archive", 2048L), ("Documents", 512L) })
{
    var row = new CanopyGridRow(name);
    row.Cells["name"] = name;
    row.Cells["size"] = new CanopyCell(bytes) { Text = $"{bytes:N0} bytes" };
    inventory.Rows.Add(row);
}

inventory.SaveHtmlPage("inventory.html");

Open inventory.html in any browser. It carries its own runtime and data, so you can attach it to a ticket or put it on a file share. Numeric values drive sorting; Text is what the reader sees.

A file explorer

var files = new CanopyTreeView("files", "Project files") { Search = new CanopySearchOptions() };
files.Columns.Add(new CanopyColumn("name", "Name") { Sortable = true });
files.Columns.Add(new CanopyColumn("size", "Size") { Kind = CanopyColumnKind.Number, Sortable = true });

var projects = new CanopyNode("projects", "Projects");
var report = new CanopyNode("quarterly-report", "Quarterly report.pdf");
report.Cells["size"] = new CanopyCell(2048L) { Text = "2 KiB" };
projects.Children.Add(report);
files.Roots.Add(projects);

files.SaveHtmlPage("files.html");     // one file
files.SaveHtmlBundle("file-report");  // or a folder that loads branches on demand

A table for email and print

using CanopyX.Rendering;

string table = CanopyStaticHtml.RenderGrid(inventory);

The result is an HTML table with inline styles and no scripts, ready for a mail body, a print layout or Word.

Choose a delivery

Guides

• Getting started: a file explorer and an inventory table, step by step.
• Reporting grids: grouping, filters, aggregates, presenters and export.
• Email and print and delivery modes.
• Server-side data for .NET: CanopyX.Data and CanopyX.AspNetCore.
• Calendar, board, plan, matrix, change views and guided flows.
• Editing, conditional formatting, label packs and security.

Requirements

The packages add no third-party runtime dependencies, and generating a report needs no Node.js, npm or build step.

Community and license

CanopyX is an Evotec project, licensed under MIT. Questions and feedback are welcome in the Evotec community on Discord. More Evotec projects are at evotec.xyz.