Html Table Formatting

[hollywoof]

Linked to #401

I'm currently using some formatting like:

static Xamarin.Interactive.Representations.VerbatimHtml AsTable<T>(this IEnumerable<T> items, int maxColumns=10, int maxRows=10) {
   var type = typeof(T);
   var properties = type.GetProperties(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Instance);
   var mainProperties = properties.Take(maxColumns).ToList();
   var extraProperties = properties.Skip(maxColumns).ToList();
   var tableText = new System.Text.StringBuilder();
   tableText.Append(@"<style>  
   .ourTable { border-collapse: collapse; } 
   .ourTable th { border: 1px solid #ddd; padding: 8px; text-align:left; } 
   .ourTable td { border: 1px solid #ddd; padding: 8px; text-align:left; } 
   </style>");
   tableText.Append("<table class='ourTable'>");
   tableText.Append("<thead><tr>");
   tableText.Append($"<th>#</th>");
   foreach (var p in mainProperties) {
       tableText.Append($"<th>{p.Name}</th>");
   }
   tableText.Append("</tr></thead>");
   tableText.Append("<tbody>");
   var rowCount = 0;
   foreach (var i in items.Take(maxRows)) {
        tableText.Append("<tr>");
        tableText.Append($"<td>{rowCount}</td>");
        foreach (var p in mainProperties) {
            // need more here... need to pass in formatters...
            var t = p.GetValue(i)?.ToString();
            tableText.Append($"<td>{t}</td>");
        }
        tableText.Append("</tr>");
        rowCount++;
   }
   var overflow = items.Skip(maxRows).Count();
   if (overflow > 0) {
        tableText.Append("<tr>");
        tableText.Append($"<td></td>");
        tableText.Append($"<td colspan='{mainProperties.Count()}'>{overflow} more ...</td>");
        tableText.Append("</tr>");
   }
   tableText.Append("</tbody>");
   tableText.Append("</table>");
   if (extraProperties.Any()) {
       tableText.Append("<div>Other properties: ");
       tableText.Append(string.Join(", ", extraProperties.Select(p => p.Name)));
       tableText.Append("</div>");
   }
   return tableText.ToString().AsHtml();
}

You can see this in action at https://gist.github.com/hollywoof/1fe8c4726a244720942139f1a2b5ca5a

I'm building this out for my own use - including a few more options for formatting.

Are you interested in this as a PR?
If so what additional support would you need?
Would you rather have it as distributed via my own nuget package?

[sandyarmstrong]

This is rad!

We'll have to get back to you on it; currently out-of-town. Looks really promising, though!

[slodge]

Thanks @sandyarmstrong - sorry I also used my "other" github profile yesterday rather than the one Xamarin might know me better on :) I promise I can write slightly better code than in that gist, honest ;) Good luck with your trip!

[slodge]

I've made some "proper code" and pushed a temporary package to nuget - details on https://github.com/slodge/XamarinWorkbooksExtensions

The code supports both IEnumerable<T> and DataTable - the latter is useful for those of us who have to deal with SQL databases a lot at the moment (it pays the bills!)

It's all MIT licensed, and I really don't want to maintain this package - so happy to find a way to get comparable functionality into the main Xamarin workbooks codebase instead 👍

IEnumerable:

DataTable:

[slodge]

I've got Xam workbooks 1.5 partly building now :) (https://medium.com/@lodge.stuart/a-few-hours-building-xamarin-workbooks-48bacdf8c8a)

So I think I can contribute something into https://github.com/slodge/workbooks/tree/build-experiments/Agents/Xamarin.Interactive if you want it... but suspect you'll want to specify what exactly you want...

No hurry from me on this - it can definitely wait until you are back in town :)

[slodge]

Have updated my repo to include Dictionary<K,V> support https://github.com/slodge/XamarinWorkbooksExtensions

or

Still thinking about how best to get this into the main repo (if it's wanted) - I suspect it would be best to facilitate nested tables... still getting the hang of the source code right now...

I've also had requests from some users about getting RStudio like functionality - where a View(myData) call opens a new full window Grid - including simple filtering, sorting and searching - see https://support.rstudio.com/hc/en-us/articles/205175388-Using-the-Data-Viewer ... am thinking about if/how to support this...

Note: I appreciate this is very different to what Xam Workbooks was originally built for - so please do feel free to reject some or all of these suggestions 👍