Format tables to HTML

[Joevdwalt]

Hi all,

First time posting here, so apologies if I am breaking rules. Really enjoying what you guys have built here already.

One of the things that I use a cli tool for the most is formatting data into some kind of report. I see the table already supports markdown, but was wondering if it would be feasible to do one for html?

I try to do a pull request for this? Not sure if this has been requested before or if someone is already working on something like this?

[patriksvensson]

@Joevdwalt Welcome! Not breaking any rules. 😄

The current markdown renderer for tables is just changing how borders appear and wouldn't be very suitable to generate HTML. You would want to write something that converts a table to HTML.

Here is a basic extension method you can use to convert a Table into (pretty crude) HTML.

public static string ToHtml(this Table table)
{
    var builder = new StringBuilder();
    var ctx = new RenderContext(AnsiConsole.Profile.Capabilities);

    builder.Append("<table style=\"border: 1px solid black;\">");
    {
        builder.Append("<tr>");
        foreach (var column in table.Columns)
        {
            builder.Append("<th style=\"border: 1px solid black;\">");
            AppendRenderable(builder, ctx, column.Header);
            builder.Append("</th>");
        }
        builder.Append("</tr>");
    }

    foreach(var row in table.Rows)
    {
        builder.Append("<tr>");
        foreach(var item in row)
        {
            builder.Append("<td style=\"border: 1px solid black;\">");
            AppendRenderable(builder, ctx, item);
            builder.Append("</td>");
        }
        builder.Append("</tr>");
    }

    builder.Append("</table>");

    return builder.ToString();
}

private static void AppendRenderable(StringBuilder builder, RenderContext ctx, IRenderable renderable)
{
    if (renderable is Table columnTable)
    {
        builder.Append(ToHtml(columnTable));
    }
    else
    {
        builder.Append("<pre>");
        foreach (var foo in renderable.Render(ctx, 120))
        {
            if (foo.IsLineBreak)
            {
                builder.Append("<br />");
            }
            else
            {
                builder.Append(foo.Text);
            }
        }
        builder.Append("</pre>");
    }
}

[Joevdwalt]

I did a rudimentary implementation of this as an HTML border. But I think you are right, doesn't seem like a good place to put something like this.

Also gave me a chance to just look at how to do a pull request. Thanks for the reply.

Reference

using System;

namespace Spectre.Console.Rendering
{
    /// <summary>
    /// Represents an html based border.
    /// </summary>
    public sealed class HtmlTableBorder : TableBorder
    {
        /// <inheritdoc/>
        public override TableBorder? SafeBorder => TableBorder.Square;

        /// <inheritdoc/>
        public override string GetPart(TableBorderPart part)
        {
            return part switch
            {
                TableBorderPart.HeaderTopLeft => "<table>",
                TableBorderPart.HeaderTop => string.Empty,
                TableBorderPart.HeaderTopSeparator => string.Empty,
                TableBorderPart.HeaderTopRight => string.Empty,
                TableBorderPart.HeaderLeft => "<tr><thead>",
                TableBorderPart.HeaderSeparator => "</thead><thead>",
                TableBorderPart.HeaderRight => "</thead></tr>",
                TableBorderPart.HeaderBottomLeft => "<tbody>",
                TableBorderPart.HeaderBottom => string.Empty,
                TableBorderPart.HeaderBottomSeparator => string.Empty,
                TableBorderPart.HeaderBottomRight => string.Empty,
                TableBorderPart.CellLeft => "<tr><td>",
                TableBorderPart.CellSeparator => "</td><td>",
                TableBorderPart.CellRight => "</td></tr>",
                TableBorderPart.FooterTopLeft => "</tbody>",
                TableBorderPart.FooterTop => string.Empty,
                TableBorderPart.FooterTopSeparator => string.Empty,
                TableBorderPart.FooterTopRight => string.Empty,
                TableBorderPart.FooterBottomLeft => string.Empty,
                TableBorderPart.FooterBottom => string.Empty,
                TableBorderPart.FooterBottomSeparator => string.Empty,
                TableBorderPart.FooterBottomRight => "</table>",
                _ => throw new InvalidOperationException("Unknown border part."),
            };
        }
    }
}